JS常见的四种设计模式

海码学院
微信号：lime871117
海码教育旗下互联网资讯
学习资源免费分享平台

工厂模式

简单的工厂模式可以理解为解决多个相似的问题;

function CreatePerson(name,age,sex) {

复制代码

var obj = new Object();

复制代码

obj.name = name;

复制代码

obj.age = age;

复制代码

obj.sex = sex;

复制代码

obj.sayName = function(){

复制代码

return this.name;

复制代码

}

复制代码

return obj;

复制代码

}

复制代码

var p1 = new CreatePerson("longen",'28','男');

复制代码

var p2 = new CreatePerson("tugenhua",'27','女');

复制代码

console.log(p1.name); // longen

复制代码

console.log(p1.age); // 28

复制代码

console.log(p1.sex); // 男

复制代码

console.log(p1.sayName()); // longen

复制代码

[/code][code]console.log(p2.name); // tugenhua

复制代码

console.log(p2.age); // 27

复制代码

console.log(p2.sex); // 女

复制代码

console.log(p2.sayName()); // tugenhua

复制代码

单例模式

只能被实例化(构造函数给实例添加属性与方法)一次

// 单体模式

复制代码

var Singleton = function(name){

复制代码

this.name = name;

复制代码

};

复制代码

Singleton.prototype.getName = function(){

复制代码

return this.name;

复制代码

}

复制代码

// 获取实例对象

复制代码

var getInstance = (function() {

复制代码

var instance = null;

复制代码

return function(name) {

复制代码

if(!instance) {//相当于一个一次性阀门,只能实例化一次

复制代码

instance = new Singleton(name);

复制代码

}

复制代码

return instance;

复制代码

}

复制代码

})();

复制代码

// 测试单体模式的实例,所以a===b

复制代码

var a = getInstance("aa");

复制代码

var b = getInstance("bb");

复制代码

沙箱模式

将一些函数放到自执行函数里面,但要用闭包暴露接口,用变量接收暴露的接口,再调用里面的值,否则无法使用里面的值

let sandboxModel=(function(){

复制代码

function sayName(){};

复制代码

function sayAge(){};

复制代码

return{

复制代码

sayName:sayName,

复制代码

sayAge:sayAge

复制代码

}

复制代码

})()

复制代码

发布者订阅模式

就例如如我们关注了某一个公众号,然后他对应的有新的消息就会给你推送,

//发布者与订阅模式

复制代码

var shoeObj = {}; // 定义发布者

复制代码

shoeObj.list = []; // 缓存列表存放订阅者回调函数

复制代码

[/code][code] // 增加订阅者

复制代码

shoeObj.listen = function(fn) {

复制代码

shoeObj.list.push(fn); // 订阅消息添加到缓存列表

复制代码

}

复制代码

[/code][code] // 发布消息

复制代码

shoeObj.trigger = function() {

复制代码

for (var i = 0, fn; fn = this.list[i++];) {

复制代码

fn.apply(this, arguments);//第一个参数只是改变fn的this,

复制代码

}

复制代码

}

复制代码

// 小红订阅如下消息

复制代码

shoeObj.listen(function(color, size) {

复制代码

console.log("颜色是：" + color);

复制代码

console.log("尺码是：" + size);

复制代码

});

复制代码

[/code][code] // 小花订阅如下消息

复制代码

shoeObj.listen(function(color, size) {

复制代码

console.log("再次打印颜色是：" + color);

复制代码

console.log("再次打印尺码是：" + size);

复制代码

});

复制代码

shoeObj.trigger("红色", 40);

复制代码

shoeObj.trigger("黑色", 42);

复制代码

代码实现逻辑是用数组存贮订阅者, 发布者回调函数里面通知的方式是遍历订阅者数组,并将发布者内容传入订阅者数组

来源：博客园
版权归属原作者所有，如有侵权请联系我们

END