设计模式浅析

面向对象

什么是面向对象

• 把客观对象抽象成属性数据和对数据的相关操作，把内部细节和不想关的信息隐藏起来，
• 把同一个类型的客观对象的属性数据和操作绑定在一起，封装成类，
• 并且允许分成不同层次进行抽象，通过继承实现属性和操作的共享
  • 面向对象的分析 OOA
  • 面向对象的设计 OOD
  • 面向对象的编程 OOP

概念

• 类、对象(实例)
• 父类是公共的

class Animal{
    constructor(name) {
        this.name=name;
    }
    eat() {
        console.log(`${this.name} eat`)
    }
}
let animal=new Person('动物');
animal.eat();

继承

• 子类继承父类
• 继承可以把公共方法抽离出来，提高复用，减少冗余

class Animal{
    constructor(name) {
        this.name=name;
    }
    eat() {
        console.log(`${this.name} eat`)
    }
    speak() {

    }
}
let animal=new Animal('动物');
animal.eat();

class Dog extends Animal{
    constructor(name,age) {
        super(name);
        this.age=age;
    }
    speak() {
        console.log(`${this.name} is barking!`);
    }
}
let dog=new Dog('🐶',5);
dog.eat();
dog.bark();

封装

• 把数据封装起来
• 减少耦合，不该外部访问的不要让外部访问
• 利于数据的接口权限管理
• ES6 目前不支持，一般认为_开头的都会私有的，不要使用
• 实现
  • public:公有修饰符，可以在类内或者类外使用public修饰的属性或者行为，默认修饰符
  • protected:受保护的修饰符，可以本类和子类中使用protected修饰的属性和行为
  • private : 私有修饰符，只可以在类内使用private修饰的属性和行为

class Animal {
    public name;
    protected age;
    private weight;
    constructor(name,age,weight) {
        this.name=name;
        this.age=age;
        this.weight=weight;
    }
}
class Person extends Animal {
    private money;
    constructor(name,age,weight,money) {
        super(name,age,weight);
        this.money=money;
    }
    getName() {
        console.log(this.name);
    }
    getAge() {
        console.log(this.age);
    }
    getWeight() {
        console.log(this.weight);
    }
}
let p=new Person('zfpx',9,100,100);
console.log(p.name);
console.log(p.age);
console.log(p.weight);
module: {
        rules: [
            {
                test: /\.js$/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets:["@babel/preset-env"]
                    }
                }
            },
            {
                test: /\.ts$/,
                use: {
                    loader: 'ts-loader'
                }
            }
        ]
    }

多态

• 同一个接口可以不同实现
• 保持子类的开放性和灵活性
• 面向接口编程

class Animal {
    public name;
    protected age;
    private weight;
    constructor(name,age,weight) {
        this.name=name;
        this.age=age;
        this.weight=weight;
    }
}
class Person extends Animal {
    private money;
    constructor(name,age,weight,money) {
        super(name,age,weight);
        this.money=money;
    }
    speak() {
        console.log('你好!');
    }    
}
class Dog extends Animal {
    private money;
    constructor(name,age,weight) {
        super(name,age,weight);
    }
    speak() {
        console.log('汪汪汪!');
    }    
}

let p=new Person('zfpx',10,10,10);
p.speak();
let d=new Dog('zfpx',10,10);
d.speak();

设计原则

• 按哪一种思路或者标准来实现功能
• 功能相同，可以有不同设计的方式
• 需求如果不断变化，设计的作用才能体现出来

SOLID五大设计原则

单一职责原则

• Single responsibility principle
• 一个程序只做好一件事
• 如果功能特别复杂就进行拆分

开放封闭原则

• Open Closed Principle
• 对扩展开放，对修改关闭
• 增加需求时，扩展新代码，而非修改已有代码
• 这是软件设计的终极目标

src/utils/request.js

function parseJSON(response) {
  return response.json();
}

function checkStatus(response) {
  if (response.status >= 200 && response.status < 300) {
    return response;
  }

  const error = new Error(response.statusText);
  error.response = response;
  throw error;
}


export default function request(url, options) {
  return fetch(url, options)
    .then(checkStatus)
    .then(parseJSON)
    .then(data=>{data})
    .catch(err => ({ err }));
}

L 里氏替换原则

• Liskov Substitution Principle
• 子类能覆盖父类
• 父类能出现的地方子类就能出现
• JS使用比较少

I 接口隔离原则

• Interface Segregation Principle
• 保持接口的单一独立，避免出现胖接口
• JS中没有接口，使用较少
• 类似于单一职责原则，更关注接口

D 依赖倒置原则

• Dependence Inversion Principle
• 面向接口编程，依赖于抽象而不依赖于具体实现
• 使用方只关注接口而不关注具体类的实现
• JS中使用较少（没有接口，弱类型）

工厂模式

简单工厂模式

• 简单工厂模式是由一个工厂对象决定创建出哪一种产品类的实例

类图

代码

class Plant{
    constructor(name) {
        this.name=name;
    }
    grow() {
        console.log('growing~~~~~~');    
    }
}
class Apple extends Plant{
    constructor(name) {
        super(name);
        this.taste='甜';
    }
}
class Orange extends Plant{
    constructor(name) {
        super(name);
        this.taste='酸';
    }
}
class Factory{
    static create(name) {
        switch (name) {
            case 'apple':
                return new Apple('苹果');
            case 'orange':
                return new Orange('橘子');
        }
    }
}
let apple=Factory.create('apple');
console.log(apple);
let orange=Factory.create('orange');
console.log(orange);

经典场景

jQuery

class jQuery{
    constructor(selector){
        let elements = Array.from(document.querySelectorAll(selector));
        let length = elements?elements.length:0;
        for(let i=0;i<length;i++){
            this[i]=elements[i];
        }
        this.length = length;
    }
    html(){

    }
}
window.$ = function(selector){
   return new jQuery(selector);
}

React

class Vnode{
    constructor(tag,attrs,children){
        this.tag = tag;
        this.attrs = attrs;
        this.children = children;
    }
}
React.createElement = function(tag,attrs,children){
  return new Vnode(tag,attr,children);
}

工厂方法模式

• 工厂方法模式Factory Method，又称多态性工厂模式。
• 在工厂方法模式中，核心的工厂类不再负责所有的产品的创建，而是将具体创建的工作交给子类去做。

类图

代码

class Plant{
    constructor(name) {
        this.name=name;
    }
    grow() {
        console.log('growing~~~~~~');    
    }
}
class Apple extends Plant{
    constructor(name) {
        super(name);
        this.taste='甜';
    }
}
class Orange extends Plant{
    constructor(name) {
        super(name);
        this.taste='酸';
    }
}
class AppleFactory{
    create() {
        return new Apple();
    }
}
class OrangeFactory{
    create() {
        return new Orange();
    }
}
const settings={
    'apple': AppleFactory,
    'orange':OrangeFactory
}
let apple=new settings['apple']().create();
console.log(apple);
let orange=new settings['orange']().create();
console.log(orange);

抽象工厂模式

• 抽象工厂模式是指当有多个抽象角色时，使用的一种工厂模式
• 抽象工厂模式可以向客户端提供一个接口，使客户端在不必指定产品的具体的情况下，创建多个产品族中的产品对象

类图

代码

class Button{
render() {
}
}
class AppleButton{
render() {
console.log('苹果按钮');
}
}
class WindowButton{
render() {
console.log('Windows按钮');
}
}
class Icon{
render() {
}
}
class AppleIcon{
render() {
console.log('苹果图标');
}
}
class WindowIcon{
render() {
console.log('Windows图标');
}
}
class Factory{
createButton() {}
createIcon() {}
}
class AppleFactory{
createButton() {
return new AppleButton();
}
createIcon() {
return new AppleButton();
}
}
class WindowsFactory{
createButton() {
return new WindowButton();
}
createIcon() {
return new WindowIcon();
}
}
const settings={
'apple': AppleFactory,
'windows':WindowsFactory
}
let appleFactory=new settings['apple']();
appleFactory.createButton().render();
appleFactory.createIcon().render();
let windowsFactory=new settings['windows']();
windowsFactory.createButton().render();
windowsFactory.createIcon().render();

单例模式

适用于共享，同时处理一个

类图

代码

typescript

class Window {
constructor(name) {
this.name = name;
}
static getInstance(name) {
if (!this.instance) {
this.instance = new Window(name);
}
return this.instance;
}
}
var w1 = Window.getInstance();
var w2 = Window.getInstance();
console.log(w1 === w2);

ES5单例模式

let  Window = function(name) {
this.name=name;
}
Window.prototype.getName=function () {
console.log(this.name);
}
Window.getInstance=(function () {
let window=null;
return function (name) {
if (!window)
window=new Window(name);
return window;
}
})();
let window=Window.getInstance('zfpx');
window.getName();

透明单例

let Window=(function () {
let window;
let Window=function (name) {
if (window) {
return window;
} else {
this.name=name;
return (window=this);
}
}
Window.prototype.getName=function () {
console.log(this.name);
}
return Window;
})();
let window1=new Window('zfpx');
let window2=new Window('zfpx');
window1.getName();
console.log(window1 === window2)

单例与构建分离

function Window(name) {
this.name=name;
}
Window.prototype.getName=function () {
console.log(this.name);
}
let createSingle=(function () {
let instance;
return function (name) {
if (!instance) {
instance=new Window();
}
return instance;
}
})();
let window1=new createSingle('zfpx');
let window2=new createSingle('zfpx');
window1.getName();
console.log(window1 === window2)

封装变化

function Window(name) {
this.name=name;
}
Window.prototype.getName=function () {
console.log(this.name);
}
let createSingle=function (Constructor) {
let instance;
return function () {
if (!instance) {
Constructor.apply(this,arguments);
Object.setPrototypeOf(this,Constructor.prototype)
instance=this;
}
return instance;
}
};
let CreateWindow=createSingle(Window);
let window1=new CreateWindow('zfpx');
let window2=new CreateWindow('zfpx');
window1.getName();
console.log(window1 === window2)

命名空间

• 用户编写的代码与内部的类/函数/常量或第三方类/函数/常量之间的名字冲突。

• 为很长的标识符名称创建一个别名（或简短）的名称，提高源代码的可读性。 jQuery

  let $ = {
  ajax(){},
  get(){},
  post(){}
  }
  

let utils={};
utils.def=function (namespace,fn) {
let namespaces=namespace.split('.');
let fnName=namespaces.pop();
let current=utils;
for (let i=0;i<namespaces.length;i++){
let namespace=namespaces[i];
if (!current[namespace]) {
current[namespace]={};
}
current=current[namespace];
}
current[fnName]=fn;
}
utils.def('dom.attr',function (key) {
console.log('dom.attr');
});
utils.def('dom.html',function (html) {
console.log('dom.html');
});
utils.def('string.trim',function () {
console.log('string.trim');
});
utils.dom.attr('src');
utils.string.trim(' aaa ');

场景

jQuery

if(window.jQuery!=null){
return window.jQuery;
}else{
//init~~~~~~~
}

模态窗口

class Login{
constructor() {
this.element=document.createElement('div');
this.element.innerHTML=(
`
用户名 
登录
`
);
this.element.style.cssText='width: 100px; height: 100px; position: absolute; left: 50%; top: 50%; display: block;';
/* this.element.style.width='100px';
this.element.style.height='100px';
this.element.style.position='absolute';
this.element.style.left='50%';
this.element.style.top='50%'; */
document.body.appendChild(this.element);
}
show() {
this.element.style.display='block';
}
hide() {
this.element.style.display='none';
}
}
Login.getInstance=(function () {
let instance;
return function () {
if (!instance) {
instance=new Login();
}
return instance;
}
})();
document.getElementById('showBtn').addEventListener('click',function (event) {
Login.getInstance().show();
});
document.getElementById('hideBtn').addEventListener('click',function (event) {
Login.getInstance().hide();
});

store

function createStore(reducer) {
let state;
let listeners=[];
function getState() {
return state;
}
function dispatch(action) {
state=reducer(state,action);
listeners.forEach(l=>l());
}
function subscribe(listener) {
listeners.push(listener);
return () => {
listeners = listeners.filter(item => item!=listener);
console.log(listeners);
}
}
dispatch({});
return {
getState,
dispatch,
subscribe
}
}
let store = createStore();

缓存

let express=require('express');
let fs=require('fs');
let cache={};
let app=express();
app.get('/user/:id',function (req,res) {
let id=req.params.id;
let user=cache.get(id);
if (user) {
res.json(user);
} else {
fs.readFile(`./users/${id}.json`,'utf8',function (err,data) {
let user=JSON.parse(data);
cache.put(id,user);
res.json(user);
});
}
});
app.get('/user',function (req,res) {
let user=req.query;
fs.writeFile(`./users/${user.id}.json`,JSON.stringify(user),(err) => {
console.log(err);
res.json({code: 0,data: '写入成功'});
});
});
app.listen(3000);

LRU缓存

• lru-cache
• 为LRU Cache设计一个数据结构，它支持两个操作：
  • 1）get(key)：如果key在cache中，则返回对应的value值，否则返回-1
  • 2）set(key,value):如果key不在cache中，则将该(key,value)插入cache中（注意，如果cache已满，则必须把最近最久未使用的元素从cache中删除）；如果key在cache中，则重置value的值。

/**
- 用一个数组来存储数据，给每一个数据项标记一个访问时间戳
- 每次插入新数据项的时候，先把数组中存在的数据项的时间戳自增,并将新数据项的时间戳置为0并插入到数组中
- 每次访问数组中的数据项的时候，将被访问的数据项的时间戳置为0。
- 当数组空间已满时，将时间戳最大的数据项淘汰。
*/
class LRUCache{
constructor(capacity) {
this.capacity=capacity;
this.members=[];
}
put(key,value) {
let found=false;
let oldestIndex=-1;
let oldestAge=-1;
for (let i=0;i<this.members.length;i++){
let member=this.members[i];
if (member.age > oldestAge) {
oldestIndex=i;
oldestAge=member.age;
}
if (member.key==key) {
this.members[i]={key,value,age: 0};
found=true;
} else {
member++;
}
}
if (!found) {
if (this.members.length>=this.capacity) {
this.members.splice(oldestIndex,1);
}
this.members[this.members.length]={
key,
value,
age:0
}
}
}
get(key) {
for (let i=0;i<this.members.length;i++){
let member=this.members[i];
if (member.key==key) {
member.age=0;
return member.value;
}
}    
return -1;
}
}
let cache=new LRUCache(3);
cache.put('1',1);
cache.put('2',2);
cache.put('3',3);
console.log(cache.get('1'));
console.log(cache.get('2'));
console.log(cache.get('3'));
cache.put('4',4);
console.log(cache.get('1'));
console.log(cache.get('4'));
console.log(cache);

适配器模式

• 旧的接口和使用者不兼容
• 中间加一个适配器转换接口

代码

class Power{
charge() {
return '220V';
}
}
class Adapter{
constructor() {
this.power=new Power();
}
charge() {
let power=this.power.charge();
return `${power} => 12V`;
}
}
class Client{
constructor() {
this.adapter=new Adapter();
}
use() {
console.log(this.adapter.charge());
}
}
new Client().use();

场景

插件适配

• 适配参数
• 适配后端接口数据

function ajax(options){
let _default = {
method:'GET',
dataType:'json'
}
for(let attr in options){
_default[attr] = options[attr]||_default[attr];
}
}
function get(url){
let options = {method:'GET',url};
ajax(options);
}

promisify

let fs=require('fs');
function promisify(readFile) {
return function (filename,encoding) {
return new Promise(function (resolve,reject) {
readFile(filename,encoding,function (err,data) {
if (err)
reject(err);
else
resolve(data);
})
});
}
}
let readFile=promisify(fs.readFile);
readFile('./1.txt','utf8').then(data => console.log(data));

jquery

let $=require('jquery');
$.ajax({
url,
type: 'POST',
dataType: 'json',
data:{id:1}
});
let $={
ajax(options) {
fetch(options.url,{
method: options.type,
body:JSON.stringify(options.data)
})
}
}

computed

<!DOCTYPE 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">
<script src="https://cdn.bootcss.com/vue/2.5.17/vue.js"></script>
<title>vue</title>
</head>
<body>
<div id="root">
<p>{{name}}</p>
<p>{{upperName}}</p>
</div>    
<script>
let vm=new Vue({
el: '#root',
data: {
name:'zfpx'
},
computed: {
upperName() {
return this.name.toUpperCase();
}
}
});
</script>
</body>
</html>

装饰器模式

• 在不改变其原有的结构和功能为对象添加新功能
• 装饰比继承更加灵活

代码

class Duck{
eat(food) {
console.log('吃${food}');
}
}
class TangDuck{
constructor() {
this.duck=new Duck();
}
eat() {
this.duck.eat();
console.log('谢谢');
}
}

包装器

装饰器模式是将一个对象嵌入另一个对象之中，实际上相当于这个对象被另一个对象包装起来，形成一条包装链。请求随着这条链条依次传递到所有的对象，每个对象有处理这个请求的机会。

class Coffee{
make(water){
return `${water}+咖啡`;
}
cost(){
return 10;
}
}
class MilkCoffee{
constructor(parent){
this.parent = parent;
}
make(water){
return `${this.parent.make(water)}+牛奶`;
}
cost(){
return this.parent.cost()+1;
}
}
class SugerCoffee{
constructor(parent){
this.parent = parent;
}
make(water){
return `${this.parent.make(water)}+糖`;
}
cost(){
return this.parent.cost()+2;
}
}
let coffee = new Coffee();
let milkCoffee = new MilkCoffee(coffee);
let milksugerCoffee = new SugerCoffee(milkCoffee);
console.log(milksugerCoffee.make('水')+'='+milksugerCoffee.cost());

AOP

• 在软件业，AOP为Aspect Oriented Programming的缩写，意为：面向切面编程

• 可以通过预编译方式和运行期动态代理实现在不修改源代码的情况下给程序动态统一添加功能的一种技术

  Function.prototype.before = function(beforeFn){
  let _this = this;
  return function(){
  beforeFn.apply(this,arguments);
  return _this.apply(this,arguments);
  }
  }
  Function.prototype.after = function(afterFn){
  let _this = this;
  return function(){
  _this.apply(this,arguments);
  afterFn.apply(this,arguments);
  }
  }
  function buy(money,goods){
  console.log(`花${money}买${goods}`);
  }
  buy = buy.before(function(){
  console.log(`向媳妇申请1块钱.`);
  });
  buy = buy.after(function(){
  console.log(`把剩下的2毛钱还给媳妇.`);
  });
  buy(.8,'盐');
  

场景

埋点

埋点分析，是网站分析的一种常用的数据采集方法

• 埋点方式
  • 服务器层面的：主要是通过客户端的请求进行分析
  • 客户端层面的：通过埋点进行相应的分析
    • 代码埋点
    • 自动化埋点：通过AOP思想对相应的方法进行统计
    • 第三方实现 百度、友盟等…

<body>
<button data-name="西瓜" id="watermelon">西瓜</button>
<button data-name="苹果" id="apple">苹果</button>
<script>
let watermelon = document.getElementById('watermelon');
let apple = document.getElementById('apple');
Function.prototype.after = function(afterFn){
let _this = this;
return function(){
_this.apply(this,arguments);
afterFn.apply(this,arguments);
}
}
function click(){
console.log('点击'+this.dataset.name);
}
click = click.after(function(){
let img = new Image();
img.src = `http://localhost:3000?name=${this.dataset.name}`;
});
Array.from(document.querySelectorAll('button')).forEach(function(button){
button.addEventListener('click',click);
});
let express = require('express');
let app = express();
app.get('/',function(req,res){
console.log('name',req.query.name);
res.end('ok');
});
app.listen(3000);

表单校验

<body>
<form action="">
用户名<input type="text" name="username" id="username">
密码<input type="text" name="password" id="password">
<button id="submit-btn" >提交</button>
</form>
<script>
Function.prototype.before = function(beforeFn){
let _this = this;
return function(){
let ret = beforeFn.apply(this,arguments);
if(ret)
_this.apply(this,arguments);
}
}
function submit(){
alert('提交表单');
}
submit= submit.before(function(){
let username = document.getElementById('username').value;
if(username.length<6){
return alert('用户名不能少于6位');
}
return true;
});
submit = submit.before(function(){
let username = document.getElementById('username').value;
if(!username){
return alert('用户名不能为空');
}
return true;
});
document.getElementById('submit-btn').addEventListener('click',submit);

防CSRF攻击

• CSRF通过伪装来自受信任用户的请求来利用受信任的网站

受信任网站

let express = require('express');
let bodyParser = require('body-parser');
let session = require('express-session');
let path = require('path');
let app = express();
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended:true}));
app.use(session({
resave:true,
secret:'zfpx',
saveUninitialized:true
}));
app.set('view engine','ejs');
app.set('views',path.resolve('views'));
app.engine('html',require('ejs').__express);
let users = {};
app.get('/login',function(req,res){
res.render('login.html');
});
app.post('/login',function(req,res){
let body = req.body;
users[body.username] = 100;
req.session.username = body.username;
res.json({code:0,data:'登录成功'});
});
app.get('/money',function(req,res){
res.send(users[req.session.username]+"元");
});
app.get('/withdraw',function(req,res){
let token = req.session.token =  Math.random()+'';
res.cookie('token',token);
res.render('withdraw.html');
});
app.post('/withdraw',function(req,res){
//users[req.session.username] -= (req.body.money?Number(req.body.money):10);
//res.json({code:0,data:'取款成功'});
console.log(req.body.token, req.session.token)
if(req.body.token== req.session.token){
users[req.session.username] -= (req.body.money?parseInt(req.body.money):10);
res.json({code:0,data:'取款成功'});
}else{
res.json({code:1,data:'取款失败'});
} 
});
app.listen(3000);

login

<body>
<a href="http://localhost:3000/money">查看余额</a>
<a href="http://localhost:3000/withdraw">取款</a>
用户名 <input type="text" name="username" id="username">
<button onclick="login()">提交</button>
<script>
function ajax(method,url,data){
let xhr = new XMLHttpRequest;
xhr.open(method,url,true);
xhr.setRequestHeader('Content-Type','application/json');
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
console.log(xhr.responseText);
}
}
xhr.send(JSON.stringify(data));
}
function login(){
let username = document.getElementById('username').value;
ajax('POST','/login',{username});
}
</script>
</body>

取款

<body>
金额 <input type="text" name="money" id="money">
<button onclick="login()">提交</button>
<script>
Function.prototype.before = function(beforeFn){
let _this = this;
return function(){
beforeFn.apply(this,arguments);
return _this.apply(this,arguments);
}
}
function ajax(method,url,data){
let xhr = new XMLHttpRequest;
xhr.open(method,url,true);
xhr.setRequestHeader('Content-Type','application/json');
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
console.log(xhr.responseText);
}
}
xhr.send(JSON.stringify(data));
}
ajax = ajax.before(function(method,url,data){
let result = document.cookie.match(/(^|; )token=(.+?)($|; )/);
console.log(result,result);
data.token = result[2];
});
function login(){
let money = document.getElementById('money').value;
ajax('POST','/withdraw',{money});
}
</script>
</body>

非信任网站

let express = require('express');
let path = require('path');
let app = express();
app.set('view engine','ejs');
app.set('views',path.resolve('views'));
app.engine('html',require('ejs').__express);
app.get('/',function(req,res){
res.render('csrf.html');
});
app.get('/form',function(req,res){
res.render('form.html');
});
app.listen(4000);

csrf

<body>
<img src="https://www.baidu.com/img/bd_logo1.png"/>
<iframe src="/form" frameborder="0" style="width:0;height:0"></iframe>
</body>

form

<body>
<form id="myform" action="http://localhost:3000/withdraw" method="POST">
<input type="text" name="money" id="money" value="10">
</form>
<script>
setTimeout(function(){
document.getElementById('myform').submit();
},100);
</script>
</body>

支持decorators

• babel-plugin-proposal-decorators

  "plugins": [
  ["@babel/plugin-proposal-decorators", { "legacy": true }],
  ["@babel/plugin-proposal-class-properties", { "loose" : true }]
  ]
  

  7.3.5 类decorators

  `
  

  js @testable class Person{

} function testable(target) { target.testable=true; } console.log(Person.testable);

```js
let Hooks={
componentWillMount() {
console.log('componentWillMount');
},
componentDidMount() {
console.log('componentDidMount');
}
}
function mixins(...others) {
return function (target) {
Object.assign(target.prototype,...others);
}
}
@mixins(Hooks)
class Component{
}
let c=new Component();
console.log(c);

方法decorators

• core-decorators

function readonly(target,attr,descriptor) {
descriptor.writable=false;
}
class Circle{
@readonly
PI=3.14;
}
let c=new Circle();
c.PI=100;
console.log(c.PI)
function logger(target,attr,descriptor) {
let oldVal=descriptor.value;
descriptor.value=function (...args) {
console.log(`参数:${args}`);
return oldVal(...args);
}
}
class Caculator{
@logger
sum(a,b) {
return a+b;
}
}
let c=new Caculator();
let ret=c.sum(1,2);
console.log(ret);
let {readonly}=require('core-decorators');
function deprecate(msg,options) {
return function (target,attr,descriptor) {
//DEPRECATION Caculator#sum: This function will be removed in future versions.
let oldVal=descriptor.value;
descriptor.value=function (...args) {
let message=msg? msg:`DEPRECATION ${target.constructor.name}#${attr}: This function will be removed in future versions.`;
let see=options&&options.url? `see ${options.url}`:``;
console.warn(message+'\r
'+see);
return oldVal(...args);
}
}
}
class Caculator{
@readonly PI=3.14;
@deprecate
sum(a,b) {
return a+b;
}
@deprecate('stop using this')
minus(a,b) {
return a-b;
}
@deprecate('stop using this',{url:'http://www.baidu.com'})
multiply(a,b) {
return a*b;
}
}
let c=new Caculator();
c.PI=5;
console.log(c.PI);
let ret=c.sum(1,2);
console.log(ret);
let ret2=c.minus(2,1);
console.log(ret2);
let ret3=c.multiply(2,1);
console.log(ret3);

代理模式

• 由于一个对象不能直接引用另外一个对象，所以需要通过代理对象在这两个对象之间起到中介作用
• 可以在使用者和目标对象之间加一个代理对象,通过代理可以实现控制

代码

class Goole{
constructor() {    }
get() {
return 'google';
}
}
class Proxy {
constructor() {
this.google=new Goole();
}
get() {
return this.google.get();
}
}
let proxy = new Proxy();
let ret = proxy.get();
console.log(ret);

场景

事件委托

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

<body>
<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
</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

<!DOCTYPE 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>Document</title>
<style>
*{
padding:0;
margin:0;
}
ul,li{
list-style:none;
}
#background{
position:absolute;
border:1px solid green;
right:10px;
top:10px;
}
#background li{
float:left;
margin-left:10px;
text-align:center;
border:1px solid red;
border-radius:5px;
}
#myImage{
width:600px;
height:400px;
margin:100px auto;
}
#myImage img{
width:100%;
height:100%;
}
</style>
</head>
<body>
<ul id="background">
<li data-src="/images/bg1.jpg">图片1</li>
<li data-src="/images/bg2.jpg">图片2</li>
</ul>
<div id="myImage">
</div>
<script>
let container = document.querySelector('#background');
let myImage = document.querySelector('#myImage');
let Background = (function(){
let img = new Image();
myImage.appendChild(img);
return {
set(src){
img.src = src;
}
}
})();
let LoadingBackground = (function(){
let img = new Image();
img.onload = function(){
Background.set(this.src);
}
return {
set(src){ 
Background.set(`/images/loading.gif`);
img.src = src;
}
}
})();
container.addEventListener('click',function(event){
let src = event.target.dataset.src;
LoadingBackground.set(src+'?ts='+Date.now());
});
</script>
</body>
</html>

• 更符合单一职责原则和开闭原则

防抖代理

todo.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=>`
<input value="${item.id}" type="checkbox" ${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>

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=>`
<input value="${item.id}" type="checkbox" ${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){
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

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);

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});
});

代理跨域

3000.js

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

4000.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);

index.html

<script type="text/javascript">
function receiveId(data){
alert('用户ID='+data);
}
</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>

target.html

window.onload = function(){
var query = location.search.substr(1).split('&');
let fn,args;
for(let i=0,len=query.length;i<len;i++){
let item = query[i].split('=');
if(item[0]=='callback'){
fn = item[1];
}else if(item[0] == 'args'){
args = item[1];
}
}
try{
eval(`top.${fn}('${args}')`);
}catch(e){}
}

代理缓存

缓存代理可以为开销大的计算结果提供暂时的存储

0!=1，n!=(n-1)!×n
let m = function (n) {
if (n<=1) {
return 1;
} else {
return n*m(n-1);
}
}
function sum(n) {
let result=0;
for (let i=1;i<=n;i++){
result+=m(i);
}
return result;
}
console.log(sum(4));
let m = function (n) {
if (n<=1) {
return 1;
} else {
return n*m(n-1);
}
}
let sum=(function () {
let cache={};
return function sum(n) {
let result=0;
for (let i=1;i<=n;i++){
let r=cache[i];
if (r) {
result+=r;
} else {
r=m(i);
cache[i]=r;
result+=r;
}
}
return result;
}
})()
console.log(sum(4));

$.proxy

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

<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>  

Proxy

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

let wang={
name: 'wangy',
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
}

• 代理模式 VS 适配器模式 适配器提供不同接口，代理模式提供一模一样的接口
• 代理模式 VS 装饰器模式 装饰器模式原来的功能不变还可以使用，代理模式改变原来的功能

外观模式

该模式就是把一些复杂的流程封装成一个接口供给外部用户更简单的使用

• 门面角色：外观模式的核心。它被客户角色调用，它熟悉子系统的功能。内部根据客户角色的需求预定了几种功能的组合
• 子系统角色:实现了子系统的功能。它对客户角色和Facade时未知的
• 客户角色:通过调用Facede来完成要实现的功能

代码

class Sum{
sum(a,b) {
return a+b;
}
}
class Minus{
minus(a,b) {
return a-b;
}
}
class Multiply{
multiply(a,b) {
return a * b;
}
}
class Calculator{
constructor() {
this.sumObj=new Sum();
this.minusObj=new Minus();
this.multiplyObj=new Multiply();
}
sum(...args) {
this.sumObj.sum(...args);
}
minus(...args) {
this.minusObj.minus(...args);
}
multiply(...args) {
this.multiplyObj.multiply(...args);
}
}
let calculator=new Calculator();
calculator.sum(1,2);
calculator.minus(1,2);
calculator.multiply(1,2);

代码

class CPU{
start() {console.log('打开CPU');}
}
class Memory{
start() {console.log('打开内存');}
}
class Disk{
start() {console.log('打开硬盘');}
}
class Computer{
constructor() {
this.cpu=new CPU();
this.memory=new Memory();
this.disk=new Disk();
}
start() {
this.cpu.start();
this.memory.start();
this.disk.start();
}
}
new Computer().start();

场景

• 为复杂的模块或子系统提供外界访问的模块
• 子系统相互独立

redux

• redux

观察者模式

• 被观察者供维护观察者的一系列方法
• 观察者提供更新接口
• 观察者把自己注册到被观察者里
• 在被观察者发生变化时候，调用观察者的更新方法

代码

class Star{
constructor(name) {
this.name=name;
this.state='';
this.observers=[];
}
getState() {
return this.state;
}
setState(state) {
this.state=state;
this.notifyAllObservers();
}
attach(observer) {
this.observers.push(observer);
}
notifyAllObservers() {
this.observers.forEach(observer=>observer.update());
}
}
class Fan{
constructor(name,subject) {
this.name=name;
this.subject=subject;
this.subject.attach(this);
}
update() {
console.log(`${this.subject.name}有新的状态-${this.subject.getState()},${this.name}正在更新`);    
}
}
let star=new Star('赵丽颖');
let fan1=new Fan('姜老师',star);
star.setState('结婚');

场景

事件绑定

    <button id="btn">click</button>
<script>
let btn = document.getElementById('btn');
btn.addEventListener('click',()=>{alert(1)});
btn.addEventListener('click',()=>{alert(2)});
btn.addEventListener('click',()=>{alert(3)});
</script>

Promise

class Promise{
constructor(fn) {
this.callbacks=[];
let resolve=() => {
this.callbacks.forEach(callback => callback())
};
fn(resolve);
}
then(callback) {
this.callbacks.push(callback);
}
}
let promise=new Promise(function (resolve,reject) {
setTimeout(function () {
resolve(100);
},1000);
});
promise.then(() => console.log(1));
promise.then(() => console.log(2));

callbacks

• JQuery.Callbacks是jQuery1.7+之后引入的，用来进行函数队列的add、remove、fire、lock等操作
• 并提供once、memory、unique、stopOnFalse四个option进行一些特殊的控制。
• Callbacks对象其实就是一个函数队列，获得Callbacks对象之后 ，就可以向这个集合中增加或者删除函数。add和remove功能相反，函数参数是相同的，empty()删除回调列表中的所有函数

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
function Callbacks(){
let observers = [];
function add(observer){
observers.push(observer);
}
function remove(observer){
let index = observers.indexOf(observer);
if(index != -1)
observers.splice(index,1);
}
function fire(){
observers.forEach(item=>item());
}
return {
add,
remove,
fire
}
}
let callbacks = Callbacks();
let a1= ()=>alert(1);
let a2= ()=>alert(2);
let a3= ()=>alert(13);
callbacks.add(a1);
callbacks.add(a2);
callbacks.add(a3);
callbacks.remove(a3);
callbacks.fire();
</script>

events

自定义事件

const EventEmitter=require('./events');
let subject=new EventEmitter();
subject.on('click',function (name) {
console.log(1,name);
});
subject.on('click',function (name) {
console.log(2,name);
});
subject.emit('click','zfpx');

events.js

class EventEmitter{
constructor() {
this._events={};
}
on(type,listener) {
let listeners=this._events[type];
if (listeners) {
listeners.push(listener);
} else {
this._events[type]=[listener];
}
}
emit(type) {
let listeners=this._events[type];
let args=Array.from(arguments).slice(1);
listeners.forEach(listener => listener(...args));
}
}
module.exports = EventEmitter;