JS 控件 jQuery扩展函数

概述：

jQuery 作为一个轻量级框架，插件格式的控件使用起来非常方便，但是我们基于jQuery写一套控件，需要我们扩展一些函数，便于控件的继承和扩展。

扩展函数：

1.         augment(Function r,Object s1): 将指定的方法或属性放到构造函数的原型链上， 函数支持多于2个变量，后面的变量同s1一样将其成员复制到构造函数的原型链上。

2.         cloneObject(Object obj): 拷贝对象（深拷贝）

jQuery 有一个clone方法，但是只支持HTMLElement,而我们在很多时候需要的是深拷贝对象。

3.         guid(prefix): 生成唯一的id。

用于控件生成时，需要用id管理控件

4.         extend(Function subclass,Function superclass,Object overrides): 实现类的继承

这个方法是继承的核心方法，在前面讲过，具体的细节查看前面的博客。

5.         merge(Object obj1,Object obj2....): 将多个对象的属性复制到一个新的对象上，如果第一个参数是true,那么实现的是深拷贝。

6.         mix():封装 jQuery.extend 方法，将多个对象的属性merge到第一个对象中。

7.         mixin(Function c,Array mixins,Array attrs): 将其他类作为扩展，集成到指定的类上面。

8.         substitue(String str,Object o,[RegExp regexp]) ： 替换字符串中的字段，用于简单模板

上面是为了实现控件继承而增加的一些帮助方法，还有一些辅助类的方法，具体代码如下：

 

  1 $.extend(BUI,
  2   {
  3     /**
  4      * 将指定的方法或属性放到构造函数的原型链上，
  5      * 函数支持多于2个变量，后面的变量同s1一样将其成员复制到构造函数的原型链上。
  6      * @param  {Function} r  构造函数
  7      * @param  {Object} s1 将s1 的成员复制到构造函数的原型链上
  8      *            @example
  9      *            BUI.augment(class1,{
 10      *                method1: function(){
 11      *   
 12      *                }
 13      *            });
 14      */
 15     augment : function(r,s1){
 16       if(!$.isFunction(r))
 17       {
 18         return r;
 19       }
 20       for (var i = 1; i < arguments.length; i++) {
 21         BUI.mix(r.prototype,arguments[i].prototype || arguments[i]);
 22       };
 23       return r;
 24     },
 25     /**
 26      * 拷贝对象
 27      * @param  {Object} obj 要拷贝的对象
 28      * @return {Object} 拷贝生成的对象
 29      */
 30     cloneObject : function(obj){
 31             var result = $.isArray(obj) ? [] : {};
 32             
 33       return BUI.mix(true,result,obj);
 34     },
 35     /**
 36     * 抛出错误
 37     */
 38     error : function(msg){
 39         throw msg;
 40     },
 41     /**
 42      * 实现类的继承，通过父类生成子类
 43      * @param  {Function} subclass
 44      * @param  {Function} superclass 父类构造函数
 45      * @param  {Object} overrides  子类的属性或者方法
 46      * @return {Function} 返回的子类构造函数
 47          * 示例:
 48      *        @example
 49      *        //父类
 50      *        function base(){
 51      * 
 52      *        }
 53      *
 54      *        function sub(){
 55      * 
 56      *        }
 57      *        //子类
 58      *        BUI.extend(sub,base,{
 59      *            method : function(){
 60      *    
 61      *            }
 62      *        });
 63      *
 64      *        //或者
 65      *        var sub = BUI.extend(base,{});
 66      */
 67     extend : function(subclass,superclass,overrides, staticOverrides){
 68       //如果只提供父类构造函数，则自动生成子类构造函数
 69       if(!$.isFunction(superclass))
 70       {
 71         
 72         overrides = superclass;
 73         superclass = subclass;
 74         subclass =  function(){};
 75       }
 76 
 77       var create = Object.create ?
 78                         function (proto, c) {
 79                             return Object.create(proto, {
 80                                 constructor: {
 81                                     value: c
 82                                 }
 83                             });
 84                         } :
 85                         function (proto, c) {
 86                             function F() {
 87                             }
 88 
 89                             F.prototype = proto;
 90 
 91                             var o = new F();
 92                             o.constructor = c;
 93                             return o;
 94                         };
 95       var superObj = create(superclass.prototype,subclass);//new superclass(),//实例化父类作为子类的prototype
 96         //superObj1 = new superclass();//作为superclass属性
 97       subclass.prototype = BUI.mix(superObj,subclass.prototype);     //指定子类的prototype
 98       //superObj1.constructor = superclass;
 99       subclass.superclass = create(superclass.prototype,superclass);  
100       //subclass.prototype.constructor = subclass;
101       BUI.mix(superObj,overrides);
102       BUI.mix(subclass,staticOverrides);
103       return subclass;
104     },
105     /**
106      * 生成唯一的Id
107      * @method
108      * @param {String} prefix 前缀
109      * @default 'ks-guid'
110      * @return {String} 唯一的编号
111      */
112     guid : (function(){
113         var map = {};
114         return function(prefix){
115             prefix = prefix || BUI.prefix + GUID_DEFAULT;
116             if(!map[prefix]){
117                 map[prefix] = 1;
118             }else{
119                 map[prefix] += 1;
120             }
121             return prefix + map[prefix];
122         };
123     })(),
124     /**
125      * 判断是否是字符串
126      * @return {Boolean} 是否是字符串
127      */
128     isString : function(value){
129       return typeof value === 'string';
130     },
131     /**
132      * 判断是否数字，由于$.isNumberic方法会把 '123'认为数字
133      * @return {Boolean} 是否数字
134      */
135     isNumber : function(value){
136       return typeof value === 'number';
137     },
138     /**
139      * 控制台输出日志
140      * @param  {Object} obj 输出的数据
141      */
142     log : function(obj){
143       if(win.console && win.console.log){
144         win.console.log(obj);
145       }
146     },
147     /**
148     * 将多个对象的属性复制到一个新的对象
149     */
150     merge : function(){
151       var args = $.makeArray(arguments);
152       args.unshift({});
153       return $.extend.apply(null,args);
154 
155     },
156     /**
157      * 封装 jQuery.extend 方法，将多个对象的属性merge到第一个对象中
158      * @return {Object} 
159      */
160     mix : function(){
161       return $.extend.apply(null,arguments);
162     },
163     /**
164     * 创造顶层的命名空间，附加到window对象上,
165     * 包含namespace方法
166     */
167     app : function(name){
168       if(!window[name]){
169         window[name] = {
170           namespace :function(nsName){
171             return BUI.namespace(nsName,window[name]);
172           }
173         };
174       }
175       return window[name];
176     },
177     /**
178      * 将其他类作为mixin集成到指定类上面
179      * @param {Function} c 构造函数
180      * @param {Array} mixins 扩展类
181      * @param {Array} attrs 扩展的静态属性，默认为['ATTRS']
182      * @return {Function} 传入的构造函数
183      */
184     mixin : function(c,mixins,attrs){
185         attrs = attrs || [ATTRS];
186         var extensions = mixins;
187         if (extensions) {
188             c.mixins = extensions;
189 
190             var desc = {
191                 // ATTRS:
192                 // HTML_PARSER:
193             }, constructors = extensions['concat'](c);
194 
195             // [ex1,ex2]，扩展类后面的优先，ex2 定义的覆盖 ex1 定义的
196             // 主类最优先
197             $.each(constructors, function (index,ext) {
198                 if (ext) {
199                     // 合并 ATTRS/HTML_PARSER 到主类
200                     $.each(attrs, function (i,K) {
201                         if (ext[K]) {
202                             desc[K] = desc[K] || {};
203                             // 不覆盖主类上的定义，因为继承层次上扩展类比主类层次高
204                             // 但是值是对象的话会深度合并
205                             // 注意：最好值是简单对象，自定义 new 出来的对象就会有问题(用 function return 出来)!
206                              BUI.mix(true,desc[K], ext[K]);
207                         }
208                     });
209                 }
210             });
211 
212             $.each(desc, function (k, v) {
213                 c[k] = v;
214             });
215 
216             var prototype = {};
217 
218             // 主类最优先
219             $.each(constructors, function (index,ext) {
220                 if (ext) {
221                     var proto = ext.prototype;
222                     // 合并功能代码到主类，不覆盖
223                     for (var p in proto) {
224                         // 不覆盖主类，但是主类的父类还是覆盖吧
225                         if (proto.hasOwnProperty(p)) {
226                             prototype[p] = proto[p];
227                         }
228                     }
229                 }
230             });
231 
232             $.each(prototype, function (k,v) {
233                 c.prototype[k] = v;
234             });
235         }
236         return c;
237     },
238     /**
239      * 生成命名空间
240      * @param  {String} name 命名空间的名称
241      * @param  {Object} baseNS 在已有的命名空间上创建命名空间，默认“BUI”
242      * @return {Object} 返回的命名空间对象
243      *        @example
244      *        BUI.namespace("Grid"); // BUI.Grid
245      */
246     namespace : function(name,baseNS){
247       baseNS = baseNS || BUI;
248       if(!name){
249         return baseNS;
250       }
251       var list = name.split('.'),
252         //firstNS = win[list[0]],
253         curNS = baseNS;
254       
255       for (var i = 0; i < list.length; i++) {
256         var nsName = list[i];
257         if(!curNS[nsName]){
258           curNS[nsName] = {};
259         }
260         curNS = curNS[nsName];
261       };    
262       return curNS;
263     },
264     prefix : 'ks-',
265     /**
266      * 替换字符串中的字段.
267      * @param {String} str 模版字符串
268      * @param {Object} o json data
269      * @param {RegExp} [regexp] 匹配字符串的正则表达式
270      */
271     substitute: function (str, o, regexp) {
272         if (!BUI.isString(str)
273             || !$.isPlainObject(o)) {
274             return str;
275         }
276 
277         return str.replace(regexp || /\\?\{([^{}]+)\}/g, function (match, name) {
278             if (match.charAt(0) === '\\') {
279                 return match.slice(1);
280             }
281             return (o[name] === undefined) ? '' : o[name];
282         });
283     },
284     /**
285      * 使第一个字母变成大写
286      * @param  {String} s 字符串
287      * @return {String} 首字母大写后的字符串
288      */
289     ucfirst : function(s){
290       s += '';
291             return s.charAt(0).toUpperCase() + s.substring(1);
292     },
293     /**
294      * 页面上的一点是否在用户的视图内
295      * @param {Object} offset 坐标，left,top
296      * @return {Boolean} 是否在视图内
297      */
298     isInView : function(offset){
299       var left = offset.left,
300         top = offset.top,
301         viewWidth = BUI.viewportWidth(),
302         wiewHeight = BUI.viewportHeight(),
303         scrollTop = BUI.scrollTop(),
304         scrollLeft = BUI.scrollLeft();
305       //判断横坐标
306       if(left < scrollLeft ||left > scrollLeft + viewWidth){
307         return false;
308       }
309       //判断纵坐标
310       if(top < scrollTop || top > scrollTop + wiewHeight){
311         return false;
312       }
313       return true;
314     },
315     /**
316      * 页面上的一点纵向坐标是否在用户的视图内
317      * @param {Object} top  纵坐标
318      * @return {Boolean} 是否在视图内
319      */
320     isInVerticalView : function(top){
321       var wiewHeight = BUI.viewportHeight(),
322         scrollTop = BUI.scrollTop();
323       
324       //判断纵坐标
325       if(top < scrollTop || top > scrollTop + wiewHeight){
326         return false;
327       }
328       return true;
329     },
330     /**
331      * 页面上的一点横向坐标是否在用户的视图内
332      * @param {Object} left 横坐标
333      * @return {Boolean} 是否在视图内
334      */
335     isInHorizontalView : function(left){
336       var viewWidth = BUI.viewportWidth(),     
337         scrollLeft = BUI.scrollLeft();
338       //判断横坐标
339       if(left < scrollLeft ||left > scrollLeft + viewWidth){
340         return false;
341       }
342       return true;
343     },
344     /**
345      * 获取窗口可视范围宽度
346      * @return {Number} 可视区宽度
347      */
348     viewportWidth : function(){
349         return $(window).width();
350     },
351     /**
352      * 获取窗口可视范围高度
353      * @return {Number} 可视区高度
354      */
355     viewportHeight:function(){
356          return $(window).height();
357     },
358     /**
359      * 滚动到窗口的left位置
360      */
361     scrollLeft : function(){
362         return $(window).scrollLeft();
363     },
364     /**
365      * 滚动到横向位置
366      */
367     scrollTop : function(){
368         return $(window).scrollTop();
369     },
370     /**
371      * 窗口宽度
372      * @return {Number} 窗口宽度
373      */
374     docWidth : function(){
375         var body = document.documentElement || document.body;
376         return $(body).width();
377     },
378     /**
379      * 窗口高度
380      * @return {Number} 窗口高度
381      */
382     docHeight : function(){
383         var body = document.documentElement || document.body;
384         return $(body).height();
385     }
386 

387   });