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

        最近在研究WeX5，想在這裏記錄下使用過程當中的點滴，今天先把以前已經掌握的分享一下。
        WeX5官方的開發指南難度係數較大，面向的受衆多是已經敲過上萬行代碼的html5 app開發者。可是做爲一個剛進入代碼世界的html5 app開發寶寶，本人表示拿着這份指南也找不到「南」，
先拋開官方版的，下面就來看看進擊版的Hello World吧。
基礎部分
一、準備工做：下載並打開hml5 app 開發工具——WeX5（路徑：WeX5\studio\studio.exe），在左側模型資源管理器中創建HelloWorld目錄並新建W文件，模板選空白的就好。這一步有問題找右鍵。

    

二、鼠標拖一個Output放到W頁面上，效果以下：

三、在屬性標籤頁設置Output的外觀樣式，這裏經常使用的是class（設置類型），style（設置具體的樣式），我這裏就設置了一下Output的紅色邊框。這裏都是可視化鼠標操做，就很少說了，各類樣式能夠盡情探索

 

四、一番精心打扮以後，固然要看看運行效果啦，試運行的步驟是：先啓動Tomcat，而後在W文件上右鍵選擇「用瀏覽器運行」。記得要先保存W文件再試運行才能看到改動效果哦。

        經過簡單的鼠標操做，很簡單就能設置好Output控件的外觀，這個也是WeX5的強大之處。並且更重要的一點是，全部設置都是符合html5 標準的！好比說你要設置一個控件的位置，並不能直接拖動控件到你想要的位置，而要經過邊距、定位等設置才能定位。因此即便是使用WeX5進行開發，仍是要懂基本的HTML、CSS、JavaScript的，這裏推薦不太熟悉的親們去稍微學習點基本的html5基礎知識。新手不用太糾結細節，先總體瞭解，往後碰到具體問題再去找相應的解決辦法。固然，小茄這邊也會分享相關的內容，你們能夠關注哈~~~

五、上面的鼠標流操做設置好了外觀，但還沒看到Hello World的影子呢。你們確定也想到了要在Output中輸出Hello World，具體操做也很是簡單：在屬性標籤頁的「bind-ref」內輸入「Hello World」就能夠啦，注意要用英文模式的雙引號把Hello World引發來。有點編程基礎的同窗都知道，用雙引號包起來的纔是字符串，沒有雙引號的話就是變量了。這樣就設置好了，試運行時在Output裏面就能看到效果了。

PS：這裏的「bind-ref」是WeX5中的一個數據綁定機制，能夠將其想象成一個管道，經過這個管道能夠將不一樣組件間的數據綁定起來。例如我這裏有兩個Output組件，咱們能夠簡單的經過bind來說兩個組件的值綁定起來，但只是綁定的話並無動態刷新的功能，若是須要像官方Hello World那樣作到動態刷新，還須要將綁定的值設置爲可觀察對象。這個部分理解起來比較難，後續我會單獨開一個章節去講這部分，本文先略過。
注意：原生的Web寫法應該是在標籤內寫入要顯示的內容，例如：Hello World。
        可是WeX5將基本的HTML組件進行了封裝，並且爲了方便管理數據還引入了數據綁定機制，
        每次進行組件初始化的時候都會調用相應的構造函數去初始化組件，因此即便在Output組件的源碼中加入Hello World：
<div component="$UI/system/components/justep/output/output" class="x-output" xid="output1" style="height:40px;" dataType="String">Hello World</div>
但Output的innerText也仍是會根據數據綁定的規則去初始化組件，若是沒有綁定，則初始化爲空值。所以，WeX5中除了原生的HTML標籤外，都應該按照WeX5的規範使用數據綁定的方式來管理控件。

進階部分
       上面這種純輸出的頁面沒什麼意思，如今試試加點交互效果。好比說加個按鈕，點擊按鈕改變輸出信息爲」Hello WeX5」。官方原版的Hello World案例中使用了WeX5的數據雙向綁定機制來實現，由於咱們都不熟悉WeX5的數據綁定機制，因此理解起來很是吃力。拋開綁定機制，WeX5的寫法其實很簡單：
Model.prototype.button2Click = function(event){
var output = this.getElementByXid('output1');
output.innerText = "Hello WeX5";
};
       WeX5提供了一個事件標籤頁來方便地設置組件的各類事件，這樣一來能夠一覽組件的事件接口，二來也方便集中管理全部組件事件。使用方法就是在須要的事件中填入函數名（不填則使用默認函數名）並雙擊，而後就能夠進入js源碼頁了，這裏系統會自動生成Model.prototype.函數名 = function(event){}代碼段。細心的同窗會發現，這裏的事件也是帶bind前綴的。沒錯，這裏也採用了數據綁定機制同樣的實現方式，不過這裏暫時先不用管這些，知道用法便可。

這裏小茄也默認你們有Web編程基礎的了，先對比原生的web寫法：
<p id="output1">Hello World</p>
<button>Button</button>
<script type="text/javascript">
function button2Click(event) {
var output = document.getElementById('output1');
output.innerText = 'Hello WeX5';
}
</script>
        能夠看出主要的差別點是WeX5中使用了xid代替了原生的id，因此要用getElementByXid來獲取元素節點。之因此這樣作的緣由，主要是爲了解決命名衝突的問題，在一個複雜頁面中一般是將頁面分紅不少頁面片斷來開發的，而不少時候某幾個頁面片斷均可能引用了同一個組件，那麼在總頁面中就會產生id的命名衝突。而xid是經過在id後面加入一個頁面標示，即便是同一個id在不一樣的頁面片斷中的xid也是不一樣的，這樣就解決了id衝突的問題。
另一點差別是WeX5中還建立了一個Model對象，頁面中資源都放入了Model變量中，使用的時候也要在Model中進行操做。而原生的寫法是將全部函數和變量都放在全局環境中，使用的時候直接引用全局中的函數變量。當一個頁         面比較複雜的時候，全局下就會有很是多的函數和變量，這樣就容易產生變量衝突和變量覆蓋，由於js中是能夠重複聲明的，後聲明的變量會覆蓋掉前面聲明的變量，這樣一來後聲明的函數就將前面的函數體覆蓋掉了。更爲嚴重的是，瀏覽器給js提供了很高的權限，你甚至能夠覆蓋掉系統提供的接口。好比說：
        alert = function () { window.close(); }
        alert("hello");
       這樣alert就由報警變成了關閉頁面，但瀏覽器是容許這種行爲的，因此咱們應該儘可能避免污染全局變量。
最後還有一點就是咱們定義的方法是放在Model.prototype之下的，也就是放在Model原型下面的。也就是說採用了混合模式（構造+原型）來建立對象，固然，直接寫在對象下也是OK的，只是不推薦這種寫法，例如：
var Model = function(){
this.callParent();
this.button2Click = function(event){
var output = this.getElementByXid('output1');
output.innerText = "Hello WeX5";
};
};
總結
         上面的例子實現了一個按鈕改變輸出文字的功能，經過這個例子，你們應該能掌握WeX5中頁面佈局設計與簡單交互事件的寫法，上面介紹的寫法與原生比較類似，對有web基礎的同窗來講應該是很好理解的。沒有基礎的同窗，仍是推薦先到w3school 去學習web基礎，過一遍HTML、CSS，熟悉一下js語法便可。
          關於Hello World可說的內容還有許多，下一篇我會介紹一下HTML源碼以及js源碼結構。
          附錄：官方Hello World的WeX5寫法與原生js寫法對比，能夠看出在頁面複雜的時候WeX5的代碼更簡潔，更方便管理。
原生js寫法：
Input1: <input type="text" id="input1" value="" /><br />
Input2: <input type="text" id="input2" value="" />
<script type="text/javascript">
var input1 = document.getElementById('input1'),
input2 = document.getElementById('input2');
input1.addEventListener('input', function (e) {
input2.value = this.value;
});
input2.addEventListener('input', function (e) {
input1.value = this.value;
});
</script>
WeX5寫法：
define(function(require){
var $ = require("jquery");
var justep = require("$UI/system/lib/justep");
var Model = function(){
this.callParent();
this.input1 = justep.Bind.observable(""); //核心語句
};
return Model;
});