摘要:當一個對象的改變需要同時改變其他對象,而且他不知道具體有多少對象需要改變時,此時建議使用訂閱發布模式。指定發布者,類似于一個對象表示事件的名稱,是一個數組發布消息后,遍歷的數組,依次執行訂閱者的回調函數。
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備注:console.log(name, "name")沒有報錯,是因為name是瀏覽器的窗口變量名,已存在于瀏覽器內部。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/101591.html
摘要:函數式編程前端掘金引言面向對象編程一直以來都是中的主導范式。函數式編程是一種強調減少對程序外部狀態產生改變的方式。 JavaScript 函數式編程 - 前端 - 掘金引言 面向對象編程一直以來都是JavaScript中的主導范式。JavaScript作為一門多范式編程語言,然而,近幾年,函數式編程越來越多得受到開發者的青睞。函數式編程是一種強調減少對程序外部狀態產生改變的方式。因此,...
摘要:插件開發前端掘金作者原文地址譯者插件是為應用添加全局功能的一種強大而且簡單的方式。提供了與使用掌控異步前端掘金教你使用在行代碼內優雅的實現文件分片斷點續傳。 Vue.js 插件開發 - 前端 - 掘金作者:Joshua Bemenderfer原文地址: creating-custom-plugins譯者:jeneser Vue.js插件是為應用添加全局功能的一種強大而且簡單的方式。插....
摘要:年,和前端開發者與應用程序前端開發者之間產生了巨大的分歧。開發最常見的解決方案有手機和平板的原生應用程序桌面應用程序桌面應用程序原生技術最后,前端開發者可以從瀏覽器開發中學習到,編寫代碼不需要考慮瀏覽器引擎的限制。 前端開發者手冊2019 Cody Lindley 編著 原文地址 本手冊由Frontend Masters贊助,通過深入現代化的前端工程課程來提高你的技能。 下載:PDF ...
摘要:年,和前端開發者與應用程序前端開發者之間產生了巨大的分歧。開發最常見的解決方案有手機和平板的原生應用程序桌面應用程序桌面應用程序原生技術最后,前端開發者可以從瀏覽器開發中學習到,編寫代碼不需要考慮瀏覽器引擎的限制。 前端開發者手冊2019 Cody Lindley 編著 原文地址 本手冊由Frontend Masters贊助,通過深入現代化的前端工程課程來提高你的技能。 下載:PDF ...
摘要:年,和前端開發者與應用程序前端開發者之間產生了巨大的分歧。開發最常見的解決方案有手機和平板的原生應用程序桌面應用程序桌面應用程序原生技術最后,前端開發者可以從瀏覽器開發中學習到,編寫代碼不需要考慮瀏覽器引擎的限制。 前端開發者手冊2019 Cody Lindley 編著 原文地址 本手冊由Frontend Masters贊助,通過深入現代化的前端工程課程來提高你的技能。 下載:PDF ...
閱讀 2419·2021-10-11 10:57
閱讀 1274·2021-10-09 09:59
閱讀 1986·2019-08-30 15:53
閱讀 3206·2019-08-30 15:53
閱讀 1001·2019-08-30 15:45
閱讀 727·2019-08-30 15:44
閱讀 3433·2019-08-30 14:24
閱讀 946·2019-08-30 14:21