JS中有许多种模式,被用来解决不同的问题,下面就总结一下。
一、工厂模式
工厂模式用来实例化对象和返回对象,它可以解决创建多个对象的问题,但是所创建的对象类型都一致,没办法区分对象的类型。
操作实例:
function Factory(n,s){
//创建一个对象
var obj={};
obj.name=n;
obj.sex=s;
obj.sleep=function (){
return this.name+"睡觉";
}
return obj;
}
console.log(Factory("李四", "男"));
console.log(Factory("张三", "男"));
二、构造函数模式
构造函数模式:直接定义函数、this(指针), 指向当前实例的对象
里面的方法和属性直接写 this.***,没有明显的创建对象 ,没有返回值
操作实例:
function Page(){
this.nowpage=1;
this.totlepage=20;
this.data=null;
this.createpageLi=function (){
console.log("构造函数模式的方法");
}
}
//实例化对象
var page=new Page();
//直接调用方法
三、原型模式
原型模式中原型对象上所有的属性和方法共享。
操作实例:
function Person() {
}
//原型独享的属性和方法的
Person.prototype = {
name: "",
sex: "",
sleep: function (m) {
return this.name + "睡觉" + m;
}
}
var per1 = new Person();
per1.name = "张三";
per1.sex = "男";
console.log(per1);
console.log(per1.sleep("打呼噜"));
var per2 = new Person();
per2.name = "李四";
per2.sex = "男";
console.log(per2);
console.log(per2.sleep("不踏实"));
四、单例模式
“单”指的是返回一个对象,一个功能就是一个单体。
一个类仅提供一个实例,并且暴露出一个全局访问点。
操作实例:
var getObject = (function () {
var instance = null;
return function (info) {
if (!instance) {
instance = new Person(info);
}
return instance;
}
//返回一个单独的对象
})();
//调用单例模式
console.log(getObject("张三").getName());//张三
console.log(getObject("李四").getName());//张三
console.log(getObject("王五").getName());//张三
五、策略模式
策略模式是将算法和 算法的使用分离。
操作实例:
//按照分数增加比重 70 sabcd
//策略
var levelable={
S:8,
A:6,
B:4,
C:2,
D:0
}
//策略使用 策略集合
var levelScore={
baseScore:70,
S:function (){
return this.baseScore+levelable["S"];
},
A:function (){
return this.baseScore+levelable["A"];
},
B:function (){
return this.baseScore+levelable["B"];
},
C:function (){
return this.baseScore+levelable["C"];
},
D:function (){
return this.baseScore+levelable["D"];
}
}
//得分情况
function getScore(score,level)
{ levelScore.baseScore=score;
console.log(levelScore[level]());
}
getScore(60,"S");
getScore(80,"A");
getScore(70,"B");
getScore(50,"C");
getScore(90,"D");
六、观察者模式/订阅模式
这是原生JS里面的一个事件(最简单的订阅模式)。
操作实例:
var observer = {
subscribes: [],//订阅集合
//订阅
subscribe: function (types, fn) {
//检测有没有订阅过
if (!this.subscribes[types]) {
//添加订阅
this.subscribes[types] = [];
}
//处理订阅fn
typeof fn == "function" && this.subscribes[types].push(fn);//简写
console.log(this.subscribes);
},
//发布信息
publish: function () {
var types =[].shift.call(arguments),//获取订阅者
fns = this.subscribes[types];
//检测是否存在订阅
if (!fns || fns.length == 0) {
return;
}
//发布信息
for (var i = 0; i < fns.length; i++) {
fns[i].apply(this, arguments);
}
},
//删除订阅
remove: function (types, fn) {
//types 没有 直接所有的订阅全部删除
if (!types) {
this.subscribes = [];
return;
}
//获取当前某个人的订阅集
var fns = this.subscribes[types];
//检测订阅集是否存在
if (!fns || fns.length == 0) {
fns.length = 0;
return;
}
//检测fn
if (typeof fn !== "function") {
return;
}
//删除订阅的函数
for (var i = 0; i < fns.length; i++) {
if (fns[i] === fn) {
fns.splice(i, 1);
}
}
}
}
// 订阅岗位列表
function jobListForA(jobs) {
console.log('A类工作', jobs);
}
function jobListForB(jobs) {
console.log('B类工作', jobs);
}
//订阅上面的岗位列表方法
observer.subscribe("maodou", jobListForA);
observer.subscribe("maodou", jobListForB);
//订阅自定义的函数
observer.subscribe("personA", function (score) {
console.log("成绩:" + score);
});
observer.subscribe("personB", function () {
//获取当前时间
console.log(new Date().toLocaleString());
});
//发布消息调用
observer.publish("maodou", ["Java", "Web"]);
observer.publish("personA", 100);
//删除订阅
observer.remove("maodou", jobListForB);
observer.publish("maodou", ["Java", "Web"]);
observer.publish("personB");
七、总结
灵活运用JS里面的这几种模式,可以使代码更加的精炼。