首先有2个测试用的

标签

    
原本的内容1
    
原本的内容2

然后有个简单的JS插件

    ! function() {

        //默认属性
        var options = {
            smg1: 'Hello',
            smg2: 'world'
        };

        function changeText(el, stg1, stg2) {
            el.textContent = stg1 + ' ' + stg2 + '!';
        };

        var plugin = {

            config: function(opts) { //参数覆盖
                if (!opts) return options;
                for (var key in opts) {
                    options[key] = opts[key];
                };
                return this;
            },

            listen: function(elem) {
                var elems = document.querySelectorAll(elem);
                for (var i = 0; i < elems.length; i++) {
                    //功能函数
                    changeText(elems[i], options.smg1, options.smg2);
                };　　　
                return this;
            }

        };

        window.myPlugin = plugin; //暴露给全局
    }();

问题一：config和listen两个函数都return this了，但是还是无法链式调用？比如：

   myPlugin.listen('.demo').config({
        smg1: 'Goodbye',
        smg2: 'guys'
    });

但config在前面又可以：

    myPlugin.config({
        smg1: 'Goodbye',
        smg2: 'guys'
    }).listen('.demo');

问题二：前面的方式与构造函数的方式写插件有什么优劣么？比如下面这个同样的功能

    ! function() {
        var options = { //默认参数
            smg1: 'Hello',
            smg2: 'world'
        };

        function MyPlugin(opts) {
            this.config = Object.assign({}, options, opts); //合并参数
            this.listen(this.config.elem);
        }
        MyPlugin.prototype = {

            constructor: MyPlugin,
            listen: function(elem) {
                var elems = document.querySelectorAll(elem);
                for (var i = 0; i < elems.length; i++) {
                    this.changeText(elems[i], this.config.smg1, this.config.smg2);
                };
            },
            changeText: function(el, smg1, smg2) {
                el.textContent = smg1 + ' ' + smg2 + '!';
            }

        }
        window.MyPlugin = MyPlugin;
    }()
    //调用
            new MyPlugin({
            smg1: 'Hey',
            smg2: 'guys'
        }).listen('.demo');