npm i strview-cli -g
 
 
 
 

 
 
 
 

  
  
  
  
strview-cli -v
 
 
 
 

 
 
 
 

  
  
  
  
strview-cli init 
 
 
 
 

 
 
 
 

  
  
  
  
strview-cli i 
 
 
 
 

 
 
 
 

  
  
  
  
- webpack.base.js // 基礎配置
  
  
  
  

  
  
  
  
- webpack.dev.js // 開發(fā)環(huán)境配置
  
  
  
  

  
  
  
  
- webpack.pro.js // 生產(chǎn)環(huán)境配置
 
 
 
 

 
 
 
 

  
  
  
  
- favicon.ico  // 網(wǎng)站標識
  
  
  
  
- index.html  // 模板文件
 
 
 
 

 
 
 
 

  
  
  
  
- assets //存放靜態(tài)文件
  
  
  
  
- components // 組件文件夾
  
  
  
  
- data // 公用狀態(tài)文件夾
  
  
  
  
- methods // 方法文件夾
  
  
  
  
- style // 樣式文件夾
  
  
  
  
- template // 模板文件夾
  
  
  
  
- App.js // 頁面入口
  
  
  
  
- main.js // 項目入口文件
 
 
 
 

 
 
 
 

  
  
  
  
import { createView } from 'strview';
  
  
  
  
import data from './data';
  
  
  
  
import App from './App';
  
  
  
  
import methods from './methods';
  
  
  
  

  
  
  
  
createView({
  
  
  
  
  el: "#app",
  
  
  
  
  template: App,
  
  
  
  
  data
  
  
  
  
});
  
  
  
  

  
  
  
  
// The event is handled after the createview API
  
  
  
  
methods();
 
 
 
 

 
 
 
 

  
  
  
  
import myParagraph from './components/myParagraph';
  
  
  
  
import card from './components/card';
  
  
  
  
import helloTemplate from './template/helloTemplate';
  
  
  
  
import './style/index.css';
  
  
  
  

  
  
  
  
const App = `
  
  
  
  
${helloTemplate}
  
  
  
  

  
  
  
  
    點擊
  
  
  
  
    {a}，，（a和b都改變）

  
  
  
  
    
  
  
  
  
      
{age}
  
  
  
  
      
{name}
  
  
  
  
      
{msg}
  
  
  
  
    
  
  
  
  
    {a}，（a會改變）

  
  
  
  
    ，（b會改變）

  
  
  
  
    
  
  
  
  
    
{obj.a.b}
  
  
  
  
    
{arr}
  
  
  
  
    
{ob.name}
  
  
  
  

 
 
 
 

  
  
  
  
- helloTemplate.css
  
  
  
  
- helloTemplate.js
 
 
 
 

 
 
 
 

  
  
  
  
.container {
  
  
  
  
  text-align: center;
  
  
  
  
  margin-top: 100px;
  
  
  
  
  line-height: 46px;
  
  
  
  
}
  
  
  
  
.container > img {
  
  
  
  
  margin-bottom: 40px;
  
  
  
  
}
 
 
 
 

 
 
 
 

  
  
  
  
import logo from '../assets/logo.png';
  
  
  
  
import './helloTemplate.css';
  
  
  
  

  
  
  
  
export default `
  
  
  
  

  
  
  
  
  
  
  
  
  
  
Hello Strview.js
  
  
  
  

在上面代碼中可以看到我們頭部引入了一個圖片還有一個樣式文件，下面接著導出了一個模板字符串。引入的圖片呢!使用${}占位符來綁定到img標簽上。

簡單介紹下template文件夾之后，我們下面看下components文件夾。

4. components

這個文件夾的是存放組件的，組件這個概念大家可能非常熟悉，在目前Vue、React這些前端框架中都有相應的應用。

我們先來看下這個文件夾的目錄結構。

 
 
 
 

  
  
  
  
- card.js
  
  
  
  
- myParagraph.js
 
 
 
 

可以看到，有兩個js文件。

先看myParagraph.js這個文件。

 
 
 
 

  
  
  
  
customElements.define('my-paragraph',
  
  
  
  
    class extends HTMLElement {
  
  
  
  
        constructor() {
  
  
  
  
            super();
  
  
  
  

  
  
  
  
            const template = document.getElementById('my-paragraph');
  
  
  
  
            const templateContent = template.content;
  
  
  
  

  
  
  
  
            this.attachShadow({ mode: 'open' }).appendChild(
  
  
  
  
                templateContent.cloneNode(true)
  
  
  
  
            );
  
  
  
  
        }
  
  
  
  
    }
  
  
  
  
);
  
  
  
  

  
  
  
  
const myParagraph = `
  
  
  
  

  
  
  
  

  
  
  
  
    My default text
  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  
Let's have some different text!
  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  
    
Let's have some different text!
  
  
  
  
    
In a list!
  
  
  
  

  
  
  
  
`
  
  
  
  

  
  
  
  
export default myParagraph
 
 
 
 

我們先看上一部分，customElements對象下有一個define方法。這是什么方法呢?其實這部分利用了Web Components。它是什么呢?我們在MDN這樣定義它的。

Web Components 是一套不同的技術，允許您創(chuàng)建可重用的定制元素(它們的功能封裝在您的代碼之外)并且在您的web應用中使用它們。

Web Components拆開來講其實也挺復雜，我們在這里就不詳細分析了。以下是MDN網(wǎng)址，大家可以跟著做幾個例子。

 
 
 
 

  
  
  
  
https://developer.mozilla.org/zh-CN/docs/Web/Web_Components
 
 
 
 

我們在這里是需要知道define方法第一個參數(shù)需要傳一個自定義標簽名，第二個參數(shù)是傳入一個類。需要自定義的地方是第一個參數(shù)與第二個參數(shù)中getElementById()方法中的參數(shù)，推薦使用相同的字符串。

調(diào)用define方法完成后，你需要在下面模板字符串中首先要使用template標簽包裹起來，你可以理解成初始化。我們可以看到在template標簽上有一個id選擇器與上面的getElementById()方法中的參數(shù)一樣。是的，這地方必須一一對應。另外，我們看到緊接著下面有一個style標簽，這是定義組件樣式的。最后就是組件的內(nèi)容了。這里定義了一個p標簽，里面是一個插槽，定義了一個name屬性。并且這里有一個標簽文本，這個文本內(nèi)容是默認顯示的，如果組件中沒有內(nèi)容，則這個內(nèi)容就會默認顯示。

 
 
 
 

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  
    My default text
  
  
  
  

  
  
  
  

 
 
 
 

我們接著看下面代碼，它們都是用 包裹起來。另外，標簽里面則是普通的標簽語句。但是，有一點不一樣的是，這些普通的標簽語句都有一個slot屬性，這個屬性用于當作插槽的模板。

 
 
 
 

  
  
  
  

  
  
  
  
Let's have some different text!
  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  
    
Let's have some different text!
  
  
  
  
    
In a list!
  
  
  
  

  
  
  
  

 
 
 
 

分析完了myParagraph.js文件，我們接著分析card.js文件。

其實與myParagraph.js文件一樣，只不過它是負責定義組件。在上面的App.js中，我們提到我們需要在自定義組件前使用一個占位符${}，如這里的${card}，card是引入的組件，就是指的它。

 
 
 
 

  
  
  
  
customElements.define('my-card',
  
  
  
  
    class extends HTMLElement {
  
  
  
  
        constructor() {
  
  
  
  
            super();
  
  
  
  

  
  
  
  
            const template = document.getElementById('my-card');
  
  
  
  
            const templateContent = template.content;
  
  
  
  

  
  
  
  
            this.attachShadow({ mode: 'open' }).appendChild(
  
  
  
  
                templateContent.cloneNode(true)
  
  
  
  
            );
  
  
  
  
        }
  
  
  
  
    }
  
  
  
  
);
  
  
  
  

  
  
  
  
const card = `