原生js中的链模式学习笔记

这篇是在学原生js的链模式的笔记，思想借鉴的是jq，主要的笔记记录如下

    <div id="demo"></div>
    <div id="test"></div>
    <script>
        var A = function () { }
        A.prototype = {
            length: 2,
            size() {
                return this.length
            }
        }

        var a = new A()
        console.log(a.size()) //2
    </script>
    <script>
        var A = function () {
            return B
        }
        var B = A.prototype = {
            length: 3,
            size() {
                return this.length
            }
        }
        //访问size方法
        console.log(A().size()); //3
    </script>
    <script>
        //jQ中为了减少变量的创建，索性直接将B对象看作是A的一个属性
        var A = function () {
            return A.fn
        }
        A.fn = A.prototype = {
            length: 5,
            size() {
                return this.length
            }
        }
        console.log(A().size()) //5
    </script>
    <script>
        //继续分析jq
        var A = function (selector) {
            return A.fn.init(selector)
        }
        A.fn = A.prototype = {
            init(selector) {
                return document.getElementById(selector)
            },
            size() {
                return this.length
            },
            length: 2
        }
        console.log(A('demo')) //<div id="demo"></div>
    </script>
    <script>
        //想要获取A对象返回的结果，而且还能拿到别的方法
        var A = function (selector) {
            return A.fn.init(selector)
        }
        A.fn = A.prototype = {
            init(selector) {
                this[0] = document.getElementById(selector)
                console.log(this === A.fn, this === A.prototype, this, 1111)
                this.length = 1
                return this
            },
            size() {
                return this.length
            },
            length: 2
        }
        var demo = A('demo')
        console.log(demo, '0000') // { 0: div#demo, length: 1, init: ƒ, size: ƒ }
        console.log(demo.size()); //1
    </script>
    <script>
        var A = function (selector) {
            return new A.fn.init(selector)
        }
        A.fn = A.prototype = {
            constructor: A,
            init: function (selector) { //这里不能简写为init(){}
                this[0] = document.getElementById(selector)
                this.length = 1
                console.log(this.constructor, 'pppp')
                console.log(this === A.fn, this === A.prototype, this, 'aaa')
                return this
            },
            size() {
                return this.length
            },
            length: 2
        }
        A.fn.init.prototype = A.fn //加上这个就可以获取到size方法了
        var demo = A('demo')
        var test = A('test')
        //console.log(demo, '0000') // { 0: div#demo, length: 1, init: ƒ, size: ƒ }
        console.log(demo.size()); //1
    </script>
    <script>
        var A = function (selector, context) {
            return new A.fn.init(selector, context)
        }
        A.fn = A.prototype = {
            constructor: A,
            init: function (selector, context) { //这里不能简写为init(){}
                this.length = 0
                context = context || document
                console.log(selector, 'selector')
                //
                if (~selector.indexOf("#")) {
                    this[0] = document.getElementById(selector.slice(1))
                    this.length = 1
                } else {
                    //在上下文中搜索
                    var doms = context.getElementsByTagName(selector), i = 0, len = doms.length;
                    for (; i < len; i++) {
                        this[i] = doms[i]
                    }
                    this.length = len;

                }
                //保存上下文和选择符
                this.context = context
                this.selector = selector
                return this
            },
            size() {
                return this.length
            },
            push: [].push,
            sort: [].sort,
            splice: [].splice,
            length: 2
        }
        A.fn.init.prototype = A.fn
        var demo = A('#demo')
        var test = A('test')
        console.log(demo, 'demo')  //init [div#demo, context: document, selector: '#demo']
        console.log(test, 'test')  //init [context: document, selector: 'test'] 'test'
    </script>
    <script>
        //对对象的拓展
        A.extend = A.fn.extend = function () {
            var i = 1, len = arguments.length, target = arguments[0], j;
            //如果只传一个参数
            if (i == len) {
                target = this
                i--;
            }
            for (; i < len; i++) {
                for (j in arguments[i]) {
                    target[j] = arguments[i][j]
                }
            }
            return target
        }

        var demo = A.extend({ first: 1 }, { second: 2 }, { third: 3 })
        console.log(demo, 'hahaha');  // { first: 1, second: 2, third: 3 }
        A.extend({ nickName: '高峰' }) //这里不能用name，会默认的显示函数的name A
        console.log(A.nickName, 'name')
        A.extend({
            camelCase(str) {
                return str.replace(/\-(\w)/g, function (all, letter) {
                    console.log(all, letter, 'n')
                    return letter.toUpperCase()
                })
            }
        })
        console.log(A.camelCase('test-demo'))
    </script>