关于JavaScript设计模式的学习(JavaScript design pattern)(一)

新年新气象,之前一直在博客园写文章,今天转战简书了,账号申请了一年多,一次都没写过文章。。最近想好好学一些JavaScript的设计模式,对于我们写大规模代码有一定帮助,也有助于我们更好理解现有的一些框架原理。

  • 设计模式分类

1.创建型

1.1工厂模式
1.2抽象工厂模式
1.3生成器模式
1.4原型模式
1.5单例模式

今天先说第一类也就是结构型,结构型分为以上五类,重点说工厂模式,抽象工厂模式,生成器模式以及单例模式。
工厂模式
最重要的就是将对象的创建过程封装起来,用一个对象字面量来表示,当我们使用一个对象不再需要使用new关键字来创建实例。
抽象工厂模式
这里是对工厂模式的更深一层的抽象,简单来说就是我们可以将多个工厂模式抽象出一个公共的对象,比如一个html5表单和html4表单创建时要根据是否兼容来创建,这样我们就可以通过抽象工厂模式来选择用哪个对象来创建我们所需要的表单域。
生成器模式
首先也是会把对象的创建过程封装起来,但是不管你创建多少,创建不同的类型,都不用管它,只需要最后调用就可以了,这里的话,需要代码对照,如下

function FormBuilder(){};FormBuilder.prototype = {    //创建一个数组,用于保存所创建的表单域    fileds:[],    //添加表单域    addFiled: function(type, defaultText){        var filed;        switch(type){            case "text":                filed = new TextFiled(defaultText);                break;            case "email":                filed = new EmailFiled(defaultText);                break;            case "button":                filed = new ButtonFiled(defaultText);                break;            default :                filed = new TextFiled(defaultText);                break;        }        this.fileds.push(filed);    },    getForm: function(){        var form = document.createElement("form");        var index = 0;        var numFileds = this.fileds.length;        var filed;        for(; index<numFileds; index++){            filed = this.fileds[index];            form.appendChild(filed);        }        return form;    }}//定义TextFiledfunction TextFiled(defaultText){    var textFiled = document.createElement("input");    textFiled.setAttribute("type", "text");    textFiled.setAttribute("placeholder", defaultText);    return textFiled;}//定义EmailFiledfunction EmailFiled(defaultText){    var emailFiled = document.createElement("email");    emailFiled.setAttribute("type", "email");    emailFiled.setAttribute("placeholder", defaultText);    return emailFiled;}//定义ButtonFiledfunction ButtonFiled(defaultText){    var buttonFiled = document.createElement("button");    buttonFiled.setAttribute("type", "submit");    buttonFiled.innerHTML = defaultText;    return buttonFiled;}

单例模式
这里涉及一个名词——命名空间,命名空间就是使用对象直接量来创建一个层级化分组的各项属性和方法的结构。主要用来将一系列相关代码封装到一个对象之中。

以上这些都只是文字描述,代码展示当然是不可缺少的,看这里看这里!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 设计模式汇总 一、基础知识 1. 设计模式概述 定义:设计模式(Design Pattern)是一套被反复使用、多...
    MinoyJet阅读 3,980评论 1 15
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,466评论 25 708
  • 接触前端两三个月的时候,那时候只是听说设计模式很重要,然后我就去读了一本设计模式的书,读了一部分,也不知道这些设计...
    艰苦奋斗的侯小憨阅读 3,101评论 2 39
  • 1. Java基础部分 基础部分的顺序:基本语法,类相关的语法,内部类的语法,继承相关的语法,异常的语法,线程的语...
    子非鱼_t_阅读 31,767评论 18 399
  • 今天是2016年12月1日,还有一个月我们将会迎来新的一年。以往每年我们都会在新年开始的时候许下很多美好的愿望,每...
    嗨向阳花阅读 608评论 0 0