文章详情

登录

短信预约-IT技能 免费直播动态提醒

选择考试省份

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团

请输入下面的图形验证码

提交验证

短信预约提醒成功

每个前端开发者都可以开发一个属于自己的库或框架「Strve.js生态初步建成」

2024-12-02 12:02

关注

说实话，这段时间是挺难熬的，这也算是今年给自己一个礼物吧!

我开发Strve.js的初衷是之前接触过JSX语法，一直觉的JSX语法非常酷，可以在JS中写HTML标签，于是就想开发一款类似JSX语法的库。刚开始也开发了一段时间，搭配Babel可以简单实现JSX语法。但是到后来觉得并不是那么完美，还要解决一些类似修改数据更新视图的一些问题。熬了几天夜，也没有完美的解决。最后，还是放弃了这种方案。

我当时在想，如果我仅仅想在JS中写HTML标签，那么使用JS中的模板字符串就已经具备在字符串内写HTML标签的能力了，为什么不换一下思路，研究一下在模板字符串中写HTML标签这种更加方便直接的方案呢?刚开始我就是从基础着手，写一串字符串，然后怎么想办法将字符串挂载到页面中。借鉴了React、Vue这些框架的思想，在页面指定一个挂载元素。这就简单实现了在模板字符串内开发HTML，但是随之而来的是不能做到数据变页面变，从更加专业的角度上讲就是数据驱动页面。并且更新页面后尽可能的少修改DOM元素，减少重排带来的性能上的影响。这从最初的简单的在JS写HTML又上升到一个层面上，怎么实现一个MVVM框架。

市面上知名的MVVM框架有Vue、React、Angular，既然自己想设计一个MVVM框架，那么可以借鉴一下它们的思想。首先，非常喜欢Vue的渐进式设计思想，只要你是一个前端小白就可以立马上手，这是非常值得借鉴的。另外又借鉴了React框架中的“All in JS”以及异步更新数据的思想。最后，它们两个框架都使用了虚拟DOM来提升性能，那么我们也可以引入虚拟DOM机制。

之前，听过尤老师的几期中文分享，谈到框架的话题说，框架的设计就是不断的取舍。这其中肯定还会复杂很多，我上面也就是简单的概括了一下。能不能实现我所预期的那样，当时我也不知道，当时就想把东西做出来。前面一个多月是非常痛苦的，几乎是闭门造车。主要的难点是怎么将模板字符串转化成虚拟DOM结构，并且代码量控制在最小。然后将转化的虚拟DOM进行Diff算法，更有效的更新DOM。

最终，功夫不负有心人，我终于如愿以偿的完成了Strve.js的开发。这个小型库，也算不上是框架吧!设计的初衷上面也说了就是自己想练练手，看自己也能不能开发出起码不是很差的库或者框架。

下面，我将详细介绍Strve.js，如果有疑问或者其他问题可以留言哦!谢谢阅读!

Github

https://github.com/maomincoding/strve

Doc

https://maomincoding.github.io/strvejs-doc/

介绍

Strve.js的读音/str'vi/，是字符串(String)与视图(View)的拼接。Strve.js是一个可以将字符串转换为视图的JS库。这里的字符串指的是模板字符串，所以你仅需要在JavaScript中开发视图。Strve.js不仅易于上手，还便于灵活拆装不同的代码块。

使用模板字符串开发视图主要是利用了原生JavaScript的能力，可以更加灵活地分离代码块，你仅仅只关注JavaScript文件。从另一方面来看，目前源代码文件仅仅4kb左右，当然这是目前版本文件的大小。在之后的版本，会增加功能，肯定会增加代码量。不过，Strve.js会尽力做到轻量级。

Strve.js又是一款轻量级的MVVM框架，你只需要关心数据以及如何操作它，其他工作交给Strve.js内部处理。Strve.js首先会将模板字符串转化为虚拟DOM，然后进行Diff算法通过比较前后两次的状态差异更新真实DOM。这也是很多框架为了提升浏览器性能采用的方案，但是Strve.js更加轻量。

Strve.js目前仅仅3个API，是不是很容易上手? 如果你想上手项目，那么请看下面怎么安装它吧!

安装

CDN

如果你使用原生 ES Modules。

  1. "module"> 
  2.   import { Strve, render, updateView } from 'https://cdn.jsdelivr.net/npm/strvejs/dist/strve.esm.min.js'; 
  3.  
  1. npm i strvejs 

命令行工具

create-strve-app

一套快速搭建Strve.js项目的命令行工具。与早期的脚手架 Create Strve 相比，Create Strve App 更胜一筹，可直接输入命令快速创建Strve项目。Create Strve App是用Vite来构建的，它是一种新型前端构建工具，能够显著提升前端开发体验。

npm

  1. npm init strve-app@latest 

yarn

  1. yarn create strve-app 

pnpm

  1. pnpm create strve-app 

create-strve

Create Strve 是基于Strve.js的项目构建工具，您可以使用它更方便灵活地搭建页面。

全局安装

  1. npm install create-strve -g 

查看版本

  1. create-strve -v 

初始化项目

  1. create-strve init  

快速上手

尝试 Strve.js 最简单的方法是使用直接引入CDN链接。你可以在浏览器打开它，跟着例子学习一些基础用法。

  1.  
  2. "en"> 
  3.  
  4.  
  5.     "UTF-8"> 
  6.     Hello Strve.js 
  7.  
  8.  
  9.  
  10.     "app">
 
  •     "module"> 
  •         import { Strve, updateView, render } from 'https://cdn.jsdelivr.net/npm/strvejs/dist/strve.esm.js'; 
  •  
  •         const state = { 
  •             arr: ['1', '2'], 
  •             msg: 'hello', 
  •             a: 1 
  •         }; 
  •  
  •         function App() { 
  •             return render` 
  •               'inner'> 
  •                   

    {state.msg}

     
  •                   

    ${state.a + state.a}

      
  •                   'btn2' onclick=${usePush}>push 
  •                   
       
    •                     ${state.arr.map((todo) => render`key=${todo}>${todo}
      • `)} 
    •                   
     
  •               
    •  
  •           `; 
  •         } 
  •  
  •         function usePush() { 
  •             updateView(() => { 
  •                 state.arr.push('3'); 
  •             }); 
  •         } 
  •  
  •         Strve('#app', { 
  •             data: { state }, 
  •             template: App 
  •         }); 
  •      
  •  
  •  
  •  
    •

    如果你还想深入学习其他关于 Strve.js 的内容，你可以继续往下阅读。

    使用

    API

    Strve.js目前仅仅有三个API。

    是不是很简单!快来看看这三个API是什么意思?怎么使用它们?

    Strve

    参数：

    详细：

    初始化Strve.js。第一个参数传入需要挂载到HTML页面的节点选择器名称。第二个参数传入一个对象，第一个属性data表示的意思是状态对象，第二个属性template表示模板函数。

    1. Strve('#app', { 
    2.     data: { state }, 
    3.     template: App 
    4. }); 

    render

    render`` 是一个标签函数，标签函数的语法是函数名后面直接带一个模板字符串，并从模板字符串中的插值表达式中获取参数。比如说，你可以在模板字符串中直接可以写HTML标签。

    1. function App() { 
    2.     return render` 
    3.         'inner'> 
    4.              
    5.          
    6.     `; 
    7. } 

    updateView

    参数：

    详细：

    它仅仅有一个参数，这个参数是一个函数。函数体中需要执行将改变页面状态的值，例如以下示例中的state.msg。

    1. const state = { 
    2.     msg:'1' 
    3. }; 
    4.  
    5. function App() { 
    6.     return render` 
    7.         'inner'> 
    8.             change 
    9.             
      {state.msg}
       
    10.         } 
    11.          
    12.     `; 
    13. } 
    14.  
    15. function useChange() { 
    16.     updateView(() => { 
    17.         state.msg = '2'; 
    18.     }); 
    19. }

    插值

    Strve.js 使用了基于 JavaScript 的模板字符串语法，允许开发者声明式地将 DOM 绑定至底层实例的数据。所有 Strve.js 的模板字符串都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。

    在底层的实现上，Strve.js 将模板字符串编译成虚拟 DOM 渲染函数，并把 DOM 操作次数减到最少。

    在Strve.js中，你可以尽情的使用JavaScript 的模板字符串，感受它独特的魅力吧!

    文本

    数据绑定最常见的形式就是使用符号${}的文本插值：

    1. const state = { 
    2.     msg: 'hello' 
    3. }; 
    4.  
    5. function App() { 
    6.     return render` 
    7.         'inner'> 
    8.             
      ${state.msg}
       
    9.          
    10.     `; 
    11. } 

     另外你还可以使用更简便的方法符号{}，同样可以达到预想的效果。

    1. const state = { 
    2.     msg: 'hello' 
    3. }; 
    4.  
    5. function App() { 
    6.     return render` 
    7.         'inner'> 
    8.             
      {state.msg}
       
    9.          
    10.     `; 
    11. } 

     但是，使用这种符号{}需要注意的是，它只适用于标签内的文本插值。例如如下这种情况，它是不起作用的，不过你可以使用强大的符号${}。

    1. // Bad 
    2. function App() { 
    3.     return render` 
    4.         'inner'> 
    5.             "text" value={state.msg}/> 
    6.         } 
    7.          
    8.     `; 
    9. } 
    10.  
    11. // Good 
    12. function App() { 
    13.     return render` 
    14.         'inner'> 
    15.             "text" value=${state.msg}/> 
    16.         } 
    17.          
    18.     `; 
    19. } 

    表达式

    目前仅支持在符号${}中使用表达式。例如，

    1. const state = { 
    2.     a: 1, 
    3.     b: 2 
    4. }; 
    5.  
    6. function App() { 
    7.     return render` 
    8.         'inner'> 
    9.             
      ${String(state.a + state.b)}
       
    10.         } 
    11.          
    12.     `; 
    13. } 

    属性绑定

    前面，我们可以看到使用符号${}可以与属性value绑定值。

    1. function App() { 
    2.     return render` 
    3.         'inner'> 
    4.             "text" value=${state.msg}/> 
    5.         } 
    6.          
    7.     `; 
    8. } 

     另外，你还可以绑定其他属性，例如class。

    1. const state = { 
    2.     isRed: true 
    3. }; 
    4.  
    5. function App() { 
    6.     return render` 
    7.     'inner'> 
    8.         'red' : ''}>Strve.js
       
    9.      
    10. `; 
    11. } 

    条件渲染

    我们也可以使用符号${}，这块内容只会在指令的表达式返回 true 值的时候被渲染。

    1. const state = { 
    2.     isShow: false 
    3. }; 
    4.  
    5. function App() { 
    6.     return render` 
    7.         'inner'> 
    8.             show 
    9.             ${state.isShow ? render`
      Strve.js
      ` : '' 
    10.         } 
    11.          
    12.     `; 
    13. } 
    14.  
    15. function useShow() { 
    16.     updateView(() => { 
    17.         state.isShow = !state.isShow; 
    18.     }); 
    19. } 

    列表渲染

    我们可以用符号${}基于一个数组来渲染一个列表。比如我们使用数组的map方法来渲染列表，并且可以动态添加数组项。

    1. const state = { 
    2.     arr: ['1', '2'] 
    3. }; 
    4.  
    5. function App() { 
    6.     return render` 
    7.         'inner'> 
    8.             push 
    9.             
         
      •             ${state.arr.map((todo) => render`key=${todo}>${todo}
        • `)} 
      •             
       
    10.         } 
    11.          
    12.     `; 
    13. } 
    14.  
    15. function usePush() { 
    16.     updateView(() => { 
    17.         state.arr.push('3'); 
    18.     }); 
    19. } 

    事件处理

    我们可以使用原生onclick指令来监听 DOM 事件，并在触发事件时执行一些 JavaScript。需要使用符号${}来绑定事件。

    1. function App() { 
    2.     return render` 
    3.         'inner'> 
    4.             sayHello 
    5.         } 
    6.          
    7.     `; 
    8. } 
    9.  
    10. function useClick() { 
    11.     console.log('hello'); 
    12. } 

    与Vue.js搭配

    Strve.js不仅可以单独使用，也可以与Vue.js搭配使用。你需要在Vue实例挂载完成后被调用Strve()注册方法，并且第一个参数已经在template标签中存在。

    App.vue

    1.  
    2.  
    3.  

    如果需要与Vue共享一个方法，推荐在setup方法中使用。

    HelloWorld.vue

    1.  
    2.  

    如果，你想在Vue组件中完全使用Strve.js，当然也可以。不过最后，推荐使用export default导出组件名。

    About.vue

    1.  

    与React.js搭配

    Strve.js与Vue.js搭配相比，与React.js搭配使用更为灵活。同样需要在组件第一次渲染完成后调用Strve()方法注册方法。

    App.js

    1. import {useEffect} from 'react' 
    2. import {Strve,render,updateView} from 'strvejs'; 
    3. import './App.css'; 
    4.  
    5. const state = { 
    6.   msg:"Hello" 
    7. } 
    8.  
    9. function Home(){ 
    10.   return render`` 
    11. } 
    12.  
    13. function useClick(){ 
    14.   updateView(()=>{ 
    15.     state.msg = "World"; 
    16.   }) 
    17. } 
    18.  
    19. function App() { 
    20.   useEffect(()=>{ 
    21.     Strve(".App",{ 
    22.       data:{state}, 
    23.       template: Home 
    24.     }) 
    25.   }) 
    26.   return ("App">); 
    27. } 
    28.  
    29. export default App; 

    工具

    create-strve-app

    一套快速搭建Strve.js项目的命令行工具。与早期的脚手架 Create Strve 相比，Create Strve App 更胜一筹，可直接输入命令快速创建Strve项目。Create Strve App是用Vite来构建的，它是一种新型前端构建工具，能够显著提升前端开发体验。

    搭建你的第一个 Strve 项目

    npm

    1. npm init strve-app@latest 

    yarn

    1. yarn create strve-app 

    pnpm

    1. pnpm create strve-app 

    选择模板

    你可以根据自己的需要选择对应的模板。

    只包含Strve.js基本使用的功能。此模板适用于项目中仅仅单页面，没有跳转其他页面的应用。

    不仅包含了Strve.js的基本使用的功能，而且还包含了Strve Router，适用于跳转多页面以及稍微复杂的应用。

    create-strve

    在前面我们也简单介绍过，Create Strve是基于Strve.js的项目构建工具，您可以使用它更方便灵活地搭建页面。Create Strve同样是用Vite来构建的。

    不过，在这里推荐使用Create Strve App，它相对安装更加灵活以及快速。

    安装

    全局安装

    1. npm install create-strve -g 

    查看版本

    1. create-strve -v 

    初始化项目

    1. create-strve init  

    strve-router

    Strve Router 是 Strve.js 的官方路由管理器。 它与 Strve.js 的核心深度集成，可以轻松构建单页应用程序。

    目前只支持Hash模式。

    开始

    尝试 Strve Router 最简单的方法是使用直接导入 CDN 链接。 您可以在浏览器中打开它并按照示例学习一些基本用法。

    1.  
    2. "en"> 
    3.  
    4.  
    5.     "UTF-8"> 
    6.     StrveRouter 
    7.  
    8.  
    9.  
    10.     "app"> 
    11.     "module"> 
    12.         import { Strve, render, updateView } from 'https://cdn.jsdelivr.net/npm/strvejs/dist/strve.esm.js'; 
    13.         import StrveRouter from 'https://cdn.jsdelivr.net/npm/strve-router/dist/strve-router.esm.js'; 
    14.  
    15.         const state = { 
    16.             msg: 'Hello!' 
    17.         }; 
    18.  
    19.         const strveRouter = new StrveRouter([{ 
    20.             path: '/', 
    21.             template: Home 
    22.         }, { 
    23.             path: '/about', 
    24.             template: About 
    25.         }]); 
    26.  
    27.         strveRouter.routerHashUpdate(updateView, () => { 
    28.             console.log(strveRouter.param2Obj()); 
    29.         }); 
    30.  
    31.         function Home() { 
    32.             return render` 
    33.                 'innter'> 
    34.                     "${goAbout}">goAbout 
    35.                      
    36.                  
    37.             ` 
    38.         } 
    39.  
    40.         function About() { 
    41.             return render` 
    42.                 "innter"> 
    43.                     "${goback}">goback 
    44.                     "${goHome}">goHome 
    45.                     
      About
       
    46.                  
    47.             ` 
    48.         } 
    49.  
    50.         function App() { 
    51.             return render` 
    52.               'inner'> 
    53.                 
      {state.msg}
       
    54.                 ${strveRouter.routerView()} 
    55.                
    56.           `; 
    57.         } 
    58.  
    59.         function goback() { 
    60.             strveRouter.back(); 
    61.         } 
    62.  
    63.         function goAbout() { 
    64.             console.log('goAbout'); 
    65.             strveRouter.routerLink({ 
    66.                 path: '/about', 
    67.                 query: { 
    68.                     id: 1, 
    69.                     name: "maomin" 
    70.                 } 
    71.             }); 
    72.         } 
    73.  
    74.         function goHome() { 
    75.             console.log('goHome'); 
    76.             strveRouter.routerLink('/'); 
    77.         } 
    78.  
    79.         Strve('#app', { 
    80.             data: { state }, 
    81.             template: App 
    82.         }); 
    83.      
    84.  
    85.  
    86.  

    安装

    npm

    1. npm install strve-router 

    yarn

    1. yarn add strve-router 

    pnpm

    1. pnpm add strve-router 

    使用

    如果在一个模块化工程中使用它，可以引入StrveRouter对象，然后实例化。参数是需要注册的路由组件，path属性代表路径，template属性代表引入的组件。

    匹配到相应的路径页面会相应的更新，所以这里必须注册一个routerHashUpdate()方法，然后第一个参数传入updateViewAPI，第二个参数则是一个自定义方法。最后导出strveRouter实例。

    比如这里在一个router文件夹下创建一个index.js文件。

    1. import StrveRouter from 'strve-router'; 
    2. import {updateView} from 'strvejs'; 
    3.  
    4. import Home from '../template/homepage.js'; 
    5. import About from '../template/aboutpage.js'; 
    6.  
    7. const strveRouter = new StrveRouter([{ 
    8.     path: '/', 
    9.     template: Home 
    10. }, { 
    11.     path: '/about', 
    12.     template: About 
    13. }]); 
    14.  
    15. strveRouter.routerHashUpdate(updateView,()=>{ 
    16.     console.log('router'); 
    17. }); 
    18.  
    19. export default strveRouter 

    路由匹配到的组件将渲染到routerView()方法所在的地方，一般会放在主页面入口文件下(例如App.js)。

    1. import { render } from 'strvejs'; 
    2. import strveRouter from './router/index'; 
    3. function template() { 
    4.   return render` 
    5.         'inner'> 
    6.         ${strveRouter.routerView()} 
    7.          
    8.     `; 
    9. } 
    10.  
    11. export default template; 

     如果需要跳转到对应页面，使用strveRouter.routerLink()方法，可以传对应的路径和需要传的参数，也可以直接传一个路径字符串。

    1. import { render } from 'strvejs' 
    2. import strveRouter from '../router/index.js' 
    3.  
    4. function Home(){ 
    5.     return render` 
    6.         
       
    7.             "${goAbout}">goAbout 
    8.              
    9.          
    10.     ` 
    11. } 
    12.  
    13. function goAbout(){ 
    14.     strveRouter.routerLink({ 
    15.         path: '/about', 
    16.         query: { 
    17.             id: 1, 
    18.             name: "maomin" 
    19.         } 
    20.     }); 
    21. } 
    22.  
    23. export default Home 

    最后，如果你需要实现后退、前进跳转页面这样操作时，同样提供了几个方法。

    其它

    IDE支持

    Visual Studio Code

    模板字符串自动补全标签

    打开设置下的Settings.json，加入如下代码：

    1. "emmet.triggerExpansionOnTab": true, 
    2. "emmet.showAbbreviationSuggestions": true, 
    3. "emmet.showExpandedAbbreviation": "always", 
    4. "emmet.includeLanguages": { 
    5.     "javascript": "html" 
    6. } 

     

    来源：前端历劫之路内容投诉

    免责声明：

    ① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

    ② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

    软考中级精品资料免费领

    • 2024年上半年信息系统项目管理师第二批次真题及答案解析（完整版）

      难度     813人已做
      查看

    • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

      难度     354人已做
      查看

    • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

      难度     318人已做
      查看

    • 2024年上半年软考高项第一、二批次真题考点汇总（完整版）

      难度     435人已做
      查看

    • 2024年上半年系统架构设计师考试综合知识真题

      难度     224人已做
      查看

    相关文章

    发现更多好内容

    猜你喜欢

    AI推送时光机

    每个前端开发者都可以开发一个属于自己的库或框架「Strve.js生态初步建成」

    后端开发前端技术2024-12-02

    「Create-?」每个前端开发者都可以拥有属于自己的命令行脚手架

    后端开发Create前端2024-12-02
    位置：首页-资讯-后端开发
    咦！没有更多了？去看看其它编程学习网 内容吧
    首页课程
    资料下载    问答资讯