【分享】WeX5的正確打開(kāi)方式（1）

最近在研究WeX5，想在這里記錄下使用過(guò)程中的點(diǎn)滴，今天先把之前已經(jīng)掌握的分享一下。

       WeX5官方的開(kāi)發(fā)指南難度系數(shù)較大，面向的受眾可能是已經(jīng)敲過(guò)上萬(wàn)行代碼的html5 app開(kāi)發(fā)者。但是作為一個(gè)剛進(jìn)入代碼世界的html5 app開(kāi)發(fā)寶寶，本人表示拿著這份指南也找不到“南”，

        先拋開(kāi)官方版的，下面就來(lái)看看進(jìn)擊版的Hello World吧。

基礎(chǔ)部分

1、準(zhǔn)備工作：打開(kāi)hml5 app 開(kāi)發(fā)工具——WeX5（路徑：WeX5\studio\studio.exe），在左側(cè)模型資源管理器中建立HelloWorld目錄并新建W文件，模板選空白的就好。這一步有問(wèn)題找右鍵。

2、鼠標(biāo)拖一個(gè)Output放到W頁(yè)面上，效果如下：

3、在屬性標(biāo)簽頁(yè)設(shè)置Output的外觀樣式，這里常用的是class（設(shè)置類(lèi)型），style（設(shè)置具體的樣式），我這里就設(shè)置了一下Output的紅色邊框。這里都是可視化鼠標(biāo)操作，就不多說(shuō)了，各種樣式可以盡情探索，不要生怕點(diǎn)錯(cuò)了會(huì)弄疼軟件哈。

4、一番精心打扮之后，當(dāng)然要看看運(yùn)行效果啦，試運(yùn)行的步驟是：先啟動(dòng)Tomcat，然后在W文件上右鍵選擇“用瀏覽器運(yùn)行”。記得要先保存W文件再試運(yùn)行才能看到改動(dòng)效果哦。

通過(guò)簡(jiǎn)單的鼠標(biāo)操作，很簡(jiǎn)單就能設(shè)置好Output控件的外觀，這個(gè)也是WeX5的強(qiáng)大之處。而且更重要的一點(diǎn)是，所有設(shè)置都是符合html5 標(biāo)準(zhǔn)的！比如說(shuō)你要設(shè)置一個(gè)控件的位置，并不能直接拖動(dòng)控件到你想要的位置，而要通過(guò)邊距、定位等設(shè)置才能定位。所以即使是使用WeX5進(jìn)行開(kāi)發(fā)，還是要懂基本的HTML、CSS、JavaScript的，這里推薦不太熟悉的親們?nèi)ド晕W(xué)習(xí)點(diǎn)基本的html5基礎(chǔ)知識(shí)。新手不用太糾結(jié)細(xì)節(jié)，先整體了解，日后碰到具體問(wèn)題再去找相應(yīng)的解決辦法。當(dāng)然，小茄這邊也會(huì)分享相關(guān)的內(nèi)容，大家可以關(guān)注哈~~~

5、上面的鼠標(biāo)流操作設(shè)置好了外觀，但還沒(méi)看到Hello World的影子呢。大家肯定也想到了要在Output中輸出Hello World，具體操作也非常簡(jiǎn)單：在屬性標(biāo)簽頁(yè)的“bind-ref”內(nèi)輸入“Hello World”就可以啦，注意要用英文模式的雙引號(hào)把Hello World引起來(lái)。有點(diǎn)編程基礎(chǔ)的同學(xué)都知道，用雙引號(hào)包起來(lái)的才是字符串，沒(méi)有雙引號(hào)的話就是變量了。這樣就設(shè)置好了，試運(yùn)行時(shí)在Output里面就能看到效果了。

PS：這里的“bind-ref”是WeX5中的一個(gè)數(shù)據(jù)綁定機(jī)制，可以將其想象成一個(gè)管道，通過(guò)這個(gè)管道可以將不同組件間的數(shù)據(jù)綁定起來(lái)。例如我這里有兩個(gè)Output組件，我們可以簡(jiǎn)單的通過(guò)bind來(lái)講兩個(gè)組件的值綁定起來(lái)，但只是綁定的話并沒(méi)有動(dòng)態(tài)刷新的功能，如果需要像官方Hello World那樣做到動(dòng)態(tài)刷新，還需要將綁定的值設(shè)置為可觀察對(duì)象。這個(gè)部分理解起來(lái)比較難，后續(xù)我會(huì)單獨(dú)開(kāi)一個(gè)章節(jié)去講這部分，本文先略過(guò)。

注意：原生的Web寫(xiě)法應(yīng)該是在標(biāo)簽內(nèi)寫(xiě)入要顯示的內(nèi)容，例如：Hello World。
但是WeX5將基本的HTML組件進(jìn)行了封裝，而且為了方便管理數(shù)據(jù)還引入了數(shù)據(jù)綁定機(jī)制，
每次進(jìn)行組件初始化的時(shí)候都會(huì)調(diào)用相應(yīng)的構(gòu)造函數(shù)去初始化組件，所以即使在Output組件的源碼中加入Hello World：

<div component="$UI/system/components/justep/output/output" class="x-output" xid="output1" dataType="String">Hello World</div>

       但Output的innerText也還是會(huì)根據(jù)數(shù)據(jù)綁定的規(guī)則去初始化組件，如果沒(méi)有綁定，則初始化為空值。因此，WeX5中除了原生的HTML標(biāo)簽外，都應(yīng)該按照WeX5的規(guī)范使用數(shù)據(jù)綁定的方式來(lái)管理控件。

進(jìn)階部分

上面這種純輸出的頁(yè)面沒(méi)什么意思，現(xiàn)在試試加點(diǎn)交互效果。比如說(shuō)加個(gè)按鈕，點(diǎn)擊按鈕改變輸出信息為”Hello WeX5”。官方原版的Hello World案例中使用了WeX5的數(shù)據(jù)雙向綁定機(jī)制來(lái)實(shí)現(xiàn)，因?yàn)槲覀兌疾皇煜eX5的數(shù)據(jù)綁定機(jī)制，所以理解起來(lái)非常吃力。拋開(kāi)綁定機(jī)制，WeX5的寫(xiě)法其實(shí)很簡(jiǎn)單：
Model.prototype.button2Click = function(event){
var output = this.getElementByXid('output1');
output.innerText = "Hello WeX5";
};
WeX5提供了一個(gè)事件標(biāo)簽頁(yè)來(lái)方便地設(shè)置組件的各種事件，這樣一來(lái)可以一覽組件的事件接口，二來(lái)也方便集中管理所有組件事件。使用方法就是在需要的事件中填入函數(shù)名（不填則使用默認(rèn)函數(shù)名）并雙擊，然后就可以進(jìn)入js源碼頁(yè)了，這里系統(tǒng)會(huì)自動(dòng)生成Model.prototype.函數(shù)名 = function(event){}代碼段。細(xì)心的同學(xué)會(huì)發(fā)現(xiàn)，這里的事件也是帶bind前綴的。沒(méi)錯(cuò)，這里也采用了數(shù)據(jù)綁定機(jī)制一樣的實(shí)現(xiàn)方式，不過(guò)這里暫時(shí)先不用管這些，知道用法即可。

這里小茄也默認(rèn)大家有Web編程基礎(chǔ)的了，先對(duì)比原生的web寫(xiě)法：

<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>
可以看出主要的差異點(diǎn)是WeX5中使用了xid代替了原生的id，所以要用getElementByXid來(lái)獲取元素節(jié)點(diǎn)。之所以這樣做的原因，主要是為了解決命名沖突的問(wèn)題，在一個(gè)復(fù)雜頁(yè)面中通常是將頁(yè)面分成很多頁(yè)面片段來(lái)開(kāi)發(fā)的，而很多時(shí)候某幾個(gè)頁(yè)面片段都可能引用了同一個(gè)組件，那么在總頁(yè)面中就會(huì)產(chǎn)生id的命名沖突。而xid是通過(guò)在id后面加入一個(gè)頁(yè)面標(biāo)示，即使是同一個(gè)id在不同的頁(yè)面片段中的xid也是不同的，這樣就解決了id沖突的問(wèn)題。

另外一點(diǎn)差異是WeX5中還創(chuàng)建了一個(gè)Model對(duì)象，頁(yè)面中資源都放入了Model變量中，使用的時(shí)候也要在Model中進(jìn)行操作。而原生的寫(xiě)法是將所有函數(shù)和變量都放在全局環(huán)境中，使用的時(shí)候直接引用全局中的函數(shù)變量。當(dāng)一個(gè)頁(yè)面比較復(fù)雜的時(shí)候，全局下就會(huì)有非常多的函數(shù)和變量，這樣就容易產(chǎn)生變量沖突和變量覆蓋，因?yàn)閖s中是可以重復(fù)聲明的，后聲明的變量會(huì)覆蓋掉前面聲明的變量，這樣一來(lái)后聲明的函數(shù)就將前面的函數(shù)體覆蓋掉了。更為嚴(yán)重的是，瀏覽器給js提供了很高的權(quán)限，你甚至可以覆蓋掉系統(tǒng)提供的接口。比如說(shuō)：
alert = function () { window.close(); }
alert("hello");
這樣alert就由報(bào)警變成了關(guān)閉頁(yè)面，但瀏覽器是允許這種行為的，所以我們應(yīng)該盡量避免污染全局變量。

最后還有一點(diǎn)就是我們定義的方法是放在Model.prototype之下的，也就是放在Model原型下面的。也就是說(shuō)采用了混合模式（構(gòu)造+原型）來(lái)創(chuàng)建對(duì)象，當(dāng)然，直接寫(xiě)在對(duì)象下也是OK的，只是不推薦這種寫(xiě)法，例如：
var Model = function(){
this.callParent();
this.button2Click = function(event){
var output = this.getElementByXid('output1');
output.innerText = "Hello WeX5";
};
};

總結(jié)
上面的例子實(shí)現(xiàn)了一個(gè)按鈕改變輸出文字的功能，通過(guò)這個(gè)例子，大家應(yīng)該能掌握WeX5中頁(yè)面布局設(shè)計(jì)與簡(jiǎn)單交互事件的寫(xiě)法，上面介紹的寫(xiě)法與原生比較相似，對(duì)有web基礎(chǔ)的同學(xué)來(lái)說(shuō)應(yīng)該是很好理解的。沒(méi)有基礎(chǔ)的同學(xué)，還是推薦先到w3school 去學(xué)習(xí)web基礎(chǔ)，過(guò)一遍HTML、CSS，熟悉一下js語(yǔ)法即可。
關(guān)于Hello World可說(shuō)的內(nèi)容還有許多，下一篇我會(huì)介紹一下HTML源碼以及js源碼結(jié)構(gòu)。

附錄：官方Hello World的WeX5寫(xiě)法與原生js寫(xiě)法對(duì)比，可以看出在頁(yè)面復(fù)雜的時(shí)候WeX5的代碼更簡(jiǎn)潔，更方便管理。

原生js寫(xiě)法：

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寫(xiě)法：

define(function(require){
    var $ = require("jquery");
    var justep = require("$UI/system/lib/justep");
    var Model = function(){
        this.callParent();
        this.input1 = justep.Bind.observable(""); //核心語(yǔ)句
};
    return Model;
});