溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
我的上篇文章介紹了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三大部分。其實任何一種前端的工具、框架、類庫都是基于這三大部分的集合，有了這些基礎之后其他的知識點還是比較好理解上手的。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
