前端开发最佳实践-读书笔记

前端开发最佳实践-读书笔记

一，命名规范

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