新年新气象，之前一直在博客园写文章，今天转战简书了，账号申请了一年多，一次都没写过文章。。最近想好好学一些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;}
单例模式
这里涉及一个名词——命名空间，命名空间就是使用对象直接量来创建一个层级化分组的各项属性和方法的结构。主要用来将一系列相关代码封装到一个对象之中。
以上这些都只是文字描述，代码展示当然是不可缺少的，看这里看这里!
网友评论