Omi原理-Hello Omi

Hello Omi

Omi框架的每一个组件都继承自Omi.Component，本篇会去完成Omi的Component的基本锥形，让其可以渲染第一个组件。

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。

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获取。

最后使用

实现完omi.js和component.js以及index.js以后，你就能够实现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  `
      <div>
        <h1>Hello ,`+ this.data.name +`!</h1>
      </div>
        `;

    }
}

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

什么？都2017年了还在拼接字符串？！虽然ES6+的template string让多行字符串拼接更加驾轻就熟，可是template string+模板引擎可让更加优雅方便。既然用了template string，也能够写成这样子：

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，这里固然可使用模板引擎。

修改一下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）须要接受两个参数，第一个参数是模板，第二个参数是模板使用的数据。

如今，你即可以使用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作任何处理直接返回，开发者能够重写该方法。

总结

到目前为止，已经实现了：

• 第一个组件的渲染
• 模板引擎的接入
• 多入口打包omi.js和omi.lite.js

下片，将介绍《Omi原理-局部CSS》，欢迎关注...

招募计划

• Omi的Github地址https://github.com/AlloyTeam/omi
• 若是想体验一下Omi框架，请点击Omi Playground
• 若是想使用Omi框架，请阅读 Omi使用文档
• 若是想一块儿开发完善Omi框架，有更好的解决方案或者思路，请阅读 从零一步步打造web组件化框架Omi
• 关于上面的两类文档，若是你想得到更佳的阅读体验，能够访问Docs Website
• 若是你懒得搭建项目脚手架，能够试试Scaffolding for Omi，npm安装omis即可
• 若是你有Omi相关的问题能够New issue
• 若是想更加方便的交流关于Omi的一切能够加入QQ的Omi交流群(256426170)