Javascript设计模式
关注
分享
扫一扫
JavaScript设计模式集锦，记录javascript各种用法
.NET跨平台
比较认真。编程就是算法和数据结构，算法和数据结构是编程的灵魂。
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
Airbnb JavaScript编码规范指南(ES6)中文版
个人翻译，一些个人见解会用"注："的形式标出 原版:Airbnb JavaScript Style Guide 最合理的方法书写JavaScript 注意: 本规范假定你在使用 Babel, 并且需要你使用 babel-preset-airbnb 或者等价的工具. 预期你已经在应用中安装了shims/polyfills,和 airbnb-browser-shims 或者等价的. 内容 类型 引用 对象 数组 解构 字符串 函数 箭头函数 类 & 构造函数 模块 迭代器和生成器 属性 变量 变量转载 2020-08-07 10:31:03 · 1605 阅读 · 0 评论 -
Airbnb JavaScript (ES5)编码风格指南
用更合理的方式写 JavaScript 目录 类型 对象 数组 字符串 函数 属性 变量 提升 比较运算符 & 等号 块 注释 空白 逗号 分号 类型转化 命名规则 存取器 构造函数 事件 模块 jQuery ECMAScript 5 兼容性 测试 性能 资源 谁在使用 翻译 JavaScript 风格指南说明 与我们讨论 JavaScript 贡献者 许可 类型 原始值: 存取直接作用于它自身。 string number boolean null undefined var foo转载 2020-08-07 10:16:18 · 402 阅读 · 0 评论 -
代码整洁的 JavaScript
目录 简介 变量 函数 对象和数据结构 类 SOLID 测试 并发 错误处理 格式化 注释 Translation 简介 将源自 Robert C. Martin 的 Clean Code 的软件工程原则适配到 JavaScript 。 这不是一个代码风格指南， 它是一个使用 JavaScript 来生产 可读的， 可重用的， 以及可重构的软件的指南。 这里的每一项原则都不是必须遵守的， 甚至只有更少的能够被广泛认可。 这些仅仅是指南而已， 但是却是 Clean Code 作者多年经验的结晶。 我们的软转载 2020-08-06 10:40:05 · 402 阅读 · 0 评论 -
JavaScript 风格指南
介绍 作者根据 Robert C. Martin 《代码整洁之道》总结了适用于 JavaScript 的软件工程原则《Clean Code JavaScript》。 本文是对其的翻译。 不必严格遵守本文的所有原则，有时少遵守一些效果可能会更好，具体应根据实际情况决定。这是根据《代码整洁之道》作者多年经验整理的代码优化建议，但也仅仅只是一份建议。 软件工程已经发展了 50 多年，至今仍在不断前进。现在，把这些原则当作试金石，尝试将他们作为团队代码质量考核的标准之一吧。 最后你需要知道的是，这些东西不会让你立刻转载 2020-08-06 10:33:40 · 471 阅读 · 1 评论 -
JavaScript设计模式(三十三)【同步/异步模块模式】
/** * 异步模块模式AMD之前，当然还有同步模块模式 * 同步模块的代码较为简单，如string.trim 这样的模块对应的就是{string:{trim:{}}}这样的结构 * 维护一个define定义模块，维护一个module取得模块 * module的最后利用fn.apply(null, modules); (当然null不太好) * 使用的话则是F.module('string.trim',function(trim){}) 这样的用法 * 第一个参数可以是数组，也可以有多个模块的参转载 2020-08-05 15:06:28 · 450 阅读 · 0 评论 -
JavaScript设计模式(三十二)【等待者模式】
/** * 唔……一个自己实现的promise…… * es6已经有自己的promise方法了 * 而且这个promise不是符合规范的 * 但是对了解异步思想有帮助，那就走一遍~ * */ /* 有点长，这是一个waiter,里面包括了promise 对外不用关注细节，基本上就是说，我们用waiter.Deferred 创建一个对象，这个对象有reject和resolve方法 当异步的事情完成后调用这2个方法，然后这个对象需要放到waiter.when里面去就可以了 对内来说，当调用resolve的时候转载 2020-08-05 15:06:19 · 300 阅读 · 0 评论 -
JavaScript设计模式(三十一)【参与者模式】
/** * participator 参与者模式，在特定的作用域中执行给定的函数，并将参数原封不动的传递 * 一个很常见的功能是，我们希望把额外的数据传入回调函数中 * 但是毫无疑问，addEventListener并不想管我们 * 于是我们自己在回调函数中动手解决吧 * * 不过说实话这书上的代码和没说没什么区别……………… * * */ var A = {}; A.event.on = function(dom, type, fn, data) { if (dom.addEven转载 2020-08-05 15:06:10 · 319 阅读 · 0 评论 -
JavaScript设计模式(三十)【惰性模式】
/** * 惰性模式，一个好东西 * 他是说，通过重写等方式，减少每次代码执行时的重复性判断 * 尽管之前的外观模式等已经吧dom操作变好看了，但是每次使用那个函数，总还是要做判断的 * 有没有办法减少判断的成本，那就是惰性模式 * 惰性模式可以一开始就使用，即加载就执行，也可以惰性执行，即第一次调用的时候执行 * */ // 现在实现一个on方法来绑定事件 A = {} A.prototype.on = (function() { if (document.addEventListener) {转载 2020-08-05 15:06:00 · 278 阅读 · 0 评论 -
JavaScript设计模式(二十九)【简单模板模式】
//简单模板模式包含三部分：字符串模板库、格式化方法、字符串拼接 /** * 简单模板模式，一个很有趣的模式 * 定义似乎是 通过格式化字符串拼凑出现视图，避免创建视图时的大量节点操作，优化内存开销 * 大约是用字符串拼出来，然后用正则替换数字部分，最后把他丢进html里 * * */ window.onload = function() { var A = { root: document.getElementById('container'), format转载 2020-08-05 15:05:50 · 258 阅读 · 0 评论 -
JavaScript设计模式(二十八)【节流模式】
//这个辅助函数 先暂时这样 function extend() { var i = 1, len = arguments.length, target = arguments[0], j; if (i == len) { target = this; i--; } for (; i < len; i++) { for (j in arguments[i]) {转载 2020-08-05 15:05:41 · 199 阅读 · 0 评论 -
JavaScript设计模式(二十七)【数据访问对象模式】
/* 数据访问对象模式： 抽象和封装对数据源的访问与存储，DAO通过对数据源链接的管理方便对数据的访问与存储。 */ var BaseLocalStorage = function(preId, timeSign) { //定义本地存储数据库前缀 this.preId = preId; //定义时间戳与存储数据之间的拼接符 this.timeSign = timeSign || '|-|'; } BaseLocalStorage.prototype = { //操转载 2020-08-05 15:05:28 · 246 阅读 · 0 评论 -
JavaScript设计模式(二十六)【委托模式】
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>委托模式</title> <script> /* * 委托模式:多个对象接收并处理同一请求，他们将请求委托给另一个对象统一处理 * 委托模式有效的减少了资源的消耗，是非常常见的模式 *转载 2020-08-05 15:05:19 · 248 阅读 · 0 评论 -
JavaScript设计模式(二十五)【链模式】
var A = function(selector, context) { return new A.fn.init(selector, context); } A.fn = A.prototype = { constructor: A, length: 2, init: function(selector, context) { this.length = 0, context = context || document;转载 2020-08-05 15:05:09 · 191 阅读 · 0 评论 -
JavaScript设计模式(二十四)【解释器模式】
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>解释器模式</title> <script> /* * 解释器模式：对于一种语言，给出其文法形式，并定义一种解释器来解析句子 * 当有一个语言需要解释执行，并且可以将该语言中的句子表示为一个抽象语法树的时候，转载 2020-08-05 15:04:38 · 298 阅读 · 0 评论 -
JavaScript设计模式(二十三)【迭代模式】
// 数组迭代 var eachArray = function(arr, fn) { var i = 0, len = arr.length; // 遍历数组 for (; i < len; i++) { // 依次执行回调函数，注意回调函数中传入的参数第一个为索引，第二个为改索引对应的值 if (fn.call(arr[i], i, arr[i]) === false) { break;转载 2020-08-05 15:04:19 · 193 阅读 · 0 评论 -
JavaScript设计模式(二十二)【备忘录模式】
// 备忘录模式 在不破坏对象封装的前提下，在对象之外捕获并保存该对象那个内部的状态一遍日后对象使用或者对象那个恢复到以前的某个状态 // Page 备忘录 var Page = function() { // 信息缓存对象 var cache = {}; // 主函数参数 page 页码 参数fn 成功回调函数 return function(page, fn) { // 判断该页面数据是否在缓存中 if (cache[page]) {转载 2020-08-05 15:03:28 · 253 阅读 · 0 评论 -
JavaScript设计模式(二十一)【中介者模式】
/* 中介者模式： 通过中介者对象封装一系列对象之间的交互，使对象之间不再相互引用，降低他们之间的耦合。 */ // 中介者对象 var Mediator = function() { var _msg = {}; return { register: function(type, action) { if (_msg[type]) _msg[type].push(action); else转载 2020-08-05 15:03:20 · 206 阅读 · 0 评论 -
JavaScript设计模式(二十)【访问者模式】
/** * 访问者模式很好的使用了call这个东西 * 访问者模式是表示一个作用于某个对象结构中的各元素的操作。 * 它使可以在不改变各元素的类的前提下定义作用于这些元素的新操作 * * 通俗的说 * 访问者模式先把一些可复用的行为抽象到一个函数（对象）里，这个函数我们就称为访问者（Visitor） * 如果另外一些对象要调用这个函数，只需要把那些对象当作参数传给这个函数 * 在js里我们经常通过call或者apply的方式传递this对象给一个Visitor函数 * * 也就是说，可能A和B两个类都有一样转载 2020-08-05 15:03:08 · 334 阅读 · 0 评论 -
JavaScript设计模式(十九)【命令模式】
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>命令模式（Command）</title> </head> <body> <div> 命令模式（Command）：将请求与实现解耦并封装成独立对象，从而使不同的请求对转载 2020-08-05 15:03:00 · 200 阅读 · 0 评论 -
JavaScript设计模式(十八)【职责链模式】
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>职责链模式</title> </head> <body> <div> 职责链模式（Chain of Responsibility）：解决请求的发送者与请求的接受者之间转载 2020-08-05 15:02:51 · 183 阅读 · 0 评论 -
JavaScript设计模式(十七)【策略模式】
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>策略模式</title> </head> <body> <div> 策略模式（Strategy）：将定义的一组算法封装起来，使其相互之间可以替换。封装的算法具有一定独转载 2020-08-05 15:02:43 · 238 阅读 · 0 评论 -
JavaScript设计模式(十六)【状态模式】
/* 状态模式： 当一个对象的内部状态发生改变时，会导致其行为的改变，这看起来像是改变了对象。 */ // 状态对象 var ResultState = function() { var States = { state0: function() { console.log("第一种情况"); }, state1: function() { console.log("第二种情况");转载 2020-08-05 15:02:31 · 186 阅读 · 0 评论 -
JavaScript设计模式(十五)【观察者模式】
创建一个观察者 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>创建一个观察者</title> </head> <body> <script> //将观察者放在闭包中，当页面加载就立即执行 var Observer = (function() { //防止消息队列转载 2020-08-05 15:02:22 · 197 阅读 · 0 评论 -
JavaScript设计模式(十四)【模板方法模式】
创建基本提示框 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>创建基本提示框</title> </head> <body> <script> var Alert = function(data) { //没有数据则返回，防止后面程序执行 if (!dat转载 2020-08-05 15:02:11 · 240 阅读 · 0 评论 -
JavaScript设计模式(十三)【享元模式】
/* 享元模式： 运用共享技术有效地支持大量的细粒度对象，避免对象间拥有相同内容造成多余的开销。 */ var Flyweight = function() { // 已创建的元素 var created = []; // 创建一个新闻包装容器 function create() { var dom = document.createElement('div'); ...转载 2020-08-05 15:02:01 · 168 阅读 · 0 评论 -
JavaScript设计模式(十二)【组合模式】
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>组合模式解决新闻模块问题</title> </head> <body> <script> var News = function() { //子组件容器 this.children = [];转载 2020-08-05 15:01:45 · 176 阅读 · 0 评论 -
JavaScript设计模式(十一)【桥接模式】
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>桥接模式</title> </head> <body> <script> //多维变量类 //运动单元 function Speed(x, y) { this.x = x; this.y =转载 2020-08-05 15:01:32 · 175 阅读 · 0 评论 -
JavaScript设计模式(十)【装饰者模式】
装饰已有功能对象 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>装饰已有功能对象</title> </head> <body> <script> //装饰者 var decorator = function(input, fn) { //获取事件源转载 2020-08-05 15:01:16 · 237 阅读 · 0 评论 -
JavaScript设计模式(九)【代理模式】
站长统计 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>站长统计</title> </head> <body> <script> //统计代理 var Count = (function() { //缓存图片 var _img = new Ima转载 2020-08-05 15:00:36 · 173 阅读 · 0 评论 -
JavaScript设计模式(八)【适配器模式】
jquery适配器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquery适配器</title> </head> <body> <script> //定义框架 var A = A || {}; //通过id获取元素 A.g = function(id) {转载 2020-08-05 15:00:12 · 191 阅读 · 0 评论 -
JavaScript设计模式(七)【外观模式】
兼容方式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>外观模式-兼容方式</title> </head> <body> <script> //外观模式实现 function addEvent(dom, type, fn) { //对于支持DOM2级事件处理程序转载 2020-08-05 14:58:59 · 175 阅读 · 0 评论 -
JavaScript设计模式(六)【单例模式】
无法修改的静态变量 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>无法修改的静态变量</title> </head> <body> <script> var Conf = (function() { //私有变量 var conf = {转载 2020-08-05 14:58:45 · 165 阅读 · 0 评论 -
JavaScript设计模式(五)【原型模式】
初级-图片轮播 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>原型模式-焦点图</title> </head> <body> <script> //图片轮播类 var LoopImages = function(imgArr, container) { this转载 2020-08-05 14:58:24 · 201 阅读 · 0 评论 -
JavaScript设计模式(四)【建造者模式】
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>建造者模式</title> </head> <body> <script> //创建一位人类 var Human = function(param) { //技能 this.skill = param转载 2020-08-05 14:58:05 · 178 阅读 · 0 评论 -
JavaScript设计模式(三)【抽象工厂】
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>抽象类</title> </head> <body> <script> //抽象类 var Car = function() { }; Car.prototype = { getPrice: fun转载 2020-08-05 14:57:48 · 214 阅读 · 0 评论 -
JavaScript设计模式(二)【工厂模式】
// 安全的工厂方法 var Factory = function (type, content) { if (this instanceof Factory) { var s = new this[type](content); return s; } else { return new Factory(type, content); } } // 工厂原型中设置创建所有类型数据对象的基类 Factory.prototype = { Java: functi转载 2020-08-05 14:57:21 · 186 阅读 · 0 评论 -
JavaScript设计模式(一)【简单工厂模式】
// 简单工厂模式 function createdPop(type, text) { var o = new Object(); o.content = text; // 共同的属性 o.show = function () { // 共同的方法 console.log('this is common show'); }; // 差异部分 if (type === 'alert') { console.log('this is alert'); }转载 2020-08-05 14:57:07 · 204 阅读 · 0 评论