必威-必威-欢迎您

必威,必威官网企业自成立以来,以策略先行,经营致胜,管理为本的商,业推广理念,一步一个脚印发展成为同类企业中经营范围最广,在行业内颇具影响力的企业。

相信不久就会突破1w行,写完后一对比对jQuery的简

2019-11-22 19:22 来源:未知

对于jQuery的写法甚是郁结,非常在选取Prototype的$后,后生可畏度不可能清楚jQuery的$。对于当今前端同学来讲,只怕首先个接触的就是jQuery了,他们会以为很习贯,很当然。

前边写过生龙活虎篇JavaScript命名空间的篇章,写完后意气风发比照对jQuery的回顾利用格外保养,看了看人家源码,用的规律很周围啊,校订一下以前的本子,做个简易版的jQuery

第二遍接触jQuery是在2010年,上地的一家小公司。那时的本子是1.1,之前小编仅接触过Prototype.js。对于jQuery的写法甚是纠结,非常在使用Prototype的$后,豆蔻梢头度无法领略jQuery的$。对至今眼下端同学来讲,或者首先个接触的便是jQuery了,他们会以为很习于旧贯,很当然。

于今计算机里还寄存着那时候的API文书档案,发个图惊讶下

前面包车型地铁代码

 

在此段时间内,笔者的入门老师是墨墨,其实到现在他照旧是自身慕名的同事之风流洒脱。他的编制程序造诣相当高,相信已经突破了编制程序语言的范围。在大家都在运用Prototype.js的时候,在jQuery还没有在境内风靡的时候,他就曾经把jQuery引进到花色中了。

(function () {
            var _NS = function () {
             
            }
        
            _NS.prototype.select = function (selector,context) {
                var context = context || document;
                return context.querySelectorAll(selector);
            }

时至前天计算机里还贮存着那时候的API文书档案,发个图咋舌下

言归正传吧,最近的jQuery版本已经到了1.6.1。从当下的2004行左右大涨到了9000行。相信不久就能够突破1w行。对于部分简易网页来讲引进一个jQuery已经不再那么轻量了。这里的研读的是1.6.1以此本子,作者会边读边写,最终会写出叁个1000行左右的“MinijQuery”。

            _NS.prototype.isArrayLike=function(obj){
                if(obj instanceof Array){
                    return true;
                }

图片 1

以下是jQuery 1.6.1 代码片段复制代码 代码如下: var jQuery = function { // The jQuery object is actually just the init constructor 'enhanced' return new jQuery.fn.init( selector, context, rootjQuery ); }, ... class2type = {}; jQuery.fn = jQuery.prototype = { constructor: jQuery, init: function(selector, context, rootjQuery){ } } // Give the init function the jQuery prototype for later instantiation jQuery.fn.init.prototype = jQuery.fn; 初看上去疑似在用 原型方式在写三个类jQuery,但实际上大家利用时是函数调用$,却不是new $。标志符 jQuery是二个function,其内new了叁个function init的实例,然后回来。至此大家知晓其真正的构造器是jQuery.fn.init。jQuery写的莫过于奇怪,它把init又挂在了jQuery的prototype上,阅读起来某些绕人。

                var length=obj.length;
                if ( obj.nodeType === 1 && length ) {
                    return true;
                }
                return false;
            }

 

jQuery.fn.init.prototype = jQuery.fn; 是非同平时的一句。该句把function jQuery的原型赋值给了function init的原型。当调用$时重临的指标组成包罗三个部分。1,由function init中this带的;2,由function jQuery的prototype带的(如this.size/this.toArray);

            _NS.prototype.html = function (obj,value) {
                var isArray=this.isArrayLike(obj), i=0;

在此段日子内,作者的入门老师是墨墨,其实于今他依然是自个儿慕名的同事之意气风发。他的编制程序造诣相当高,相信已经突破了编制程序语言的节制。在大家都在动用Prototype.js的时候,在jQuery尚未在境内风靡的时候,他就早就把jQuery引进到花色中了。

依样葫芦jQuery写一个复制代码 代码如下: // zchain-0.1.js function ${ return new $.prototype.init; } $.prototype={ init:function{ if(selector === undefined){ this.length = 0; return this; } if{ this[0] = selector; }else{ this[0]=document.getElementById; } this.length=1; }, css:function{ this[0].style[name] = value; return this;//链式调用 }, hide:function(){ var self=this; setTimeout{ self[0].style.display="none"; },3000); return this;//链式调用 } } $.prototype.init.prototype=$.prototype; 简单起见,这里接纳器只传html element或因素id(后续会增高,但不兑现存套css selector卡塔尔,this上挂了length属性,赋值为1。 当我们调用时 复制代码 代码如下: var obj = $; $()实际未有怎么意义,只是为了测验调用后obj的结缘。firebug调控台出口如下: length:0; init:function attr:function hide:function 即obj对象是由function init中this及function $.prototype组成的。 再看下$.prototype上的措施,笔者只增多了css和hide方法,那三个方式的兑现也是最最简陋的。 复制代码 代码如下:

                if (typeof value == 'string') {
                    if (!isArray) {
                        obj.innerHTML = value;
                    } else {
                        var length = obj.length;
                        while (i < length) {
                            obj[i].innerHTML = value;
                            i += 1;
                        }
                    }
                } else {
                    if (!isArray) {
                        return obj.innerHTML;
                    } else {
                        return obj[0].innerHTML;
                    }
                }
            }

闲话休说吧,近期的jQuery版本已经到了1.6.1。从立刻的二零零四行左右膨胀到了9000行。相信不久就能突破1w行。对于一些轻松易行网页来讲引进二个jQuery已经不再那么轻量了。这里的研读的是1.6.1以此本子,笔者会边读边写,最后会写出一个1000行左右的“MinijQuery”。

3 seconds later I will hide.

            window.NS = new _NS();
        })();这样的写法只是对种种自定义方法的隔离,只是能用而已,不协助日益流行的链式调用,使用jQuery的时候能够很有益的写出$(selector).xxx().xxxx().xxxxxx() 那样格式的代码,既简洁易读作用又高,而地点的写法只好调用一个个孤零零函数,未有指标全部性可言。

 

先调用css设置了字体颜色为土黑,3秒后潜伏了。 总计下: jQuery对象指的是jQuery.prototype.init的实例,简单来说正是new jQuery.prototype.init。这里jQuery.prototype.init的类型是function,能够用作是二个类。 jQuery对象由以下部分组成: 1,挂在jQuery.prototype.init中的this上的质量或方法。 2,挂在jQuery.prototype.init.prototype上的性质或方法。 3,因为把jQuery.prototype赋值给了jQuery.prototype.init.prototype,所以挂在jQuery.prototype上的个性和章程也是jQuery对象的风度翩翩有的。 4,通过jQuery.fn.extend情势强大的属性或方法。 /二〇一二06/yuanma/zchain.rar

地方的select方法再次来到值为查询的对象(IE低版本浏览器不扶植卡塔尔国,非常多时候获得一个目的后大家期望利用库函数对其直接进行操作,比方大家期望把页面上具备div的innerHTML设为test,并躲藏那一个div,如若用jQuery会这么写

以下是jQuery 1.6.1 代码片段

$(div).html('test').css(‘display’,’none’);下面的代码尽管没完结css方法,不过若是有的话得这么写

var jQuery = function( selector, context ) {
        // The jQuery object is actually just the init constructor 'enhanced'
        return new jQuery.fn.init( selector, context, rootjQuery );
    },
    ...
    class2type = {};

jQuery.fn = jQuery.prototype = {
    constructor: jQuery,
    init: function(selector, context, rootjQuery){
    }
}

// Give the init function the jQuery prototype for later instantiation
jQuery.fn.init.prototype = jQuery.fn;

var divs=NS.select('div');
divs.html('test');
divs.css('display','none');为什么jQuery很方便
jQuery好用有多少个原因:

 

1. $本身是个function对象,包涵部分“静态方法”(不用实例化就能够用的艺术卡塔尔,比方$.ajax、$.animation,能够如此$.xxx()直接动用jQuery的片段库函数

初看上去疑似在用 原型方式 在写二个类jQuery(别称$),但实际上大家利用时是函数调用$("#id"),却不是new $("#id")。
标识符 jQuery是多少个function,其内new了三个function init的实例,然后回来。至此大家掌握其确实的构造器是jQuery.fn.init。jQuery写的实际上奇怪,它把init又挂在了jQuery的prototype上,阅读起来有一点点绕人。

  1. 因为$本人是多少个函数,能够被调用。可是$(selector) 再次来到结果并非寻觅的结果集,而是一个jQuery实例,结果集被封装在jQuery对象内,那样能够动用一些jQUery的实例方法(也正是概念在prototype内的秘诀等卡塔 尔(英语:State of Qatar),举例$(‘div’).html(‘test’), 那样由于$(‘div’)再次回到的是jQuery实例,所以能够调用实例方法html()。

 

3. jQuery对象大部分实例方法尽量重临jQuery对象,即调用者本人,这样可以支撑链式调用,举例$(‘div’).html(‘test’).css(‘display’,’none’) , $(‘div’)再次来到jQuery对象,里面包蕴结果集,调用实例方法html(‘test’) 相像再次回到jQuery对象,调用 css(‘display’,’none’) 同样也回到jQuery对象,能够那样间接调用下去。

jQuery.fn.init.prototype = jQuery.fn; 是根本的一句。该句把function jQuery的原型赋值给了function init的原型。当调用$("#id")时回来的指标组成满含七个部分。

构造函数的大器晚成对学问
想要做到上边几点除了prototype等基本知识,还索要掌握部分关于JavaScript构造函数的学识。

  1. 由function init中this带的(如this.context)
  2. 由function jQuery的prototype带的(如this.size/this.toArray)

1.什么样的函数是构造函数

 

TAG标签:
版权声明:本文由必威发布于必威-前端,转载请注明出处:相信不久就会突破1w行,写完后一对比对jQuery的简