JS设计模式学习

来源：互联网发布：c 敏感词过滤算法编辑：程序博客网时间：2024/05/21 17:21

单例模式

单例模式：确保类只能被实例化一次。
在该实例不存在的情况下，可以通过一个方法创建一个类来实现创建类的新实例；如果实例已经存在，它直接返回该对象的引用。
在JavaScript里，实现单例的方式有很多种，其中最简单的一个方式是使用对象字面量的方法，其字面量里可以包含大量的属性和方法：

<script type="text/javascript">var mySingleton = {    name:"lisi",    age:23,    sayName:function(){        console.log("Hello lisi");    }};</script>

如果以后要扩展该对象，你可以添加自己的私有成员和方法，然后使用闭包在其内部封装这些变量和函数声明。只暴露你想暴露的public成员和方法，样例代码如下：

<script type="text/javascript">var mySingleton = function(){    //声明私有变量和方法    var name = "lisi";    function showName(){        console.log(name);    }    //公有变量和方法(可以访问私有变量和方法)    return {        publicMethod:function(){            showName();        },        publicVar:"我是公有变量"    };};var single = mySingleton();single.publicMethod();//lisiconsole.log(single.publicVar);//我是公有变量</script><script type="text/javascript">var mySingleton = (function(){    var instance;//保存实例的引用    function init(){        //私有变量和函数        var privateVar = "lisi";        function privateMethod(){            console.log(privateVar);        }        return {            //公有变量和函数            publicMethod :function(){                privateMethod();            },            publicVar:"我是公有变量"        };    }    return {        getInstance:function(){            if(!instance){                //只有在用到的时候才进行初始化                instance = init();            }            //如果存在则直接返回，不存在则新初始化一个实例            return instance;        }    };})();mySingleton.getInstance().publicMethod();//lisiconsole.log(mySingleton.getInstance().publicVar);//我是公有变量</script>

模块模式
该模式使用闭包封装私有状态和组织。它提供了一种包装混合公有/私有方法和变量的方式，防止其泄漏至全局作用域，并与别的开发人员的接口发生冲突。通过该模式，只需返回一个公有API，其他的一切则都维持在私有闭包里。
jQuery等类库封装就采用了模块模式。 
Demo:
<script type="text/javascript">var myModule = (function(){    //私有变量    var myPrivateVar = 12;    //私有函数    var myPrivateMethod = function(foo){        console.log(foo);    };    return {        //公有变量        myPublicVar:"foo",        //调用私有变量和方法的公有函数        myPublicMethod:function(bar){            //增加私有变量计数器值            myPrivateVar++;            myPrivateMethod(bar);        }    };})();console.log(myModule.myPublicVar);//foomyModule.myPublicMethod("hello world");//hello world</script>
观察者模式
观察者模式又叫发布订阅模式（Publish/Subscribe），它定义了一种一对多的关系，让多个观察者对象同时监听某一个主题对象，这个主题对象的状态发生变化时就会通知所有的观察者对象，使得它们能够自动更新自己。
使用观察者模式的好处：
支持简单的广播通信，自动通知所有已经订阅过的对象。
页面载入后目标对象很容易与观察者存在一种动态关联，增加了灵活性。
发布者与订阅者耦合性降低，发布者只管发布一条消息出去，它不关心这条消息如何被订阅者使用，同时，订阅者只监听发布者的事件名，只要发布者的事件名不变，它不管发布者如何改变。
JS里对观察者模式的实现是通过回调来实现的 
Demo：
<script type="text/javascript">function Observer() {    this.fns = [];//存放回调的数组}Observer.prototype = {    //增加一个订阅    subscribe: function (fn) {        this.fns.push(fn);    },    //删除一个订阅    unsubscribe: function (fn) {        //过滤退订的函数        this.fns = this.fns.filter(function (el) {                            if (el !== fn) {                                return el;                            }                        }                    );    },    //发布    public: function (args, thisObj) {        var scope = thisObj || window;        // console.log(scope);//window        this.fns.forEach(function (el) {                            el.call(scope, args);                        }                    );    }};//创建一个pubsub对象//该对象原型上有发布、订阅、退订三个方法var o = new Observer();var f1 = function (data) {    console.log('王五: ' + data + ', 赶紧干活了！');};var f2 = function (data) {    console.log('李四: ' + data + ', 找他加点工资去！');};//订阅o.subscribe(f1);o.subscribe(f2);//发布o.public("老板回来了！");//王五退订o.unsubscribe(f1);//再次发布，只会触发李四对应的回调o.public("老板回来了！");</script>
构造函数模式
对于构造函数大家都不陌生，构造函数用于创建特定类型的对象——不仅声明了使用的对象，构造函数还可以接受参数以便第一次创建对象的时候设置对象的成员值。我们可以自定义自己的构造函数，然后在里面声明自定义类型对象的属性或方法。
Demo:
<script type="text/javascript">function Person(name,age){    this.name = name;    this.age = age;    this.sayInfo = function(){        console.log(this.name + "---" + this.age);    }}var person1 = new Person("lisi",23);var person2 = new Person("wangwu",24);person1.sayInfo();//lisi---23person2.sayInfo();//wangwu---24//这样貌似看上去很完美，但是sayInfo()在每次创建对象的时候都重新定义了(下面代码返回false表明，两个实例的sayInfo不是同一个)，最好的方法是让所有Person类型的实例都共享这个sayInfo()方法，这样如果有大批量的实例的话，就会节约很多内存。console.log(person1.sayInfo == person2.sayInfo);//false</script>
工厂模式
工厂模式就好比现实生活中的工厂可以产生大量相似的产品，工厂模式适用于：做同样的事情，实现相同的效果。其解决了创建多个相似对象的问题。 
Demo:
<script type="text/javascript">function createPerson(name,age,job){    var obj = new Object();    obj.name = name;    obj.age = age;    obj.job = job;    obj.sayInfo = function(){        console.log(this.name+"--"+this.age+"--"+this.job);    };    return obj;}var person1 = createPerson("lisi",23,"student");var person2 = createPerson("wangwu",34,"worker");person1.sayInfo();//lisi--23--studentperson2.sayInfo();//lisi--23--student//返回都是object 无法识别对象的类型 不知道他们是哪个对象的实列console.log(typeof person1);//objectconsole.log(typeof person2);//object</script>
函数createPerson能接受三个参数name,age,job等参数，可以无数次调用这个函数，每次返回都会包含三个属性和一个方法的对象。
工厂模式是为了解决多个类似对象声明的问题;也就是为了解决实列化对象产生重复的问题(避免了产生大量的重复代码)。 
优点：解决了创建多个相似对象的问题 
缺点：没有解决对象识别的问题(即怎样确定一个对象的类型)

                                                     0        0           	
					
					   JS设计模式学习
	  	   JS设计模式学习
	  	   js设计模式的学习
	  	   js 设计模式学习--观察者模式
	  	   js学习设计模式--单例模式
	  	   js学习设计模式--命令模式
	  	   JS学习十五天----设计模式开篇
	  	   FreeFrame学习js设计模式之单件工厂模式
	  	   JS学习笔记——面向对象，设计模式
	  	   阅读器（慕客学习）之JS设计模式分解
	  	   Node.js的学习历程五设计模式的解读
	  	   深入学习js之浅谈设计模式（混入）
	  	   深入学习js之浅谈设计模式（行为委托）
	  	   JS设计模式
	  	   js设计模式
	  	   js 设计模式 参考
	  	   js设计模式
	  	   JS设计模式
	     		  
	  	   Android基础--Service
	  	   zmq_ctx_set
	  	   TCP协议的一些小细节
	  	   【codefoce 630.P】Area of a Star
	  	   Oracle数据查询
	  	   JS设计模式学习
	  	   zeromq中zmq_ctx_shutdown
	  	   简单的代码文档 javadoc 标签
	  	   数据库日期使用RR-MM-DD保存年份与使用YY-MM-DD的区别
	  	   运行appium报错搜集
	  	   更新wincvs代码
	  	   tabs刷新当前页面
	  	   Android TextView多行文本滚动实现与ScrollView的滚动条为隐藏的方法
	  	   ZigBee简介