原文如下：作者：Vam 的金豆之路。
如有侵权，请联系我们删除。
前言
前端开发的速度远远超出了预期，基于JS的前端框架/库层出不穷。
那么框架和库有什么区别呢？库是提供给开发者使用的特定封装集合，有特定于某些方面的集合（方法和函数），库中没有控制，控制在。用户的手。如果您想在自己的应用程序中使用该库的功能，您可以从封装的角度来理解该库。框架，顾名思义，就是根据用户的独特特点，为用户提供完整解决方案的一组架构。控制权在于框架本身，用户必须找到框架规定的具体规范进行开发。
让我们考虑一个例子。煮鱼需要油、盐、醋、洋葱、香料和炊具等配料。同时，我们也需要鱼。收集完所有材料后，您将获得成品。当油、盐、醋、葱、器皿、鱼真正结合在一起时，就成了成品。该产品是最终开发的应用程序。或者这是为了更好地理解框架和库之间的区别。
如您所知，React 是一个库。官方网站将其描述为一个用于构建用户界面的JavaScript 库。当我第一次接触React 时，我觉得在JS 文件中编写HTML 语法是很神奇的。之后，我想我可以建立一个图书馆来展示我的能力。于是我利用业余时间做了一些研究，创建了一个迷你版的JSX，但是在数据驱动层面遇到了一些问题。经过几天的尝试和错误，我终于弄清楚了。为什么我们首先需要创建一个像React 这样的库？我们可以使用另一种方式来实现这种类似JSX 的语法吗？ES6 语法有一个模板字符串，它允许您编写HTML 标签。字符串中的变量使用确定了开发方向后，我们就开始查阅各种资料，正式开始了图书馆的开发过程。这个过程很痛苦，但幸运的是我独自开发这个库，并且可以按照我的想法改进它。
为什么我们将这个库命名为Strve.js？它实际上是String 和View 名称缩写的组合。可以实现在JS字符串中写入HTML标签并嵌入变量，以达到数据驱动视图的效果。还可以灵活划分代码块，提高工作效率。此时您可能想知道为什么这如此困难。使用innerHTML 可以实现类似的效果。效果是一样的，但是DOM在某些场景下表现不同。 Strve.js的另一个定位是它是一个轻量级的MVVM框架。只需要考虑数据操作；其他一切都由Strve.js 中的虚拟DOM 处理。这也是优化DOM 性能的常用方法。
毕竟，努力是有回报的。第一个版本1.0.4于2021年11月3日发布。然后不断更新和迭代，使其生态更加完整，更加适合库或框架的要求。一路走来，我们也遇到了架构重构等挑战。
下面，我们将详细介绍Strve.js。
文档
Strve.js 文档基于VitePress 构建，并分别部署到Github 和Gitee。
Github中文网：https://maomincoding.github.io/strve-doc/zh
Gitee中文网：https://maomincoding.gitee.io/strve-doc/zh
下面我将分享一下我设计这个库的经验，根据文档的内容将其分为几个主要模块。
开始
首先，转到起始页。当尝试学习新技术时，最简单的方法就是做小案例。往往这些最简单的东西最能体现它的核心用途，所以让我们通过这些简单的案例来进一步了解它的用法。
它有两种使用方式：ES模块和UMD。我们先分别列出这两种方法，然后统一讲解代码结构。
大多数现代浏览器原生支持ES 模块。所以除了通过CDN使用Strve.js:之外，你还可以像这样使用原生ES模块。
!DOCTYPEhtml
htmllang=\’ja\’
头
元字符集=\’UTF-8\’/
titleStrve.js/标题
/头
身体
脚本类型=\’模块\’
进口{
啊，
设置数据，
创建一个应用程序，
来自“https://cdn.jsdelivr.net/npm/strve-js@5.1.1/dist/strve.full-esm.js”；
常量状态={
计数：0，
};
函数添加（）{
设置数据(()={
状态.count++；
});
}
函数应用（）{
回去
h1$key${state.count}/h1
ButtononClick=${add}添加/按钮
`;
}
constapp=createApp(应用程序);
app.mount(\’#app\’);
/剧本
/身体
/html
UMD全称为通用模块定义。它还随着更大的前端趋势而兴起，允许您在使用CommonJs、CMD 甚至AMD 的项目中在运行时或编译时运行相同的代码模块。未来，同一个JavaScript 包在浏览器端、服务器端、甚至APP 端运行时，只需要遵循相同的编写习惯即可。
您还可以选择使用脚本标签直接导入，脚本标签可以直接在浏览器中打开。
!DOCTYPEhtml
htmllang=\’ja\’
头
元字符集=\’UTF-8\’/
titleStrve.js/标题
/头
身体
scriptrc=\’https://cdn.jsdelivr.net/npm/strve-js@5.1.1/dist/strve.full.prod.js\’/script
脚本
const{h,setData,createApp}=Strve;
常量状态={
计数：0，
};
函数添加（）{
设置数据(()={
状态.count++；
});
}
函数应用（）{
回去
h1$key${state.count}/h1
ButtononClick=${add}添加/按钮
`;
}
constapp=createApp(应用程序);
app.mount(\’#app\’);
/剧本
/身体
/html
这些只是两种不同方法的相同代码的几行。可以看到Strve.js更关注如何通过将数据绑定到视图页面并操作业务逻辑来实现这一点。结果，我们不在乎。换句话说，Strve.js 可以帮助您封装流程。
常量状态={
计数：0，
};
函数添加（）{
设置数据(()={
状态.count++；
});
}
函数应用（）{
回去
h1$key${state.count}/h1
ButtononClick=${add}添加/按钮
`;
}
constapp=createApp(应用程序);
app.mount(\’#app\’);
通过上面的案例，我们可以看到所有的代码逻辑都在JS中，我们离All in JS又近了一步。
安装
现在您已经可以轻松了解如何使用Strve.js，本文将详细说明如何安装Strve.js。
CDN
上面我也提到了CDN的使用，一个用ES模块，一个用UMD。由于篇幅限制，这里不再重复。
包管理器
如果您正在构建大型应用程序，我们建议使用包管理器进行安装。
npminstallstrve-js
添加线程strve-js
命令行工具
如果您正在构建大型应用程序，我们建议使用Strve.js 提供的官方项目脚手架构建您的项目。快速构建单页应用程序(SPA) 的复杂支架。为现代前端工作流程提供即用型构建配置。
目前有两种工具：
创建StrveApp
创建stub
下面我们将详细介绍。
对不同构建版本的解释
NPM 包的dist/目录中有许多不同的Strve.js 版本。它们之间的区别是：
ES 模块（基于构建工具） ES 模块（直接在浏览器中） UMD 完整版本- strve.full-esm.jsstrve.full.js 完整版本（生产） – strve.full-esm.prod.jsstrve。完整的.prod.js运行时版本strve.runtime-esm.js–运行时版本（生产环境） strve.runtime-esm.prod.js–
各种版本：
完整版：包括编译器（用于将模板字符串编译为JavaScript 渲染函数的代码）和运行时版本。
运行时版本：用于创建实例、渲染和操作虚拟DOM 的代码。基本上其他所有内容都从编译器中删除。
在Strve.js@5.1.1 发布之前，用户可以提供HTML 字符串，将其编译为数据对象，并将其传递给运行时进行处理。准确的说，上面的代码实际上是在运行时编译的。这意味着编译在代码运行时开始，从而产生一些性能开销。因此，您还可以在构建期间运行编译器来编译提供的内容。它的性能非常友好，因为它不需要在运行时编译。这就是为什么我们针对不同场景发布不同版本的原因。
API
目前共有10 个API。
createApp、h 和setData 三个API 是主要用于页面渲染的基本API。 onMounted 和onUnmounted 这两个API 与DOM 相关。获取Strve.js的版本号。 propsData 和DefineCustomElement 是旨在容纳某些功能的函数式API。
其中值得一提的是defineCustomElement。该API用于支持Web组件的部署，并允许您传递两个参数。
第一个参数是对象类型，该对象的属性为：
属性类型是必需的。含义：idString 是本机自定义组件ID，必须是唯一的。 templateFunction 返回模板字符串函数。 stylesArray 字符串编号。原生自定义组件样式集合attributeChangedArraystring编号。原生自定义组件监听属性集合。 immediateProps 布尔值。本机自定义组件。是启用属性更改立即监控LifetimesObject 本机自定义组件生命周期与Web 组件生命周期是否匹配？
第二个参数是string类型，是原生自定义组件的名称，名称中必须包含-字段。
示例1：
常量数据={
计数1:1
}
constmyCom1={
id:\’myCom1\’,
模板：()={
回去
pclass=\’msg\’$key${data.count1}/p
`
},
样式：[`.msg{color:red;}`],
}
DefineCustomElement(myCom1,\’my-com1\’)
函数应用（）{
回去
我的com1/我的com1
`
}
示例2：
constmyCom1={
id:\’myCom1\’,
template:(道具)={
回去
pclass=\’msg\’$key${props.value}/p
pclass=\’msg\’$key${props.msg}/p
`
},
样式：[`.msg{color:red;}`],
AttributeChanged:[\’值\’,\’消息\’],
立即Props:true，
终身：{
属性更改回调(v){
控制台.log(v);
}
}
}
DefineCustomElement(myCom1,\’my-com1\’);
常量数据={
计数1:1，
计数2:\’1\’,
}
函数添加（）{
设置数据(()={
数据.count1++;
})
}
函数应用（）{
回去
按钮@click=\’${add}\’btn/按钮
my-com1value=${data.count1}msg=\’${data.count2}\’$key/my-com1
`
}
下面是一个Web 组件的示例。
预览链接：
用法
目前有11种用法，其中一些是对一些API的补充。
其中五个用法是基本的：数据绑定、属性绑定、条件渲染、列表渲染和事件处理。文档中提供了详细的使用说明，这里不再赘述。
其余六种类型是扩展用法，例如静态标签中提到的$key。例如，在修改数据时，Strve.js 内部必须使用Diff 算法进行差异比较，但不需要在每个节点上都进行差异比较。像一些静态文本，前后的变化是一样的，所以不需要参与比较。然后用户向一些需要更改的动态节点提供$key 静态标记，表明它们应该动态更改。
您也可以自己封装自定义组件。将其称为功能组件，其名称如下：另外，我们需要从父级向子级传递值，这也可以通过匹配$props来实现。
常量状态1={
计数：0，
};
函数add1(){
设置数据（
()={
状态1. 计数++；
},
{
名称： 组件1，
}
）；
}
函数组件1(){
回去
h1 组件1/h1
h1$key${state1.count}/h1
ButtononClick=${add1}add1/按钮
`;
}
函数应用（）{
回去
h2txt1/h2
分配
ptxt2/p
组件$name=${component1.name}
${组件1()}
/成分
/div
`;
}
还有许多内置组件，例如片段标签，它创建文档片段标签。由于它不是实际DOM 树的一部分，因此它的更改不会触发DOM 树的重新渲染，也不会影响性能。
常量状态={
x:0,
y:0,
};
函数应用（）{
回去
片
h1$keyMousepositionisat:${state.x},${state.y}/h1
/片
`;
}
最后，我上面提到了我支持Web组件，所以我会再补充一些。
自定义元素的主要优点是它们可以与任何框架一起使用，即使没有框架。如果您的目标用户可能使用不同的前端技术堆栈，或者您希望将最终应用程序与使用它的组件的实现细节分开，那么这些都是理想的选择。
工具
到目前为止，Strve.js不仅仅是一个用于渲染页面的库，它还可以与其他工具结合使用来生成项目框架。
目前有四种工具：CreateStrveApp、CreateStrve、StrveRouter 和BabelPluginStrve。
CreateStrveApp 和CreateStrve 都是用于快速构建Strve.js 项目的命令行工具。相比最初的脚手架CreateStrve，CreateStrveApp 更好。这是因为您可以通过直接输入命令来快速创建Strve项目。 CreateStrveApp是使用Vite构建的，Vite是一种新的前端构建工具，可以极大地改善您的前端开发体验。
当您使用Strve.js 构建单页应用程序时，当页面加载时，整个页面不会重新加载或用户交互导致页面跳转。页面跳转的效果是如何实现的呢？使用路由机制来切换内容并显示不同的内容。
StrveRouter 是Strve.js 的官方路由管理器。与Strve.js 核心深度集成，可以轻松构建单页应用程序。您可以通过以下代码快速学习如何使用StrveRouter。
!DOCTYPEhtml
htmllang=\’ja\’
头
元字符集=\’UTF-8\’/
标题strve-router/标题
/头
身体
除法=\’应用程序\’/div
脚本类型=\’模块\’
进口{
啊，
创建一个应用程序，
设置数据，
来自“https://cdn.jsdelivr.net/npm/strve-js@5.1.1/dist/strve.full-esm.prod.js”；
进口{
初始化路由器，
链接目的地，
来自“https://cdn.jsdelivr.net/npm/strve-router@2.3.1/dist/strve-router.esm.js”；
班级首页{
构造函数（）{
这个.状态={
计数：0，
};
}
使用添加=()={
设置数据(()={
this.state.count++；
});
};
去关于=()={
linkTo(\’/关于\’);
};
渲染=()={
回去
ButtononClick=${this.goAbout}goAbout/按钮
h1onClick=${this.useAdd}$key${this.state.count}/h1
`;
};
}
关于课程{
构造函数（）{
这个.状态={
msg:\’摘要\’,
};
}
使用更改=()={
设置数据(()={
this.state.msg=\’已修改\’;
});
};
回家=()={
链接到（\’/\’）;
};
渲染=()={
回去
ButtononClick=${this.goHome}goHome/Button
h1onClick=${this.useChange}$key${this.state.msg}/h1
`;
};
}
构造器=initRouter(
[
{
路径：\’/\’,
template:[主页，\’渲染\’],
},
{
路径：\’/关于\’,
template:[摘要，\’渲染\’]，
},
],
设置数据
）；
函数应用（）{
回去
<div class=\”main\”>
${router.view()}
</div>
`;
}
const app = createApp(App);
app.mount(\’#app\’);
</script>
</body>
</html>
我们在上文中的提到的编译器就是指的是BabelPluginStrve，BabelPluginStrve是一款babel 插件，将 HTML 模板字符串转化为 Virtual Dom。从之前的运行时转移到编译时，大幅度提高渲染性能。
// input:
const state = {
count: 0,
};
h`<h1 $key>${state.count}</h1>`;
// output:
{
children: [0],
props: {\”$key\”: true},
tag: \”h1\”
}
相关安装与使用方式可以参照文档。
其他
目前总共分为5个模块，分别为更新日志、IDE支持、UI 框架、浏览器兼容性、关于。
其中值得一提的是，在使用编辑器时，如何使HTML标签在模版字符串中高亮显示。比如这里我们使用Visual Studio Code时，下载es6-string-html插件后，在h“中间添加 /* html */。
function App() {
return h/* html */ `
<div class=\’inner\’>
<p>${state.msg}</p>
</div >
`;
}
另外，UI框架除了支持Bootstrap5、Tailwindcss、还支持Quark，Quark 是一款基于 Web Components 的跨框架 UI 组件库。它可以同时在任意框架或无框架中使用。
这是基于Quark的预览地址：
然后，Strve.js也可以跟Three.js搭配使用，以下是预览链接：
#以上关于我是如何开发了一个前端库 or 框架？的相关内容来源网络仅供参考，相关信息请以官方公告为准！
原创文章，作者：CSDN，如若转载，请注明出处：https://www.sudun.com/ask/92822.html
