资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/常用的JavaScript设计模式

常用的JavaScript设计模式

mcterry / 677人阅读

摘要：即如果代码已经走过第一个分支逻辑，那么接下来，就没必要再让代码去执行各个分支的判断，直接执行第一个逻辑即可示例代码

1，委托模式 
通过将多个对象的统一格式请求委托给同一个对象来减少事件处理或者内存开销

示例代码：

/*一般方式*/

    

  • 

  • 

  • 

  • 



let change = function(){
    //do sth here
}

/*委托方式*/

    

  • 

  • 

  • 

  • 



let change = function(event){
    //根据event判断如果是LI标签，则统一触发事件
    //do sth here
}
备注：该代码不仅可以节省事件内存开销，也使动态的插入或者移除HTML元素时，无需重新绑定事件
2，观察者模式 
通过定义一种对象和观察者之间的依赖关系，解决对象和观察者之间的强耦合
3，工厂模式 
通过分类抽象出对象工厂，然后方便的生产出各种标准一致的‘产品’

示例代码：

//对象工厂
let person = {
    age:"",
    sex:"",
    name:"",
    income:"",
    address:"",
    idCard:""
}
/*工厂方法*/
let createStudent = function(options){
    return Object.assign(person,options)
}

/*生产学生*/
let studentA = createStudent({
    grade:"大四",
    schoolName:"中国科技大学"
})
//组装工厂
let jsonToQueryString = function(json){
        return "?" +
            Object.keys(json).map(function (key) {
                return encodeURIComponent(key) + "=" +
                    encodeURIComponent(json[key]);
            }).join("&");
}

let getStr = jsonToQueryString({
    a:"1",
    b:"2",
    c:{
        c1:"",
        c2:""
    }
})

//拆卸工厂等：略
备注：该模式可以节省重复劳动，节省代码量，使代码美观易读易维护，
并让各部分的逻辑参数等符合同样的标准，避免人工手写复制粘贴或者拼接失误等
4，享元模式 
通过共享细粒度的数据而节省内存和开销
5，单例模式 
//单例模式
let global = {};
let singleModel = function(obj){
    //do sth
    global = Object.assign(obj,global);
    return global
}

new singleModel({
    doSthA:function(){console.log("a")},
    doSthB:function(){console.log("b")}
});
    
new singleModel({
    doSthB:function(){console.log("b1")},
    doSthC:function(){console.log("c")}
})
//使用
global....
是指只允许实例化一次的对象类，避免方法和命名冲突等
6，链式调用 
链式模式的核心思想就是在调用完对象的方法以后可以回当前对象（this）,然后继续调用下去
//示例代码：
let jQuery = {
    foundId:function(){console.log(1);return this},
    addArr:function(){console.log(2);return this},
    delArr:function(){console.log(3);return this},
}
//执行
jQuery.foundId().addArr().delArr()
备注：这只是一种最简单的调用方式，仅供参考，举一反三
7，策略模式 
策略模式的 目的是使算法脱离于模块而独立管理，解除代码之间的耦合影响
8，状态模式 
解决程序中繁杂的分支判断语句问题，避免大量多层的if else 嵌套

//示例代码：

//一般写法：
if(a){}
else if(b){}
else if(c){}
else if(d){}
//状态管理例子
let obj = {
    a:function(){
    
    },
    b:function(){
    
    }
    //...
}

//使用
let type = a || b || c || d;
obj[type]();

obj[a]();
状态管理模式可以较方便的解除各状态之间的耦合，
使本来只能从上到下的上下文执行方式，
变成可以分为多个分支的执行方式，而且更方便复用。
9，桥接模式 
通过将实现层（如绑定的事件）与抽象层（如页面UI逻辑）解除耦合，使两部分可以独立
10，模版模式（某些框架的组件） 
通过定义一套操作算法骨架，使得子类可以不改变父类的算法结构的同时，重新定义算法中的某些实现步骤
11，适配器模式 
将一个类（对象）的接口（方法或属性）转化为另外一个接口或对象，用来避免过多的硬编码和兼容
//示例代码：
let schoolA  = {
    name:"帝国学院",
    studentList:[
    {name:"秦始皇",no:"000000",code:"555555555"},
    {name:"刘邦",no:"000001",code:"555555554"}
    ]
}

let schoolB = {
    name:"谋士学院",
    studentList:{
    {studentName:"黄石公",sno:"000007",grade:"111111111"},
    {studentName:"张良",sno:"000006",grade:"111111112"}
    }
}

//适配器
let reflectStu = function(student){
    let newStu = {}
    if(name==="帝国学院"){
        newStu["sName"]=student.name;
        newStu["idNo"]=student.no;
        newStu["score"]=student.code;
    }else{
        newStu["sName"]=student.studentName;
        newStu["idNo"]=student.sno;
        newStu["score"]=student.grade;
    }
    return newStu;
}

//使用
...
12，节流模式 
通过对重复执行的的业务逻辑进行控制，在执行完最后一次符合某条件的操作后，取消操作，并清理内存
//示例代码：
let timer= 0;
let _st = setInterval(function(){
    //do sth repeated
    let pass = checkPass();
    if(timer>=1000 || pass){
        clearInterval(_st)
    }
},1000);

let checkPass = function(){
    //TODO sth
    return true || false
};

应该是最简单的节流模式了orz
13，惰性模式 
减少每次代码执行时的重复性的分支判断，通过对对象重新定义来屏蔽原对象中的分支判断。
即如果代码已经走过第一个分支逻辑，那么接下来，就没必要再让代码去执行各个分支的判断，
直接执行第一个逻辑即可
//示例代码：
let AddEvent = function(dom, type, fn){
  if(dom.addEventListener){
    AddEvent = function(dom, type, fn){
        dom.addEventListener(type, fn, false);
      }
  }else if(dom.attachEvent){
    AddEvent = function(dom, type, fn){
        dom.attachEvent("on"+type, fn);
      }
  }else{
    AddEvent = function(dom, type, fn){
        dom["on"+type] = fn;
      }
  }
 AddEvent(dom, type, fn);
};
云服务器 GPU云服务器 php常用设计模式 javascript常用代码 javascript常用事件 javascript常用框架

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101152.html

相关文章

  • +【13】JavaScript设计原则&&常用设计模式

    摘要：打个比方源码使用了模式，解决了问题，但是，在选择模式解决问题的背后又有多少思考 showImg(https://segmentfault.com/img/bVbupTE?w=480&h=260); 【前言】 最近阅读了《JavaScript设计模式与开发实践》，收获颇丰，于是想写一点总结及感想 showImg(https://segmentfault.com/img/bVbupUE?w...

    opengps 评论0 收藏0

  • JavaScript常用设计模式

    摘要：原文链接常用设计模式设计模式设计模式是一种在长时间的经验与错误中总结出来可服用的解决方案。用来模拟接口的相关操作我很帅通过适配器函数来调用目的我很帅学习资料听飞狐聊设计模式系列设计模式汤姆大叔 原文链接： JavaScript常用设计模式 设计模式 设计模式是一种在长时间的经验与错误中总结出来可服用的解决方案。 设计模式主要分为3类： 创建型设计模式：专注于处理对象的创建 Const...

    RyanHoo 评论0 收藏0

  • JavaScript常用的设计模式

    摘要：前言设计模式几十种，阅读了设计模式与开发实践这本书后，个人感觉就是围绕对象来设计的，发现日常写代码能用上的并不多，下面是常用的几种设计模式。前端服务端可以参考我的另一个仓库地址，一个简单的实时聊天参考来自设计模式与开发实践读书笔记 前言 设计模式几十种，阅读了《JavaScript设计模式与开发实践》这本书后，个人感觉js就是围绕对象来设计的，发现日常写代码能用上的并不多，下面是常用的...

    mengbo 评论0 收藏0

  • 学Java编程需要注意的地方

    摘要：学编程真的不是一件容易的事不管你多喜欢或是多会编程，在学习和解决问题上总会碰到障碍。熟练掌握核心内容，特别是和多线程初步具备面向对象设计和编程的能力掌握基本的优化策略。 　　学Java编程真的不是一件容易的事,不管你多喜欢或是多会Java编程，在学习和解决问题上总会碰到障碍。工作的时间越久就越能明白这个道理。不过这倒是一个让人进步的机会，因为你要一直不断的学习才能很好的解决你面前的难题...

    leanxi 评论0 收藏0

  • ES6-7

    摘要：的翻译文档由的维护很多人说，阮老师已经有一本关于的书了入门，觉得看看这本书就足够了。前端的异步解决方案之和异步编程模式在前端开发过程中，显得越来越重要。为了让编程更美好，我们就需要引入来降低异步编程的复杂性。 JavaScript Promise 迷你书（中文版） 超详细介绍promise的gitbook，看完再不会promise...... 本书的目的是以目前还在制定中的ECMASc...

    mudiyouyou 评论0 收藏0

  • 个人分享--web前端学习资源分享

    摘要：前言月份开始出没社区，现在差不多月了，按照工作的说法，就是差不多过了三个月的试用期，准备转正了一般来说，差不多到了转正的时候，会进行总结或者分享会议那么今天我就把看过的一些学习资源主要是博客，博文推荐分享给大家。 1.前言 6月份开始出没社区，现在差不多9月了，按照工作的说法，就是差不多过了三个月的试用期，准备转正了！一般来说，差不多到了转正的时候，会进行总结或者分享会议！那么今天我就...

    sherlock221 评论0 收藏0

发表评论

登陆后可评论

0条评论

mcterry

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<