摘要：注意，這里目前沒(méi)有引入，不管第幾次渲染都是無(wú)腦設(shè)置，復(fù)雜結(jié)構(gòu)對(duì)瀏覽器的開(kāi)銷很大，這里后續(xù)會(huì)引入。整合這里把給直接暴露在下，因?yàn)槊總€(gè)組件都生成了唯一的，后續(xù)實(shí)現(xiàn)事件作用域以及對(duì)象實(shí)例獲取都要通過(guò)下的獲取。

Omi框架的每個(gè)組件都繼承自O(shè)mi.Component，本篇會(huì)去完成Omi的Component的基本錐形，讓其能夠渲染第一個(gè)組件。

var Omi = {};
Omi._instanceId = 0;
Omi.getInstanceId = function () {
    return Omi._instanceId++;
};

Omi.render = function(component, renderTo){
    component.renderTo = typeof renderTo === "string" ? document.querySelector(renderTo) : renderTo;
    component._render();
    return component;
};

module.exports = Omi;

Omi.getInstanceId 用來(lái)給每個(gè)組件生成自增的ID

Omi.render 用來(lái)把組件渲染到頁(yè)面

所有的組件都是繼承自O(shè)mi.Component。

import Omi from "./omi.js";

class Component {
    constructor(data) {
        this.data = data || {};
        this.id = Omi.getInstanceId();
        this.HTML = null;
        this.renderTo = null;
    }

    _render() {
        this.HTML = this.render();
        this.renderTo.innerHTML = this.HTML;
    }
}

export default Component;

Omi使用完全面向?qū)ο蟮姆绞饺ラ_(kāi)發(fā)組件，這里約定好帶有下劃線的方法是用于內(nèi)部實(shí)現(xiàn)調(diào)用，不建議Omi框架的使用者去調(diào)用。

其中，_render為私有方法用于內(nèi)部實(shí)現(xiàn)調(diào)用,會(huì)去調(diào)用組件的真正render方法用于生成HTML,并且把生成的HTML插入到renderTo容器里面。

注意，這里目前沒(méi)有引入dom diff，不管第幾次渲染都是無(wú)腦設(shè)置innerHTML，復(fù)雜HTML結(jié)構(gòu)對(duì)瀏覽器的開(kāi)銷很大，這里后續(xù)會(huì)引入diff。

import Omi from "./omi.js";
import Component from "./component.js";

Omi.Component = Component;

window.Omi = Omi;
module.exports = Omi;

這里把Omi給直接暴露在window下，因?yàn)槊總€(gè)組件都生成了唯一的ID，后續(xù)實(shí)現(xiàn)事件作用域以及對(duì)象實(shí)例獲取都要通過(guò)window下的Omi獲取。

實(shí)現(xiàn)完omi.js和component.js以及index.js之后，你就可以實(shí)現(xiàn)Hello Omi拉:

import Omi from "index.js"; 
//或者使用webpack build之后的omi.js 
//import Omi from "omi.js";

class Hello extends Omi.Component {
    constructor(data) {
        super(data);
    }
    render() {
        return  `
      

          
Hello ,`+ this.data.name +`!
      
          `;

    }
}

Omi.render(new Hello({ name : "Omi" }),"#container");

什么？都2017年了還在拼接字符串？！雖然ES6+的template string讓多行字符串拼接更加得心應(yīng)手，但是template string+模板引擎可以讓更加優(yōu)雅方便。既然用了template string，也可以寫(xiě)成這樣子：

class Hello extends Omi.Component {
    constructor(data) {
        super(data);
    }
    render() {
        return  `
      

        
Hello ,${this.data.name}!
      
        `;

    }
}

Omi.render(new Hello({ name : "Omi" }),"#container");

Omi支持任意模板引擎。可以看到，上面是通過(guò)拼接字符串的形式生成HTML，這里當(dāng)然可以使用模板引擎。

修改一下index.js:

import Omi from "./omi.js";
import Mustache from "./mustache.js";
import Component from "./component.js";

Omi.template = Mustache.render;
Omi.Component = Component;

window.Omi=Omi;
module.exports = Omi;

這里把Mustache.render掛載在Omi.template下。再修改一下component.js:

import Omi from "./omi.js";

class Component {
    constructor(data) {
        this.data = data || {};
        this.id = Omi.getInstanceId();
        this.HTML = null;
    }

    _render() {
        this.HTML = Omi.template(this.render(), this.data);
        this.renderTo.innerHTML = this.HTML;
    }
}

export default Component;

Omi.template（即Mustache.render）需要接受兩個(gè)參數(shù)，第一個(gè)參數(shù)是模板，第二個(gè)參數(shù)是模板使用的數(shù)據(jù)。

現(xiàn)在，你便可以使用mustachejs模板引擎的語(yǔ)法了：

class Hello extends Omi.Component {
    constructor(data) {
        super(data);
    }
    render() {
        return  `
      

          
Hello ,{{name}}!
      
          `;

    }
}

從上面的代碼可以看到，你完全可以重寫(xiě)Omi.template方法去使用任意模板引擎。重寫(xiě)Omi.template的話，建議使用omi.lite.js，因?yàn)閛mi.lite.js是不包含任何模板引擎的。那么怎么build出兩個(gè)版本的omi？且看webpack里設(shè)置的多入口:

 entry: {
    omi: "./src/index.js",
    "omi.lite": "./src/index.lite.js"
},
output: {
    path: "dist/",
    library:"Omi",
    libraryTarget: "umd",
    filename:  "[name].js"
},

index.lite.js的代碼如下：

import Omi from "./omi.js";
import Component from "./component.js";

Omi.template = function(tpl, data){
    return tpl;
}

Omi.Component = Component;

window.Omi=Omi;
module.exports = Omi;

可以看到Omi.template沒(méi)有對(duì)tpl做任何處理直接返回，開(kāi)發(fā)者可以重寫(xiě)該方法。

到目前為止，已經(jīng)實(shí)現(xiàn)了：

第一個(gè)組件的渲染

模板引擎的接入

多入口打包omi.js和omi.lite.js

下片，將介紹《Omi原理-局部CSS》，歡迎關(guān)注...

Omi的Github地址https://github.com/AlloyTeam/omi

如果想體驗(yàn)一下Omi框架，請(qǐng)點(diǎn)擊Omi Playground

如果想使用Omi框架，請(qǐng)閱讀 Omi使用文檔

如果想一起開(kāi)發(fā)完善Omi框架，有更好的解決方案或者思路，請(qǐng)閱讀 從零一步步打造web組件化框架Omi

關(guān)于上面的兩類文檔，如果你想獲得更佳的閱讀體驗(yàn)，可以訪問(wèn)Docs Website

如果你懶得搭建項(xiàng)目腳手架，可以試試Scaffolding for Omi，npm安裝omis便可

如果你有Omi相關(guān)的問(wèn)題可以New issue

如果想更加方便的交流關(guān)于Omi的一切可以加入QQ的Omi交流群(256426170)