記一次omi的專案之旅

genetalks_大資料發表於2019-04-01
前言

前段時間公司提出一個小專案，涉及到幾個頁面切換和搜尋列表展示，由於自己對於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的學習與開發。

相關文章