<hr> <div id="div1"><h3> <font color=red> 代理模式 </font> <h3></div> 定义：当直接访问一个对象不方便或者不满足需要时，为其提供一个替身对象来控制对这个对象的访问 应用： 防抖动函数（debounce 常用于控制用户输入后回调函数触发的时机），节流函数（throttle 常用于控制resize、scroll等事件的触发频率） ```javascript var throttle = function (fn, interval) { var firstTime, timer return function () { var _this = this if(!firstTime) { fn.apply(this, arguments) firstTime = true } if (!timer) { timer = setTimeout(function() { fn.apply(_this, arguments) timer = null }, interval); } } } var onScroll = function () { console.log('onScroll', Date.now()) } var throttleOnScroll = throttle(onScroll, 2000) setInterval(throttleOnScroll, 300) // 每2秒执行一次onScroll函数 ``` 使用代理对象==加载图片==的例子来理解代理模式,当网络不好的时候，图片的加载需要一段时间，这就会产生空白，影响用户体验，这时候我们可在图片真正加载完之前，使用一张loading占位图片，等图片真正加载完再给图片设置src属性。 ```javascript class MyImage { constructor() { this.img = new Image() document.body.appendChild(this.img) } setSrc(src) { this.img.src = src } } class ProxyImage { constructor() { this.proxyImage = new Image() } setSrc(src) { let myImageObj = new MyImage() myImageObj.img.src = 'file://xxx.png' //为本地图片url this.proxyImage.src = src this.proxyImage.onload = function() { myImageObj.img.src = src } } } var proxyImage = new ProxyImage() proxyImage.setSrc('http://xxx.png') //服务器资源url ``` ## es6的代理 ```js class Vue{ constructor(data){ let _data = data; return new Proxy(this, { get(target, key){ return _data[key]; }, set(target, key, val){ _data[key] = val; return true; } }); } } let obj = new Vue({ name: '徐强', age: 20 }); obj.name = '刘思琪'; console.log(obj.name); ```