vue的第一份正式源碼

提交：a5e27b1174e9196dcc9dbb0becc487275ea2e84c
commit: naive implementation

這能夠說是vue的第一份正式源碼，已經有了基本的骨架原型。

源碼主要包含三個文件: main.js、directives.js、filters.js

運行原理：

• 節點收集，找到根節點以及根節點之下的全部包含指令的節點.

• 解析指令節點

• 關聯數據與節點

• 監測指令節點的set操做，並調用指令的更新函數

僞代碼：

/*根節點以及全部指令節點獲取，這裏指令節點的selector採用屬性選擇器來選擇*/
root = document.getElementById(opts.id),
els  = root.querySelectorAll(selector)

/**
 * 節點處理
 */
;[].forEach.call(els, processNode)
processNode(root)

/**
 * processNode中主要作了以下三步
 */
parseDirective()
bindDirective()
bindAccessors()

這裏須要注意一點是 scope 的概念，vue是採用數據響應式的思想，這裏的數據即對應一個vue實例裏的 scope(也可稱它爲做用域，最新版本已改成data/vueInstance.$data)。上面所說的綁定操做都是針對於這個scope來的。

如：

scope = {
    hello: 'ahahah'
}

則在模板中聲明一個v-text='hello'指令的時候，即實現了v-text指令與scope.hello的綁定。

如上即是當前版本vue的基本運行原理。

做者設計思想解讀

• 經過指令的聲明方式實現某一DOM片斷與某一javascript對象的關聯

• 數值關聯，JS中的一個 String 對應於DOM中的一個或多個 textNode

• 函數關聯，JS中的一個方法 對應於DOM節點的事件函數

• set監測

經過以下示例來觀看做者指令語法的設計思想：

模板

<div id="test" sd-on-click="changeMessage | .button">
    <p sd-text="msg | capitalize"></p>
    <p sd-show="something">YOYOYO</p>
    <p class="button" sd-text="msg"></p>
    <p sd-class-red="error" sd-text="hello"></p>
</div>

JS

var Seed = require('seed')
var app = Seed.create({
    id: 'test',
    // template
    scope: {
        msg: 'hello',
        hello: 'WHWHWHW',
        changeMessage: function () {
            app.scope.msg = 'hola'
        }
    }
})

指令語句即 DOM 節點中的一個屬性，如sd-text="msg | capitalize",等號前面爲指令的名稱，等號後面爲指令的值。

受於字符串所能表達信息量的限制，做者在指令名稱上採用 '-' 讓指令名變成結構類型的數據，以此來增長指令的靈活性(標籤的屬性是不區分大小寫的，因此不能採用駝峯式的命名).值對應組件做用域中的一個鍵名，這裏經過管道符能夠擴展相應的功能。

實質上來講，與普通的變量聲明方式是同樣的：

/*javascript 變量聲明*/
var text = 'ahahah';
var onClick = function changeMessage () {};

/*vue 指令聲明, hello 和 changeMessage 則對應 scope 中的 hello 和 changeMessage的值*/
v-text='hello';
v-on-click='changeMessage';

注：組件對象數據與指令關聯是一對多的關係

這樣，一個微型的vue就成型了。