听飞狐聊JavaScript设计模式系列09

张春雷发布于2019-08-19 17:07 / 3105人阅读

摘要：说白了，就是对访问进行控制。这一回，主要聊了代理模式，虚拟代理，图片懒加载，难度适中下一回，聊一下适配器模式，难度也比较小。

本回内容介绍

上一回，聊了门面模式，DOM2级事件，事件委托，介一回，也比较容易，代理模式（proxy），代理对象控制对本体对象的访问，实现了同样的接口，并且会把任何方法的调用传递到本体对象。
说白了，就是对访问进行控制。直接上代码，走你：

1.代理模式

代理也是对象，主要就是保护本体对象，对本体对象进行访问控制，本体对象有的，代理对象也有，如下：

// 定义一个房子的接口,可以租，可以卖，这里就只实现一个好了，保留租的方法：rent，有兴趣的可以扩展另一个
var House = new Interface("House",["sale"]);

// 买方
function Buyer(name){
    this.name = name;
}

// 中介，也就是代理，这里传递的对象是买方对象
var Proxy = function(o){
    // 买方名字
    this.buyer = o.name;
    // 业主实例
    if(this.owner==null){
        this.owner = new Owner(o);
    }
    // 验证接口
    Interface.ensureImplements(this,House);
};

// 代理对象对本体对象的方法实现
Proxy.prototype = {
    // 还原构造器
    constructor:Proxy,
    // 代理对象同样实现本体的方法
    sale:function(money){
        return this.owner.sale(money);
    }
};

// 业主即本体，传递的对象依然是买方对象
var Owner = function(o){
    this.buyer = o.name;
    Interface.ensureImplements(this,House);
};

// 本体对象的方法实现
Owner.prototype = {
    constructor:Owner,
    // 本体对象的方法
    sale:function(money){
        return this.buyer+"支付了"+money+"万元买了别墅.";
    }
};
var br = new Buyer("飞狐");
alert(new Proxy(br).sale("500"));    // 飞狐支付了500万元买了别墅.

这个例子比较直观，买方，卖方，中介三种角色很好的诠释了代理模式，也比较好理解，看下一个例子，走你.

2. 虚拟代理

这里聊一个虚拟代理，就是在代理的方法被调用的时候再去实例化相关的对象。还记得之前的惰性单例模式么，虚拟代理有点类似，看例子：

// 定义一个年级
var Grades = function(){};

Grades.prototype = {
    // 检测人数
    check:function(o){
        alert(o.length+"人");
    }
}; 

// 年级代理
var GradesProxy = function() {
    // 先不初始化Grades.
    this.gra = null;
};

GradesProxy.prototype = {
    // 这里就是按需初始化
    init: function() {
        if (!this.gra) {
            this.gra = new Grades();
        }
    },
    // 检测学生人数
    check: function(s) {
        // 调用 init()
        this.init();
        return this.gra.check(s);
    }
}

// 测试
var students = ["大卫","撸壕","飞狐"];
var o = new GradesProxy();
o.check(students); //3人

这个例子比较简单，没有写太多方法，也没有多带带写学生类，用一个数组一笔带过，目的是更直观的展示在用时初始化本体对象。

惯例性装逼，今天看新闻，钟汉良导演，韩寒监制的新片《沙漏》，继《后会无期》后又一次合作，期待啊~~

这一回聊的内容少，难度很小，比较好理解。
下面的内容来一个实例，懒加载，懒加载是代理模式很好的一个实践。

JS图片懒加载

懒加载又叫延迟加载，通过自定义属性，把真实的img地址存到自定义属性中，如：data-url=”img”,而图片真正的src存的是loading的图片，如src=”loading.gif”，当拖动滚动条发生窗口的偏移，再动态将data-url的值赋给src; 实时的替换img的src的图片路径，绕么，看例子吧：

// 这里是html的代码，

    
    
    
    
    
    
// ...省略很多的图片

// 这里开始是js代码，没有写script，只是简单的模拟
function $(t){
    return document.getElementsByTagName(t);
}

// 获取id
function lazyLoad(el) {
    // 遍历需要加载的图片元素
    for (var i = 0, len = el.length; i < len; i++) {
        // 根据class属性判断是否已经加载过
        if (el[i].className != "load") {
            // 这里就是获取data-url的值，也就是真实图片路径，替代loading图片
            el[i].src = el[i].getAttribute("data-url");
            // 替代后加一个class属性已经加载过的标记
            el[i].className = "load"; 
        }
    }
};

// 滚动时执行
window.onscroll = function() { 
    lazyLoad($("img"));
};
 // 加载后执行
window.onload = function() {
    lazyLoad($("img"));
};

这里只是简单的模拟，代码量少，应该可以很容易看懂，懒加载运用比较广泛，可以提高性能，京东首页目前也是这么做的。

这一回，主要聊了代理模式，虚拟代理，图片懒加载，难度适中~~
下一回，聊一下适配器模式，难度也比较小。

客观看完点个赞，推荐推荐呗，嘿嘿~~

注：此系飞狐原创，转载请注明出处

专线服务 idc机房托管 javascript专题系列 javascript深入系列飞狐 javascript设计模式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78205.html

听飞狐聊JavaScript设计模式系列06

本回内容介绍上一回聊到JS中模拟接口，装饰者模式，掺元类，分析了backbone的继承源码，感觉还好吧！介一回，偶们来聊一下在JS单例模式(singleton)，单例模式其实运用很广泛，比如：jquery，AngularJS，underscore吖虾米的都是单例模式，来吧，直接开始咯： 1. 单例模式保证一个类只有一个实例，从全局命名空间里提供一个唯一的访问点来访问该对象。其实之前写过的对象...

hiYoHoo 2019-08-21 10:45 评论0 收藏0
听飞狐聊JavaScript设计模式系列02

摘要：本回内容介绍上一回聊到数据类型，简单的过了一遍，包括个数组新特性等，这一回来聊聊对象，结合数组来实战一些例子，在做题中成长，记忆会更深刻，来吧，开始咯创建实例的方式有两种使用操作符后跟构造函数飞狐使用对象字面量表示法飞狐也可以飞狐这种写法与本回内容介绍上一回聊到JS数据类型，简单的过了一遍，包括9个数组新特性等，这一回来聊聊Object对象，结合数组来实战一些例子，在做题中成长，记...

tangr206 2019-08-21 10:44 评论0 收藏0
听飞狐聊JavaScript设计模式系列11

摘要：桥接模式之特权函数特权函数，用一些具有特权的方法作为桥梁以便访问私有空间，可以回忆一下之前的系列。连续自然数分组，计算最多组的个数将至这个连续自然数分成组使每组相加的值相等。个数组中数字最多的一组有个此时的和为。本回内容介绍上一回，聊了适配器模式，图片预加载，介一回，聊桥接模式（Bridge），跟之前一样，难度比较小，桥接模式将抽象部分与它的实现部分分离，通过桥接模式联系彼此，同时...

wanglu1209 2019-08-19 17:12 评论0 收藏0
听飞狐聊JavaScript设计模式系列10

摘要：本回内容介绍上一回，聊了代理模式，虚拟代理，图片懒加载，介一回，也比较容易，适配器模式，用一个新的接口对现有类的接口进行包装，处理类与的不匹配。这一回，主要聊了适配器模式，图片预加载，主要还是理解下一回，聊一聊桥接模式，顺便做一做计算题。本回内容介绍上一回，聊了代理模式，虚拟代理，图片懒加载，介一回，也比较容易，适配器模式（Adapter），用一个新的接口对现有类的接口进行包装，处...

yexiaobai 2019-08-19 17:12 评论0 收藏0
听飞狐聊JavaScript设计模式系列14

摘要：本回内容介绍上一回，聊了聊状态模式，并介绍了一下介一回，聊链式编程，模拟一下，再模拟一下封装一个库。这一回，主要聊了链式调用，模拟了，尤其是，希望大家能喜欢这次代码分享。下一回，聊一聊的策略模式。本回内容介绍上一回，聊了聊状态模式（State），并介绍了一下vue.js；介一回，聊链式编程，模拟一下jQuery，再模拟一下underscore.js,封装一个库。 1. 链式调用 (...

fox_soyoung 2019-08-19 17:20 评论0 收藏0