概念篇(更新版)
工作这么几年，发现有些公司的开发人员虽然个人能力非常强，但是看不出团队成员之间在开发思想上的共同点，基本是一个人一个编程风格，每个人都有每个人的实现方式。或者是存在相似点，但只是冰山一角而已，团队没有统一的编程风格，时间长了，在代码维护上越来越成问题，设想当一个开发人员离职后，其它人如何接手他的工作，他写的代码其它人能在短时间内看明白吗？
这里我来分享下我们公司在网站开发中对于js这块是如何规范的。说到在.net网站中编写js，如果是从事B/S架构开发的朋友再熟悉不过了，没有什么难度，只要懂点js脚本知识，再加上熟悉一到两个js框架，例如jquery，prototype，就能写出功能强大的网页交互程序。但是大家有没有考虑到如下问题呢？
第一：js脚本在网页加载过程是会中断网页的渲染的，只有当这段脚本执行完成后，后面的网页才能加载，如何避免这种问题？
有人可能会想到jquery因为它可以将需要执行的脚本在DOM加载完后才执行，这样就不会妨碍网页首屏的加载，增强了用户体验性。或者可以通过在script标签上增加defer来完成等等。所以，由于js脚本会中断网页渲染，所以尽量避免在网页元素中插入js脚本块，尽量把脚本都放在页脚后面。
第二：如何给网页元素绑定事件？
是在网页DOM元素上显示绑定吗，例如<input onclike="test()"
value="test"/> ，这样做有三个缺点：
1：不利用html展示，程序员开发的网页往往来自设计师的html，如果在拿到设计师的html后，再在对应的元素上增加各种各样的事件，下次有问题，设计师和你调试网页时就会非常别扭。
2：如果设计师重新给你一份重新设计后的html，改动较大，此时你如何做呢，如果把事件显示的绑定在元素下，那这次你需要重新再写一次，我想这种事情大家都不想看到吧。
3：显示在元素上绑定事件会在某种程度上影响网页的加载，特别是绑定js有错误产生时。
第三：当网页上有众多元素需要绑定事件时，有没有更好更简洁的方法呢？
上面的第二个问题，一般我们的解决方案就是采用事件后绑定，即在DOM加载完成之后，通过编程的形式给某些元素手动绑定上事件。但这种绑定事件过多时，也会显得程序的臃肿。这里我们可以通过事件冒泡的特点来实现事件的统一绑定。
例如：有这样的一段html,有五个元素需要绑定事件，通常我需要需要根据不同的DOM绑定五次，但我们可以利用事件冒泡的特点，在五个元素的父元素上绑定一次即可。
代码
用户名：<input id="username" type="text"/>
密码：<input id="password" type="password"/>
确认密码：<input id="repassword" type="password"/>
地址：<input id="adress" type="text"/>
<input id="submit" type="button" value="提交"/>
</div>
改良后的代码：在五个元素共有的父元素上定义一个id:divtest,然后在五个需要绑定事件的元素上增加自定义属性mth，最后就通过程序获取这个mth来判断用户操作的是哪一个元素。
代码
用户名：<input mth="username" type="text"/>
密码：<input mth="password" type="password"/>
确认密码：<input mth="repassword" type="password"/>
地址：<input mth="adress" type="text"/>
<input mth="submit" type="button" value="提交"/>
</div>
代码
this.divtest.bind("click", this.onClickdivLogin.bindAsEventListener(this));
},
onClickdivLogin: function (evt) {
var element = Event.element(evt);
var method = element.attr("mth");
switch (method) {
case "username":
alert(element.html());
break;
case "password":
alert(element.html());
break;
.....
}
},
第四：一般开发人员对于asp.net的page类生命周期都比较了解，分初始化，页面加载，页面卸载等过程，我们根据程序执行的顺序很容易能定位到我们想要查找的代码，如果一个网页中包含了大量的js，那么怎样才能快速定位我们关心的代码呢，是不是也可以把js的加载分成为不同的周期呢？答案是肯定的。
第五：js开发的规范并不是多余，而是可以大大提高代码的可维护性，有了规范，大家写的js风格一致后，再查找别人写的代码时就不会感到无从下手了。
下面是我们公司在规范js开发所做出的努力，经过一年的应用，大家都是非常认可的，原则上针对一个页面，有一个单独的js，在它之上会有一个框架性的js，我们公司是采用jquery，有其它的框架也行。这里我来分享下单独页面js的一个模板：采用了面向对象的形式。
js模板主要分为以下几个部分：
代码
BlogInfoControl = Class.create();
Object.extend(BlogInfoControl.prototype, {
name: "BlogInfoControl",
//初始化
init: function (options) {
this.initDOMElement();
this.initEvt();
this.initData();
this.pageLoad();
},
//初始化数据
initData: function () {
},
initDOMElement: function () {
this.commentPostForm = $("#commentPostForm");
},
//评论事件
commentPostFormClick: function (evt) {
return false;
},
initEvt: function () {
this.commentPostForm.bind("submit", this.commentPostFormClick.bindAsEventListener(this));
},
disposeDOMElement: function () {
},
disposeEvt: function () {
},
dispose: function () {
this.disposeEvt();
this.disposeDOMElement();
},
pageLoad: function () {
}
});
$(document).ready(function () {
var client = new BlogInfoControl();
});
1:生成一个类BlogInfoControl =
Class.create();这点借用了prototype的优点，熟悉它的朋友应该知道。
2：initi，它是最关键的函数，则它来完成所有的初始化事情，例如服务端变量，网页DOM的定义，网页DOM事件的绑定等。
3：initDOMElement，这里可以完成一些DOM元素的定义。
4：initData，完成一些服务端数据的定义，我们经常会把网页后台计算的结果输入出前端，然后由前端来完成最后的页面渲染。
5：initEvt，网页DOM元素的事件绑定。
6：disposeDOMElement，网页unload时即时销毁对象。
7：disposeEvt，unbind之前绑定的DOM事件。
8：dispose，调用disposeDOMElement，以及disposeEvt，主要目的是为了防止内存泄露。
9：pageLoad，类似webform类的pageload,完成网页渲染。
10：$(document).ready(function
()，通过jquery提供的函数，完成最后的js加载以及代码执行。
js模板开发的优点：面向对象的写法比传统的JS对程序员比较友好，统一的JS加载模型，清晰把代码从逻辑上分开，在代码阅读以及维护上都大有提高。
js模板开发的 缺点：需要一定的JS框架做支持，以及对JS知识有一定要求，如果是规模不大的网站，也大可不需要这样做。
总结：JS开发规范，适用于团队人员较多，注意页面交互以及用户体验的项目。
说明：文中的代码如有雷同，也只属于技术上的思想雷同，绝对不存在什么技术剽窃之类的说法，就像大家说的一样，jquery,prototype都是开源的，这点前端开发规范也什么值的剽窃的。