### 建立vue建構函式

```
function Vue(option) {
    this.$option = option;
}
```

### 掛載方法

```
Vue.prototype.$mount = function(element) {
    const rootNode = document.getElementById(element);
    if (rootNode) {
        this.$rootNode = rootNode;
    } else {
        throw new Error('$mount Receives an ID node');
    }

if (this.$option.template) {
        this.$render();
    } else {
        throw new Error('The lack of the template');
    }

return this;
}

Vue.prototype.$render = function render() {
    this.$AST = this.$templateCompilation(this.$option.template);
}

Vue.prototype.$templateCompilation = function templateCompilation(html) {
    const AST = {
        attrs: [],
        children: []
    };

function start(AST) {
        let result = html.match(startReg.startTag);
        AST.tagName = result[0];
        cuttingHTML(result);

while (html.match(startReg.endTag).index) {
            result = html.match(startReg.startAttrs);
            AST.attrs.push({
                key: result[0].split('=')[0],
                value: result[1]
            });
            cuttingHTML(result);
        }
        
        cuttingHTML(html.match(startReg.endTag));
        text(AST);
        return AST;
    }

return start(JSON.parse(JSON.stringify(AST)));
}
```

### 建立reg.js
```
const startReg = {
    startTag: /[\w\d]+/,
    startAttrs: /[^\s=]+\s*=\s*('[^'>]*'|"[^">]*")/,
    endTag: /\s*>/
};

const textReg = {
    startTag: /\s*/i
};
```

### 使用
```

img {
            width: 200px;
            height: 100%;
            margin-right: 20px;
        }

.content {
            line-height: 27px;
            font-size: 14px;
        }

.content span {
            color: #000;
            font-weight: 600;
        }
    </style>

web技術支援| 簡單實現Vue第一章：模板編譯

相關文章