記一次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的學習與開發。