日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
這幾天，寫了一個(gè)Strview.js

前言

最近，這幾周更新文章的頻率明顯比之前有所降低。不是懶，主要是最近想沉淀沉淀。休息的這幾天我也有所收獲，抽著晚上的空打算自己寫一個(gè)玩具JS庫玩玩。不像很多大型框架那樣，在開發(fā)之前都有嚴(yán)思縝密的計(jì)劃。然而，我就只想動手嘗試嘗試。所以，我寫了一個(gè)叫Strview.js這樣一個(gè)玩具JS庫。

如果您想看看呢?可以繼續(xù)讀下去。如果覺得沒啥意思的話，那可以當(dāng)做一篇爛文章，直接跳過也可以啊!

介紹

Strview.js是一個(gè)可以將字符串轉(zhuǎn)換為視圖的JS庫。這里的字符串一般指的是模板字符串。當(dāng)然你也可以使用普通字符串，只不過在特定場景下普通字符串更有局限性。所以，優(yōu)先使用模板字符串。其次Strview.js 只關(guān)注視圖層，不僅易于上手，還便于靈活拆裝不同的代碼塊。

這里是中文官方文檔地址：

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

如果您想上手項(xiàng)目，那么請看下面怎么安裝它吧!

安裝

CDN

直接引入以下地址：

 
 
 
 
    
  
  
  
  
  1.  
    2.

如果你使用原生 ES Modules，這里也有一個(gè)兼容 ES Module 的構(gòu)建文件：

 
 
 
 
    
  
  
  
  
  1.  
    2.

NPM

最新穩(wěn)定版本：1.8.0

 
 
 
 
    
  
  
  
  
  1. npm install strview 
    2.

命令行工具 (CLI)

strviewApp是基于strview.js的項(xiàng)目構(gòu)建工具，您可以使用它更方便靈活地搭建頁面。如何安裝它，你可以使用strviewCli來快速安裝strviewApp。

全局安裝

 
 
 
 
    
  
  
  
  
  1. npm install strview-cli -g 
    2.

查看版本

 
 
 
 
    
  
  
  
  
  1. strview-cli -v 
    2.

初始化項(xiàng)目

 
 
 
 
    
  
  
  
  
  1. strview-cli init  
    2.

快速上手

嘗試 Strview.js 最簡單的方法是使用 Hello World 例子。你可以在瀏覽器新標(biāo)簽頁中打開它，跟著例子學(xué)習(xí)一些基礎(chǔ)用法。你可以使用CDN版本下的strview.global.js。使用這個(gè)文件，會將Strview全局暴露，您可以直接調(diào)用。

 
 
 
 
    
  
  
  
  
  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.

    基本使用

    創(chuàng)建視圖

    使用createView方法傳入一個(gè)對象，對象屬性分別為el、data、template。el表示為要掛載的DOM 元素，data表示為觀察的數(shù)據(jù)對象，template表示為DOM模板字符串。定義好這三個(gè)屬性之后就可以生成一個(gè)預(yù)想的視圖頁面。

     
 
 
 
      
  
  
  
  
    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.     
     
  •      
  •      
  •  
  •  
  •  
    •  
 
 
 
      
  
  
  
  
    1. 1 2 
      2.

    事件處理

    eventListener方法一共有三個(gè)參數(shù)，分別是DOM節(jié)點(diǎn)、事件名稱、回調(diào)函數(shù)。

     
 
 
 
      
  
  
  
  
    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. 1 
      2.

    響應(yīng)性數(shù)據(jù)

    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.     
     
  •      
  •      
  •  
  •  
  •  

    • reactive

    針對復(fù)雜屬性。

     
 
 
 
      
  
  
  
  
    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.     
     
  •      
  •      
  •  
  •  
  •  

    • 部署

    如果您使用strviewApp這個(gè)項(xiàng)目構(gòu)建工具，你可以這樣部署您的項(xiàng)目。

     
 
 
 
      
  
  
  
  
    1. npm run build 
      2.

    or

     
 
 
 
      
  
  
  
  
    1. yarn build 
      2.

    結(jié)語

    以上就是Strview.js大概介紹了，需要改進(jìn)的地方肯定很多。寫出來也是為了拿出一點(diǎn)東西來，還有就是吸取大家的意見，讓自己可以更快地成長。

    備注

    以下是源碼地址：

    • https://github.com/maomincoding/strview
    • https://github.com/maomincoding/strview-app
    • https://github.com/maomincoding/strview-cli

      • 本文轉(zhuǎn)載自微信公眾號「前端歷劫之路」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請聯(lián)系前端歷劫之路公眾號。


    本文名稱：這幾天，寫了一個(gè)Strview.js
    分享網(wǎng)址：http://www.dlmjj.cn/article/ccsdhei.html