您的位置：首页 > Web前端 > JavaScript

javascript 编程规范

2011-10-09 19:43 183 查看
 

javascript 编程规范

为公司起草的javascript编程规范，参考了网上的许多资料，尤其是google的规范。现在放出来，希望能抛砖引玉，大家多提宝贵意见。

本规范是针对javascript函数式编程风格与公司严重依赖于jQuery进行编码的现实制定出来。

禁止使用eval，with与caller(ecma262 v5 的use strict要求)。eval只允许在加密时机器生成。

声明变量必须加上 var 关键字，除了在for(;;)循环等语句中，原则上不允许使用连续声明。因为连续声明的效率不如分开声明高，而且很容易手误致其暴露到全局作用域下。

常量，全部大写。

变量名，不能使用拼音，英文单词以驼峰风格组织起来。

分号，能加的地方都加(基本上除了for, function, if, switch, try, while外)，防止因为这个问题导致压缩失败。

自定义类，只能用于UI库的构建，业务代码不准私自定义类。

原则上不允许使用伪对象（String, Number，Boolean），直接用其字面量。

原则上不允许使用Array与Object，直接用其字面量[]， {}。

谨慎处理this，防止绑定失效，指向window，建议使用that引用它。

若想调用函数自身，禁止使用命名函数表达式，在目标函数的第一行编写以下代码实现,详解请google 《命名函数表达式揭秘》：

var
self = arguments.callee;
禁止扩展原生对象的原型，特别是Object.prototype。

禁止在页面上对某个元素绑定事件，即下面的代码风格

<a href=
"aaaa"
jump=
"bbb"
onclick=
"goto(this.jump)"
>跳转到某页面</a>
禁止使用IE的条件注释，一压缩就没有了。

var f = function () {
/*@cc_on if (@_jscript) { return 2* @*/ 3; /*@ }@*/
};
禁止块内函数声明，详解请google《命名函数表达式揭秘》。

if
 
(x) {
//ng
function
foo() {}
}
if
 
(x) {
var
foo =
function
() {}
}
for-in 循环只能用于object。

禁止使用多行字符串，因为在编译时, 不能忽略行起始位置的空白字符; "\" 后的空白字符会产生奇 怪的错误; 虽然大多数脚本引擎支持这种写法, 但它不是 ECMAScript 的标准规范。

var
 
myString = 'A rather long string of English text, an error message \
actually that just keeps going and going -- an error \
message to make the Energizer bunny blush (right through \
those Schwarzenegger shades)! Where was I? Oh yes, \
you\'ve got an error and all the extraneous whitespace is \
just gravy. Have a nice day.';
原则上不允许字符串拼接HTML代码，请使用前台模板或后台模板。

字符串字面量，使用 ' 优于 "。

注释，使用JSDoc。

每一行不宜过长，写完一段代码后请用IDE把它格式化一下。

为元素添加自定义变量，统一使用"data-"前缀，放便与HTML5的"data-*"机制相衔接。

禁止jQuery使用一行以上的链式操作，非常难读。

元素的选择，多使用ID选择器，类选择器，标签选择器，慎用子元素结构伪类与位置伪类(nth- child,:first,:eq,:gt)

在已有jQuery对象搜找附近的元素节点，不建议用使用多级的find寻找，而使用相关的遍历函数

JavaScript程序应尽量放到外部的JS文件中，以便压缩与缓存。

标准特性优于非标准特性（如果类库有提供，优先使用类库中的函数）。

$(
"XXXX"
).find(
"YYYY"
).find(
"ZZZZ"
);
//ng
$(
"XXXX"
).next()
//或者nextUntil, nextAll, prev, prevAll, prevUntl, children, closest,
.siblings
为元素添加事件时，考虑的顺序是delegate > live > bind。

jQuery在以下事件中存在问题 change resize mouseenter mouseleave mousewheel，大体上用不了事件代理，像mousewheel事件只能借助于插件。

不在JS文件中留下未来确定不再使用的代码片段

凡是被jQuery引用到的ID或类名都应该用js_作为前缀，警示其他人在调整样式时把它误删了。

JS代码必须置于$$命名空间对象之内，所有函数的执行从main函数开始。

;;;$(
function
(){
//...其他用到的变量
var
$$ = window.$$ = {
//本页面私有的辅助函数1
_assist1:
function
(){
},

//本页面私有的辅助函数2
_assist2:
function
(){
},

//本页面私有的辅助函数3
_assist3:
function
(){
},

//本页面私有的辅助函数4
_assist4:
function
(){
},

//本页面私有的辅助函数5
_assist5:
function
(){
},

//....更多的私有函数
//功能1
feature1:
function
(){
},

//功能2
feature2:
function
(){
},

//功能3
feature3:
function
(){
},

//功能4
feature4:
function
(){
},

//功能5
feature5:
function
(){
},

//从后台获取的JSON数据统一放到这个对象中，以便其他函数调用
jsons:{},
//....更多需求，一个需求对应一个函数
main:
function
(){
$$.feature1();
$$.feature2();
$$.feature3();
$$.feature4();
//....在main主函数中调用它们。
}

}

$$.main();
});
从后台获取JSON数据的格式统一为

$.getJSON(url,params,
function
(json){
if
(json && json.status ===
"1"
){
$.flash(json.msg);
$$.jsons[
"xxxx"
] = json;
//将JSON保存起来
}
else
{
$.flash(json.msg,
"error"
)
}

});
$.post(url,params,
function
(json){
if
(json && json.status ===
"1"
){
$.flash(json.msg);
$$.jsons[
"xxxx"
] = json;
}
else
{
$.flash(json.msg,
"error"
)
}

},
"json"
);
为了实现请求与执行回调相分离，我们使用dependBy函数，这样就有效避免多层嵌套的回调，让代码的易懂性大大提高。

$.dependBy([
"list_configs"
],$$.jsons,
function
(){
var
json = $$.jsons.ist_configs;
//......其他代码
});
暂时想到这么多，如果你有什么好建议，不吝赐教。本文转自 http://www.cnblogs.com/rubylouvre/archive/2011/04/02/2003151.html 
 
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                javascript
                                                function
                                                json
                                                jquery
                                                whitespace
                                                google
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航