javascript 编程规范

标签: javascript 编程 规范 | 发表时间:2011-04-02 03:40 | 作者:司徒正美 红茶
出处:http://www.cnblogs.com/rubylouvre/

为公司起草的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;
       //......其他代码
  });  

暂时想到这么多,如果你有什么好建议,不吝赐教。

作者: 司徒正美 发表于 2011-04-02 11:40 原文链接

评论: 10 查看评论 发表评论


最新新闻:
· 最后的武士:诺基亚 E6(2011-04-19 08:08)
· 传Facebook虚拟币7月推出 比肩腾讯Q币(2011-04-19 08:07)
· Chrome 开始要求对 Java 和 QuickTime 的运行进行授权(2011-04-19 08:06)
· 人人网赴美IPO拟募5亿美元或创融资之最(2011-04-19 08:05)
· 为什么我的工资最低!(2011-04-19 07:32)

编辑推荐:上周热点回顾(4.11-4.17)

网站导航:博客园首页  我的园子  新闻  闪存  小组  博问  知识库

相关 [javascript 编程 规范] 推荐:

javascript 编程规范

- 红茶 - 博客园-Ruby&#39;s Louvre
为公司起草的javascript编程规范,参考了网上的许多资料,尤其是google的规范. 现在放出来,希望能抛砖引玉,大家多提宝贵意见. 本规范是针对javascript函数式编程风格与公司严重依赖于jQuery进行编码的现实制定出来. 禁止使用eval,with与caller(ecma262 v5 的use strict要求).

Javascript模块化编程(二):AMD规范

- - 阮一峰的网络日志
这个系列的 第一部分介绍了Javascript模块的基本写法,今天介绍如何规范地使用模块. 先想一想,为什么模块很重要. 因为有了模块,我们就可以更方便地使用别人的代码,想要什么功能,就加载什么模块. 但是,这样做有一个前提,那就是大家必须以同样的方式编写模块,否则你有你的写法,我有我的写法,岂不是乱了套.

浅谈JavaScript编程语言的编码规范

- 冷月 - 博客园新闻频道
  注:本文转载自 developerworks.   简介: JavaScript 编程语言作为最流行的客户端脚本语言,早已被众多 Web 开发人员所熟悉. 随着 Web2.0 时代的到来和 Ajax 技术的广泛应用,JavaScript 也逐渐吸引着更多的视线. 工作中要求越多的是对 JavaScript 语言的深入学习,灵活运用,和对编码质量的保证.

JavaScript之编码规范

- - CSDN博客推荐文章
   JavaScript是一种语法灵活,简单易懂的脚本语言. 正因为灵活,因此很多人在编写代码时,显得很随意,这就导致后期的修改、扩展和维护变得异常困难. 遵循统一的编码规范,不仅对C++和Java这种编译型语言很重要,对JavaScript脚本语言也同样如此.       1、应给变量和函数取一个含义确切的名称,不要随意命名.

JavaScript开发规范要求

- - 博客 - 伯乐在线
来源: webflash 的博客. 作为一名开发人员(WEB前端JavaScript开发),不规范的开发不仅使日后代码维护变的困难,同时也不利于团队的合作,通常还会带来代码安全以及执行效率上的问题. 本人在开发工作中就曾与不按规范来开发的同事合作过,与他合作就不能用“愉快”来形容了. 现在本人撰写此文的目的除了与大家分享一点点经验外,更多的是希望对未来的合作伙伴能够起到一定的借鉴作用.

Javascript编程风格

- - 阮一峰的网络日志
Douglas Crockford是Javascript权威, Json格式就是他的发明. 去年11月他有一个演讲( Youtube),谈到了好的Javascript编程风格是什么. 我非常推荐这个演讲,它不仅有助于学习Javascript,而且能让你心情舒畅,因为Crockford讲得很幽默,时不时让听众会心一笑.

python编程规范

- - 互联网 - ITeye博客
@FileName: @Author:xx@ic.net.cn @Create date: @description:用一行文字概述模块或脚本,用句号结尾. 不影响编码的效率,不与大众习惯冲突.. 使代码的逻辑更清晰,更易于理解..   *所有的 Python 脚本文件都应在文件头标上如下标识或其兼容格式的标识.

Java编程规范

- - Web前端 - ITeye博客
本文档的编写从简,绝大多数内容以条款或者表格形式列出,不做过多的补充说明,代码格式规范遵循eclipse的默认编码规范要求. •    简单,易执行. 1.    名字含义要明确,做到见名知义,如: User,Role, UserManager. 2.    尽量使用英文名字作为变量名,如果要使用中文,请写上备注.

网易邮箱前端Javascript编码规范:基础规范

- - 博客 - 伯乐在线
在多年开发邮箱webmail过程中,网易邮箱前端团队积累了不少心得体会,我们开发了很多基础js库,实现了大量前端效果组件,开发了成熟的opoa框架以及api组件,在此向大家做一些分享. 今天想先和大家聊聊javascript的编码规范. 总所周知,javascript是一种语法极其灵活的语言. javascript在设计之初就只是用来为HTML添加动态效果的.

android 编程代码规范

- - CSDN博客推荐文章
                学习android开发已经有很长时间了,但是有时代码却很少用规范的模式进行书写,下面就简要的总结了自己学习的代码规范. 一、关于一些常量值资源的书写规范. 颜色值有RGB和透明信息Alpha组成,以#开头, 形式有 #RGB                        #ARGB                        #RRGGBB                    #AARRGGBB.