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

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

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

代码

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

/article/4679246.html