【分享】WeX5的正確打開方式（2）

時間 2019-11-16

標籤分享 wex5 wex 正確打開方式简体版

原文原文鏈接

個人上篇文章介紹了WeX5中基本的頁面佈局和交互事件寫法，有人私信我爲何源碼中的js要那樣寫，HTML源碼的結構是怎樣的之類。那今天就總結一下Hello World的源碼結構，才識有限，有疑問歡迎你們繼續私信我，一塊兒鑽研，一塊兒進步。css

HTML部分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文件源碼（點擊編輯器左下角的源碼標籤）：html5

從上到下分別是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參數) { 執行代碼 } )，採用這種寫法要注意各個參數與模塊對應起來，不然就會出錯。app

說了這麼多，那咱們的代碼應該怎麼寫？
須要對外暴露的信息寫入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部分dom

你們看到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三大部分。其實任何一種前端的工具、框架、類庫都是基於這三大部分的集合，有了這些基礎以後其餘的知識點仍是比較好理解上手的。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。