前端最佳实践笔记

良好的编码习惯

1. 避免定义全局变量或函数

   • 解决方案
   1. 把变量和方法封装在一个变量对象上 - 使用起来比较复杂

       var myContent = {
           length: 1,
           action: function(){}
       }
   

   2. 全局变量包含在一个局部作用域中- 匿名立即执行函数

   (function(){
       var length = 0;
       function action(){}
   })
   

   改进版本 - 模块化，避免变量污染，并且可以公开外部访问接口

   var myCurrentAction = (function(){
       var length = 0;
       function init(){};
       funtion action(){}
       return {
           init: int
       }
   })()
   

   3. 命名变量必须使用var - 严格模式可以检查。 如果不是使用var 变量会被认为是一个全局变量

2. 使用简化的编码方式 - 简洁易读，实践。。。

3. 使用严格相等 === 严格不等 !==

4. 避免使用with语句 - 笔者已经low到不知道有with的存在

5. 避免使用eval -eval可以把传入的字符串当代码执行

6. 避免写检测浏览器的代码

使用严格的编码模式

"use strict"

1. 不要在全局中启用严格模式 - 维护自己的模块就行 - 放在自己的模块下（匿名立即执行函数）
2. 在已有的代码中谨慎启用严格模式 - 流行的检查工具 JSLint JSHint

事件处理和业务逻辑分离

//处理逻辑
var setLightBoxPosition = function(top, left){
    var lb = document.getElemmentById('');
    lb.style.top = top + 'px';
    lb.style.left = left + 'px';
}
//处理事件
var clickEvent = function(e){
    setLightBoxPosition(e.clientY, e.clientX);
    e.preventStop();
}

配置数据和代码逻辑分离

1. 参考各个前端框架的做法， angular

逻辑与结构样式（css）分离

1. cong javascript代码逻辑中分离css样式 - 大量单独设置style 代码替换 控制 css 样式
2. 从JavaScript代码逻辑中分离HTML结构
   • 从服务器端动态获取html代码
   • 通过客户端动态生成页面结构 - 把模板html代码放到script标签里（浏览器不会解析script中的代码）

Javascript模板的使用 - 参考angular模板的设计

1. 尽量不要在末班中滥用逻辑块
2. 不要构建太复杂的模块
3. 使用预编译模板

使用MVC模式

JavaScript模块化开发

//模块具体实现 - 立即执行函数
var module1 = (function(){
    var length = 0;
    var init = function(){};
    var action = function(){};
    return {
        init: init,
        action: action
    };
})();
//模块的注入
var module2 = (function($, module1){
    //
})(jquery, module1);

• 模块的规范

  1. CommonJS - 同步方式加载模块（node.js 服务器环境）

  //同步加载
  var add = require('math').add;
  add(1, 2);
  

  2. AMD - 异步房市加载模块（浏览器环境， 用require()) - 可以使用requirejs库

  //异步 回调
  require('', function(math){
      math.add(1, 2);
  })
  

  合理使用AJAX

  1. 明确ajax技术使用场景
     • 前端按需获取后端数据更新界面 -不刷新界面
     • 进行动态用户验证
  2. 借助成熟的AJAX框架 - jquery， dojo， yui， extjs
  3. 使用JSON格式
  4. 弥补ajax缺陷
     • 浏览器不会记录ajax请求历史 - 无法返回ajax请求的状态 - 用jquery插件jquery-hashchange