记一次omi的项目之旅

前言

前段时间公司提出一个小项目，涉及到几个页面切换和搜索列表展现，因为本身对于webcomponents的学习和项目比较小，因此选择了腾讯开源的omi做为本次开发的框架。当一次小白鼠的同时但愿深刻一下对于用户自定义组件的了解。万事开头难，js框架也是这样。omi确实很小巧，而且跨多端开发，可是开发中出现的问题也很多。但愿之后愈来愈好吧。

关于生态

omi的生态仍是比较完整的，脚手架，国际化，路由，ui库，图表库等等应有尽有。要求不高的开发仍是彻底知足的。可是毕竟开源初期，仍是有不少资源的匮乏，好比说路由，ui库等对ts的支持。虽说omi已经支持了ts，但是写ts的时候若是要使用它们的各类库须要本身写声明文件，就意味着我还须要读一遍它们的源码而后本身撸一个声明。鄙人是比较懒的，就没有使用ts。路由上hash和history是分开的两个库，并且用法还不一样。好在有不少大牛在更新着生态，两周时间我就看到了新增了swiper和vscode的omi插件。因此关于omi的生态仍是充满信心的。

关于omi

学过react的前端上手omi应该是分分钟的事情，它与react的区别很小很小，一样使用的jsx的语法。有着和react功能一致但写法不一样的生命周期。可是没有export,由于是基于webcomponents,须要定义在js中，因此引用其余组件咱们须要全局引入，即：import './omiComponents.js';

1.样式的引用

omi多了一点就是有一个css的方法，返回是字符串的css。咱们能够经过import的形式引入css/scss文件，可是请注意，若是引用的css/scss的文件名不是以‘_’开头，那么你无论在哪一个文件引用这个css/scss文件,这些都是定义的全局样式，也就是全部组件都会产生效果。这很明显与组件模块化的概念相悖，因此omi做者在webpack的配置中作了css/scss的文件名须要如下划横线开头，而后在css方法中返回才能定义局部。还有经过静态的方式定义局部样式，即

import css from './_index.css';
import 'components.css';
define('my-components',class extends weElement{
static css = '*{margin:0}'
css(){trturn css}
}) 
//_index.css的样式只做用于本组件，components.css的样式做用于全局 
复制代码

其中static 定义的css/scss权重远远高于引入的css/scss。定义的某个元素的样式会彻底被static中定义的那个元素的样式彻底替代，包括不重复样式。

2.omi/omio

咱们找到omi的package.json，发现一个有意思的配置：

"alias": {
    "omi": "omio"
  }
复制代码

其中omi的配置能够是omi,也能够是omi，对应了两种模式。其中omi对应的是编译为相似react的virtual dom形式打包。优势就是兼容性好，在进行页面更新的时候，借助virtual do 元素的改变能够在内存中进行比较，再结合框架的事务机制将屡次比较的结果合并后一次性更新到页面，从而有效地减小页面渲染的次数，提升渲染效率，还能够实现了服务端渲染、浏览器渲染和移动端渲染等功能。因此omi框架默认的就是omi模式。可是这与咱们对于webcomponents的态度相悖了，因而有了omio模式。这种模式就是彻底将组件打包成webcomponents。但是咱们切换模式后发现，样式大错乱！咱们定义的全局样式没有一个能影响到组件内部的样式，样式隔离了。固然咱们定义的局部样式还在。办法老是有的，因而咱们本身定义一个继承类。

import css from '_index.css'; //全局样式
export default class extends weElement{
css(){
return css;
}
}
复制代码

而后在其余组件内集成咱们定义的这个类便可。

3.单元测试

这是我使用omi遇到的最大的困难。omi没有配套的单元测试框架，使用jest和jsdom模拟环境也不能彻底测试出组件，目前在尝试使用avajs进行测试，测试结果是否达成目标能够之后再补充。

感觉

omi项目打包后的代码文件很小，这是让我惊喜的，不一样于vue的打包，这里彷佛将css经过代码的形式内嵌到打包后的js中了，文件量也不多，感受很舒服。总体而言，omi很快，很小，也比较灵活，除了还差了点的生态，和使人无语的单元测试。

原文连接：tech.gtxlab.com/omi.html

---

做者简介： 张栓，人和将来大数据前端工程师，专一于html/css/js的学习与开发。