JavaScript的团队编程规范

仅作参考
服务器君一共花费了222.426 ms进行了5次数据库查询,努力地为您提供了这个页面。
试试阅读模式?希望听取您的建议

本规范是针对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="www.nowamagic.net" 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.nowamagic.net/librarys/veda/detail/1268,欢迎访问原出处。

不打个分吗?

转载随意,但请带上本文地址:

http://www.nowamagic.net/librarys/veda/detail/1268

如果你认为这篇文章值得更多人阅读,欢迎使用下面的分享功能。
小提示:您可以按快捷键 Ctrl + D,或点此 加入收藏

大家都在看

阅读一百本计算机著作吧,少年

很多人觉得自己技术进步很慢,学习效率低,我觉得一个重要原因是看的书少了。多少是多呢?起码得看3、4、5、6米吧。给个具体的数量,那就100本书吧。很多人知识结构不好而且不系统,因为在特定领域有一个足够量的知识量+足够良好的知识结构,系统化以后就足以应对大量未曾遇到过的问题。

奉劝自学者:构建特定领域的知识结构体系的路径中再也没有比学习该专业的专业课程更好的了。如果我的知识结构体系足以囊括面试官的大部分甚至吞并他的知识结构体系的话,读到他言语中的一个词我们就已经知道他要表达什么,我们可以让他坐“上位”毕竟他是面试官,但是在知识结构体系以及心理上我们就居高临下。

所以,阅读一百本计算机著作吧,少年!

《Head First设计模式(中文版)》 弗里曼 (作者), 等 (作者)

《Head First设计模式》(中文版)共有14章,每章都介绍了几个设计模式,完整地涵盖了四人组版本全部23个设计模式。前言先介绍这本书的用法;第1章到第11章陆续介绍的设计模式为Strategy、Observer、Decorator、Abstract Factory、Factory Method、Singleton,Command、Adapter、Facade、TemplateMethod、Iterator、Composite、State、Proxy。最后三章比较特别。第12章介绍如何将两个以上的设计模式结合起来成为新的设计模式(例如著名的MVC模式),作者称其为复合设计模式(这是作者自创的名称,并非四人组的标准名词)。

更多计算机宝库...