内容简介:1、模块模式在立即执行函数表达式中定义的变量和方法,在该函数外部是访问不到的,只能通过该函数提供的接口,"有限制的"进行访问;通过函数的作用域,解决了属性和方法的封装问题。最常见的立即执行函数写法有以下两种:
1、模块模式
在立即执行函数表达式中定义的变量和方法,在该函数外部是访问不到的,只能通过该函数提供的接口,"有限制的"进行访问;通过函数的作用域,解决了属性和方法的封装问题。
最常见的立即执行函数写法有以下两种:
(function(){ /* code */ }()) 或者 (function(){ /* code */ })()
模块模式代码:
let Person = (function(){ var age = "12"; var name = "jerry"; function getAge(){ return age; } function getName(){ return name; } return { getAge: getAge, getName: getName } })() console.log(age, 'age'); // 报错: Uncaught ReferenceError: age is not defined console.log(name, 'name'); // 空字符串 console.log(Person.age); // undefined console.log(Person.name); // undefined // 只能通过Person提供的接口访问相应的变量 console.log(Person.getName()); // jerry console.log(Person.getAge()); // 12
2、构造函数模式
function Person(name,age){ this.name = name; this.age = age; } Person.prototype.printName = function(){ console.log(this.name) } Person.prototype.printAge = function(){ console.log(this.age) } function Student(name,age){ // 继承 Person 的属性 Person.call(this,name,age) } function create(prototype){ function F(){} F.prototype = prototype return new F() } // 让Student的原型指向一个对象,该对象的原型指向了Person.prototype,通过这种方式继承 Person 的方法 Student.prototype = create(Person.prototype) Student.prototype.printAge = function(){ console.log(this.age) } let student = new Student('jerry',12) student.printName() // "jerry" student.printAge() // "12"
3、混合模式
function Person(name,age){ this.name = name this.age = age } Person.prototype.printName = function(){ console.log(this.name) } function Student(name,age){ // 继承 Person 的属性 Person.call(this, name, age) } function create(prototype){ function F(){} F.prototype = prototype return new F() } // 让Student的原型指向一个对象,该对象的原型指向了Person.prototype,通过这种方式继承 Person 的方法 Student.prototype = create(Person.prototype) Student.prototype.printAge = function(){ console.log(this.age) } let student = new Student('jerry', 12) student.printName() // "jerry" student.printAge() // 12
4、工厂模式
function Person(name, age){ let person = new Object() person.name = name person.age = age person.printName = function(){ console.log(this.name) } person.printAge = function(){ console.log(this.age) } return person } let person = Person('jerry',12) person.printName() person.printAge()
5、单例模式
let Singleton = (function(){ let instantiated function init(){ /*定义单例代码*/ return{ publicMethod: function(){ console.log("Hello World"); }, publicProperty: "Test" } } return{ getInstance: function(){ if(!instantiated){ instantiated = init() } return instantiated } } }()) Singleton.getInstance().publicMethod()
单例之间的通讯:
建立两个独立的对象:jim&&lily,两者之间通过door直接通讯,如果没有新建door,有直接通讯。代码如下:
let jim = (function(argument){ let door let jimHome = function(msg){ this.doorbell = msg } let info = { sendMessage: function(msg){ if(!door){ door = new jimHome(msg) } return door }, coming: function(){ return "來了來了" } } return info }()) let lily = { callJim: function(msg){ let _xw = jim.sendMessage(msg) alert(_xw.doorbell) console.log(_xw.doorbell) _xw = null // 等待垃圾回收 let coming = jim.coming() console.log(coming) } } lily.callJim("叮咙")
6、发布-订阅模式
订阅发布模式定义了一种一对多的依赖关系,让多个订阅者对象同时监听某一个主题对象。这个主题对象在自身主题变化时,会通知所有订阅者对象,使他们能够自动更新自己的状态。
将一个系统分割成一系列相互协作的类有一个很不好的副作用:需要维护相应对象间的一致性,这样会给维护、扩展和重用都带来不便。当一个对象的改变需要同时改变其他对象,而且他不知道具体有多少对象需要改变时,此时建议使用订阅发布模式。
应用场景:
DOM事件。DOM事件是一种典型的发布-订阅模式,对一个DOM节点的DOM事件进行监听;当操作DOM节点时,触发相应的事件并执行函数。
自定义时间。指定发布者,类似于一个对象(key:value);key表示事件的名称,value是一个数组;发布消息后,遍历value的数组,依次执行订阅者的回调函数。
应用Demo如下:
let Event = (function(){ var events = {} function on(evt, handler){ events[evt] = events[evt]||[]; events[evt].push({ handler:handler }) } function fire(evt,args){ if(!events[evt]){ return } for(var i=0;i<events[evt].length;i++){ events[evt][i].handler(args) } } function off(evt){ delete events[evt] } return { on: on, fire: fire, off: off } }()) Event.on('change', function(val){ console.log('change事件,value is' + val) }) Event.on('click', function(val){ console.log('click事件,value is '+ val) }) Event.fire('change', 'jerry1') Event.fire('click', 'jerry2') Event.off('change')
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。