良好的编码习惯

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

    • 解决方案
    1. 把变量和方法封装在一个变量对象上 - 使用起来比较复杂
        var myContent = {
        length: 1,
        action: function(){}
    }
    1. 全局变量包含在一个局部作用域中- 匿名立即执行函数
    (function(){
    var length = 0;
    function action(){}
})

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

    var myCurrentAction = (function(){
    var length = 0;
    function init(){};
    funtion action(){}
    return {
        init: int
    }
})()
    1. 命名变量必须使用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);
    1. 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