js代码规范,如何规范.net中的js开发(2)原理篇

上篇我大概介绍了我们公司在js开发上所做的规范，我也提到要想实现那样的功能需要一定的框架做为支持，这里所说的框架即对js的一些扩展。这里我们主要结合了两个js框架的优点： 1：prototype,主要应用了它在对Object以及Function上的扩展。本人js知识并不高深，所以对下面的扩展也仅仅能贴些代码以及加上简单的注释供大家参考。 <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 __method = this, args = Array.from(arguments), object = args.shift(); return function () { if (typeof Array.from == 'function') { return __method.apply(object, args.concat(Array.from(arguments))); } } }; //用法和上面的bind一样，区别在于用来绑定事件。 Function.prototype.bindAsEventListener = function (object) { var __method = this, args = Array.from(arguments), object = args.shift(); return function (event) { if (typeof Array.from == 'function') { return __method.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); }, pointerX: function (event) { return event.pageX || (event.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft)); }, pointerY: function (event) { return event.pageY || (event.clientY + (document.documentElement.scrollTop || document.body.scrollTop)); } });

2：jquery,操作dom以及ajax等。公司主要以jquery做为核心js类库，理由如下： 1:轻量级，比起prototpye在体积上要少不少，这对高访问量的网站来讲是重要指标之一。 2:强大的DOM操作能力，这里我就不多介绍，本人也并非jquery高手。 3:jquery拥有丰富的插件，像日历插件，浮动层，蒙板层,自动完成，对话框等等。 如何把prototype的优点与我们的项目结合起来呢？ 在上篇中，我介绍了js模板的结构，其中最重要的就是initialize因为它是代码执行的入口，其中包含了所有变量的初始化以及页面渲染所需要的代码块。这里我创建了一个名叫system.js的文件。
客户端代码：通过new new PageListControl()来调用其中的构造函数，最终与客户端的initialize联系起来。
var PageListControl = PageListControl; PageListControl = Class.create(); $(document).ready(function () { var client = new PageListControl(); });
system.js代码：
代码 var Class = { create: function () { return function () { this.initialize.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 __method = this, args = Array.from(arguments), object = args.shift(); return function () { if (typeof Array.from == 'function') { return __method.apply(object, args.concat(Array.from(arguments))); } } }; //用法和上面的bind一样，区别在于用来绑定事件。 Function.prototype.bindAsEventListener = function (object) { var __method = this, args = Array.from(arguments), object = args.shift(); return function (event) { if (typeof Array.from == 'function') { return __method.apply(object, [event || window.event].concat(args)); } } }; ////////////////////////////////////////// Object 扩展 star///////////////////////////////// Object.extend(String.prototype, { trim: function () { return this.replace(/(^[\s　]*)|([\s　]*$)/g, ""); }, toArray: function () { return this.split(''); }, startsWith: function (pattern) { return this.indexOf(pattern) === 0; }, endsWith: function (pattern) { var d = this.length - pattern.length; return d >= 0 && this.lastIndexOf(pattern) === d; }, empty: function () { return this.trim() == ''; }, toArray: function () { return this.split(''); } }); ////////////////////////////////////////// Object 扩展 end///////////////////////////////// String.isNullOrEmpty = function (str) { return str == undefined || str == null || str.empty(); }; ////////////////////////////////////////// Array 扩展 star///////////////////////////////// Array.from = 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); }, pointerX: function (event) { return event.pageX || (event.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft)); }, pointerY: function (event) { return event.pageY || (event.clientY + (document.documentElement.scrollTop || document.body.scrollTop)); } }); ////////////////////////////////////////// Event 扩展 end/////////////////////////////////
总结：虽然上面的代码看起来需要一定的js知识，但大多都是现有框架已经存在的代码，拿过来改吧改吧就能起到大作用。通过上面简单的代码支持，就能让我们像上篇那样编写清晰简单的js脚本了。
作者：姜敏 出处：http://www.cnblogs.com/aspnet2008/

延伸阅读