jQuery源码学习

最近学习一点jQuery源码,并且写了一个很简单的myquery。没有考虑ie兼容。
涉及到知识点如下

  • Dom类数组
  • extend拓展
  • 静态方法
    • noConflict
    • each
  • 原型方法
    • 仿css
    • 仿innerHTML



(function (window, undefied) {


    let myjquery = function (selector, context) {
        return new myjquery.prototype.init(selector, context)
    }
    let print = console.print.bind(this)
    myjquery.prototype = {
        init: function (selector, context, rootjQuery) {
            //模拟出数组格式
            let arr = []
            let results = document.querySelectorAll(selector)
            for (let i in results) {
                arr[i] = results[i]
            }
            arr.length = results.length;
            let that = this;
            that['arr'] = arr;
            return that;
        }
    }

    let _$ = window.$;   //_$

    myjquery.extend = myjquery.prototype.extend = function (...arg) {
        let options, target = arg[0] || {}
        target = this; //调用的上下文对象jQuery/或者实例
        options = arg[0]
        for (let name in options) {
            target[name] = options[name];
        }
        print(target)
        return target;
    }


    myjquery.extend({
        isInteger(num) {
            if (num) {
                return num + ' is ' + (Number.isInteger(num) === true ? '' : 'not') + ' a integer'
            } else {
                return 'nothing to do'
            }
        },
        each: function (obj, callback, context = null, arg = null) {
            print(obj)
            if (!obj) {
                throw new Error('obj is null')
            }
            if (!callback) {
                throw new Error('must have a function')
            }
            let i = 0;
            let value;
            let length = obj.length;
            for (; i < length; i++) {
                value = callback.call(context, obj[i], arg);
                if (value === false) {
                    break;
                }
            }
        },
        noConflict() {
            window.$ = _$;
            return this
        }
    })
    myjquery.prototype.extend({
        css: function (b, c) {
            print(b)
            print(c)
            let DQ = this['arr']
            let i = 0;
            while (DQ[i]) {
                DQ[i].style.cssText += b + ':' + c;
                i++
            }
            return this

        },
        html: function (contend) {
            if (this) {
                let DQ = this
                let i = 0;
                while (DQ[i]) {
                    DQ[i].innerHTML = contend
                    i++
                }
                return this
            }
        }
        done: function () {
            print(this.selector + ' have done')
            return this
        },
        get: function (num) {
            if (num != null) {
                return (num < 0 ? this[num + this.length] : this[num])
            } else {
                return Array.prototype.slice.call(this)
            }
        },
        each: function (callback, args) {
            return myjquery.each(this, callback, args);
        }
    })
    myjquery.prototype.init.prototype = myjquery.prototype;
    window.$ = window.wyh = myjquery
})(window)


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值