最近稍微回顧了下過去,想起幾年前在前端上主要使用 jQuery 而到今天漸漸習慣了前端框架的使用,不過 jQuery 已經漸漸離我遠去,當然也時常在想著不知道哪天會有更突破的架構或工具改變現狀。
我重新思考了下框架帶給我的是什麼?在我剛學前端框架時,我以為框架帶給我的是資料的綁定與方便的語法。
也許這些看法還是正確的,不過老實說也有不少工具雖然常配合框架,但也可以使用在原生之中,舉例來說像 Redux、MobX 這類狀態管理的工具都是可以配合原生使用。
現在想想我覺得前端框架不像當初那樣嚇人的方便或有趣了,也漸漸的改變了想法:
使用前端框架還是回歸了一個生態,給了套解決問題的思維、或生態系上豐富的工具和解答。
雖然在當下使用前端框架已幾乎是個必然,但偶而跳脫一下我認為還是挺不錯的。所以還是回歸主題吧,我想介紹兩個框架無關的工具 MobX 、Emotion 。
Emotion
Emotion 上我主要用到 @emotion/css ,它的使用方式基本上與 Sass 相同, 並且只要使用提供的 css 函數即可產生一個 hash 過的 className,像是這樣的使用:
import { css } from "@emotion/css";document.body.innerHTML = `
<button class="btn">Button</button>
`;const button = document.querySelector(".btn");const cssBaseBtn = css`
cursor: pointer;
padding: 10px;
min-width: 140px;
background-color: rgba(25, 118, 210, 1);
color: #ffffff;
font-weight: bold;
font-size: 16px;
border: none;
border-radius: 4px;&:hover {
background-color: rgba(25, 118, 210, 0.8);
}&:active {
background-color: rgba(25, 118, 210, 0.5);
}
`;button.classList.add(cssBaseBtn);
這基本上與寫 Scss 沒有什麼不同,只是這些都在 js 上完成了。而 Emotion 的好處不只如此,因為是 CSS-in-JS ,使用者可以使用更多 js 的工具來組織你的元件。
在這邊就再安裝個套件 color ,並且配合 Emotion Composition 的使用:
import { css } from "@emotion/css";
import Color from "color";document.body.innerHTML = `
<button class="btn">Button</button>
`;const button = document.querySelector(".btn");const backgroundColor = "#1976d2";const primaryColor = new Color(backgroundColor);const cssPrimaryColor = css`
background-color: ${primaryColor.toString()};&:hover {
background-color: ${primaryColor.alpha(0.8).toString()};
}&:active {
background-color: ${primaryColor.alpha(0.5).toString()};
}
`;const cssBaseBtn = css`
cursor: pointer;
padding: 10px;
min-width: 140px;
color: #ffffff;
font-weight: bold;
font-size: 16px;
border: none;
border-radius: 4px; ${cssPrimaryColor};
`;button.classList.add(cssBaseBtn);
可以看到我把 background-color
的部分提取出來,因為這個樣式其實是同個顏色不同的透明度,那麼使用 color 這個套件就能夠快速的建立這個樣式的算法,這樣的話只要提供不同的色碼,將可以產生一組不同風格的 Button。
Emotion 我在 [筆記] 比較 CSS Modules 與 Emotion 中正好有比較下 Emotion 與 CSS Modules 的使用差異,可參考看看。
MobX
關於 MobX 部分則是狀態的部分了,雖然 MobX 的使用有他自己的方式,但簡單的使用上應該能很快速地上手。以我個人常使用的 React 來說,基本上只要上手 useState 與 useEffect 大多簡易的功能都能快速的完成,而這有部分也歸功於 React 使用 JSX 的語法幫我們簡化了許多資料綁定的事。
讓我修改部分內容看看:
...import { observable, action, reaction } from "mobx";const state = observable(
{
count: 0,
addCount() {
this.count++;
}
},
{
count: observable,
addCount: action
}
);document.body.innerHTML = `
<div >
<label>count : <span class="count">${state.count}</span></label>
</div>
<p/>
<button class="btn">Button</button>
`;...button.addEventListener("click", () => {
state.addCount();
});const countElement = document.querySelector(".count");reaction(() => state.count, (nextCount) => {
countElement.textContent = nextCount
})
在 Mobx 可以使用 observable 建立狀態,並且可以說明內部成員的性質,像是可以選擇成員只在 ref 更動的時候更新,或是說明成員是計算屬性,或說明是個 action 的方法。
而在下方我們把 addCount 的事件綁到按鈕上後,把要跟著 count 更新的元素抓出來,配合 reaction 在 count 更動的時候,修改元素的內容。
用這樣的方式,就建立了一個簡單的狀態與綁定。
總結以上的 Code 可以參考:
https://codesandbox.io/embed/mobx-with-emotion-tcquu?fontsize=14&hidenavigation=1&theme=dark
總結
今天的這篇文章只是記錄個簡單想法,我認為在配合 MobX 與 Emotion,可以在了解相對簡單的環境下,用些稍微新的概念打些東西。
我個人想說的是在這個當下,如果有認識的人想玩玩看前端,我也許會建議他可以嘗試些輕量的工具,打些玩具看看,我想若只從 js 的角度切入,應該也是不錯的(當然如果是求職的需求的話,不免還是會先從 jQuery 或框架著手)。