没有合适的资源？快使用搜索试试~ 我知道了~

文库首页前端Javascript前端代码规范-js，html，vue，css，ts

前端代码规范-js，html，vue，css，ts

vue.js

代码规范

javascript

html

需积分: 1 0 下载量 54 浏览量 2024-02-21 13:56:21 上传评论收藏 501KB DOC 举报

温馨提示

试读

38页

前端代码规范-js，html，vue，css，ts

资源推荐

资源详情

资源评论

代码规范文档

背景

目前前端团队开发出现技术断层显现比较严重，由于不同开发人员承担不同

的产品线业务，加上长期没有进行技术评审和代码评审，导致开发人员的代码风

格差别很大，长期以往会出现代码可读性差的问题，这无疑会增加其他维护人员

的开发成本，导致整个团队开发低效；

再有如果长期封闭解决问题，好的经验得不到沉淀，一些问题也不能及时暴

露，对于个人的成长和团队发展也都是一种阻碍。

目的

1. 打造可扩展性高的团队项目

开发人员

2. 提升开发人员的规范意识和能力

规范化开发，也是以团队的力量更好的帮助开发人员更为高效，更为有质量

地进行开发

3. 提升前端的

基础代码规范

基础代码规范目前已经有很多成型的工具可以帮助开发人员在开发时培养

基本的规范习惯，针对目前的项目基本代码规范的实施分为两种方式

1. 利用规范工具

针对于新增的小型项目，目前构建工具中已经添加 eshint，针对新开发的项

目可以利用工具，在开发过程中随时进行代码检查；

2. 规范建议

已经存在的项目，例如 godman，如果利用工具检查代码规范之后修改工作

量会很大，针对这种情况，需要继续参与开发的同学通过参考基础代码规范建议

来进行开发；因为开发时间有限，建议部分可以理解为是工具检查中的子集，只

建议比较重要规范问题；

基础规范建议

基础规范包括 h5 规范，css 规范和 js 规范; js 规范中还包括了 es6 规范；

CSS 规范

1. 选择器

【必选】不要在文件中使用内联式引入样式，不管是定义在样式便签里还是

直接定义在元素上，这样会很难追踪样式规则；除非必须要用的场景，如进度条

进度控制；

示例：<p style=“color: red”>

解释：这样会很难追踪样式规则，样式很多的情况下，不方便统一管理

【建议】只出现一次的元素用 id，其他的用 class;

解释：使用 id 的选择器的性能是最高的，所以如果有单独的元素，尽量用

id；该建议主要使用与多页系统；

【建议】尽量指向明确，不要用标签选择器

示例： a { color : red }

解释：标签的选择效率非常地，建议指向明确的 id 或者 class 元素

2. 加载

【必选】杜绝使用 import 的方式加载 css

解释：import 是串行加载。用 link 代替

js 规范

1. 变量

【建议】声明包含元素的数组与对象，只有当内部元素的形式较为简单时，才允

许写在一行。元素复杂的情况，还是应该换行书写。

// good

var arr1 = [];

var arr2 = [1, 2, 3];

var obj1 = {};

var obj2 = {name: 'obj'};

var obj3 = {

name: 'obj',

age: 20,

sex: 1

};

// bad

var arr1 = [ ];

var arr2 = [ 1, 2, 3 ];

var obj1 = { };

var obj2 = { name: 'obj' };

var obj3 = {name: 'obj', age: 20, sex: 1};

【建议】一个 var 声明多个变量，容易导致较长的行长度，并且在修改时容易

造成逗号和分号的混淆。

// good

var hangModules = [];

var missModules = [];

var visited = {};

// bad

var hangModules = [],

missModules = [],

visited = {};

【建议】多行判断语句拆分写

if (user.isAuthenticated()

&& user.isInRole('admin')

&& user.hasAuthority('add-admin')

|| user.hasAuthority('delete-admin')

) {

// Code

}

2. 命名

剩余37页未读，继续阅读

评论收藏

内容反馈

资源评论

资源反馈

评论星级较低，若资源使用遇到问题可联系上传者，3个工作日内问题未解决可申请退款~

勾勾g

粉丝: 28
资源: 3

上传资源快速赚钱

我的内容管理展开

我的资源快来上传第一个资源

我的收益

登录查看自己的收益

我的积分登录查看自己的积分

我的C币登录后查看C币余额

我的收藏

我的下载

下载帮助

前往需求广场，查看用户热搜

前端代码规范-js，html，vue，css，ts

前端代码规范 - v1.0.docx

前端开源库-vue-image-compare

jessibuca-vue-ts-demo-3 ts语法实例

java小项目，一个仿飞机大战游戏.zip

前端开源库-qp-vue

Vue.js前端开发实战-源代码.zip

babel-plugin-vue-css-modules:babel-plugin-vue-css-modules

前端学习笔记-黑马程序员Vue

前端项目-survey-vue.zip

vue 弹窗，可拖动，可拖动改变大小，可重新定义样式！

big-screen-vue-master

Python在线考试系统前端-大学毕业设计-基于vue

laravel-mix-vue-css-modules:Laravel Mix Vue CSS模块

前端开源库-vue-append

office-ui-fabric-vue:Vue.js的Office UI Fabric实现

Vue前端开发规范.pdf

Vue前端编码规范.pdf

vue3.0 vue-quill-editor.rar

前端开源库-typed-css-modules-loader

echarts-gl.min.js

自主研发的软著申请代码文档整理输出工具

2023前端面试八股文.pdf

javascript网页设计期末作业 购物网站

javaWeb楠小弟自助图书系统项目，使用注解方式配合原生js、axios方式完成整个项目的开发，系统只适合在javaWeb阶段

基于JavaScript网红太空人表盘

小兔鲜项目源码（动态网页，包含首页、注册页、登录页、购物页）原生HTML、CSS、Javascript

jquery-3.7.0.min.js（jQuery下载）

chromedriver-122.0.6261.70-64

h5+JavaScript 烟花demo

最新资源

javascript网页设计期末作业购物网站