如何规范.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绑定五次，但我们可以利用事件冒泡的特点，在五个元素的父元素上绑定一次即可。

代码

  < 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/