每个前端同学都可以拥有自己的框架,然后去完善它——Strvejs@3.1.0正式发布
不忘初心
从 Strve.js 正式发布到现在已经将近半年了,收到很多建议,也收到很多赞扬,谢谢大家!平时抽空的时候,我也在不断地完善这个框架,希望可以更加的健壮。
我提到很多次,大家也经常问我。为什么要开发这个框架?你的初衷是什么?其实,我的动机特别简单,完全受 JSX 语法的影响。刚接触 JSX 语法的时候,就被它那种魔法深深地吸引住了,可以在 JS 中写 HTML。所以,我就想我自己可不可以也搞一个类似 JSX 语法的库或者框架呢!一方面可以锻炼自己的代码能力,另一方面体验开发框架的整个流程,也方便我以后更全面的学习其他框架(Vue.js、React.js 等)。
我刚开始开发 Strve.js 时,借鉴了一个迷你 JSX 的库,但是做着做着就觉得做不下去了。感觉还是偏离了方向,我决定用简单的方式去实现我所想要的效果。
在 JS 中可以写 HTML,除了借助 Babel 来转译 JSX 语法外,还有一种就是利用 ES6 语法中 的模板字符串。利用模板字符串可以做到直接渲染到页面中,如果是改变数据的话,也能实现。但是问题是,它并不那么灵活,并且需要操作大量 DOM 节点。
减少操作真实 Dom 带来的性能代价,目前合理的方案是利用虚拟 Dom,将 HTML 标签对象化,转化成一个 JS 对象。最后利用 Diff 算法进行新旧 Dom 对比,来更新差异。虽然这样也会操作真实 Dom,但是比起之前的量级少了太多。
虚拟 Dom 的量级也得控制一定范围,不然计算量太大,页面也会卡顿。Vue2 相比于 Vue1 引入了虚拟 Dom,组件内利用虚拟 Dom 来进行更新数据,把虚拟 Dom 的量级控制在组件级别;而 React.js 则引入 Fiber 架构,借鉴了操作系统时间分片的概念,利用空闲时间计算 Diff。所以,针对于 Strve.js,如果引入虚拟 Dom 的话,虚拟 Dom 的量级必须在考虑范围之内。
Strve.js@3.x之前的版本都没有解决虚拟 Dom 量级的问题,都是全量的对比。另外,如果想操作 Dom,必须要为其创建一个 Dom 对象,绑定到虚拟 Dom 上,这样才能调用 Dom API,之前的版本都是为每一个 Dom 节点都创建一个 Dom 对象,一些静态节点没有必要,还有它也不会进行 Diff 算法。
Strve.js@3.1.0是 3.x 正式版本中第一个版本,也是之前 2.x 版本之后的第一次重大升级。算是给自己在 2022 年第一个礼物吧!之前听过尤大的一次分享,他说:“做开源从 90%到 100%这个过程中,是特别难的”。是的,这次我亲身体会到了。Strve.js 我会继续维护下去,但是我不会逼自己去一定要做成什么样,保持一颗初心就够了。
Strve.js@3.1.0升级了什么
这次大方面一方面是修改了 API,更简短也容易记,减轻了心智负担;另一方面是上面提到了 Diff 算法的优化。
以下是更新日志:
修改 API:
旧 API 新 API Strve
createApp
render
h
updateView
setData
watchDOMChange
watchDom
emitEvent
emit
strveVersion
version
deepCloneData
clone
调整
createApp
API;useFkey
标记改为useFirstKey
;添加标记
$key
、$name
;加入组件标签
、空节点标签
;调整
setData
API;优化 Diff 算法;
TypeScript 重构代码;
官方文档又更新了
此次对文档内容进行了大的改动,主要是对使用项。
除了对文档中内容的改写,还加入了实时代码的功能,你可以在线编辑代码,看到自己想看到的效果。
Strve Router 也更新了
Strve Router 这次更新也算是大版本升级,升级到 2.1.0,可以通过下面这个示例简单了解下 Strve Router。
html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>strve-routertitle>
head>
<body>
<div id="app">div>
<script type="module">
import {
h,
createApp,
setData,
} from 'https://cdn.jsdelivr.net/npm/strvejs@3.1.0/dist/strve.esm.min.js';
import {
initRouter,
linkTo,
} from 'https://cdn.jsdelivr.net/npm/strve-router@2.1.0/dist/strve-router.esm.js';
class Home {
constructor() {
this.state = {
count: 0,
};
}
useAdd = () => {
setData(() => {
this.state.count++;
});
};
goAbout = () => {
linkTo('/about');
};
render = () => {
return h`
>goAbout
${this.useAdd}
$key>${this.state.count}
`;
};
}
class About {
constructor() {
this.state = {
msg: 'About',
};
}
render = () => {
return h`
>goHome
${this.useChange} $key>${this.state.msg}
`;
};
useChange = () => {
setData(() => {
this.state.msg = 'Changed';
});
};
goHome = () => {
linkTo('/');
};
}
const router = initRouter(
[
{
path: '/',
template: [Home, 'render'],
},
{
path: '/about',
template: [About, 'render'],
},
],
setData
);
function App() {
return h`
${router.view()}
`;
}
const app = createApp(App);
app.mount('#app');
script>
body>
html>
其他详情更新
还有很多更新,详情内容可以访问下面官方文档地址:
https://maomincoding.gitee.io/strvejs-doc/zh/
如果你想帮我点 Star
如果你手上有 ⭐️,欢迎帮我点点哦~
https://github.com/maomincoding/strve
这是我的 Github 个人主页
https://github.com/maomincoding