js开发模式

1.工厂模式
使用函数 直接创建对象返回对象
避免多次创建对象

//创建一个对象
function Factory(name,sex,age,job){
var obj={};
obj.name=name;
obj.sex=sex;
obj.age=age;
obj.job=job;
obj.eat=function (){
return this.name+“吃饭!”;
}
return obj;}
console.log(Factory(“张三”,“男”,18,“学生”));
console.log(Factory(“李四”,“男”,22,“厨子”));*/

//用户权限的检测
function Factory(role) {
if (this instanceof Factory) {
return thisrole;
}
else {
return new Factory(role);
}
}

//使用原型对象 写规则对应的权限方法
Factory.prototype = {
admin: function () {
return {
name: “管理人员”,
list: [“增加”, “删除”, “修改”, “查找”]}},
common: function () {
return {
name: “普通用户”,
list: [“查找”]} }
}

var quan = new Factory(“admin”);
console.log(quan);
在这里插入图片描述
var quanxian = Factory(“common”);
console.log(quanxian);
在这里插入图片描述
2.构造函数模式
把程序抽象成方法
抽象数据分页
function Page(){
this.nowPage=1;
this.totlePage=0;
this.PageNum=20;
this.totle=0;
this.data=null;
this.getTotlePage=function (){
//使用ajax 去服务器 获取总数居条数
this.totle=10000;
this.totlePage=Math.ceil(this.totle/this.PageNum); };
this.getNowData=function (){
//使用ajax 去后台获取当前页 的20 条数据
//http://www.maodou.com?now=1&num=20
this.data=[];
//直接进行页面渲染
};
this.init=function (){
//获取总页数
this.getTotlePage();
//获取当前页数据
this.getNowData(); }
}
var page=new Page();
page.init();

3.原型模式
原型对象上的属性和方法是共享的
空对象获取属性是 自身没有改属性 则原型对象上的属性充当默认值
设置空对象属性时 是给自己设置属性 不会修改原型对象上的属性 应为原型对象上的属性是共享的
缺点: 是原型对象属性方法共享
可以搭配 函数构造模式 + 原型模式 混合模式
function Person() {

}
Person.prototype = {
constructor: Person,
name: “默认值”,
sex: ‘’,
sleep: function (m) {
return this.name + “睡觉” + m;
}
}
//创建人
var c1 = new Person();
c1.name = “张三”
console.log(c1.sleep(“打呼噜”));

var c2 = new Person();
console.log(c2.sleep(“不踏实”));

混和模式
function Animal(n, c) {
this.name = n;
this.color = c;
}
Animal.prototype = {
eat: function (m) {
return this.name + “吃” + m; } }

var cat = new Animal(“小花”, “花色”);
console.log(cat.eat(“鱼”));
var dog = new Animal(“小黑”, “黑色”);
console.log(dog.eat(“骨头”));

4.单例模式
一个类提供一个实例,并且暴漏出一个全局访问点(闭包)

简单的单例
function Person(name) {
this.name = name;
}
Person.prototype.getName = function () {
return this.name;
}
//自执行 执行函数 返回闭包的对象
var getObject = (function () {
var instance = null;
return function (name) {
if (!instance) {
instance = new Person(name);
}
//该函数的返回值对象 返回一个单独的对象
return instance;
}
})();
//调用单例模式
console.log(getObject(“张三”).getName());//张三
console.log(getObject(“李四”).getName());//张三
console.log(getObject(“王五”).getName());//张三

// 设置多个类对象 将单例的方法 抽象为一个共享方法
callback 为回调函数
var getInstance = function (callback) {
var instance = null;
return function () {
if (!instance) {
//实例化对象
//apply 替换函数内部的this指针 执行前面的函数
//this 指向window 可以可不写
//console.log(this);
instance = callback.apply(null, arguments);
}
return instance;
}
};
console.log(getInstance(function () {
var per = new Person(“李四”);
return per; })().getName());

console.log(getInstance(function () {
var per = new Person(“王五”);
return per;})().getName());

5.策略模式
var levelBalble = {
S: 8,
A: 6,
B: 4,
C: 2,
D: 0
}
//策略的使用
var levelScore = {
base: null,
S: function () {
return this.base + levelBalble[“S”];
},
A: function () {
return this.base + levelBalble[“A”];
},
B: function () {
return this.base + levelBalble[“B”];
},
C: function () {
return this.base + levelBalble[“C”];
},
D: function () {
return this.base + levelBalble[“D”];
}
}
//计算得分情况
function getScore(score, level) {
levelScore.base = score;
return levelScorelevel;
}

console.log(getScore(90, “S”));//98
console.log(getScore(80, “A”));//86
console.log(getScore(70, “B”));//74
console.log(getScore(60, “C”));//62
console.log(getScore(50, “D”));//50

6.订阅模式
var observer = {
subscribes: [],//订阅集合
//订阅的方法
subscribe: function (types, fn) {
//检测types有没有订阅
if (!this.subscribes[types]) {
//创建订阅
this.subscribes[types] = [];
}
//处理订阅的fn
/if(typeof fn==“function”)
{
this.subscribes[types].push(fn);
}
/
typeof fn = = “function” && this.subscribes[types].push(fn);
},
//执行订阅
publish: function () {
//检测当前的订阅是否存在
var types = [].shift.call(arguments);//获取订阅
var fns = this.subscribes[types];
//var name = [].shift.call(arguments).name;//获取订阅函数名称
if (!fns || fns.length == 0) {
return;
}
//开始执行
var args = arguments;
fns.forEach(function (handle) {
console.log(handle.name);
//handle.name 获取当前函数名称
handle.apply(this, args);
});},
//删除订阅
remove: function (types, fn) {
//检测types 不存在 直接全部订阅移除
if (!types) {
this.subscribes = [];
return;
}
//获取当前的订阅集合
var fns = this.subscribes[types];
if (!fns || fns.length = = 0) {
return;
}
//检测fn
if (typeof fn != = “function”) {
return;
}
//删除订阅
fns.forEach(function (handle, index) {
if (handle = = fn) {
fns.splice(index, 1);
}
});
}
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值