前端开发经验总结

• 合理命名

  dom元素的id命名可用下划线表现出继承关系，如：`index_header_nav_a1`可表示主页面的页头的导航栏部分的第一个超链接。函数的命名可用下划线表现出函数的作用主体与主体的行为，如: `funcation box_change()`可表示控制元素box变化的函数

• 松散耦合

1.把js与html完全分离开 
2.把js与css完全分离开 
3.把事件处理与应用逻辑分离开： 应该是事件处理程序先处理事件，然后把处理转交给应用逻辑。
-每个页面可以写三个js文件base.js work.js event.js，第一个用于控制页面样式和提供组件接口使用；第二个用于处理逻辑，实际的工作层；第三个处理事件把接收的信息传给逻辑层。

• 优化dom交互

1.最小化现场更新：例如：要给页面添加十个节点
    第一种方法：把十个节点一个一个依次添加到dom树中。每一次添加节点都会进行一次现场更新，一共进行十次现场更新。
    第二种方法：创建一个父节点，把要添加的十个节点全放在父节点中，最后把父节点添加到dom树中。只有最后一个操作进行了现场更新，一共只进行了一次现场更新。

2.使用innerHTML要比传统插入节点方法效率高 
3.使用事件委托：如果事件处理程序过多考虑使用这种方式。

多人合作避免js冲突的解决方法

• 把每个开发模块都分别封装在一个自动运行的匿名函数中，保证各模块之间变量名没有任何冲突。
• 在全局作用域中定义一个对象，这个对象在每个模块都可访问，如果模块A中有一个变量x要在其他模块中使用，直接在全局对象当前命名空间赋值 ，每个模块都有一个命名空间，保证每个模块在全局对象中定义的属性不会冲突。

var global = {};//定义全局对象

//模块A
(function(){
  global.A = {};//定义命名空间
  var a = 123;
  global.A.a=a; //把a值赋到全局对象的当前命名空间，以便其他模块调用
})();

//模块B
(function(){
  global.B = {}; 
  var a = 456;
  global.B.a=str; //把a赋到全局对象的当前命名空间，并且不会与A模块在全局对象中的a冲突，因为命名空间不一样。
})();

//模块C
(function(){
  global.C = {};
  var a = function(){
       // .......
        };
  global.C.a=a; //模块c一个公用函数
})();