Hello Omi

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

omi.js实现

..() ..(componentrenderTo .component.exports = Omi;

Omi.getInstanceId 用来给每个组件生成自增的ID

Omi.render 用来把组件渲染到页面

基类Omi.Component实现

所有的组件都是继承自Omi.Component。

Component ....() ..Component;

index.js整合

Component ...exports = Omi;

这里把Omi给直接暴露在window下，因为每个组件都生成了唯一的ID，后续实现事件作用域以及对象实例获取都要通过window下的Omi获取。

最后使用

实现完omi.js和component.js以及index.js之后，你就可以实现Hello Omi拉:

Hello (data) () ..),"#container");

什么？都2017年了还在拼接字符串？！虽然ES6+的template string让多行字符串拼接更加得心应手，但是template string+模板引擎可以让更加优雅方便。

引入mustachejs模板引擎

Omi支持任意模板引擎。可以看到，上面是通过拼接字符串的形式生成HTML，这里当然可以使用模板引擎。

修改一下index.js:

Mustache Component .....exports = Omi;

这里把Mustache.render挂载在Omi.template下。再修改一下component.js:

Component ...() ...Component;

Omi.template（即Mustache.render）需要接受两个参数，第一个参数是模板，第二个参数是模板使用的数据。

现在，你便可以使用mustachejs模板引擎的语法了：

(data) ()

从上面的代码可以看到，你完全可以重写Omi.template方法去使用任意模板引擎。重写Omi.template的话，建议使用omi.lite.js，因为omi.lite.js是不包含任何模板引擎的。那么怎么build出两个版本的omi？且看webpack里设置的多入口:

entryoutput

index.lite.js的代码如下：

Component .(tpl...exports = Omi;

可以看到Omi.template没有对tpl做任何处理直接返回，开发者可以重写该方法。

总结

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

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

招募计划