说明: 未完成。。。更新中。。。。

一、javascipt设计模式分类

设计模式分类有很多标准,最流行的三种如下

1)  creational  --  主要关注对象创建

Creational design patterns deal directly with object initialization procedures focusing on the creation of situation-specific objects. Without thinking about how objects are created, a level of complexity can be added to the design of an application. Creational design patterns work to solve this problem by adding a layer to the object creation process.

创建型设计模式直接处理对象的初始化程序,重点关注创建基于特定场景的对象。它不关注如何创建对象,其复杂性的层次直接加入到应用程序的设计中。创建型设计模式通过在对象创建过程上加上一层来解决问题。

2)   structural  --  主要关注对象的组合方法

Structural design patterns are ones that focus on easing the relationship between different components of an application. They help to provide stability by ensuring that if one part of the app changes, the entire thing doesn't need to as well.

3)   behavioral --   主要关注对象间的通信方式

Behavioral design patterns emphasize flexibility through the identification of common communication patterns between various objects.

二、日常使用的javascript设计模式

1)The Module Pattern

2)The Revealing Module Pattern

    var account = function(){
var balance = 0; var deposit = function(money){
balance + = money;
console.log("balance after deposti: ",balance);
sendMsg();
}; var withdraw = function(money){
balance -= money;
console.log("balance after withdraw",balance);
sendMsg();
}; //私有方法
var sendMsg = function(){
console.log("sending message!")
}; //公共方法 -- send outside module
return {
deposit:deposit,
withdraw: withdraw
}
}; var a1 = account();
a1.deposit(100);
a1.withdraw(20);
a1.sendMsg(); //could have a alert

3)The Singleton Pattern

            var PersonSingleton =(function(){
var instantiated;
function init(){
function myOtherMethod() {
alert( 'my other method' );
}
return{
name: 'Anonymous',
work: function(){
console.log(this.name + "is working");
},
someOtherMethod: myOtherMethod
}
}
return{
//handles the prevention of additional instantiations
getInstance: function(){
if(!instantiated){
instantiated = init();
}
return instantiated;
}
}
})(); var p1 = PersonSingleton.getInstance();
p1.work(); //return Anonymouse
var p2 = PersonSingleton.getInstance();
p2.work(); //return Anonymouse

4)The Observer Pattern

5)The Mediator Pattern

6)The Prototype Pattern

7)The Facade Pattern

8)The Factory Pattern

参看:

  • https://carldanley.com/javascript-design-patterns/#creational-design-patterns

Javascript设计模式(摘译)的更多相关文章

  1. 《JavaScript设计模式 张》整理

    最近在研读另外一本关于设计模式的书<JavaScript设计模式>,这本书中描述了更多的设计模式. 一.创建型设计模式 包括简单工厂.工厂方法.抽象工厂.建造者.原型和单例模式. 1)简单 ...

  2. 《JavaScript设计模式与开发实践》整理

    最近在研读一本书<JavaScript设计模式与开发实践>,进阶用的. 一.高阶函数 高阶函数是指至少满足下列条件之一的函数. 1. 函数可以作为参数被传递. 2. 函数可以作为返回值输出 ...

  3. Javascript设计模式学习一

    学习Javascript设计模式之前,需要先了解一些相关知识,面向对象的基础知识.this等重要概念,以及掌握一些函数式编程的技巧. Js多态 多态的思想:实际上是把“做什么”和“谁去做”分离开来.例 ...

  4. javascript设计模式实践之职责链--具有百叶窗切换图片效果的JQuery插件(三)

    在上一篇<javascript设计模式实践之模板方法--具有百叶窗切换图片效果的JQuery插件(二)>里,通过采用模板方法模式完成了切换效果对象的构建编写. 接下来就是完成各效果对象的调 ...

  5. javascript设计模式实践之模板方法--具有百叶窗切换图片效果的JQuery插件(二)

    在上一篇<javascript设计模式实践之迭代器--具有百叶窗切换图片效果的JQuery插件(一)>里,通过采用迭代器模式完成了各初始化函数的定义和调用. 接下来就要完成各个切换效果的编 ...

  6. javascript设计模式实践之迭代器--具有百叶窗切换图片效果的JQuery插件(一)

    类似于幻灯片的切换效果,有时需要在网页中完成一些图片的自动切换效果,比如广告,宣传,产品介绍之类的,那么单纯的切就没意思了,需要在切换的时候通过一些效果使得切换生动些. 比较常用之一的就是窗帘切换了. ...

  7. 常用的Javascript设计模式

    <parctical common lisp>的作者曾说,如果你需要一种模式,那一定是哪里出了问题.他所说的问题是指因为语言的天生缺陷,不得不去寻求和总结一种通用的解决方案. 不管是弱类型 ...

  8. JavaScript设计模式学习笔记

    1 JavaScript设计模式深入分析 私有属性和方法:函数有作用域,在函数内用var 关键字声明的变量在外部无法访问,私有属性和方法本质就是你希望在对象外部无法访问的变量. 特权属性和方法:创建属 ...

  9. JavaScript设计模式:读书笔记(未完)

    该篇随我读书的进度持续更新阅读书目:<JavaScript设计模式> 2016/3/30 2016/3/31 2016/4/8 2016/3/30: 模式是一种可复用的解决方案,可用于解决 ...

随机推荐

  1. stack栈

    栈(statck)这种数据结构在计算机中是相当出名的.栈中的数据是先进后出的(First In Last Out, FILO).栈只有一个出口,允许新增元素(只能在栈顶上增加).移出元素(只能移出栈顶 ...

  2. HAProxy配置SSL

    前沿 据悉苹果强制APP在2016年底使用ATS协议,所以公司准备将部分站点http统一替换成https.所有我们就得测试下 1.首先原有的haproxy1.5升级到了1.7版本支持ssl 2.查看相 ...

  3. SqlBulkCopy批量添加数据

    var sqlconn = ConfigurationManager.ConnectionStrings["SQLConnStringRead"].ConnectionString ...

  4. Unbuntu下使用SVN

    一.查看SVN版本 svn --version 二.查看SVN仓库 # 查看被svn仓库占用的所有端口 netstat -anp |grep svn # 查看所有端口对应的仓库 ps -ef | gr ...

  5. Unity手撸2048小游戏——背景文字控制

    今天继续昨天的计划吧 1.新建项目.场景命名啥的都不说了吧. 2.直接开始新建一个Image,顺便把Image改名成Chessman 3.选中Image新建一个Text对象,调整下大小位置.这样就算完 ...

  6. Using GET_APPLICATION_PROPERTY in Oracle D2k Forms

    Using GET_APPLICATION_PROPERTY in Oracle D2k Forms DescriptionReturns information about the current ...

  7. LeetCode——Letter Combinations of a Phone Number

    Given a digit string, return all possible letter combinations that the number could represent. A map ...

  8. [bzoj2743][HEOI2012]采花(树状数组+离线)

    2743: [HEOI2012]采花 Time Limit: 15 Sec  Memory Limit: 128 MBSubmit: 1832  Solved: 954[Submit][Status] ...

  9. M2事后分析报告

    设想和目标 1.我们的软件要解决什么问题?是否定义得很清楚?是否对典型用户和典型场景有清晰的描述? 这次M2预想的就是解决3个主要问题,1:增加查询自己购买或者发布记录的功能,2:优化 所有的网络连接 ...

  10. spice命令使用

    spicec.exe -h 192.168.1.1 -p 5912 -w 主机 物理机IP 端口号 主机