每个前端同学都可以拥有自己的框架，然后去完善它——Strvejs@3.1.0正式发布
共 3091字，需浏览 7分钟
· 2022-04-23
不忘初心
从 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 StrvecreateApprenderhupdateViewsetDatawatchDOMChangewatchDomemitEventemitstrveVersionversiondeepCloneDataclone调整
createAppAPI；useFkey标记改为useFirstKey；添加标记
$key、$name；加入组件标签
调整
setDataAPI；优化 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`
${this.goAbout} >goAbout
${this.useAdd} $key>${this.state.count}
`;
};
}
class About {
constructor() {
this.state = {
msg: 'About',
};
}
render = () => {
return h`
${this.goHome} >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