做网站学,网站的根目录下是哪个文件夹,百度收录最新方法,网站空间速度快前言#xff1a;不规范的开发不仅使日后代码维护变的困难#xff0c;同时也不利于团队的合作。下面列出了前端开发规范通用规范#xff1a;1、前端工具统一sublime text#xff0c;配置信息统一#xff0c;如下#xff1a;{caret_style: phase,不规范的开发不仅使日后代码维护变的困难同时也不利于团队的合作。下面列出了前端开发规范通用规范1、前端工具统一sublime text配置信息统一如下{caret_style: phase,color_scheme: Packages/User/SublimeLinter/Monokai (SL).tmTheme,default_line_ending: unix,ensure_newline_at_eof_on_save: true,findreplace_small: true,font_size: 12,ignored_packages:[Vintage],line_padding_bottom: 4,line_padding_top: 4,show_panel_on_build: false,tab_size: 4,tabs_medium: true,trim_trailing_white_space_on_save: false}2、空格还是Tab我们强制使用4个占位符的Tab缩进如果遇到不是tab缩进的可以借助sublime text来转换成tab缩进步骤如下ctrlshiftp 输入convert to Tabs敲回车就可以3、统一采用UTF8编码4、项目发布必须压缩、图片优化提高页面访问速度5、文件命名统一使用小写字母js文件多个字母用-连接页面多个字母用_连接6、js、css能够通用化、组件化es51、一行代码长度尽量保持80列左右2、变量声明变量必须加上var关键字推荐一个var同时声明多个变量或者一组有逻辑关系的变量避免一个变量一个 var声明Array和Object使用[]和{}声明变量时将其初始化,更易读且性能更好。变量不要使用关键字对象key也不要使用关键字在ie8下会报错// badvar obj {default: 1};3、命名函数和变量命名使用驼峰式命名尽量语义化// badvar e ,l 0;// goodvar element ,length 0;4、单例模式、模块化开发5、命名空间每个应该有自己的命名空间并不会影响到其他模块6、单双引号强制使用单引号性能好7、语句结尾一定要加;8、JSON对象的最后一个字段、数组最后一个元素后面都不能加,在IE8下会报错9、尽量不要使用with/eval10、对象延迟声明对于页面初始化不需要的变量延迟声明11、所有语句都在声明变量之后12、提前返回值提升代码的性能// badfunction fun(arg) {var test;if (arg) {test arg;} else {test another}return test;}// goodfunction fun(arg) {if (arg) {return arg;} else {returnanother}}13、使用argvar obj {};Object.keys({}).forEach(function(key) {console.log(this); //obj}, obj);可以使用arg的Array.prototype.every、 Array.prototype.forEach、 Array.prototype.some、 Array.prototype.map、 Array.prototype.filter14、this15、条件优化// badif(a ! ) {}// goodif(!a) {}16、规范定义JSON对象补全双引号// badvar json {a: 1};// goodvar json {a:1};17、函数返回值应尽量明确// badfunction fun() {return ;}// goodfunction fun() {return false;}18、减少js对dom操作次数19、对于if/else等后面的语句即使只有一行代码也要在该行代码的首尾加上{}。对于switch语句要给出default:情况的处理逻辑20、字符串拼接在少量(次数为个位数)的情况下可以使用, 大量的时候使用数组 join(), 或者尽可能采用模板引擎渲染21、for循环遍历提前计算数组长度22、变量类型转换字符转数字0 1*0 toString()数字转字符0 parseInt() parseFloat()数字取整Math.ceil() Math.floor() Math.round()字符转布尔!!023、变量比较使用除(null)之外24、私有属性、变量和方法名应该以下划线_开头25、异常处理try{} catch(e){}26、false, 0, null, undefined, NaN, void 027、true, , 0, null, undefined, {}, []28、跨行语句以操作符结尾var x a ?b :c;29、函数句柄命名是名词30、注释采用jsdoc方式注释函数注释用/**/函数内注释用//禁止使用行末注释css1、命名空间wei- 组件的命名空间(取weiUI首)pg- 页面的命名空间(取page)2、class 命名遵循关注分离(不要考虑html结构比如子元素选择器)、松耦合的原则同时注重易于理解3、模块化编写语义化的模块名4、命名规则4.1、BEM命名法.a .a-b .a-b-c4.2、所有名称小写符合w3c规范4.3、类名和id多个变量之间用中划线分割{命名空间}-{模块名}-{状态描述}4.4、所有变量只能使用名词4.5、id、class命名语义化不要使用 red、left 等表象的词命名常见例子容器 wed-container列表 wed-list we-list-item内容 wed-content注意class用来定义样式如果javascript里用到放在最后顺序id用来写交互不需要特殊声明(J_ 废除)5、为了实现代码复用减少重复冗余难免要把代码拆分在不同的 class 下面。我们要寻找一个平衡点避免过细的拆分减少不必要的 class6、不建议过度嵌套选择符(semantic躺枪)选择符嵌套在必要的情况下一般不超过三层选择符叠加一般不多于两个7、css3不用加前缀统一用autoprefixer生成规则[ie 7,ie_mob 10,ff 30,chrome 34,safari 7,opera 23,ios 7,android 2.3,bb 10]8、色值全部使用6位数html1、语义化标签webapp尽量多使用html52、禁止使用非法标签属性3、后台交互data-api 接口data-url 跳转链接最多支持二级比如关注data-api-follow取消关注data-api-unfollow4、标签扁平化禁止不必要的嵌套5、标签属性属性值使用中划线或者驼峰式禁止使用下划线6、html嵌套规则6.1块级元素与块级元素平级、内嵌元素与内嵌元素平级6.2块元素可以包含内联元素或某些块元素但内联元素不能包含块元素它只能包含其它的内联元素6.3有几个特殊的块级元素只能包含内嵌元素不能再包含块级元素6.4块级元素不能放在标签p里面6.5li 标签可以包含 div 标签因为li 和 div 标签都是装载内容的容器
