我的上篇文章介紹了WeX5中基本的頁面布局和交互事件寫法，有人私信我為什么源碼中的js要那樣寫，HTML源碼的結(jié)構(gòu)是怎樣的之類。那今天就總結(jié)一下Hello World的源碼結(jié)構(gòu)，才識有限，有疑問歡迎大家繼續(xù)私信我，一起鉆研 ，一起進(jìn)步。
HTML部分
在上篇Hello World的案例中，我們是通過新建一個w文件來進(jìn)行頁面樣式布局的，這里可能有同學(xué)會疑惑：怎么沒看見HTML文件呢？最終的HTML文件在哪？而且w文件的結(jié)構(gòu)也跟我們常見的網(wǎng)頁結(jié)構(gòu)不同啊，常規(guī)的
首先要明確的一點(diǎn)就是：w文件只是一個頁面片段，通俗地說就是一小段HTML代碼。在實(shí)際運(yùn)行的時候，比如說調(diào)試的時候WeX5會將該頁面片段以及相應(yīng)的資源加載到一個頁面框架中，從而獲得最終的整頁顯示效果。也就是說，可以將很多w文件加載到一個頁面中，比如官方的外賣案例中，地圖定位被做成一個w文件，然后在需要的時候中調(diào)用它，這就是所謂的按需加載了。
那怎樣得到一個完整的頁面呢？這就需要通過編譯了，具體可以參考WeX5官方的Hello World教程中的編譯和部署。簡單來說就是在Native目錄下新建一個本地App，指定主頁為Hello World的w文件，然后執(zhí)行“編譯使用到的UI資源”。編譯后在www目錄下會有一個index.html文件，這就是整個頁面的html文件。
先看看Hello World中的w文件源碼（點(diǎn)擊編輯器左下角的源碼標(biāo)簽）：
從上到下分別是window組件、model組件、output組件和button組件。window組件就是整個w文件的容器，output組件和button組件是我們添加上去的，都很好理解。但是怎么會有個model組件呢？生成的頁面上好像也沒看見這個model組件呀？這是用來做什么的呢？
在頁面應(yīng)用中，除了UI和人機(jī)交互之外，我們還需要做很多數(shù)據(jù)的處理。簡單的應(yīng)用中我們直接就把數(shù)據(jù)嵌入到j(luò)s的變量中去了。但是數(shù)據(jù)比較復(fù)雜的情況下，這種做法在管理上比較困難了。WeX5的做法是將數(shù)據(jù)單獨(dú)抽出來做成一個獨(dú)立的data組件，每個data組件管理相應(yīng)的數(shù)據(jù)，規(guī)模較大的應(yīng)用上會有比價多的data組件，所以就需要一個容器來接納這些data組件，這個容器就是model組件了。
注意：上篇中也有介紹js源碼中的Model對象，實(shí)際上這兩個model代表含義是一樣的，都是代表著這個頁面片段的所有資源（包括變量、dom節(jié)點(diǎn)等）。當(dāng)然，好奇的同學(xué)可以試過刪除它但發(fā)現(xiàn)沒什么影響，這里要了解HTML源碼中的model是整個model的一個映射，js中的model才是源頭。
再看看完整的html文件，由于WeX5采用了按需加載的機(jī)制，所以必須要到瀏覽器打開才能看到真正完整的整頁頁面哦：
紅框部分為w文件編譯而成的HTML代價，可以看到編譯后的代碼增加了很多內(nèi)容，有為了避免命名沖突而加的，有將數(shù)據(jù)綁定關(guān)系轉(zhuǎn)換過來的內(nèi)容等。一般來說我們用WeX5做開發(fā)只需要做好w文件即可，并不需要直接寫現(xiàn)成的HTML代碼。
JavaScript部分
先打開js源碼（點(diǎn)擊編輯器左下角的JS標(biāo)簽）：
熟悉Html5 app 開發(fā)的同學(xué)一眼就能看出，這是模塊化的寫法。WeX5中采用的是AMD規(guī)范的requirejs實(shí)現(xiàn)模塊化開發(fā)，每個w文件自動配置一個同名的js文件，在頁面加載的時候自動加載相應(yīng)的js文件。js文件中所有的js代碼被包裹在一個define語句里面，同時在內(nèi)部定義了一個Model對象并在最后輸出這個Model對象。其實(shí)這里的思路也很簡單，就是將所有與該w文件相關(guān)的js代碼放入define中隱藏起來，避免污染全局變量（這一點(diǎn)上一篇也說過），同時通過Model對象向外界暴露相應(yīng)的接口，這樣外界就可以通過這些接口對內(nèi)進(jìn)行操作了。另外，第一二行定義變量就是引入jQuery和justep框架，跟平常使用jQuery一樣的，如果要引入其他模塊也可以用同樣的方式。當(dāng)然，你也可以寫成 define([引用模塊1，引用模塊2], function(模塊1參數(shù)，模塊2參數(shù)) { 執(zhí)行代碼 } )，采用這種寫法要注意各個參數(shù)與模塊對應(yīng)起來，否則就會出錯。
說了這么多，那我們的代碼應(yīng)該怎么寫？
需要對外暴露的信息寫入var Model = function(){};中，需要對外暴露的方法推薦寫到Model原型里（Model.prototype.你的方法=function(){};），其他隱藏信息直接寫到define內(nèi)即可。比如：
變量a、b和函數(shù)add都不在Model內(nèi)，也就是這些信息外界都不能訪問到，這樣就實(shí)現(xiàn)了模塊內(nèi)部的封裝。更多關(guān)于前端模塊化開發(fā)的內(nèi)容，可以看看阮一峰的博文：Javascript模塊化編程。
另外還要一點(diǎn)：在設(shè)計(jì)編輯器中直接綁定的變量，都是在Model之下的。比如增了一個input然后將bind-value設(shè)置為myValue，那么這個myValue變量就是在Model之下的，可以通過myValue來訪問。
總結(jié)：Model就是js模塊對外的接口，w頁面與同名js文件的聯(lián)系通過綁定機(jī)制來實(shí)現(xiàn)。
CSS部分
大家看到HTML源碼的時候也應(yīng)該發(fā)現(xiàn)了，通過可視化編輯器設(shè)置的樣式是內(nèi)聯(lián)式的。很多人第一反應(yīng)就是內(nèi)聯(lián)樣式不好，但不好在哪？外聯(lián)的好處又在哪？
內(nèi)聯(lián)樣式因?yàn)橹苯訉懭際TML中，表現(xiàn)與結(jié)構(gòu)重度耦合，不利于管理和改動，另外一些本可以重用的樣式也直接寫入內(nèi)聯(lián)樣式中了，所以樣式的重用性差。但是內(nèi)聯(lián)也是有很大的優(yōu)勢的：一是速度快，由于不需要查找CSS文件和定位樣式，所以執(zhí)行速度是最快的；二是可以減少HTTP請求，獨(dú)立的CSS文件需要另外開HTTP請求去獲取，而HTTP請求又是性能優(yōu)化的最重要瓶頸。外聯(lián)樣式的好處網(wǎng)上已經(jīng)說得太多，可以在不改結(jié)構(gòu)的情況下快速批量化更改樣式，樣式的重用性好等等。
所以，小孩子才分好壞，成年人只看利弊。在WeX5中使用外聯(lián)樣式也是按需加載的，編寫方式跟正常的html5 app開發(fā)一樣的。官方建議的也是使用外聯(lián)樣式，降低后期維護(hù)成本?？梢灾苯狱c(diǎn)擊編輯器左下角的CSS標(biāo)簽進(jìn)入CSS編輯器里面。這里也提供了可視化編輯（點(diǎn)擊添加按鈕）和直接鍵盤輸入兩種編寫方法：
個人強(qiáng)烈建議使用鍵盤直接輸入，使用可視化編輯生成的樣式還是比較臃腫的。寫完保存之后，系統(tǒng)就會直接生成與w文件同名的css文件，在載入w文件的時候才會加載同名的js和css文件，實(shí)現(xiàn)按需加載。
總結(jié)
WeX5 Hello World的介紹就到這里了。通過Hello World案例，我們了解了組件可視化布局、樣式設(shè)置、交互事件編寫這三個最基本的操作，對應(yīng)的是HTML、CSS、js三大部分。其實(shí)任何一種前端的工具、框架、類庫都是基于這三大部分的集合，有了這些基礎(chǔ)之后其他的知識點(diǎn)還是比較好理解上手的。
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)cdcxhl.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
重慶分公司
重慶分公司
