基于Javascript原型的Zepto框架設計

王運 倪靜

摘 要：隨著互聯網的普及，前端技術也得到了迅速發展。為了深入了解前端開發中的框架設計原理，以Zepto前端框架為例，利用Javascript原型鏈的相關知識，采用原生Javascript與框架對比的方法剖析了框架整體設計思路，細致分析了框架的大致架構，重構了Zepto對象原型，并封裝了可能用到的所有方法。利用這種從宏觀到微觀的研究視角，最終呈現了一個框架的整體細致構造及其與底層原生Javascript的聯系，以便于開發者熟悉框架設計原理，更好地設計出自己的框架。

關鍵詞：Javascript；前端框架；原型；Zepto

DOI：10.11907/rjdk.172716

中圖分類號：TP319

文獻標識碼：A 文章編號：1672-7800（2018）004-0124-03

Abstract：In order to gain a better understanding of the framework design principles in front-end development， we take the front-end framework of Zepto as an example， use Javascript prototype chain， native Javascript and frame comparison method to analyze the framework of the overall design ideas. We have detailed analysis of the framework of the general structure， reconstruct Zepto object prototype， and encapsulate all the methods that will be used. Based on the micro-to-micro perspective， we present a framework of the overall structure and its relationship with the underlying native Javascript， which help developers familiarize framework design principles to better establish their frameworks.

Key Words：Javascript； front frame； prototype； Zepto

0 引言

近幾年隨著前端領域的迅速發展，出現了多種類型的框架[1]，目前市場上的主流框架（庫）有jQuery、Vue、React與Angular等。但這幾種框架的代碼量太大，架構體系也比較繁瑣，所以本文選取一種成熟且經典的框架，即Zepto進行分析[2]。該框架雖然出現時間較早，但作為設計框架的例子進行分析是十分適合的。首先，其架構與當前熱門的jQuery很相似；其次，其代碼量簡短，可方便進行更透徹的分析。而框架的所有內容都是對底層知識的封裝，采用原生Javascript與其對比的方法進行分析，可起到事半功倍的效果[3]。

1 Zepto簡介

Zepto在5年前是一款十分熱門的框架，其應用領域在于移動端，與jQuery框架十分相似。Zepto框架大量參考了jQuery的API，簡化了對部分瀏覽器的兼容，例如IE。因此，可以說它是為移動端量身打造的[4]，但其核心模塊只有不到一千行的代碼，相對于jQuery一萬多行的代碼量，其無論是分析還是編寫都方便許多。同時，它也是眾多前端開發者分析框架對象的首選。

2 Javascript原型

在原生Javascript的知識體系中，上下文環境、作用域、原型鏈、同步與單線程是重點，也是難點。在介紹Zepto設計原理前，先對Javascript原型進行分析，這也是Zepto的設計基礎。每創建一個新函數，都會根據一組特定規則為該函數創建一個prototype屬性，該屬性指向函數的原型對象。在默認情況下，所有原型對象都會自動獲得一個constructor（構造函數）屬性，該屬性包含一個指向prototype屬性所在函數的指針[10]。

圖1展示了Person構造函數、Person原型屬性以及Person現有兩個實例間的關系。在此，Person.prototype指向原型對象，而Person.prototype.constructor又指向Person。原型對象中除包含constructor屬性外，還包括后來添加的屬性。Person的每個實例，如person1和person2都包含一個內部屬性，該屬性僅指向Person.prototype。也即是說，它們與構造函數沒有直接關系[5]。因此，可以在構造函數的原型對象中定義公共的屬性或方法，例如圖1中的name、age、job和sayName，這些方法與屬性是任何一個通過構造函數產生的實例所能共享的。此外，在每個實例中，還可以添加額外的屬性與方法，這時添加的屬性與方法是每個實例單獨享有的[11]。

3 Zepto設計原理

先分析一個簡單的html頁面，代碼如下：

var MYMp = MYM（‘p）； //MYMp是數組

var MYMspan = MYM（‘span）； //MYMspan是數組

通過API可以知道MYMp.addClass是一個函數，這是一般數組不具備的，在控制臺輸出MYMp instanceof Array為false，也驗證了MYMp不是一個常規數組的實例。與通常遇到的不同，正如原型里提到的，通過函數new輸出的內容，都會有個指針指向該函數的原型對象，而將原型對象重構后，即可獲得大量所需的方法。Zepto正是采用該方式對原型對象進行了改造。因此，每一個看似數組的內容可以同時具備數組與非數組的方法。這也是Zepto的核心設計理念，即重定義原型對象內容[6]。

4 Zepto源碼分析

Zepto框架主要架構如下：

varZepto = （function（）{

var MYM， zepto = { }

//省略N行代碼

function Z（dom， selector）{

vari， len=dom？dom.length ： 0

for（i=0； i

}

對于zepto.Z函數，代碼如下所示：

function Z（dom， selector）{

var i， len = dom ？ dom.length ： 0

for（i=0； i

this[i] = dom[i]

this.length = len

this.selector = selector || ‘

}

}

zepto.Z = function（dom， selector）{

return new Z（dom， selector）

}

MYM.fn = {

//…多種屬性

}

zepto.Z.prototype = Z.prototype = MYM.fn

這里對構造函數Z進行了實例化，Z函數與之前提到的原型密切相關，將原型函數進行重構，會獲得許多自定義的屬性與方法。MYM.fn函數是Z函數原型的出處，里面封裝了一系列原生Javascript的內容，將其與原生Javascript對比可發現，slice、each等方法都可以在原生方法中找到對應部分，同時考慮到兼容問題，整個原型對象即可完整呈現。至此，整個Zepto框架組合完畢，詳細的屬性方法可在API文檔中查看。

5 結語

縱觀互聯網浪潮中的前端領域，其發展十分迅速，各種組件庫、框架應運而生，因此前端也變得越來越復雜。但這一切變化都是建立在Html+CSS+Javascript上，而這些底層技術的變化相對緩慢[8]。本文分析了框架的設計原理與設計架構，將其中的封裝方法與原生Javascript方法進行對比，并闡述了此類框架設計的核心要點[9]。當然，在分析過程中也存在一些不足，如沒有將封裝方法與原生方法進行一一比對，框架代碼未能全部展現出來等，將在后續工作中進一步改進。

參考文獻：

[1] 王悅.基于Extjs4的Web前端框架設計與應用[D].青島：中國海洋大學，2015.

[2] 王保平.對JavaScript框架的再思考[J].程序員，2008（11）：24.

[3] 樊紅珍.JavaScript框架jQuery和ExtJS的對比研究[J].現代計算機月刊，2011（1）：23-24.

[4] 李紅.主流Javascript框架比較與分析[J].鞍山師范學院學報，2015（4）：40-47.

[5] 司徒正美.JavaScript框架設計[M].北京：人民郵電出版社，2014.

[6] 歐查德，LM. JavaScript框架高級編程：應用Prototype、YUI、Ext JS、Dojo、MooTools[M].北京：清華大學出版社，2011.

[7] 栗新雨.兩款jQuery前端框架（DWZ和MiniUI）之比較[J].計算機光盤軟件與應用，2013（20）：276.

[8] 姜艷.一種基于JavaScript框架的混合應用開發技術[J].網絡新媒體技術，2016，5（4）：59-64.

[9] 代慶梅.淺析JavaScript MVC框架在Web開發中的應用[J].電腦知識與技術：學術交流，2014（4）：2242-2245.

[10] 彭敦陸，杜雪鋒.基于Web服務的組件集成技術在客戶關系管理中的應用[J].上海理工大學學報，2004，26（1）：71-75.

[11] 蔣偉良，徐福緣.ADO方案與胖客戶環境下的交互HTML數據庫設計[J].上海理工大學學報，1999（2）：184-187.

[12] JENSEN S H， MLLER A， THIEMANN P. Type analysis for JavaScript[J]. Lecture Notes in Computer Science， 2009，5673：238-255.

[13] GUHA A， SAFTOIU C， KRISHNAMURTHI S. The essence of JavaScript[J]. Lecture Notes in Computer Science， 2015，6183：126-150.

（責任編輯：黃 健）