澳门正规赌博十大网站-澳门游戏网站
做最好的网站

修改或扩展jQuery原生方法的代码实例,jQuery扩展

修改或许扩大jQuery的不二诀窍代码实例:

18.4.3
浅析JQuery的apply(), call(), bind()方法
参考:
https://blog.csdn.net/whuzxq/article/details/64166253
https://blog.csdn.net/pyx6119822/article/details/52278278
call()与apply() 异同:
call([thisObj[,arg1[, arg2[, [,.argN]]]]])
apply([thisObj[,argArray]])
双面效能同样,都是thisObj对象承继调用call可能apply的函数。
区别是
call后边的参数须要一个三个输入。
apply前面包车型地铁参数是一个数组 或arguments 对象。
如上二者:若无提供 argArray 和 thisObj 任何二个参数,那么 Global 对象将被视作 thisObj, 而且不能被传送任何参数。
例子:
前者:
function add(a,b)
{
alert(a b);
}
function sub(a,b)
{
alert(a-b);
}
add.call(sub,3,1);
————
单继承
function Animal(name){
this.name = name;
this.showName = function(){
alert(this.name);
}
}
function Cat(name){
Animal.call(this, name);
修改或扩展jQuery原生方法的代码实例,jQuery扩展函数。}
var cat = new Cat("Black Cat");
cat.showName();
多继承
function Class10()
{
this.showSub = function(a,b)
{
alert(a-b);
}
}

必然,jQuery是一款作用庞大且使用方便的类库。

概述:

jQuery 作为三个轻量级框架,插件格式的控件使用起来十分便利,但是大家依照jQuery写一套控件,须求我们扩展部分函数,便于控件的存续和扩张。

function Class11()
{
this.showAdd = function(a,b)
{
alert(a b);
}
}
function Class2()
{
Class10.call(this);
Class11.call(this);
}
后者:
sayColor.apply(obj, new Array("The color is ", "a very nice color indeed."));
总计:apply()和call()均是从ECMAScript 承接机制落实引申而来,由此明白好持续至关心重视要。
————
bind
参数作为this传递给调用的函数。
1.bind方法中的this
function f(){
return this.a;
}
var g=f.bind({a:test});//参数是二个对象,作为this
console.log(g());//test
var o={a:37,f:f,g:g};
console.log(o.f(),o.g());//37,test
//o.f():以目的属性调用,this指向o;o.g():就算以指标的性能调用,不过依然根据事先的绑定
_
2.bind方法
this.x=9;
var module={
x:81,
getX:function(){return this.x;}
修改或扩展jQuery原生方法的代码实例,jQuery扩展函数。};
module.getX();//81
var getX=module.getX;//赋值给变量,直接调用,this会指向全局对象,则再次来到9
getX();//9
var boundGetX=getX.bind(module);//绑定module对象
boundGetX();//81
__
3.bind的Corey化
function add(a,b,c){
return a b c;
}
var func=add.bind(undefind,100);//没有须求钦点传入的指标,不过钦赐了三个参数为100,那么a将赋值100
func(1,2)//103
var func2=func.bind(undefined,200);//因为a已经被钦命,因而将b内定为200
func2(10);310
————
4.bind与new
function foo(){
this.b=100;//直接调用的话,则创立全局对象b
return this.a;
}
var func=foo.bind({a:1});
func();//1
new func();//{b:100} 使用new的话,将会把this作为重回值,并且this会被伊始化为四个暗中同意的空对象,该空对象的原型指向foo.prototype.即便用了bind,也不可能指向钦定对象。return this.a将会被忽视。
——————————————————
18.4.2
jQuery(function(){})与(function(){})(jQuery) 的区别
参考:https://www.cnblogs.com/keyi/p/5919392.html
前者:
$(document).ready(function(){
// 在此间写你的代码...
});
在DOM加载成功时运营的代码
能够简写成
jQuery(function(){
});
后者:
是匿超级模特式立刻实行的意味。也就是先说爱他美个函数,证明完后直接调用;
其实际是实践()(para)佚名格局,只不过是传递了jQuery对象。
相当于
function aa($){}
aa(jQuery)
是开首化jquery对象的惯用方法。
例如:
(function(str){alert(str)})("output"));
相当于:
function OutPutFun(str){alert(str);};OutPutFun("output");

从它的遍布应用能够表达上边的眼光,不过正所谓金无足赤,白璧微瑕,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      *   
修改或扩展jQuery原生方法的代码实例,jQuery扩展函数。 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      * 
修改或扩展jQuery原生方法的代码实例,jQuery扩展函数。 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   }); 

前面三个:不可用于存松开辟插件的代码,因为jQuery对象未有获取传递,外界通过jQuery.method也调用持续当中的法门(函数)。
所谓开采插件的代码指的是扩展jQuery的原型函数。若无传来jQuery也就不容许扩张jQuery。
前面一个:用于寄存手拓插件的代码,推行当中代码时DOM不断定存在,所以一向自动推行DOM操作的代码请小心使用。
开垦插件的格式如下:
(function ($) {
$.fn.test111 = function () {
alert('test')
}
})(jQuery);
调用插件
$("#elementid").test111();
——————————————————
18.4.2
$.extend({})与$.fn.extend({ })的区别
参考:http://www.jquerycn.cn/a_16486
jQuery.fn正是jQuery.prototype。jQuery.fn.extend(object); 对jQuery.prototype进得扩张。
前端是对jquery对象自己进行扩大,相当于jquery的静态函数。
$.extend({
  add:function(a,b){return a b;}
});
$.add(3,4); //return 7
后任是对jquery的原型对象开展扩充,也正是jquery的成员函数。需求实例化技巧用。
$.fn.extend({
alertWhileClick:function(){
$(this).click(function(){
alert($(this).val());
});
}
});
$("#input1").alertWhileClick(); //其中$("#input1")是jQuery的实例。

代码实例:

————————————————————
18.3.26
jQuery.prototype的含义
参考:https://blog.csdn.net/suyu_yuan/article/details/52690278

复制代码 代码如下:

在 JavaScript 中,每种函数对象皆有三个暗许的性质 prototype,称为函数对象的原型成员,这些个性指向一个目的,称为函数的原型对象,当我们每定义了多个函数的时候,JavaScript 就创办了一个对应的原型对象,也正是说,当大家定义二个函数的时候,实际上获得了四个对象,一个函数对象,一个原型对象。原型对象是二个异样的目的,函数的 prototype 成员指向它的原型对象。

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>脚本之家</title>
<script src=";
<script>
$.prototype.val = function (base) {
  return function () {
    var s = this;
    var a = "data-property";
    var p = s.attr(a);
    var isset = arguments.length > 0;
    var v = isset ? arguments[0] : null;
        
    if (isset&&typeof(base)=="function") {
      base.call(s, v);
    }
    else {
      v = base.call(s);
    }
    if (p) {
      if (isset) {
        s.attr(p, v);
        return s
      }
      else {
        return s.attr(p)
      }
    }
    else {
      if (!s.is(":input")){
        if (isset) {
          s.text(v); return s;
        }
        else {
          return s.text();
        }
      }
      else {
        return isset ? s : v;
      }
    }
  }
}($.prototype.val);
$(document).ready(function(){
  $("#show").html($("#lbl").val() "<br>" $("#txt").val());
})
</script>
</head>
<body>
<span id="lbl">脚本之家</span>  
<input type="text" id="txt" value="softwhy.com" />
<input type="checkbox" value="antzone" />
<div id="show"></div>
</body>
</html>

能够经过函数对象的 prototype 成员取得那么些原型对象的援用。

地点的代码没有疑问是对jQuery的val()方法做的扩大,上边介绍一下它的落到实处过程。

种种对象也都有三个原型成员 prototype,通过 new 函数创立的靶子会通过函数的 prototype 找到函数的原型,然后将团结的原型指向这一个指标。对于不是由此函数创造的靶子实例和原型对象,它们的原型会被安装为 Object 函数的原型对象。

本文由澳门正规赌博十大网站发布于澳门游戏网站,转载请注明出处:修改或扩展jQuery原生方法的代码实例,jQuery扩展