如何规范.net中的js开发(1)概念篇(更新版)

来自：http://www.cnblogs.com/ASPNET2008/archive/2011/01/08/1930895.html

工作这么几年，发现有些公司的开发人员虽然个人能力非常强，但是看不出团队成员之间在开发思想上的共同点，基本是一个人一个编程风格，每个人都有每个人的实现方式。或者是存在相似点，但只是冰山一角而已，团队没有统一的编程风格，时间长了，在代码维护上越来越成问题，设想当一个开发人员离职后，其它人如何接手他的工作，他写的代码其它人能在短时间内看明白吗？

这里我来分享下我们公司在网站开发中对于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绑定五次，但我们可以利用事件冒泡的特点，在五个元素的父元素上绑定一次即可。


代码

<div>

用户名：<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来判断用户操作的是哪一个元素。


代码

<div id="divtest">

用户名：<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>


代码

iniEvt: function () {

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模板主要分为以下几个部分：


代码

var BlogInfoControl = BlogInfoControl;

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都是开源的，这点前端开发规范也什么值的剽窃的。

作者：姜敏

出处：http://www.cnblogs.com/aspnet2008/