我的上篇文章介紹了WeX5中基本的頁面佈局和交互事件寫法，有人私信我爲什麼源碼中的js要那樣寫，HTML源碼的結構是怎樣的之類。那今天就總結一下Hello World的源碼結構，才識有限，有疑問歡迎大家繼續私信我，一起鑽研 ，一起進步。
HTML部分
在上篇Hello World的案例中，我們是通過新建一個w文件來進行頁面樣式佈局的，這裏可能有同學會疑惑：怎麼沒看見HTML文件呢？最終的HTML文件在哪？而且w文件的結構也跟我們常見的網頁結構不同啊，常規的<hear>、<body>標籤都沒有呢，這是怎麼回事？
首先要明確的一點就是：w文件只是一個頁面片段，通俗地說就是一小段HTML代碼。在實際運行的時候，比如說調試的時候WeX5會將該頁面片段以及相應的資源加載到一個頁面框架中，從而獲得最終的整頁顯示效果。也就是說，可以將很多w文件加載到一個頁面中，比如官方的外賣案例中，地圖定位被做成一個w文件，然後在需要的時候中調用它，這就是所謂的按需加載了。
那怎樣得到一個完整的頁面呢？這就需要通過編譯了，具體可以參考WeX5官方的Hello World教程中的編譯和部署。簡單來說就是在Native目錄下新建一個本地App，指定主頁爲Hello World的w文件，然後執行“編譯使用到的UI資源”。編譯後在www目錄下會有一個index.html文件，這就是整個頁面的html文件。
先看看Hello World中的w文件源碼（點擊編輯器左下角的源碼標籤）：
從上到下分別是window組件、model組件、output組件和button組件。window組件就是整個w文件的容器，output組件和button組件是我們添加上去的，都很好理解。但是怎麼會有個model組件呢？生成的頁面上好像也沒看見這個model組件呀？這是用來做什麼的呢？
在頁面應用中，除了UI和人機交互之外，我們還需要做很多數據的處理。簡單的應用中我們直接就把數據嵌入到js的變量中去了。但是數據比較複雜的情況下，這種做法在管理上比較困難了。WeX5的做法是將數據單獨抽出來做成一個獨立的data組件，每個data組件管理相應的數據，規模較大的應用上會有比價多的data組件，所以就需要一個容器來接納這些data組件，這個容器就是model組件了。
注意：上篇中也有介紹js源碼中的Model對象，實際上這兩個model代表含義是一樣的，都是代表着這個頁面片段的所有資源（包括變量、dom節點等）。當然，好奇的同學可以試過刪除它但發現沒什麼影響，這裏要了解HTML源碼中的model是整個model的一個映射，js中的model纔是源頭。
再看看完整的html文件，由於WeX5採用了按需加載的機制，所以必須要到瀏覽器打開才能看到真正完整的整頁頁面哦：
紅框部分爲w文件編譯而成的HTML代價，可以看到編譯後的代碼增加了很多內容，有爲了避免命名衝突而加的，有將數據綁定關係轉換過來的內容等。一般來說我們用WeX5做開發只需要做好w文件即可，並不需要直接寫現成的HTML代碼。
JavaScript部分
先打開js源碼（點擊編輯器左下角的JS標籤）：
熟悉Html5 app 開發的同學一眼就能看出，這是模塊化的寫法。WeX5中採用的是AMD規範的requirejs實現模塊化開發，每個w文件自動配置一個同名的js文件，在頁面加載的時候自動加載相應的js文件。js文件中所有的js代碼被包裹在一個define語句裏面，同時在內部定義了一個Model對象並在最後輸出這個Model對象。其實這裏的思路也很簡單，就是將所有與該w文件相關的js代碼放入define中隱藏起來，避免污染全局變量（這一點上一篇也說過），同時通過Model對象向外界暴露相應的接口，這樣外界就可以通過這些接口對內進行操作了。另外，第一二行定義變量就是引入jQuery和justep框架，跟平常使用jQuery一樣的，如果要引入其他模塊也可以用同樣的方式。當然，你也可以寫成 define([引用模塊1，引用模塊2], function(模塊1參數，模塊2參數) { 執行代碼 } )，採用這種寫法要注意各個參數與模塊對應起來，否則就會出錯。
說了這麼多，那我們的代碼應該怎麼寫？
需要對外暴露的信息寫入var Model = function(){};中，需要對外暴露的方法推薦寫到Model原型裏（Model.prototype.你的方法=function(){};），其他隱藏信息直接寫到define內即可。比如：
變量a、b和函數add都不在Model內，也就是這些信息外界都不能訪問到，這樣就實現了模塊內部的封裝。更多關於前端模塊化開發的內容，可以看看阮一峯的博文：Javascript模塊化編程。
另外還要一點：在設計編輯器中直接綁定的變量，都是在Model之下的。比如增了一個input然後將bind-value設置爲myValue，那麼這個myValue變量就是在Model之下的，可以通過myValue來訪問。
總結：Model就是js模塊對外的接口，w頁面與同名js文件的聯繫通過綁定機制來實現。
CSS部分
大家看到HTML源碼的時候也應該發現了，通過可視化編輯器設置的樣式是內聯式的。很多人第一反應就是內聯樣式不好，但不好在哪？外聯的好處又在哪？
內聯樣式因爲直接寫入HTML中，表現與結構重度耦合，不利於管理和改動，另外一些本可以重用的樣式也直接寫入內聯樣式中了，所以樣式的重用性差。但是內聯也是有很大的優勢的：一是速度快，由於不需要查找CSS文件和定位樣式，所以執行速度是最快的；二是可以減少HTTP請求，獨立的CSS文件需要另外開HTTP請求去獲取，而HTTP請求又是性能優化的最重要瓶頸。外聯樣式的好處網上已經說得太多，可以在不改結構的情況下快速批量化更改樣式，樣式的重用性好等等。
所以，小孩子才分好壞，成年人只看利弊。在WeX5中使用外聯樣式也是按需加載的，編寫方式跟正常的html5 app開發一樣的。官方建議的也是使用外聯樣式，降低後期維護成本。可以直接點擊編輯器左下角的CSS標籤進入CSS編輯器裏面。這裏也提供了可視化編輯（點擊添加按鈕）和直接鍵盤輸入兩種編寫方法：
個人強烈建議使用鍵盤直接輸入，使用可視化編輯生成的樣式還是比較臃腫的。寫完保存之後，系統就會直接生成與w文件同名的css文件，在載入w文件的時候纔會加載同名的js和css文件，實現按需加載。
總結
WeX5 Hello World的介紹就到這裏了。通過Hello World案例，我們瞭解了組件可視化佈局、樣式設置、交互事件編寫這三個最基本的操作，對應的是HTML、CSS、js三大部分。其實任何一種前端的工具、框架、類庫都是基於這三大部分的集合，有了這些基礎之後其他的知識點還是比較好理解上手的。