js框架源碼原理（web框架原理）

本文目錄一覽：

• 1、Three.js源碼解讀一：Object3D
• 2、javascript框架是什麼意思？有什麼作用？怎麼理解？最好舉個例子
• 3、js源碼解釋
• 4、到底什麼是js框架啊，我就知道js代碼，jquery是js的框架!但是到底怎麼理解框架啊，框架到底是什麼樣的？
• 5、extjs框架工作原理

Three.js源碼解讀一：Object3D

可能很多同學會發現，學習Three.js的API非常容易，但是真正理解API的作用卻非常難。其實讓大家感到難的並不是Three.js本身，而是Three.js背後所隱藏的3D圖形學知識。本系列Three.js源碼解讀文章，會幫你一邊補齊3D圖形學的基礎知識，一邊真正理解到Three.js的實現原理，知其然，知其所以然。

Object3D是ThreeJS中大部分物體的基類，它包含了物體的位移，旋轉，縮放，以及各個物體父子關係的js實現。選取Object3D幾個重要的屬性做解釋：

一個3D對象往往由多個父子對象組成，父對象的位移, 旋轉, 縮放會傳遞給所有的子對象。

this.parent指向父對象，this.children包含了所有的子對象。

通過 add 為物體添加子對象。需要注意的是，如果該子對象有其他的父對象，會先解除子對象和舊的父對象的父子關係，然後將子對象添加到新的父對象中。

this.matrix表示物體自身的本地形變，this.matrixWorld表示物體的全局形變。當物體沒有父對象時，全局形變就是本地形變。

為什麼對象組合這麼重要呢？看下面的例子：

這兩個立方體共同組成了一個3D對象，下面的立方體為底座，上面的立方體為操作臂。當底座轉動的時候，操作臂會同樣轉動，所以操作臂的形變會傳遞給底座。當操作臂旋轉時，底座不會被影響。

這裡，底座就是操作臂的父對象。只要簡單的將底座的全局形變(this.parent.matrixWorld)和操作臂的本地形變(this.matrix)相乘，就能得到操作臂的最終形變。是不是很方便？

3D物體的位移，旋轉，縮放都可以通過矩陣表示。其中，旋轉除了通過矩陣，還可以通過歐拉角和四元數表示。

Object3D的rotation代表物體旋轉的歐拉角表示，quaternion代表了四元數表示，他們是3D物體統一旋轉的不同數學表達方式。(矩陣，歐拉角，四元數表示旋轉

onRotationChange , onQuaternionChange 這兩個回調用於同步歐拉角和四元數，保證他們代表著相同的旋轉角度。

3D交互一個很大一部分工作量是需要在物體的本地空間( this.matrix )和世界空間( this.matrixWorld )進行坐標轉換。

javascript框架是什麼意思？有什麼作用？怎麼理解？最好舉個例子

淺談js框架設計 在這個JavaScript框架隨處亂跑的時代，你是否考慮過寫一個自己的框架？下面的內容也許會有點幫助。

一個框架應該包含哪些內容？

1.語言擴展

大部分現有的框架都提供了這部分內容，語言擴展應當是以ECMAScript為基礎進行的，不應當依賴任何宿主環境，也就是說，作為一個框架的設計者，你應當保證你的語言擴展可以工作在任何宿主環境中，而不是僅僅適合瀏覽器環境。你必須保證把它放到WScript,SpiderMonkeyShell,Rhino Shell,Adobe ExtendScript Toolkit甚至FlashActionScript等環境中都能正確的工作，舉個現實一點的例子setTimeout不可以出現在其中，你也不能用XMLHTTP載入腳本運行，儘管它們看起來很貼近語言。保持這一部分的獨立性可以讓你方便的移植你的框架到其他宿主環境下。　

2.數據結構和演算法

JS本身提供的內置對象非常有限，很多時候，框架應該提供一些數據結構和演算法來幫助使用者更好的完成邏輯表達。但我認為隨便翻本數據結構或者演算法書用JS挑幾個實現了加到框架中是不負責任的，多數數據結構應當以庫的形式存在而非框架。框架中的數據結構應該足夠常用而且實現不是非常複雜的，可以考慮的如集合、哈希表、鏈表、有序數組以及有序數組上的二分搜索。對JS來說，對象是一個天然的字元串哈希表，而集合很容易在哈希表上實現，因此只需要處理掉Object的內置方法，我們就可以實現一個高效的集合或哈希表。

3.DOM擴展

JS主要應用於Web開發，目前所有的框架也都用於瀏覽器環境，那麼，瀏覽器端環境里重點中的重點DOM當然也是框架的擴展目標了，如果一個框架不提供DOM的擴展，那麼其實基本沒什麼用處了。需要注意的是，DOM擴展也有w3c的標準可依，所以，不要嘗試為各種瀏覽器做一些奇怪的擴展，比如FF下面的element們的prototype，框架的編寫者應當無視它們。DOM擴展的主要任務之一是兼容性，不同瀏覽器上的DOM實現相差很多，框架必須消除這些實現帶來的差異，提供統一的訪問方式。當然，做為框架，應當提供一些更為方便的介面，將宿主提供的DOM對象用js對象封裝是個不錯的想法，但是同時這也很可能會造成內存泄露，所以做這事之前，了解內存泄露是必要的。實際上，自己想像的擴展遠不如W3C的設計，比如如果你能更完整地實現XPath，你就能比JQuery做的更好。

4.AJAX擴展

大部分現有框架出現的原因都是因為AJAX，所以如果你想設計一個受歡迎的框架，AJAX是必須要做的。跟DOM擴展很相似，AJAX擴展的主要任務是兼容和內存泄露，對AJAX的核心組件XMLHttpRequest對象，必須在IE6中使用ActiveX創建，而ActiveX又有各種版本，而隨之而來的內存泄露和兼容性變得非常麻煩，比如：事件函數名大小寫、this指向、事件函數的null賦值。處理好這些兼容性的基礎上，可以做進一步的工作，提供一些常用的實現。應該指出的是，除非你確定你提供的介面比原來的更好，否則不要改變原來的XMLHttpRequest對象的介面，比如寫一個Request函數來代替open和send，如果你不清楚W3C的專家們為什麼這麼設計，請不要把他們想像成傻瓜。我想自己另外寫一個兼容且內存安全的XMLHttpRequest加入到自己框架的命名空間里，使它從外部看上去跟W3C描述的XMLHttpRequest一模一樣是不錯的辦法，對XMLHttpRequest我認為唯一可以考慮的修改是提供onsuccess事件。當然針對一些複雜功能的AJAX擴展也是可行的，比如HTMLHttpRequest類似的擴展可以讓AJAX初學者喜歡你的框架。

5.效果

時間效果是最能刺激用戶神經的，漸隱、緩動、滑動、顏色漸變這些都很不錯，其實技術難度也不是很高。拖動效果則是瀏覽器中一個很重要的效果，用滑鼠事件來模擬本來很容易，不過兼容和setCapture也是很麻煩的事情。這一部分內容量力而為就可以了。

7.腳本管理

因為大家非常喜歡C++風格的include或者JAVA風格的import，很多框架提供了基於AJAX的腳本管理，不過同步載入的效率問題是巨大的。之前我們曾經作過各種嘗試，希望找到一個瀏覽器中不用XMLHTTP載入外部js的方法，但是最後得出的結論是：不可能。

關於這個，略微思考就可以知道，Java C++ C#都是編譯型語言，include 和import都是編譯期處理，在js中做到類似的事情是不太可能的。為了實現類似的功能，我想我們可以利用服務端程序或者編寫一個文本工具來實現。

YUI將所有的js文件依賴關係提取出來的做法是可行的，不過這不能算是include的實現方式了，維護依賴關係不是一件很簡單的事情。

8.控制項

EXT的成功告訴我們：提供優質的控制項才是框架的王道。你不能指望優質的擴展會吸引更多使用者。多數人只關心如何快速完成手邊的工作。當然不是所有框架都要提供這部分內容。控制項好壞取決於能力和美工，不過至少要保證框架里的控制項不會內存泄露。

框架設計的若干原則：

1.不要做多餘的事

對這框架設計來說，我認為一個非常必要的原則就是不要做多餘的事情，舉個極端的的例子：

function add(a,b)

{

return a+b;

}

這樣的代碼如果出現在框架中，就是個十足的笑話。不過大多數時候，事情不是那麼明顯，很多框架試圖用某種形式在JS中”實現”OOP，但是實際上，JS本身是OO的（ECMA262中明確指出來的，不像某些人所說是基於對象云云）只是有一些語法跟Java等語言不同。那麼顯然這些OOP的”實現”其實是跟上面的例子一樣的道理。另一個例子是Array.prototype.clone

Array.prototype.clone=function(){

return this.slice();

}

2.慎用prototype擴展

很多框架利用修改原生對象的prototype來做語言擴展，但我認為應當小心地看待這件事，毫無疑問這將造成一定的命名污染，你無法保證框架的使用者或者與你的框架共存的其他框架不會使用同樣的名字來完成其他的事情。特別需要注意的是，Object和Array這兩個對象的prototype擴展格外的危險，對Object來說，如果Object被修改，那麼框架的使用者將無法創建一個未被修改的乾淨的對象，這是一個致命的問題，尤其如果你的使用者喜歡用forin來反射一個對象的屬性。Array.prototype修改的危險來自js一個不知有意還是無意的小小設計，對原生的Array來說，任何情況下for和forin的遍歷結果是相同的，而因為無法控制自定義的屬性是不可枚舉的，任何Array.prototype的修改都會破壞這種特性。一方面，我認為不應當推薦用forin遍曆數組，這其中包含著錯誤的語義。另一方面，框架的設計者必須尊重這些使用者，因為對於ECMA所定義的語法而言，它是正確的做法。其中包含著這樣一個簡單的事實：假如你的框架中修改了Array.prototype，那麼一些之前能正確工作的代碼變得不可正確工作。

直接修改prototype看上去非常誘人，但是在考慮它之前應當先考慮兩種可能的方案：

(1)函數

提供一個以對象為第一個參數的函數比如 Array.prototype.each =

function ForEach(arr,f)

{

if(arr instanceof Array)/*…*/;

}

(2)繼承

以return的形式繼承一個內置對象 比如考慮Array.prototype.each=

function ArrayCollection()

{

var r=Array.apply(this,arguments);

r.each=function(){/*……*/};

return r;

}

套用一句名言，不要修改原生對象的prototype，除非你認為必要。不過修改原生對象的prototype確實有一些特殊的用途（就是”必要的情況”），主要體現在2點：文字量支持和鏈式表達。舉一個例子可以體現這兩點：

var cf=function f(a,b,c,d)

{

/*……..*/

}.$curry(3,4).$curry(5).$run();

如果希望實現類似上面的表達方式，可能就需要擴展Function.prototype，權衡一下的話，如果你認為命名污染的代價是值得的，那麼也是可以提供給使用者的。

一個比較討巧的辦法是把選擇權利交給使用者，提供一個擴展器：

function FunctionExtend()

{

this.$curry=function(){/*……*/};

this.$run=function(){/*……*/};

}

如果用戶喜歡可以FunctionExtend.apply(Function.prototype); 如果不喜歡擴展 則可以

var r=function(){/*……*/};

FunctionExtend.apply(r);

3.保持和原生對象的一致

不知你有沒有注意到，內置對象Function Array等都有這樣的性質：

new Function()跟Function的結果完全一致（String Number Boolean這種封裝型對象沒有這樣的性質）

如果框架中提供的類也具有這種性質，會是不錯的選擇。這僅僅是一個例子，如果你注意到了其他細節，並且讓框架中的類和原生對象保持一致，對使用者來說是非常有益的。

4.尊重語言 尊重用戶

編寫框架應該尊重依賴的語言環境，在對原有的元素修改之前，首先應該考慮到原來的合理性，任何語言的原生環境提供的都是經過了精心設計的，在任何修改之前，至少應該考慮這幾點：效率、命名規範、必要性、與其他功能是否重複。如果你沒有付出至少跟語言的設計者相當的工作量，你的做法就是欠考慮的。

編寫框架也應該尊重用戶的所有習慣，將編寫者的喜好強加給使用者並不是框架應該做的事情。框架應該保證大部分在沒有框架環境下能運行的代碼都能在框架下正常工作，這樣用戶不必為了使用你的框架而修改原有的代碼。

5.規範命名和使用命名空間

減少命名污染可以讓你的框架跟其他框架更好地共存。很多框架使用了命名空間來管理，這是良好的設計。命名應該是清晰且有實際意義的英文單詞，如前面3所述，為了保持和原生對象的一致，命名規則最好貼近原生對象，比如類名第一字母大寫，方法名用駝峰命名。捎帶一提prototype中的$實在是非常糟糕的設計，無法想像$出現的目的僅僅是為了讓使用者少寫幾個字母。這種事情應該交給你的用戶在局部代碼中使用

js源碼解釋

處理圖片的一段js腳本，

var GIF89a=document.location.href;//先取本頁的鏈接

GIF89a=GIF89a.substring(0,GIF89a.lastIndexOf(‘/’));//截取最後一個「/」後面的部分，也就是文件的名字

然後在本頁中添加一個object

到底什麼是js框架啊，我就知道js代碼，jquery是js的框架!但是到底怎麼理解框架啊，框架到底是什麼樣的？

很直白的說，其實js框架就是對js代碼一層封裝，提供了一些教常用的方法。

如jquery，就是用js代碼自己寫了很多函數，放到jquery.js文件中，作為一個js的函數庫。別人可以直接引用這個js文件，然後用裡面的js方法完成常用的操作。這就是jquery框架的本質。

為什麼要使用框架？優勢在哪裡？優勢在於，它封裝的函數的操作性比js強，很多操作只需簡單的jquery的函數就能完成，而且是對所有瀏覽器都兼容的，如果你直接使用js有時要考慮瀏覽器兼容性。

extjs框架工作原理

1、ExtJS可以用來開發RIA也即富客戶端的AJAX應用，是一個用javascript寫的，主要用於創建前端用戶界面，是一個與後台技術無關的前端ajax框架。因此，可以把ExtJS用在.Net、Java、Php等各種開發語言開發的應用中。ExtJs最開始基於YUI技術，由開發人員JackSlocum開發，通過參考JavaSwing等機制來組織可視化組件，無論從UI界面上CSS樣式的應用，到數據解析上的異常處理，都可算是一款不可多得的JavaScript客戶端技術的精品。

2、Ext的UI組件模型和開發理念脫胎、成型於Yahoo組件庫YUI和Java平台上Swing兩者，並為開發者屏蔽了大量跨瀏覽器方面的處理。相對來說，EXT要比開發者直接針對DOM、W3C對象模型開發UI組件輕鬆。