javascript
Dojo学习笔记(三):类化JavaScript
dojo/_base/declare模塊是Dojo Toolkit中創建類的基礎。declare支持多重繼承,這使得開發者能夠編寫更加靈活的代碼并避免代碼多次重寫。Dojo.Dijit和Dojox模塊都使用declare,在這篇文章中,你就知道為什么你也要這樣做了。
準備學習
在開始學習這篇文章前,請確保你復習過 模塊定義 這篇文章了。
Dojo類的基本創建
declare函數是在dojo/_base/declare模塊中定義的,函數接受三個參數:className,superClass和properties。
ClassName
className參數代表要創建類的名稱和命名空間。命名的類都放置在全局作用域內,className也可以通過命名空間代表繼承鏈。
命名類:
// Create a new class named "mynamespace.MyClass" declare("mynamespace.MyClass", null, {// Custom properties and methods here});命名類mynamespace.MyClass現在可以在應用的全局范圍內使用了。
類只有在要被Dojo parser使用的情況下才能被命名,其他的類可以忽略className這一參數。
匿名類
// Create a scoped, anonymous class var MyClass = declare(null, {// Custom properties and methods here});myClass現在就可以在作用域內被使用了。
SuperClass(es)
SuperClass參數值可以為空,可以是一個類,也可以使類的集合。如果一個新類繼承至多個類,那么類集合中的第一個類是基礎模型,剩下的類都是混合類。
不繼承的類
var MyClass = declare(null, {// Custom properties and methods here});null代表這個類不繼承至任何類。
一個類繼承自另一個類
var MySubClass = declare(MyClass, {// MySubClass now has all of MyClass's properties and methods// These properties and methods override parent's});新的類MySubClass將繼承MyClass的屬性和方法。稍后我們討論如何通過第三個參數來重寫父類的屬性或方法。
繼承自多個類
var MyMultiSubClass = declare([MySubClass,MyOtherClass,MyMixinClass ],{// MyMultiSubClass now has all of the properties and methods from:// MySubClass, MyOtherClass, and MyMixinClass});一個類數組就代表類是多重繼承,父類的屬性和方法將繼承給子類,類數組的第一個類作為子類的基礎模板,其他的類將混合進去。
如果一個屬性或方法在多個父類中出現,那么子類將繼承最后一個類的屬性或方法。
屬性和方法對象
declare的最后一個參數是一個對象,這個對象的作用是在新類中重寫父類的同名屬性或同名方法。
自定義屬性和方法
// Class with custom properties and methods var MyClass = declare(MyParentClass, {// Any propertymyProperty1: 12,// AnothermyOtherProperty: "Hello",// A methodmyMethod: function(){// Perform any functionality herereturn result;} });舉例:類的創建和繼承
以下的代碼創建了一個窗口小部件并繼承自dijit/form/Button:
define(["dojo/_base/declare","dijit/form/Button" ], function(declare, Button){return declare("mynamespace.Button", Button, {label: "My Button",onClick: function(evt){console.log("I was clicked!");this.inherited(arguments);}}); });從以上的代碼片段可以得出結論:
接下來讓我們通過構造函數來深入學習類的創建。
構造函數
類中最特殊的函數之一就是構造函數。當類初始化時,構造函數就會被觸發并在新的對象中運行。這就意味著this關鍵字指向的是新的實例,而不是原來的類。構造函數也可以接受一些初始化參數。
// Create a new class var Twitter = declare(null, {// The default usernameusername: "defaultUser",// The constructorconstructor: function(args){declare.safeMixin(this,args);} });創建一個實例
var myInstance = new Twitter();在初始化實例的時候如果不指定username,那么實例將采用"defaultUser"作為實例名。為了使用safeMixin的方法,傳入一個username參數:
var myInstance = new Twitter({username: "sitepen" });現在新的實例就用sitepen作為username了。
繼承
如上所述,繼承就是新的實例將復制declare的第二個參數中的父類的屬性和方法,如下所示:
// Define class A var A = declare(null, {// A few properties...propertyA: "Yes",propertyB: 2 });// Define class B var B = declare(A, {// A few properties...propertyA: "Maybe",propertyB: 1,propertyC: true });// Define class C var C = declare([mynamespace.A, mynamespace.B], {// A few properties...propertyA: "No",propertyB: 99,propertyD: false });類的新實例的屬性如下:
// Create an instance var instance = new C();// instance.propertyA = "No" // overridden by B, then by C // instance.propertyB = 99 // overridden by B, then by C // instance.propertyC = true // kept from B // instance.propertyD = false // created by C設置和重寫數字,字符串和布爾型變量是線性的。在使用數組和對象的時候就要留意它們的作用域。在return中定義的數組或對象會被所有對象的實例所共享。在構造函數中定義的數組和對象就只是各個實例所擁有的了??梢詤⒖?dojo/_base/declare 獲取更多相關的信息。
this.inherited
盡管完全重寫方法是很有用的,但有時候一個繼承鏈上的每個構造函數都會運行以保護它原始的功能。這時候就是this.inherited(argumengs)申明出場的時候了。this.inherited(argumengs)申明會調用父類中同名方法。如下所示:
// Define class A var A = declare(null, {myMethod: function(){console.log("Hello!");} });// Define class B var B = declare(A, {myMethod: function(){// Call A's myMethodthis.inherited(arguments); // arguments provided to A's myMethodconsole.log("World!");} });// Create an instance of B var myB = new B(); myB.myMethod();// Would output: // Hello! // World!this.inherited方法可以任何時候在子類的代碼中調用。有時候你需要在子類中函數的中間或尾部調用inherited(),還有,你不能再構造函數中調用它。
結論
在Dojo Toolkit中declare函數式是創建模塊化和可重用類的關鍵。declare允許通過多個類和對個屬性方法來實現類的多重繼承??上驳氖?#xff0c;declaer是很容易學習的,它允許開發者避免重復寫同樣的代碼。
dojo/_base/declare
想要進一步學習declare和類的創建?那就查看下面的資源:
本系列文章翻譯至Dojo官網,旨在學習Dojo并提高英語閱讀能力,有翻譯錯誤的地方請多指正!謝謝
轉載于:https://www.cnblogs.com/ruowind/archive/2013/02/04/2892055.html
總結
以上是生活随笔為你收集整理的Dojo学习笔记(三):类化JavaScript的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Windows开发的内功和招式
- 下一篇: Markdown列表