前端必须懂的设计模式有哪些前端必须懂的设计模式是什么

11-21

0次

动机

由于一个对象不想或者不能直接引用另外一个对象，所以需要通过通过一个称之为“代理”的第三者来实现间接引用
代理模式就是为目标对象创造一个代理对象，在客户端和目标对象之间起到中介的作用
这样就可以在代理对象里增加一些逻辑判断、调用前或调用后执行一些操作，从而实现了扩展目标的功能
并且可以通过代理对象去掉客户不能看到的内容和服务或者添加客户需要的额外服务

通过引入一个新的对象（如小图片和远程代理对象）来实现对真实对象的操作或者将新的对象作为真实对象的一个替身，这种实现机制即为代理模式，通过引入代理对象来间接访问一个对象，这就是代理模式的模式动机。

定义

代理模式(Proxy Pattern) ：给某一个对象提供一个代理，并由代理对象控制对原对象的引用。代理模式的英文叫做Proxy或Surrogate，它是一种对象结构型模式。

生活中的案例：

火车票代购、房产中介、律师、海外代购、明星经纪人

类图和时序图

代理模式包含如下角色：

Subject: 抽象主题角色
Proxy: 代理主题角色
RealSubject: 真实主题角色

类图

时序图

一个例子-明星经纪人

abstract class Star {
    abstract answerPhone(): void;
}

class Angelababy extends Star {
    public available: boolean = true;
    answerPhone(): void {
        console.log('你好,我是Angelababy.');
    }
}
class AngelababyAgent extends Star {
    constructor(private angelababy: Angelababy) {
        super();
    }
    answerPhone(): void {
        console.log('你好,我是Angelababy的经纪人.');
        if (this.angelababy.available) {
            this.angelababy.answerPhone();
        }
    }
}
let angelababyAgent = new AngelababyAgent(new Angelababy());
angelababyAgent.answerPhone();

场景

事件委托代理

事件捕获指的是从document到触发事件的那个节点，即自上而下地去触发事件
事件冒泡是自下而上地去触发事件
绑定事件方法的第三个参数，就是控制事件触发顺序是否为事件捕获。true为事件捕获；false为事件冒泡,默认false。

<body>
    <ul id="list">
        <li>1li>
        <li>2li>
        <li>3li>
    ul>
<script> let list = document.querySelector('#list'); list.addEventListener('click',event=>{ alert(event.target.innerHTML); }); script>    
body>

虚拟代理(图片预加载)

app.js

let express=require('express');
let path=require('path')
let app=express();
app.get('/images/loading.gif',function (req,res) {
    res.sendFile(path.join(__dirname,req.path));
});
app.get('/images/:name',function (req,res) {
    setTimeout(() => {
        res.sendFile(path.join(__dirname,req.path));
    }, 2000);
});
app.get('/',function (req,res) {
    res.sendFile(path.resolve('index.html'));
});
app.listen(8080);

index.html

html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
    <style> .bg-container { width: 600px; height: 400px; margin: 100px auto; } .bg-container #bg-image { width: 100%; height: 100%; } style>
head>

<body>
    <div id="background">
        <button data-src="/images/bg1.jpg">背景1button>
        <button data-src="/images/bg2.jpg">背景2button>
    div>
    <div class="bg-container">
        <img id="bg-image" src="/images/bg1.jpg" />
    div>
    <script> let container = document.querySelector('#background'); class BackgroundImage { constructor() { this.bgImage = document.querySelector('#bg-image'); } setSrc(src) { this.bgImage.src = src; } } class LoadingBackgroundImage { static LOADING_URL= `/images/loading.gif`; constructor() { this.backgroundImage = new BackgroundImage(); } setSrc(src) { this.backgroundImage.setSrc(LoadingBackgroundImage.LOADING_URL); let img = new Image(); img.onload = () => { this.backgroundImage.setSrc(src); } img.src = src; } } let loadingBackgroundImage = new LoadingBackgroundImage(); container.addEventListener('click', function (event) { let src = event.target.dataset.src; loadingBackgroundImage.setSrc(src + '?ts=' + Date.now()); }); script>
body>

html>

虚拟代理(图片懒加载)

当前可视区域的高度 window.innerHeight || document.documentElement.clientHeight
元素距离可视区域顶部的高度 getBoundingClientRect().top
getBoundingClientRect
DOMRect 对象包含了一组用于描述边框的只读属性——left、top、right 和 bottom，单位为像素。除了 width 和 height 外的属性都是相对于视口的左上角位置而言的

html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Lazy-Loadtitle>
    <style> .image { width: 300px; height: 200px; background-color: #CCC; } .image img { width: 100%; height: 100%; } style>
head>

<body>
    <div class="image-container">
        <div class="image">
            <img data-src="/images/bg1.jpg">
        div>
        <div class="image">
            <img data-src="/images/bg2.jpg">
        div>
        <div class="image">
            <img data-src="/images/bg1.jpg">
        div>
        <div class="image">
            <img data-src="/images/bg2.jpg">
        div>
        <div class="image">
            <img data-src="/images/bg1.jpg">
        div>
        <div class="image">
            <img data-src="/images/bg2.jpg">
        div>
        <div class="image">
            <img data-src="/images/bg1.jpg">
        div>
        <div class="image">
            <img data-src="/images/bg2.jpg">
        div>
        <div class="image">
            <img data-src="/images/bg1.jpg">
        div>
        <div class="image">
            <img data-src="/images/bg2.jpg">
        div>
    div>
body>
<script> const imgs = document.getElementsByTagName('img'); const clientHeight = window.innerHeight || document.documentElement.clientHeight; let loadedIndex = 0; function lazyload() { for (let i = loadedIndex; i < imgs.length; i++) { if (clientHeight - imgs[i].getBoundingClientRect().top > 0) { imgs[i].src = imgs[i].dataset.src; loadedIndex = i + 1; } } } lazyload(); window.addEventListener('scroll', lazyload, false); script>
html>

缓存代理

有些时候可以用空间换时间

正整数的阶乘（factorial）

一个正整数的阶乘（factorial）是所有小于及等于该数的正整数的积，并且0的阶乘为1

const factorial = function f(num) {
    if (num === 1) {
        return 1;
    } else {
        return (num * f(num - 1));
    }
}

const proxy = function (fn) {
    const cache = {};  // 缓存对象
    return function (num) {
        if (num in cache) {
            return cache[num];   // 使用缓存代理
        }
        return cache[num] = fn.call(this, num);
    }
}

const proxyFactorial = proxy(factorial);
console.log(proxyFactorial(5));
console.log(proxyFactorial(5));
console.log(proxyFactorial(5));

斐波那契数列(Fibonacci sequence)

指的是这样一个数列：1、1、2、3、5、8、13、21、34。在数学上，斐波那契数列以如下被以递推的方法定义：F(1)=1,F(2)=1,F(n)=F(n-1)+F(n-2)（n>=3，n∈N*）

let count = 0;
function fib(n) {
    count++;
    return n <= 2 ? 1 : fib(n - 1) + fib(n - 2);
}
var result = fib(10);
console.log(result, count);//55 110

let count = 0;
const fibWithCache = (function () {
    let cache = {};
    function fib(n) {
        count++;
        if (cache[n]) {
            return cache[n];
        }
        let result = n <= 2 ? 1 : fib(n - 1) + fib(n - 2);
        cache[n] = result;
        return result;
    }
    return fib;
})();
var result = fibWithCache(10);
console.log(result, count);//55 17

防抖代理

通过防抖代理优化可以把多次请求合并为一次，提高性能
节流与防抖都是为了减少频繁触发事件回调
节流(Throttle)是在某段时间内不管触发了多少次回调都只认第一个，并在第一次结束后执行回调
防抖(Debounce)就是在某段时间不管触发了多少回调都只看最后一个

节流

html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
    <style> #container { width: 200px; height: 400px; border: 1px solid red; overflow: auto; } #container .content { height: 4000px; } style>
head>

<body>
    <div id="container">
        <div class="content">div>
    div>
    <script> function throttle(callback, interval) { let last; return function () { let context = this; let args = arguments; let now = Date.now(); if (last) { if (now - last >= interval) { last = now; callback.apply(context, args); } } else { callback.apply(context, args); last = now; } } } let lastTime = Date.now(); const throttle_scroll = throttle(() => { console.log('触发了滚动事件', (Date.now() - lastTime) / 1000); }, 1000); document.getElementById('container').addEventListener('scroll', throttle_scroll); script>
body>

html>

防抖

html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
    <style> #container { width: 200px; height: 400px; border: 1px solid red; overflow: auto; } #container .content { height: 4000px; } style>
head>

<body>
    <div id="container">
        <div class="content">div>
    div>
    <script> function debounce(callback, delay) { let timer; return function () { let context = this; let args = arguments; if (timer) clearTimeout(timer); timer = setTimeout(() => { callback.apply(context, args); }, delay); } } let lastTime = Date.now(); const throttle_scroll = debounce(() => { console.log('触发了滚动事件', (Date.now() - lastTime) / 1000); }, 1000); document.getElementById('container').addEventListener('scroll', throttle_scroll); script>
body>

html>

防抖案例 -未防抖

<body>
    <ul id="todos">
    ul>
<script> let todos = document.querySelector('#todos'); window.onload = function(){ fetch('/todos').then(res=>res.json()).then(response=>{ todos.innerHTML = response.map(item=>`${item.completed?"checked":""}/>${item.text}
`).join(''); }); } function toggle(id){ fetch(`/toggle/${id}`).then(res=>res.json()).then(response=>{ console.log('response',response); }); } todos.addEventListener('click',function(event){ let checkbox = event.target; let id = checkbox.value; toggle(id); }); script>
body>

app.js

let express=require('express');
let app=express();
app.use(express.static(__dirname));
let todos=[
    {id: 1,text: 'a',completed: false},
    {id: 2,text: 'b',completed: false},
    {id: 3,text: 'c',completed: false},
];
app.get('/todos',function (req,res) {
    res.json(todos);
});
app.get('/toggle/:id',function (req,res) {
    let id=req.params.id;
    todos = todos.map(item => {
        if (item.id==id) {
            item.completed=!item.completed;
        }
        return item;
    });
    res.json({code:0});
});
app.listen(8080);

防抖案例 -防抖

todos.html

<body>
    <ul id="todos">
    ul>
    <script> let todos = document.querySelector('#todos'); window.onload = function(){ fetch('/todos').then(res=>res.json()).then(response=>{ todos.innerHTML = response.map(item=>`${item.completed?"checked":""}/>${item.text}
`).join(''); }); } function toggle(id){ fetch(`/toggle/${id}`).then(res=>res.json()).then(response=>{ console.log('response',response); }); } let LazyToggle = (function(id){ let ids = []; let timer; return function(id){ ids.push(id); if(timer){ clearTimeout(timer); } timer = setTimeout(function(){ toggle(ids.join(',')); ids = null; clearTimeout(timer); timer = null; },2000); } })(); todos.addEventListener('click',function(event){ let checkbox = event.target; let id = checkbox.value; LazyToggle(id); }); script>

app.js

app.get('/toggle/:ids',function (req,res) {
    let ids=req.params.ids;
    ids=ids.split(',').map(item=>parseInt(item));
    todos = todos.map(item => {
        if (ids.includes(item.id)) {
            item.completed=!item.completed;
        }
        return item;
    });
    res.json({code:0});
});

代理跨域

正向代理

正向代理的对象是客户端，服务器端看不到真正的客户端
通过公司代理服务器上网

反向代理

反向代理的对象的服务端,客户端看不到真正的服务端
nginx代理应用服务器

proxy-server.js

const http = require('http');
const httpProxy = require('http-proxy');
//创建一个代理服务
const proxy = httpProxy.createProxyServer();
//创建http服务器并监听8888端口
let server = http.createServer(function (req, res) {
    //将用户的请求转发到本地9999端口上
    proxy.web(req, res, {
        target: 'http://127.0.0.1:9999'
    });
    //监听代理服务错误
    proxy.on('error', function (err) {
        console.log(err);
    });
});
server.listen(8888, '0.0.0.0');

real-server.js

const http = require('http');
let server = http.createServer(function (req, res) {
    res.end('9999');
});
server.listen(9999, '0.0.0.0');

代理跨域

nginx代理跨域
webpack-dev-server代理跨域
客户端代理跨域
当前的服务启动在origin(3000端口)上，但是调用的接口在target(4000端口)上
postMessage方法可以安全地实现跨源通信 otherWindow:其他窗口的一个引用 message:将要发送到其他window的数据message 将要发送到其他window的数据targetOrigin通过窗口的origin属性来指定哪些窗口能接收到消息事件，其值可以是字符串"*"（表示无限制）或者一个URI

otherWindow.postMessage(message, targetOrigin, [transfer]);

data 从其他window中传递过来的对象
origin 调用postMessage时消息发送方窗口的origin
source 对发送消息的窗口对象的引用

window.addEventListener("message", receiveMessage, false);

origin.js

let express=require('express');
let app=express();
app.use(express.static(__dirname));
app.listen(3000);

target.js

let express = require('express');
let app = express();
let bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({ extended: true }));
app.use(express.static(__dirname));
let users = [];
app.post('/register', function (req, res) {
    let body = req.body;
    let target = body.target;
    let callback = body.callback;
    let username = body.username;
    let password = body.password;
    let user = { username, password };
    let id = users.length == 0 ? 1 : users[users.length - 1].id + 1;
    user.id = id;
    users.push(user);
    res.status(302);
    res.header('Location', `${target}?callback=${callback}&args=${id}`);
    res.end();
});
app.listen(4000);

reg.html

html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
head>

<body>
    <script type="text/javascript"> window.addEventListener('message', function (event) { console.log(event.data); if (event.data.receiveId) { alert('用户ID=' + event.data.receiveId); } }) script>
    <iframe name="proxyIframe" id="proxyIframe" frameborder="0">iframe>
    <form action="http://localhost:4000/register" method="POST" target="proxyIframe">
        <input type="hidden" name="callback" value="receiveId">
        <input type="hidden" name="target" value="http://localhost:3000/target.html">
        用户名<input type="text" name="username" />
        密码<input type="text" name="password" />
        <input type="submit" value="提交">
    form>
body>

html>

target.html

html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
head>

<body>
    <script> window.onload = function () { var query = location.search.substr(1).split('&'); let callback, args; for (let i = 0, len = query.length; i < len; i++) { let item = query[i].split('='); if (item[0] == 'callback') { callback = item[1]; } else if (item[0] == 'args') { args = item[1]; } } try { window.parent.postMessage({ [callback]: args }, '*'); } catch (error) { console.log(error); } } script>
body>

html>

$.proxy

接受一个函数，然后返回一个新函数，并且这个新函数始终保持了特定的上下文语境。
jQuery.proxy( function, context ) function为执行的函数，content为函数的上下文this值会被设置成这个object对象

html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>jquery proxytitle>
head>

<body>
    <button id="btn">点我变红button>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js">script>
    <script> let btn = document.getElementById('btn'); btn.addEventListener('click', function () { setTimeout($.proxy((function () { $(this).css('color', 'red'); }), this), 1000); }); script>
body>

html>

function proxy(fn, context) {
    return function () {
       return fn.call(context, arguments);
    }
}

Proxy

Proxy 用于修改某些操作的默认行为
Proxy 可以理解成，在目标对象之前架设一层拦截,外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。
Proxy 这个词的原意是代理，用在这里表示由它来代理某些操作，可以译为代理器
Proxy
defineProperty

let wang={
    name: 'wanglaoshi',
    age: 29,
    height:165
}
let wangMama=new Proxy(wang,{
    get(target,key) {
        if (key == 'age') {
            return wang.age-1;
        } else if (key == 'height') {
            return wang.height-5;
        }
        return target[key];
    },
    set(target,key,val) {
        if (key == 'boyfriend') {
            let boyfriend=val;
            if (boyfriend.age>40) {
                throw new Error('太老');
            } else if (boyfriend.salary<20000) {
                throw new Error('太穷');
            } else {
                target[key]=val;
                return true;
            }
        }
    }
});
console.log(wangMama.age);
console.log(wangMama.height);
wangMama.boyfriend={
    age: 41,
    salary:3000
}

Vue2和Vue3

Vue2 中的变化侦测实现对 Object 及 Array 分别进行了不同的处理,Object 使用了 Object.defineProperty API,Array使用了拦截器对 Array 原型上的能够改变数据的方法进行拦截。虽然也实现了数据的变化侦测，但存在很多局限，比如对象新增属性无法被侦测，以及通过数组下边修改数组内容，也因此在 Vue2 中经常会使用到 $set 这个方法对数据修改，以保证依赖更新。

Vue3 中使用了 es6 的 Proxy API对数据代理，没有像 Vue2 中对原数据进行修改，只是加了代理包装，因此首先性能上会有所改善。其次解决了 Vue2 中变化侦测的局限性，可以不使用 $set 新增的对象属性及通过下标修改数组都能被侦测到。

对比

代理模式 VS 适配器模式

适配器提供不同接口，代理模式提供一模一样的接口

代理模式 VS 装饰器模式

装饰器模式原来的功能不变还可以使用，代理模式改变原来的功能

上一篇：手机上方的hd是什么意思手机的hd是什么功能

下一篇：原神枫原万叶突破材料在哪里获得「枫原万叶」突破材料，以及材料获取路径，素材收集

前端必须懂的设计模式有哪些前端必须懂的设计模式是什么

动机

定义

生活中的案例：

类图和时序图

类图

场景

事件委托代理

虚拟代理(图片预加载)

app.js

index.html

虚拟代理(图片懒加载)

缓存代理

正整数的阶乘（factorial）

斐波那契数列(Fibonacci sequence)

防抖代理

节流

防抖

防抖案例 -未防抖

防抖案例 -防抖

代理跨域

正向代理

反向代理

代理跨域

$.proxy

Proxy

Vue2和Vue3

对比

代理模式 VS 适配器模式

代理模式 VS 装饰器模式

相关内容

热门资讯

前端必须懂的设计模式有哪些 前端必须懂的设计模式是什么

动机

定义

生活中的案例：

类图和时序图

类图

场景

事件委托代理

虚拟代理(图片预加载)

app.js

index.html

虚拟代理(图片懒加载)

缓存代理

正整数的阶乘（factorial）

斐波那契数列(Fibonacci sequence)

防抖代理

节流

防抖

防抖案例 -未防抖

防抖案例 -防抖

代理跨域

正向代理

反向代理

代理跨域

$.proxy

Proxy

Vue2和Vue3

对比

代理模式 VS 适配器模式

代理模式 VS 装饰器模式

相关内容

热门资讯

前端必须懂的设计模式有哪些前端必须懂的设计模式是什么