这几天，写了一个Strview.js

前言

最近，这几周更新文章的频率明显比之前有所降低。不是懒，主要是最近想沉淀沉淀。休息的这几天我也有所收获，抽着晚上的空打算自己写一个玩具JS库玩玩。不像很多大型框架那样，在开发之前都有严思缜密的计划。然而，我就只想动手尝试尝试。所以，我写了一个叫Strview.js这样一个玩具JS库。

如果您想看看呢?可以继续读下去。如果觉得没啥意思的话，那可以当做一篇烂文章，直接跳过也可以啊!

介绍

Strview.js是一个可以将字符串转换为视图的JS库。这里的字符串一般指的是模板字符串。当然你也可以使用普通字符串，只不过在特定场景下普通字符串更有局限性。所以，优先使用模板字符串。其次Strview.js 只关注视图层，不仅易于上手，还便于灵活拆装不同的代码块。

这里是中文官方文档地址：

 
 
 
 
    
  
  
  
  
  1. https://www.maomin.club/site/strviewjs/zh 
    2.

如果您想上手项目，那么请看下面怎么安装它吧!

安装

CDN

直接引入以下地址：

 
 
 
 
    
  
  
  
  
  1.  
    2.

如果你使用原生 ES Modules，这里也有一个兼容 ES Module 的构建文件：

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2.   import { createView } from 'https://cdn.jsdelivr.net/npm/strview@1.8.0/dist/strview.esm.js' 
    3. 
  
  
  
  
  3.  
    4.

NPM

最新稳定版本：1.8.0

 
 
 
 
    
  
  
  
  
  1. npm install strview 
    2.

命令行工具 (CLI)

strviewApp是基于strview.js的项目构建工具，您可以使用它更方便灵活地搭建页面。如何安装它，你可以使用strviewCli来快速安装strviewApp。

全局安装

 
 
 
 
    
  
  
  
  
  1. npm install strview-cli -g 
    2.

查看版本

 
 
 
 
    
  
  
  
  
  1. strview-cli -v 
    2.

初始化项目

 
 
 
 
    
  
  
  
  
  1. strview-cli init  
    2.

快速上手

尝试 Strview.js 最简单的方法是使用 Hello World 例子。你可以在浏览器新标签页中打开它，跟着例子学习一些基础用法。你可以使用CDN版本下的strview.global.js。使用这个文件，会将Strview全局暴露，您可以直接调用。

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2.  
    3. 
  
  
  
  
  3.  
    4. 
  
  
  
  
  4.  
    5. 
  
  
  
  
  5.      
    6. 
  
  
  
  
  6.      
    7. 
  
  
  
  
  7.      
    8. 
  
  
  
  
  8.     Strview.js 
    9. 
  
  
  
  
  9.  
    10. 
  
  
  
  
  10.  
    11. 
  
  
  
  
  11.  
    12. 
  
  
  
  
  12.     
 
  •      
  •      
  •  
  •  
  •  

    • 如下图所示：

     
 
 
 
      
  
  
  
  
    1. Hello World 
      2.

    基本使用

    创建视图

    使用createView方法传入一个对象，对象属性分别为el、data、template。el表示为要挂载的DOM 元素，data表示为观察的数据对象，template表示为DOM模板字符串。定义好这三个属性之后就可以生成一个预想的视图页面。

     
 
 
 
      
  
  
  
  
    1.  
      2. 
  
  
  
  
    2.  
      3. 
  
  
  
  
    3.  
      4. 
  
  
  
  
    4.  
      5. 
  
  
  
  
    5.      
      6. 
  
  
  
  
    6.      
      7. 
  
  
  
  
    7.      
      8. 
  
  
  
  
    8.     Strview.js 
      9. 
  
  
  
  
    9.  
      10. 
  
  
  
  
    10.  
      11. 
  
  
  
  
    11.  
      12. 
  
  
  
  
    12.     
     
  •      
  •      
  •  
  •  
  •  
    •  
 
 
 
      
  
  
  
  
    1. Hello Strview.js 
      2.

    条件渲染

    只适用于初次渲染。

     
 
 
 
      
  
  
  
  
    1.  
      2. 
  
  
  
  
    2.  
      3. 
  
  
  
  
    3.  
      4. 
  
  
  
  
    4.  
      5. 
  
  
  
  
    5.      
      6. 
  
  
  
  
    6.      
      7. 
  
  
  
  
    7.      
      8. 
  
  
  
  
    8.     Strview.js 
      9. 
  
  
  
  
    9.  
      10. 
  
  
  
  
    10.  
      11. 
  
  
  
  
    11.  
      12. 
  
  
  
  
    12.     
     
  •      
  •      
  •  
  •  
  •  
    •  
 
 
 
      
  
  
  
  
    1. Hello Strview.js 
      2.

    列表渲染

     
 
 
 
      
  
  
  
  
    1.  
      2. 
  
  
  
  
    2.  
      3. 
  
  
  
  
    3.  
      4. 
  
  
  
  
    4.  
      5. 
  
  
  
  
    5.      
      6. 
  
  
  
  
    6.      
      7. 
  
  
  
  
    7.      
      8. 
  
  
  
  
    8.     Strview.js 
      9. 
  
  
  
  
    9.  
      10. 
  
  
  
  
    10.  
      11. 
  
  
  
  
    11.  
      12. 
  
  
  
  
    12.      
      13. 
  
  
  
  
    13.      
      14. 
  
  
  
  
    14.      
      15. 
  
  
  
  
    15.  
      16. 
  
  
  
  
    16.  
      17. 
  
  
  
  
    17.  
      18. 
 
 
 
 
     
 
 
 
      
  
  
  
  
    1. 1 2 
      2.

    事件处理

    eventListener方法一共有三个参数，分别是DOM节点、事件名称、回调函数。

     
 
 
 
      
  
  
  
  
    1.  
      2. 
  
  
  
  
    2.  
      3. 
  
  
  
  
    3.  
      4. 
  
  
  
  
    4.  
      5. 
  
  
  
  
    5.      
      6. 
  
  
  
  
    6.      
      7. 
  
  
  
  
    7.      
      8. 
  
  
  
  
    8.     Strview.js 
      9. 
  
  
  
  
    9.  
      10. 
  
  
  
  
    10.  
      11. 
  
  
  
  
    11.  
      12. 
  
  
  
  
    12.      
      13. 
  
  
  
  
    13.      
      14. 
  
  
  
  
    14.      
      15. 
  
  
  
  
    15.  
      16. 
  
  
  
  
    16.  
      17. 
  
  
  
  
    17.  
      18. 
 
 
 
 
     
 
 
 
      
  
  
  
  
    1. 1 
      2.

    响应性数据

    ref

    针对单一简单属性。

     
 
 
 
      
  
  
  
  
    1.  
      2. 
  
  
  
  
    2.  
      3. 
  
  
  
  
    3.  
      4. 
  
  
  
  
    4.  
      5. 
  
  
  
  
    5.      
      6. 
  
  
  
  
    6.      
      7. 
  
  
  
  
    7.      
      8. 
  
  
  
  
    8.     Strview.js 
      9. 
  
  
  
  
    9.  
      10. 
  
  
  
  
    10.  
      11. 
  
  
  
  
    11.  
      12. 
  
  
  
  
    12.      
      13. 
  
  
  
  
    13.      
      14. 
  
  
  
  
    14.      
      15. 
  
  
  
  
    15.  
      16. 
  
  
  
  
    16.  
      17. 
  
  
  
  
    17.  
      18.

    reactive

    针对复杂属性。

     
 
 
 
      
  
  
  
  
    1.  
      2. 
  
  
  
  
    2.  
      3. 
  
  
  
  
    3.  
      4. 
  
  
  
  
    4.  
      5. 
  
  
  
  
    5.      
      6. 
  
  
  
  
    6.      
      7. 
  
  
  
  
    7.      
      8. 
  
  
  
  
    8.     Strview.js 
      9. 
  
  
  
  
    9.  
      10. 
  
  
  
  
    10.  
      11. 
  
  
  
  
    11.  
      12. 
  
  
  
  
    12.      
      13. 
  
  
  
  
    13.      
      14. 
  
  
  
  
    14.      
      15. 
  
  
  
  
    15.  
      16. 
  
  
  
  
    16.  
      17. 
  
  
  
  
    17.  
      18.

    部署

    如果您使用strviewApp这个项目构建工具，你可以这样部署您的项目。

     
 
 
 
      
  
  
  
  
    1. npm run build 
      2.

    or

     
 
 
 
      
  
  
  
  
    1. yarn build 
      2.

    结语

    以上就是Strview.js大概介绍了，需要改进的地方肯定很多。写出来也是为了拿出一点东西来，还有就是吸取大家的意见，让自己可以更快地成长。

    备注

    以下是源码地址：

    网页标题：这几天，写了一个Strview.js
    转载来于：http://www.csdahua.cn/qtweb/news39/323689.html

    网站建设、网络推广公司-快上网，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

    广告

    声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 快上网

    成都快上网为您推荐相关内容

    网页设计公司知识

    行业网站建设

    自适应网页设计　　 　成都企业注册服务　　 　成都微信开发　　 　广汉锦华　　 　眉山服务器托管　　 　成都网站建设　　 　成都网站制作　　 　郫都区消防器材　　 　成都SEO优化公司　　 　绵阳电信机房　　 　邛崃网站建设　　 　网络推广公司　　 　企业画册设计制作　　 　成都谷歌推广　　 　租用服务器　　 　主机租用　　 　恒温恒湿空调机组　　 　梓潼网站建设　　 　乐山托管服务器　　 　衣柜书柜酒柜定制