一只很酷的蘑菇

JavaScript实践

阅读量:

命名

代码是给人(别人或者1个星期后的 自己)阅读和修改的

給变量和函数一个简单易懂的名字

可维护性++

以功能命名,而不是表现 isOverSeven() × VS isLegalAge() √

// 不好的命名
aaaa  
x1  
f  
hengxian  
createNewUserIfTheInputIsValida
te

避免全局变量

我们无法拥有代码的控制权

  • 不易维护
  • 牵一发而动全身
  • 易被覆盖,修改,而你还不知道
 // Bad
var currentColor;
var colorMap = {
    red: '红色',
    green: '绿色',
    yellow: '黄色'
};

function init() {
    currentColor = 'red';
}


// Common
(function () {
    var currentColor;

    var colorMap = {
        red: '红色',
        green: '绿色',
        yellow: '黄色'
    };

    function init () {
        currentColor = 'red';
    }
})();

// Good
var colorManager = function () {  
var currentColor;  
var colorMap  =  {           
    red: '红色',           
    green: '绿色',           
    yellow: '黄色' 
};  

    return  { 
        init: function () {                   
            currentColor  =  'red'          
        } 
    } 
}();

正确的注释

注释也是代码的一部分

错误的注释,相比没有注释,更可怕

介绍背景、介绍使用方式、介绍注意事项,不要重复代码的意思

//  已登陆的用户,有  name  和  age  两个属性  
var loginedUser = {           
    name:  '',           
    age:  10  
};
/*  
    *  统一登录方法  
    *  在需要登录的地方调用       
    *  如果已经登陆,会立即执行回调       
    *  否则,会显示登录窗口,登录完成后执行回 调  
    *  todo:登录窗口的  UI  优化  
*/  
function login(cb) {  
}

简短标记

简短标记让代码更简单易读

// Bad
var user = new Object;
user.name = 'bajiefe';
user.age = 20;

// Good
var user = {
    name: 'bajiefe',
    age: 20
};

// Bad
var userList = new Array;
userList[0] = 'bajiefe';
userList[1] = 'bajierd';

// Good
var userList = ['bajiefe', 'bajierd'];


// Bad
var age;
if(val) {
    age = val;
} else {
    age = 10;
}

// Good
var age = val || 10;


// Bad
var direction;

if(val) {
    direction = 1;
} else {
    direction = -1;
}

// Good
var direction = val ? 1 : -1;

减少DOM 操作

通过 className 来控制 DOM 样式

// Bad
userInput.style.cssText = 'color: red; border: 1px  solid  red;'  

// Good
userInput.className  =  ‘error;’

dom 节点修改好后再插入 dom tree

// Bad
function addAnchor(parentElement, anchorText, anchorClass) {
    var element = document.createElement('a');
    parentElement.appendChild(element);
    element.innerHTML = anchorText;
    element.className = anchorClass;
}

// Good
var element = document.createElement('a');
element.innerHTML = anchorText;
element.className = anchorClass;
parentElement.appendChild(element);

通过文档片段创建 DOM

document.createDocumentFragment();

function addAnchors(element) {
    var anchor;
    var fragment = document.createDocumentFragment();

    for(var i = 0; i < 10; i++) {
        anchor = document.createElement('a');
        anchor.innerHTML = 'test';
        fragment.appendChild(anchor);
    }

    element.appendChild(fragment);
}

通过事件代理绑定事件


自动分号插入

当不清楚写不写分号时,写上

var tester = function() {

}

(function() {
    console.log(tester);
})()

var a = 123

Debug

Google 开发者工具

陈柯伊

梦想一克拉 热血一卡车 眼泪一酒瓶 熬夜一光年

评论

文章目录