本文是《WeX5的正確打開方式》系列的第二篇文章。
《WeX5的正確打開方式》系列目錄:
? ? (1)入門篇之進擊的Hello World
? ? (2)入門篇之進擊的Hello World(續)
? ? (3)WeX5綁定機制
? ? (4)WeX5綁定機制(續)

前言

? ? ? ?上篇文章介紹了WeX5中基本的頁面布局和交互事件寫法,大家也領略到了WeX5頁面布局設計器的快速便捷,但是相信很多同學對里面內容還是有疑問的,比如為什么源碼中的js要那樣寫,HTML源碼的結構是怎樣的之類。這一篇就來分析一下Hello World的源碼結構,才識有限,有錯還請大家指出哈。

HTML部分

? ? ? ?在上篇Hello World的案例中,我們是通過新建一個w文件來進行頁面樣式布局的,這里可能有同學會疑惑:怎么沒看見HTML文件呢?最終的HTML文件在哪?而且w文件的結構也跟我們常見的網頁結構不同啊,常規的<hear>、<body>標簽都沒有呢,這是怎么回事?
首先要明確的一點就是:w文件只是一個頁面片段,通俗地說就是一小段HTML代碼。在實際運行的時候,比如說調試的時候WeX5會將該頁面片段以及相應的資源加載到一個頁面框架中,從而獲得最終的整頁顯示效果。也就是說,可以將很多w文件加載到一個頁面中,比如官方的外賣案例中,地圖定位被做成一個w文件,然后在需要的時候中調用它,這就是所謂的按需加載了。

? ? ? ?1

? ? ? ?那怎樣得到一個完整的頁面呢?這就需要通過編譯了,具體可以參考WeX5官方Hello World教程中的編譯和部署。簡單來說就是在Native目錄下新建一個本地App,指定主頁為Hello World的w文件,然后執行“編譯使用到的UI資源”。編譯后在www目錄下會有一個index.html文件,這就是整個頁面的html文件。
先看看Hello World中的w文件源碼(點擊編輯器左下角的源碼標簽):

? ? ? ?2

? ? ? ?從上到下分別是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采用了按需加載的機制,所以必須要到瀏覽器打開才能看到真正完整的整頁頁面哦:

? ? ? ?3

? ? ? ?紅框部分為w文件編譯而成的HTML代價,可以看到編譯后的代碼增加了很多內容,有為了避免命名沖突而加的,有將數據綁定關系轉換過來的內容等。一般來說我們用WeX5做開發只需要做好w文件即可,并不需要直接寫現成的HTML代碼。

JavaScript部分

先打開js源碼(點擊編輯器左下角的JS標簽):
? ? ? ?4
? ? ??

? ? ? ?熟悉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內即可。比如:

? ? ? ?5

? ? ? ?變量a、b和函數add都不在Model內,也就是這些信息外界都不能訪問到,這樣就實現了模塊內部的封裝。更多關于前端模塊化開發的內容,可以看看阮一峰的博文:Javascript模塊化編程
另外還要一點:在設計編輯器中直接綁定的變量,都是在Model之下的。比如增了一個input然后將bind-value設置為myValue,那么這個myValue變量就是在Model之下的,可以通過myValue來訪問。

? ? ? ?6

? ? ? ?總結:Model就是js模塊對外的接口,w頁面與同名js文件的聯系通過綁定機制來實現。

CSS部分

? ? ? ?大家看到HTML源碼的時候也應該發現了,通過可視化編輯器設置的樣式是內聯式的。很多人第一反應就是內聯樣式不好,但不好在哪?外聯的好處又在哪?
內聯樣式因為直接寫入HTML中,表現與結構重度耦合,不利于管理和改動,另外一些本可以重用的樣式也直接寫入內聯樣式中了,所以樣式的重用性差。但是內聯也是有很大的優勢的:一是速度快,由于不需要查找CSS文件和定位樣式,所以執行速度是最快的;二是可以減少HTTP請求,獨立的CSS文件需要另外開HTTP請求去獲取,而HTTP請求又是性能優化的最重要瓶頸。外聯樣式的好處網上已經說得太多,可以在不改結構的情況下快速批量化更改樣式,樣式的重用性好等等。
? ? ? ?所以,小孩子才分好壞,成年人只看利弊。在WeX5中使用外聯樣式也是按需加載的,編寫方式跟正常的html5 app開發一樣的。官方建議的也是使用外聯樣式,降低后期維護成本。可以直接點擊編輯器左下角的CSS標簽進入CSS編輯器里面。這里也提供了可視化編輯(點擊添加按鈕)和直接鍵盤輸入兩種編寫方法:

? ? ? ?7
? ? ? ?個人強烈建議使用鍵盤直接輸入,使用可視化編輯生成的樣式還是比較臃腫的。寫完保存之后,系統就會直接生成與w文件同名的css文件,在載入w文件的時候才會加載同名的js和css文件,實現按需加載。

總結

? ? ? ?WeX5 Hello World的介紹就到這里了。通過Hello World案例,我們了解了組件可視化布局、樣式設置、交互事件編寫這三個最基本的操作,對應的是HTML、CSS、js三大部分。其實任何一種前端的工具、框架、類庫都是基于這三大部分的集合,有了這些基礎之后其他的知識點還是比較好理解上手的。

本文源自WeX5開發者——小茄投稿,開發者可在WeX5論壇中記錄html5 ?app開發過程中的點滴。

也可以直接發送到WeX5官方郵箱中投稿,Email地址:[email protected]