浅谈JavaScript设计模式

创建型模式 ：该模式处理的是用于创建对象的各种机制

工厂方法
抽象工厂
建造者
原型
单例

结构型模式：考虑的是对象的组成以及对象彼此之间的关系

适配器
桥接
组合
装饰器
外观
享元
代理

行为型模式：关注的是对象之间的依赖关系以及通信

解释器
模板方法
责任链
命令
迭代器
中介者
备忘录
观察者
状态
策略
访问者

模块模式
var basic = {
  eniv: 'production',
  startupParam:{
    cache: 30,
    locale: 'en_US'
  },
  init: function(){
    console.log('init server')
  },
  update: function(params) {
    this.startupParam = params
       console.log(this.startupParam.cache)
       console.log('this.startupParam.locale')
  }
}
basic.init()      // init server
basic.update({cache: 60, locale: 'en_UK'})      //60, en_UK
对上面的代码稍作改动，使用IIFE并返回模块接口
var basic = (function (){
  var eniv = 'production';
  var startupParam = {
    cache: 30,
    locale: 'en_US'
  };
  return{
    init: function(){
      console.log('init server')
    },
    update: function(params) {
       this.startupParam = params
       console.log(this.startupParam.cache)
       console.log('this.startupParam.locale')
    }
  }
})()
basic.init()      // init server
basic.update({cache: 60, locale: 'en_UK'})      //60,
对上面的模式再进行变形，不推荐在调用其他函数的公共函数或是公共变量的时候非得使用模块名，这种改进的模式也被称为RMP（暴露式模块模式）,其背后主要的思路就是将所有的成员都定义在私有作用域中，使用指针返回一个匿名对象，该指针指向的私有功能需要公开暴露
var basic = function() {
  var privateOne = 1;
  function privateFn() {
    console.log('private call');
  }
  var privateTwo = 2;
  function publicFn() {
    publicFnTwo();
  }
  function publicFnTwo() {
    privateFn();
  }
  function getCurrentState() {
    return 2;
    }
  return {
    setup: publicFn,
    count: publicTwo,
    increase: publicFnTwo,
    current: getCurrentState()
  }
}()
console.log(basic.current)    // 2
basic.setup()  // private call
工厂模式
function CarFactory() {}
CarFactory.prototype.info = function() {
    console.log('info');
}
// 静态工厂方法
CarFactory.make = function(type) {
    var constr = type;
    var car;
    CarFactory[constr].prototype = new CarFactory();
    car = new CarFactory[constr]();
    return car;
}
CarFactory.Compact = function(){
    this.doors = 4;
    this.engine_capacity = 2;
}
CarFactory.Sedan = function() {
    this.doors = 2;
    this.engine_capacity = 2;
}
CarFactory.SUV = function(){
    this.doors = 4;
    this.engine_capacity = 6;
}
var golf = CarFactory.make['Compact'];
var vento = CarFactory.make['Sedan'];
var touareg = CarFactory.make['SUV'];
golf.info();    // info
mixin模式
mixin模式能够显著减少代码中重复出现的功能，有助于功能复用。这样你就可以将注意力放在构建实际功能上，而不是一再去重复那些可以共享的行为。
var _ = require('underscore');
var logger = (function () {
  var CustomLogger = {
    log: function (message) {
      console.log(message);
    }
  }
}())
// 需要定制的日志记录器来记录系统特定日志的对象
var Server = (function (Logger) {
  var CustomServer = function() {
    this.init = function() {
      this.log(initial server);
    }
  }
  // 将CustomLogger的成员复制/扩展为CustomServer
  _.extend(CustomServer.prototype, Logger);
  return CustomServer;
}(logger))
(new Server()).init()  // initial server
// 通过原型继承，将mixin的功能加入到对象中

9.装饰器模式
主要思想就是使用一个空白对象展开设计，该对象有一些基本的功能，随着设计的深入，可以使用现有的装饰器来增强该空白对象。
// 实现最小化的BasicServer
function BasicServer () {
  this.pid = 1;
  console.log('initial basic server');
  this.decorate_list = [];  // 空的装饰器列表
}
// 列出所有的装饰器
BasicServer.decorators = {};
// 将每个装饰器添加到BasicServer的装饰器列表中
// 列表中的每个装饰器都会被应用到BasicServer实例
BasicServer.decorators.reverseProxy = {
  init: function(pid){
    return pid + 1;
  }
}
BasicServer.decorators.servePHP = {
  init: function(pid) {
    return pid + 1;
  }
}
// 每次调用decorate()时，都将装饰器推入列表
BasicServer.prototype.decorate = function(decorator) {
  this.decorate_list.push(decorator);
}
// init() 方法遍历所有应用于BasicServer的装饰器，在所有的装饰器上执行init()方法
BasicServer.prototype.init = function () {
  var running_process = 0;
  var pid = this.pid;
  for(var i = 0; i < this.decorate_list.length; i++) {
    decorate_name = this.decorate_list[i];
    running_processes = BasicServer.decorators[decorate_name].init(pid);
    return running_process;
  }
}
// 创建提供reverseProxy代理的服务器
var proxyServer = new BasicServer();
proxyServer.decorate('reverseProxy');
total_process = proxyServer.init()
// 创建提供PHP服务的服务器
var phpServer = new BasicServer()
phpServer.decorate(servePHP)
total_process = phpServer.init()

10 观察者模式
目标+观察者；在观察者模式中，目标保存了一个对其依赖的对象列表（称为观察者），并在自身状态发生变化时通知这些观察者，目标采用的通知方式是广播；观察者如果不想再被提醒，可以把自己从列表中移除。
// 目标：能够添加，删除和提醒观察者目标
var Subject = (function() {
  function Subject(){
    this.observer_list = [];
  }
  Subject.prototype.add_observer = function(obj){
    this.observer_list.push(obj)
  }
  Subject.prototype.remove_observer = function(obj) {
    for(var i = 0; i < this.observer_list.length; i++){
      if(this.observer_list[i] === obj) {
        this.observer_list.splice(i,1)
      }
    }
  }
  Subject.prototype.notify = function(){
    var args = Array.prototype.splice.call(arguments,0)
    for(var i = 0; i<this.observer_list.length;i++){
      this.observer_list[i].update(args)
    }
  }
  return Subject
})()
// 观察者
function Tweeter(){
  var subject = new Subject()
  this.addObserver = function(observer){
    subject.add_observer(observer)
  }
  this.removeObserver = function(observer){
    subject.remove_observer(observer)
  }
  this.fetchTweets = function fetchTweets() {
    var tweet = {
      tweet: 'this is a abserver'
    }
    subject.notify(tweet)
  }
}
// 添加两名观察者
var TweetUpdater = {
  update: function() {
    console.log('update tweet')
  }
}
var TweetFllower = {
  update: function() {
    console.log(Fllower tweet)
  }
}
// 此时我们就可以通过Tweeter的接口将观察者添加到Subject中了
var tweetApp = new Tweeter()
tweetApp.addObserver('TweetUpdater')
tweetApp.addObserver('TweetFllower')
tweetApp.fetchTweets()
tweet.removeObserver(TweetUpdater)
tweet.removeObserver('TweetFllower')

浅谈JavaScript设计模式相关推荐

浅谈javascript中原型（prototype）、构造函数、对象实例及三者之间的关系
转自:http://www.cnblogs.com/zhangwei412827/archive/2012/12/14/2816263.html 浅谈javascript中原型(prototype). ...
浅谈JavaScript作用域，关于Java的学习路线资料
javascript是目前web领域中使用非常广泛的语言,不管是在前端还是在后端都能看到它的影子,可以说web从业者不论怎样都绕不开它.在前端领域,各种框架层出不穷.在后端领域,nodejs可谓如火如 ...
浅谈 JavaScript 编程语言的编码规范--转载
原文:http://www.ibm.com/developerworks/cn/web/1008_wangdd_jscodingrule/ 对于熟悉 C/C++ 或 Java 语言的工程师来说,Jav ...
JavaScript 中的 require / exports、import / export、浅谈JavaScript、ES5、ES6
Node.js 的基础教学之 exports 和 module.exports:https://zhuanlan.zhihu.com/p/82057593 浅谈 JavaScript.ES5.ES6 ...
html 滚动条 scrolltop scrollheight,浅谈JavaScript中scrollTop、scrollHeight、offsetTop、offsetHeight...
浅谈JavaScript中scrollTop.scrollHeight.offsetTop.offsetHeight 发布时间:2020-07-17 09:27:20 来源:亿速云阅读:223 作者 ...
浅谈 JavaScript 编程语言的编码规范
转自:http://www.ibm.com/developerworks/cn/web/1008_wangdd_jscodingrule/?ca=drs-tp4608 developerWorks 中 ...
浅谈JavaScript中的NaN
浅谈JavaScript中的NaN NaN概念以及简单案例追寻的纯粹该拥有自己的本质.-JC.F 什么是NaN? NaN:NaN(Not a Number),它表示不是数字,但是仍是数值类型. Na ...
python封装继承多态_浅谈JavaScript的面向对象和它的封装、继承、多态
写在前面既然是浅谈,就不会从原理上深度分析,只是帮助我们更好地理解... 面向对象与面向过程面向对象和面向过程是两种不同的编程思想,刚开始接触编程的时候,我们大都是从面向过程起步的,毕竟像我一样, ...
js跟php增加删除信息,浅谈JavaScript数组的添加和删除
本文给大家浅谈一下JavaScript数组的添加和删除 ,有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 1.添加 (1)最简单的方法:为新索引赋值 (2)使用push()和unsh ...
浅谈Java设计模式
浅谈设计模式(Design Pattern) 序言: 与很多软件工程技术一样,模式起源于建筑领域,软件工程只有短短的几十年,与已经拥有几千年底蕴的建筑工程相比,后者有太多值得学习和借鉴的地方.1995 ...

浅谈JavaScript设计模式

浅谈JavaScript设计模式相关推荐

最新文章

热门文章