這兩天把官方的教程都看了一遍，總體感覺是信息量很大，但是大部分和iOS原生開發有相似的地方，像UI，touch事件，數據綁定，數據處理等流程都是存在，區別在於語言和語法，雖然知識點，用法，API很多，有的常用的還需要記住，但是隻要有耐心，一個一個的克服，結果肯定是好的。而且最近感受最深的是，寫出來的博客是要經過自己反覆驗證的，保證99.99%正確後才能發出來，不能像以前那樣跟發相聲似的，所以後面出一篇文章可能用3，4天時間也很正常，尤其是在一開始，就有小夥伴支持鼓勵，對我影響很大，也加重了我的責任感。
今天我們來介紹一下weex代碼的三部分構成：<template>、<style>、<script>
第一部分：template
官方解釋--必須的，使用 HTML 語法描述頁面結構，內容由多個標籤組成，不同的標籤代表不同的組件。
可以看出裏面其實就是html的代碼，像title，body，表單等元素。
第二部分：style
官方解釋--可選的，使用 CSS
語法描述頁面的具體展現形式。
屬於樣式層，可以自定義class，雖然是可選的，但是建議是必須的，養成好習慣不要把所有代碼都寫到html裏面，這樣維護會很麻煩，層次不清晰。
第三部分：script
官方解釋--可選的，使用 JavaScript
描述頁面中的數據和頁面的行爲，Weex 中的數據定義也在 <script> 中進行。
是數據綁定和點擊事件處理，包括數據校驗等，處理業務邏輯。
總結下來：這是一個典型的 M-V-VM 架構：通過 ViewModel 把 Model 和 View 建立更直接有效的關係，ViewModel 的實現以 <script> 的內容爲主。
數據綁定
接下來再看看官方介紹的數據綁定，
1.數據綁定路徑---就是在template用變量來設置，然後在script裏給變量賦值，用雙大括號來表示 “ {{ x }} ”
2.數據綁定表達式---用簡單JS的表達式綁定
Weex使用 mustache 的語法 ({{...}}) 來對 <template> 中的模板和 <script> 裏的數據進行綁定. 一旦數據額模板綁定了, 數據上的修改會實時的在模板內容中生效。
數據綁定路徑
<template>
<div>
<text style="font-size: {{size}}">{{title}}</text>
</div>
</template>
<script>
module.exports = {
data: {
size: 48,
title: 'Alibaba Weex Team'
}
}
</script>
上面的代碼會把 title 和 size 的數值綁定到模板內容上。
我們也可以通過 . 符號來綁定數據結構中的字段。看一下下面的代碼片段：
<template>
<div>
<text style="font-size: {{title.size}}">{{title.value}}</text>
</div>
</template>
<script>
module.exports = {
data: {
title: {
size: 48,
value: 'Alibaba Weex Team'
}
}
}
</script>
數據綁定表達式
進行數據綁定時，Weex 支持一些簡單的 JavaScript 表達式，例如：
<template>
<div style="flex-direction: row;">
<text>{{firstName + ' ' + lastName}}</text>
</div>
</template>
<script>
module.exports = {
data: {
firstName: 'John',
lastName: 'Smith'
}
}
</script>
這些表達式會在當前的上下文中進行運算。
總結：瞭解template，style，script各個模塊的作用，把基礎打好，就像剛開始學習MVC模式時，如果能堅持各個模塊的代碼分離，控制好相互之間調用的權限，對後面的編程會提高很多。