Jquery 监听数据变化

插件编写

  //插件编写
        (function ($) {
            $.fn.myO = function () {

                var _setting = {
                    name: "初始化name"
                };
                this.setting = {};
                var tt = "aaa";  //内部变量，外部不可以调用
                var haa = function () {
                    alert("haa");
                } //内部方法，外部不可以调用
                this.name = "name";
                this.test = function () {
                    alert(tt);
                    change();
                    alert(tt);
                } //对外暴露的方法，外部可以调用
                function change() {
                    tt = "444";
                }//对外暴露的方法，外部可以调用

                tt = "sss";
                this.append("<input type='button'/>");
                Object.defineProperty(this, "setting", {
                    get() {
                        console.log("我被读取了");
                        return _setting;
                    },
                    set(val) {
                        console.log("我被赋值了", val);
                        _setting = val;
                    }
                })
                return this;
            }
        })(jQuery);

调用

     $(document).ready(function () {
            var it = $("#preview").myO();
            //it.test(); //对外暴露的方法，外部可以调用
            alert(it.setting.name);
            it.setting = {name: "重新命名后name"};
            alert(it.setting.name);

            var it2 = $("#preview22").myO();
            //it.test(); //对外暴露的方法，外部可以调用
            alert(it2.setting.name);
            it2.setting = {name: "重新命名后name第二个"};
            alert(it2.setting.name);
            alert(it.setting.name);
        });