如何规范.net中的js开发(2)

原理篇

上篇我大概介绍了我们公司在js开发上所做的规范，我也提到要想实现那样的功能需要一定的框架做为支持，这里所说的框架即对js的一些扩展。这里我们主要结合了两个js框架的优点：
      1：prototype,主要应用了它在对Object以及Function上的扩展。本人js知识并不高深，所以对下面的扩展也仅仅能贴些代码以及加上简单的注释供大家参考。

           补充：jQuery里没有很好的面向对象继承机制，我们可以从Prototype把Class.create方法移植过来。
          <1>:对 Object的扩展

代码

// 提供一种通过拷贝所有源以象属性和函数到目标函数实现继承的方法
Object.extend  =   function  (destination, source) {
     for  ( var  property  in  source) {
        destination[property]  =  source[property];
    }
     return  destination;
};

 

          <2>:Function的扩展,bind函数主要是为了传递this指针，这也是js变量作用域引起的解决方案。bindAsEventListener主要用来我们为DOM元素绑定事件。

代码

// 返回function的实例，这个实例和源function的结构一样，但是它已被绑定给了参数中提供的object，就是说，function中的this指针指向参数object。
Function.prototype.bind  =   function  () {
     var  m  =   this , args  =  Array.Convert(arguments), object  =  args.shift();
     return   function  () {
         if  ( typeof  Array.from  ==   ' function ' ) {
             return  m.apply(object, args.concat(m)));
        }
    }
};
// 用法和上面的bind一样，区别在于用来绑定事件。
Function.prototype.bindAsEventListener  =   function  (object) {
     var  m  =   this , args  =  Array.Convert(arguments), object  =  args.shift();
     return   function  (event) {
         if  ( typeof  Array.from  ==   ' function ' ) {
             return  m.apply(object, [event  ||  window.event].concat(args));
        }
    }
};

 

         <3>:Event扩展,element是其中的重中之中，由它来判定哪个元素被点击。

代码

if  ( ! window.Event) {
     var  Event  =   new  Object();
}
Object.extend(Event, {
    element:  function  (event) {
         return  $(event.target  ||  event.srcElement);
    }
 
});

 

   2：jquery,操作dom以及ajax等。公司主要以jquery做为核心js类库，理由如下：
       1:轻量级，比起prototpye在体积上要少不少，这对高访问量的网站来讲是重要指标之一。
       2:强大的DOM操作能力，这里我就不多介绍，本人也并非jquery高手。
       3:jquery拥有丰富的插件，像日历插件，浮动层，蒙板层,自动完成，对话框等等。
  
   如何把prototype的优点与我们的项目结合起来呢？
   在上篇中，我介绍了js模板的结构，其中最重要的就是initialize因为它是代码执行的入口，其中包含了所有变量的初始化以及页面渲染所需要的代码块。这里我创建了一个名叫system.js的文件。

   客户端代码：通过new new PageListControl()来调用其中的构造函数，最终与客户端的init联系起来。

var  PageListControl  =  PageListControl;
PageListControl  =  Class.create();
$(document).ready( function  () {
     var  client  =   new  PageListControl();
});

 

    system.js代码：

代码

var  Class  =  {
    create:  function  () {
         return   function  () {
             this .init.apply( this , arguments);
        };
    }
};
// 提供一种通过拷贝所有源以象属性和函数到目标函数实现继承的方法
Object.extend  =   function  (destination, source) {
     for  ( var  property  in  source) {
        destination[property]  =  source[property];
    }
     return  destination;
};
// 返回function的实例，这个实例和源function的结构一样，但是它已被绑定给了参数中提供的object，就是说，function中的this指针指向参数object。
Function.prototype.bind  =   function  () {
     var  m  =   this , args  =  Array.Convert(arguments), object  =  args.shift();
     return   function  () {
         if  ( typeof  Array.from  ==   ' function ' ) {
             return  m.apply(object, args.concat(args));
        }
    }
};
// 用法和上面的bind一样，区别在于用来绑定事件。
Function.prototype.bindAsEventListener  =   function  (object) {
     var  m  =   this , args  =  Array.Convert(arguments), object  =  args.shift();
     return   function  (event) {
         if  ( typeof  Array.from  ==   ' function ' ) {
             return  m.apply(object, [event  ||  window.event].concat(args));
        }
    }
};
// //////////////////////////////////////// Object 扩展 star/////////////////////////////////
Object.extend(String.prototype, {
    toArray:  function  () {
         return   this .split( '' );
    } });
// //////////////////////////////////////// Object 扩展 end/////////////////////////////////
// //////////////////////////////////////// Array 扩展 star/////////////////////////////////
Array.Convert  =   function  (iterable) {
     if  ( ! iterable)  return  [];
     if  (iterable.toArray) {
         return  iterable.toArray();
    }  else  {
         var  results  =  [];
         for  ( var  i  =   0 , length  =  iterable.length; i  <  length; i ++ )
            results.push(iterable[i]);
         return  results;
    }
};
// //////////////////////////////////////// Array 扩展 end/////////////////////////////////
// //////////////////////////////////////// Event 扩展 star/////////////////////////////////
if  ( ! window.Event) {
     var  Event  =   new  Object();
}
Object.extend(Event, {
    element:  function  (event) {
         return  $(event.target  ||  event.srcElement);
    }
 
});
// //////////////////////////////////////// Event 扩展 end/////////////////////////////////

    

 
         总结：虽然上面的代码看起来需要一定的js知识，但大多都是现有框架已经存在的代码，拿过来改吧改吧就能起到大作用。通过上面简单的代码支持，就能让我们像上篇那样编写清晰简单的js脚本了。

 

作者：姜敏
出处：http://www.cnblogs.com/aspnet2008/