Omi原理-Hello Omi

時間 2019-11-05

標籤 omi 原理 hello 简体版

原文原文鏈接

Hello Omi

Omi框架的每一個組件都繼承自Omi.Component，本篇會去完成Omi的Component的基本錐形，讓其可以渲染第一個組件。html

omi.js實現

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 用來給每一個組件生成自增的ID
Omi.render 用來把組件渲染到頁面

基類Omi.Component實現

全部的組件都是繼承自Omi.Component。webpack

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使用徹底面向對象的方式去開發組件，這裏約定好帶有下劃線的方法是用於內部實現調用，不建議Omi框架的使用者去調用。
其中，_render爲私有方法用於內部實現調用,會去調用組件的真正render方法用於生成HTML,而且把生成的HTML插入到renderTo容器裏面。
注意，這裏目前沒有引入dom diff，無論第幾回渲染都是無腦設置innerHTML，複雜HTML結構對瀏覽器的開銷很大，這裏後續會引入diff。

index.js整合

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

Omi.Component = Component;

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

這裏把Omi給直接暴露在window下，由於每一個組件都生成了惟一的ID，後續實現事件做用域以及對象實例獲取都要經過window下的Omi獲取。git

最後使用

實現完omi.js和component.js以及index.js以後，你就能夠實現Hello Omi拉:github

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  `
      <div>
        <h1>Hello ,`+ this.data.name +`!</h1>
      </div>
        `;

    }
}

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

什麼？都2017年了還在拼接字符串？！雖然ES6+的template string讓多行字符串拼接更加駕輕就熟，可是template string+模板引擎可讓更加優雅方便。既然用了template string，也能夠寫成這樣子：web

class Hello extends Omi.Component {
    constructor(data) {
        super(data);
    }
    render() {
        return  `
      <div>
        <h1>Hello ,${this.data.name}!</h1>
      </div>
        `;

    }
}

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

引入mustachejs模板引擎

Omi支持任意模板引擎。能夠看到，上面是經過拼接字符串的形式生成HTML，這裏固然可使用模板引擎。npm

修改一下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）須要接受兩個參數，第一個參數是模板，第二個參數是模板使用的數據。dom

如今，你即可以使用mustachejs模板引擎的語法了：組件化

class Hello extends Omi.Component {
    constructor(data) {
        super(data);
    }
    render() {
        return  `
      <div>
        <h1>Hello ,{{name}}!</h1>
      </div>
        `;

    }
}

從上面的代碼能夠看到，你徹底能夠重寫Omi.template方法去使用任意模板引擎。重寫Omi.template的話，建議使用omi.lite.js，由於omi.lite.js是不包含任何模板引擎的。那麼怎麼build出兩個版本的omi？且看webpack裏設置的多入口:

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沒有對tpl作任何處理直接返回，開發者能夠重寫該方法。