我对jquery框架中核心部分的理解

我对jquery框架中核心部分的理解

月光魔力鸭

2018-08-28 19:45 阅读 115 喜欢 0 jquery框架 理解jquery

jQuery 整体构造


jquery的特点就是无new构造和链式调用。

$('xxx')
$('xxx').css().attr().val();

正常的情况下应该是:

function aQuery () {
    this.name='test';
    return this;
}
console.log(new aQuery());
aquery{
    name : 'test',
    __proto__ : Object
}

如果不需要new的话,就应该在函数体内实例化。

function aQuery () {

    return new aQuery();//但是这样就死循环了...
}

还需要一个构造函数来进行构造:

function aQuery () {
    return new aQuery.prototype.init();
}
aQuery.prototype = {
    init : function(){
        return this;
    },
    test :function () {
        console.log('test');
    }
}
//但是这样构造的实例是init,而不是aQuery,无法访问aQuery的原型方法。
//增加一个原型指向
aQuery.prototype.init.prototype = aQuery.prototype;
//这样就可以访问aQuery的原型方法test了。
aQuery().test();

那么如何进行链式调用呢?只需要在每个函数都返回this即可。

function aQuery () {
    return new aQuery.prototype.init();
}
aQuery.prototype = {
    init : function(){
        return this;
    },
    test :function () {
        console.log('test');
        return this;
    },
    add : function(){
        //xxx
        return this;
    }
}
//这样就可以链式调用了
aQuery().test().add();//但是有个缺点,函数都没有确切的返回值。

链式调用只适用于某种特殊情况。 同时还想增加静态方法要如何来做呢?且看 extend

//我们需要提供一个接口,来增加aQuery的原型方法和静态方法。
aQuery.extend = aQuery.prototype.extend = function(object){
//虽然两个函数都指向了一个,但是可以通过this来改变
    var target = this;
    for(var key in object){
        garget[key] = object[key];
    }
    return target;//一定要返回修改后的this
};
//这样我们就可以通过extend接口增加原型函数和静态函数了
aQuery.extend({
    add : function(){
        console.log('add');
    }
});
aQuery.prototype.extend({
    add2 : function(){
        console.log('add2');
        return this;
    }
});
//可以直接调用静态函数
aQuery.add();
//可以矫勇原型函数
aQuery().add2().test();

下面是一个简单的jquery构造的实现:

'use strict';
(function(window,undefined){    
    var SchoolSelect = function(params){
        return new SchoolSelect.fn.init(params);
    };
    SchoolSelect.fn = SchoolSelect.prototype = {
            constructor : SchoolSelect,
            init : function(params){
                this.cfg = params;
                return this;
            },
            version : '1.0'
    };
    SchoolSelect.fn.init.prototype = SchoolSelect.fn;
    SchoolSelect.extend = SchoolSelect.fn.extend = function(obj) {
        var target = this;
        for(var k in obj){
            target[k] = obj[k];
        }
        return target;
    };
    SchoolSelect.extend({
        add : function(){
            console.log('aaa');
        },
        age : 11
    });
    SchoolSelect.fn.extend({
        abc : function(){
            console.log('bbb');
            return 'aaccc';
        }
    });
    window.SchoolSelect = SchoolSelect;
})(window);

转载请注明出处: https://chrunlee.cn/article/jquery-personal-explain.html


感谢支持!

赞赏支持
提交评论
评论信息(请文明评论)
暂无评论,快来快来写想法...
推荐
业务中有一段涉及到处理canvas的图片然后将内容进行上传,后测试发现在IE中不好使哎...
最大公因数,也称最大公约数、最大公因子,指两个或多个整数共有约数中最大的一个。a,b的最大公约数记为(a,b),同样的,a,b,c的最大公约数记为(a,b,c),多个整数的最大公约数也有同样的记号。求最大公约数有多种方法,常见的有质因数分解法、短除法、辗转相除法、更相减损法。与最大公约数相对应的概念是最小公倍数,a,b的最小公倍数记为[a,b]。
做作业的时候,需要在手机上预览下,但是发现如果想在移动端上展示A4样子的作业还是挺麻烦的,最后还是准备通过图片来展示,然后移动端缩放呗。。
今天刷codewars的题目的时候碰到一个通过js来实现字符串转base64的题目,base64虽然在js或nodejs中经常用,但是我还真没有仔细去看过原理以及如何实现,这回绕不过去了,赶紧找了找资料看了下。
问题是由一个BUG引起的,功能中有使用国际化组件,用的是jquery.i18n,在chrome上、ff上都没有什么问题,问题出在了IE上。万恶的IE..
偶尔练习下canvas,这里简单记录下常用API,防止遗忘..加深记忆..努力提高..争取突破...daydayup
项目中需要使用treegrid,找了下easyui 和 ext都有,但是项目用的框架是 byyui,如果为了treegrid 就把这些都加载的话,感觉不太合算。找了大家常用的基于jquery的treegrid.
关于web打印,需要对页面内容进行页面样式设置,呈现出分页的样子,同时对于题目中的图片或表格尽量不分到两个页面中,因此实现了一个jquery的web打印插件,当然,这个插件目前只适用于部分情况,仅供借鉴