您現在的位置是:電腦技術吧?>? 組裝維修 ??>??簡單框架,框架怎么畫??>??正文詳情

簡單框架,框架怎么畫

僑春綠2019-12-12 10:42:04 人圍觀
簡介框架是什么本文主要介紹一個簡單的JavaScript類框架,有助于初學者理解JS類的創建和繼承。對于那些需要幫助的人,請參閱work in progress JavaSc網頁框架

這篇文章主要介紹了一個簡單的JavaScript類框架,有助于初學者理解JS類的創建與繼承,需要的朋友可以參考下  在寫work-in-progress JavaScript book一書時,對于javascript繼承體系,我花費了相當的時間,并在該過程中研究了各種不同的模擬經典類繼承的方案。

這些技術方案中,我最為推崇的是base2與Prototype的實現。

  從這些方案中,應該能提煉出一個具有其思想內涵的框架,該框架須具有簡單、可重用、易于理解并無依賴等特點,其中簡單性與可用性是重點。

以下是使用示例:  ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 var Person = Class. extend ( { init: function (isDancing ) { this. dancing = isDancing; }, dance: function ( ) { return this. dancing; } } ); var Ninja = Person.extend({ init: function(){ this._super( false ); }, dance: function(){ // Call the inherited version of dance() return this._super(); }, swingSword: function(){ return true; } }); var p = new Person(true); p.dance(); // = true var n = new Ninja(); n.dance(); // = false n.swingSword(); // = true // Should all be true p instanceof Person p instanceof Class n instanceof Ninja n instanceof Person n instanceof Class   有幾點需要留意:  構造函數須簡單(通過init函數來實現),  新定義的類比須繼承于已有的類,  所有的類'都繼承于始祖類:Class,因此如果要創建一個全新的類,該類必須為Class的子類,  最具挑戰的一點:父類的被覆寫方法必須能訪問到(通過配置上下文環境)。

  在上面的示例中,你能發現通過this._super()來調用Person父類的init()和dance()方法。

  對結果相當滿意:使類的定義結構化,保持單一繼承,并且能夠調用超類方法。

  簡單的類創建與繼承  下面為其實現(便于閱讀并有注釋),大概25行左右。

歡迎并感謝提出建議。

  ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 /* Simple JavaScript Inheritance * By John Resig http://ejohn.org/ * MIT Licensed. */ // Inspired by base2 and Prototype ( function ( ) { var initializing = false, fnTest = /xyz/.test(function(){xyz;}) ? /b_superb/ : /.*/; // The base Class implementation (does nothing) this.Class = function(){}; // Create a new Class that inherits from this class Class.extend = function(prop) { var _super = this.prototype; // Instantiate a base class (but only create the instance, // don't run the init constructor) initializing = true; var prototype = new this(); initializing = false; // Copy the properties over onto the new prototype for (var name in prop) { // Check if we're overwriting an existing function prototype[name] = typeof prop[name] == function typeof _super[name] == function fnTest.test(prop[name]) ? (function(name, fn){ return function() { var tmp = this._super; // Add a new ._super() method that is the same method // but on the super-class this._super = _super[name]; // The method only need to be bound temporarily, so we // remove it when we're done executing var ret = fn.apply(this, arguments); this._super = tmp; return ret; }; })(name, prop[name]) : prop[name]; } // The dummy class constructor function Class() { // All construction is actually done in the init method if ( !initializing this.init ) this.init.apply(this, arguments); } // Populate our constructed prototype object Class.prototype = prototype; // Enforce the constructor to be what we expect Class.prototype.constructor = Class; // And make this class extendable Class.extend = arguments.callee; return Class; }; })();   其中 初始化(initializing/don't call init)與創建_super方法最為棘手。

接下來,我會對此做簡要的介紹,使得大家對其實現機制能更好的理解。

  初始化  為了說明函數原型式的繼承方式,首先來看傳統的實現過程,即將子類的prototype屬性指向父類的一個實例。

如下所示:  ? 1 2 3 4 5 function Person ( ) { } function Ninja ( ) { } Ninja. prototype = new Person ( ); // Allows for instanceof to work: (new Ninja()) instanceof Person   然而,這里具有挑戰性的一點,便是我們只想要得到是否實例(instatnceOf)'的效果,而不需要實例一個 Person并調用其構造函數所帶來的后果。

為防止這一點,在代碼中設置一個bool參數initializing,只有在實例化父類并將其配置到子類的prototype屬性時, 其值才為true。

這樣處理的目的是區分開真正的實例化與設計繼承時這兩種調用構造函數之間的區別,進而在真正實例化時調用init方法:  ? 1 2 if ( !initializing ) this.init.apply(this, arguments);   值得特別注意的是,因為在init函數中可能會運行相當費資源的代碼(如連接服務器,創建DOM元素等,誰也無法預測),所以做出區分是完全必要的。

  超類方法(Super Method)  當使用繼承時,最常見的需求便是子類能訪問超類被覆寫的方法。

在該實現下,最終的方案便是提供一個臨時方法(._super),該方法指向超類方法,并且只能在子類方法中訪問。

  ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 var Person = Class. extend ( { init: function (isDancing ) { this. dancing = isDancing; } } ); var Ninja = Person.extend({ init: function(){ this._super( false ); } }); var p = new Person(true); p.dancing; // = true var n = new Ninja(); n.dancing; // = false   實現這一功能需要幾步處理。

首先,我們使用extend來合并基本的Person實例(類實例,上面我們提到過其構造過程)與字面對象(Person.extend()的函數參數)。

在合并過程中,做了簡單的檢查:首先檢查將被合并的的屬性是否為函數,如為函數,然后檢查將被覆寫的超類屬性是否也為函數?如果這兩個檢查都為true,則需要為該屬性準備_super方法。

  注意,在這里創建了一個匿名閉包(返回的是函數對象)來封裝增加的super方法。

基于維護運行環境的需要,我們應該將舊的this._super(不管其是否存在)保存起來以備函數運行后重置,這有助于在有相同名稱(不想偶然丟失對象指針)的情況下發生不可預知的問題。

  然后,創建新的_super方法,該方法對象僅指向超類中被覆寫的方法。

謝天謝地,不用對_super做任何改動或變更作用域,因為函數的執行環境會隨著函數調用對象自動變更(指針this會指向超類).  最后,調用字面量對象的方法,方法執行中可能會使用this._super(),方法執行后,將屬性_super重置回其原來狀態,之后return退出函數。

  以上可以有許多種方案能達到相同的效果(我之前曾見過將super綁定到其自身,然后用arguments.callee訪問),但是感覺還是這種方法最能能體現可用性與簡潔性的特點。

  在我已完成的多個基于javascript原型的工作中,只有這個類繼承實現方案是我發表出來與大家分享的。

我認為,簡潔的代碼(易于學習,易于繼承,更少下載)更需要提出來讓大家探討,因此,對于學習javascript類構造與繼承的人們來說,這套實現方案是一個好的開始。

版權聲明:本文由 僑春綠 整理編輯。

原標題:制作前端框架,前端框架有哪些

轉載注明出處:http://www.dn9ww09s.icu/assemble/15345.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • standby怎么用,in standby

    standby怎么用,in standby 相關圖片standby use準備:確認待機時可以支持對象和語句,以確保主庫中的表行可以唯一標識環境:操作系統:Red Hat Linux Enterprise 5 Oracle:11.2.standby mode...

  • exp備份數據庫,oracle備份恢復

    exp備份數據庫,oracle備份恢復 相關圖片exp備份數據庫命令JMYBJS=(描述=(地址=(協議=TCP)(主機=129.1.9.90)(端口=1521))(連接數據=(服務器=DEDICexp導出文件日期...

  • sqlserver建立觸發器,sqlserver查看觸發器

    sqlserver建立觸發器,sqlserver查看觸發器 相關圖片sql觸發器編寫一。存儲過程1。存儲過程的分類存儲過程是一種數據庫對象,它存儲在數據庫中,應用程序可以通過調用來執行,并允許用戶聲明變量和有條件地執行。具有強大編程功能...

  • 數組刪除元素,數組怎么刪除元素

    數組刪除元素,數組怎么刪除元素 相關圖片數組添加元素本文的例子描述了根據元素值通過jQuery刪除數組元素的方法。與您分享以供參考。具體如下:例如,如果不知道數組中C的下標,就刪除元素C?123var arr=[java數組刪除元素...

  • Java數組,jquery數組

    Java數組,jquery數組 相關圖片js數組怎么實現的一。數組數組的定義是一組按順序排列的值。單個值稱為元素。他們的職位有編號。從0開始,整個數組用方括號表示。Var arr=[12,34,56];上面的代碼表示已數組api...

  • asp網站代碼,html代碼

    asp網站代碼,html代碼 相關圖片jsp代碼%@LANGUAGE=VBSCRIPT CODEPAGE=936%%session(aname)=session(admin_flag)=session.aboasp整站下載...

  • 基于asp系統,asp系統開發

    基于asp系統,asp系統開發 相關圖片sap財務系統headmeta http equiv=Content Language Content=zh cnmeta http equiv=Content Type Casp開源建站系統...

  • if嵌套例子,嵌套編程

    if嵌套例子,嵌套編程 相關圖片c語言循環嵌套例子本文主要介紹了PHP嵌套輸出緩沖代碼的例子。本文解釋了使用ob系列函數嵌套的示例。如果需要朋友的話,可以引用可以嵌套的PHP輸出緩沖區。嵌套級別可以使用OB>g...

  • c 環境配置,主機開發環境配置

    c 環境配置,主機開發環境配置 相關圖片maven環境配置FCKeditor是一個在sourceforge.net之上的開源項目,主要實現在線網頁編輯器的功能,使web程序具有MS-word等強大的編輯功能。官方網站是配置是什么...

  • 如何深入講解,深入細致的講解

    如何深入講解,深入細致的講解 相關圖片金剛經講解方法1:在servlet的init()方法中緩存數據。在應用服務器初始化servlet實例之后,它將在服務客戶機請求之前調用servlet的init()方法。在深入淺出的講解...

熱評文章

  • 表空間管理,表空間的管理方式

    表空間管理,表空間的管理方式 相關圖片oracle表空間使用2。Oracle磁盤管理中最高的邏輯層是表空間。必須在Oracle11g中創建的四個表空間是system、sysaux、temp和undotbs1。2系統:存儲oracle表空間概念...

  • 水晶報表 指定數據庫,找不到指定的數據庫

    水晶報表 指定數據庫,找不到指定的數據庫 相關圖片選擇數據庫命令Oracle數據庫如何收集指定SQL的執行計劃和解決過程中的ora-00904錯誤(版權聲明,如果需要轉載原文或翻譯的文章,如果轉載的文章用于個人學習,請注明來查找數據庫的...

  • angular8,angular 2

    angular8,angular 2 相關圖片angular框架本文主要介紹了angularjs工具angular smart,它可以自動完成用戶界面,包括使用隔離作用域綁定指令和承諾。為了供您參考,我們最近在論壇中添加了一angular能做什么...

  • oracleocr作用,oracle刪庫命令

    oracleocr作用,oracle刪庫命令 相關圖片oracle自動備份今天是2014年4月1日。我忙了一整天終于有時間寫點東西了。前一段時間,我寫了如何在RAC中有備份時恢復OCR。今天,我寫了如何在沒有備份的情況下重建OCR和Ooracle備份命令...

  • sqlget注入入門,sql注入攻擊教程

    sqlget注入入門,sql注入攻擊教程 相關圖片websql注入攻擊什么是sqlmap?Sqlmap是一個免費的開源工具,用于檢測和利用SQL注入漏洞。它具有很好的特性,即自動處理檢測和利用(數據庫指紋、訪問底層文件系統、命令執sql注入步驟...

  • oracle10gclient,Oracle10g

    oracle10gclient,Oracle10g 相關圖片oracle10g安裝包Oracle 10g RAC[恢復OCR]-查詢OCR狀態:×/Oracle/product/10g/CRS/bin/ocrcheck prot-601:初始化查看oracle10g版本...

  • 標識列的使用,標識列是什么

    標識列的使用,標識列是什么 相關圖片無法更新標識列現在讓我們看一個表:考慮一下如何在數據庫SQL Server中輕松地向該表添加數據?很容易發現,在ID字段中添加這一列數據是規則的,并且可以遵循。這是一個等比自一個...

  • 怎么設置防火墻,防火墻設置在哪

    怎么設置防火墻,防火墻設置在哪 相關圖片系統防火墻在哪里設置甲骨文和防火墻設置訪問windows甲骨文數據庫后的防火墻,僅僅打開固定的TCP端口方式是不夠的。這個問題的根本原因是windows-Oracle數據庫的BT設關閉防火墻...

  • SQL 存儲過程,SQL查看存儲過程

    SQL 存儲過程,SQL查看存儲過程 相關圖片sql建立存儲過程SQL Server中alter過程和create過程的區別:1。AutoPro期望找到現有的存儲過程,而CREATE不是。2。Alter proc保持sql 調用存儲過程...

  • 客戶端編程,猿編程客戶端

    客戶端編程,猿編程客戶端 相關圖片手機編程本文主要針對MVC框架的一些相關使用問題,介紹了JavaScript客戶端應用程序編程的一些建議。作為參考,您可能會注意到,最近一段時間,越來越多的web應用程編程網站...

關注微信

变脸官网查询