前端开发最佳实践-读书笔记
一,命名规范
1.id/class 命名中全部使用小写 id用下划线_链接 class用中横线链接- 如果class名称仅仅作为js调用的钩子 可在名称中添加'js-'前缀,如:
<div id="js_reader_menu>
<div class='menu-top js-active'></div>
</div>
2.为避免class名称重复 可以父级class名作为前缀,如 .reader-content/.reader-content-body/header/footer
3.多个选择器有相同样式时,每个独占一行。
4.html/css中适量添加注释 注释代码和上面空一行。
5.推荐给jQuery类型变量添加$前缀予以区分。
6.定义字符串,外部用单引号包括‘’;参数合适部分加上空格( = ,参数,函数等),必要的逗号不可缺少
7.html头部还应包含
<meta name="keywords" content="html,web"> <meta name="description" content="一个展示html页面的例子">
8.clearfix 正确代码
.clearfix{ *zoom:1; } .clearfix:before, .clearfix:after{ display:table; content:'' ; } .clearfix:after{ clear:both; }
9.script defer 并行加载,延迟执行 async 异步加载和执行
10.提高js可维护性
1.避免全局变量或者函数(对象属性/匿名函数)
var currentAction = { length:0; init:function(){ } }
var curremtAction = (function(){ var legnth=0; function init(){ } function test(){ } return {init:init} })() currentAction.init()
2.简写方法如对象、数组定义 使用=== !== 不用with、eval
3.事件处理和业务逻辑分离 配置数据和代码逻辑分离 分离css(使用class等)和html 使用模板
4.模块化开发
var curremtAction = (function(){ var legnth=0; function init(){ } function test(){ } return {init:init,test:test} })() currentAction.init()
更好的模块化开发是引用某些框架如webpack require.js