日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

 
 
 
 
  
  
  
  
 
  
  
  
  
     
  
  
  
  
       
  
  
  
  
        點贊 
  
  
  
  
         
  
  
  
  
       
  
  
  
  
    

為了現(xiàn)實當中的實際情況，所以這里特意把這個 button 的 HTML 結(jié)構(gòu)搞得稍微復雜一些。有了這個 HTML 結(jié)構(gòu)，現(xiàn)在就給它加入一些 JavaScript 的行為：

JavaScript：

 
 
 
 
  
  
  
  
const button = document.querySelector('.like-btn') 
  
  
  
  
  const buttonbuttonText = button.querySelector('.like-text') 
  
  
  
  
  let isLiked = false 
  
  
  
  
  button.addEventListener('click', function () { 
  
  
  
  
    isLiked = !isLiked 
  
  
  
  
    if (isLiked) { 
  
  
  
  
      buttonText.innerHTML = '取消' 
  
  
  
  
    } else { 
  
  
  
  
      buttonText.innerHTML = '點贊' 
  
  
  
  
    } 
  
  
  
  
  }, false) 
 
 
 

功能和實現(xiàn)都很簡單，按鈕已經(jīng)可以提供點贊和取消點贊的功能。這時候你的同事跑過來了，說他很喜歡你的按鈕，他也想用你寫的這個點贊功能。你就會發(fā)現(xiàn)這種實現(xiàn)方式很致命：你的同事要把整個 button 和里面的結(jié)構(gòu)復制過去，還有整段 JavaScript 代碼也要復制過去。這樣的實現(xiàn)方式?jīng)]有任何可復用性。

三、實現(xiàn)可復用性

所以現(xiàn)在我們來想辦法解決這個問題，讓這個點贊功能具有較好的可復用的效果，那么你的同事們就可以輕松自在地使用這個點贊功能。

1. 結(jié)構(gòu)復用

現(xiàn)在我們來重新編寫這個點贊功能。這次我們先寫一個類，這個類有 render 方法，這個方法里面直接返回一個表示 HTML 結(jié)構(gòu)的字符串：

 
 
 
 
  
  
  
  
class LikeButton { 
  
  
  
  
   render () { 
  
  
  
  
     return ` 
  
  
  
  
        
  
  
  
  
         贊 
  
  
  
  
          
  
  
  
  
        
  
  
  
  
     ` 
  
  
  
  
   } 
  
  
  
  
 } 
 
 
 

然后可以用這個類來構(gòu)建不同的點贊功能的實例，然后把它們插到頁面中。

 
 
 
 
  
  
  
  
const wrapper = document.querySelector('.wrapper') 
  
  
  
  
  const likeButton1 = new LikeButton() 
  
  
  
  
  wrapper.innerHTML = likeButton1.render() 
  
  
  
  
 
  
  
  
  
  const likeButton2 = new LikeButton() 
  
  
  
  
  wrapper.innerHTML += likeButton2.render() 
 
 
 

這里非常暴力地使用了 innerHTML ，把兩個按鈕粗魯?shù)夭迦肓?wrapper 當中。雖然你可能會對這種實現(xiàn)方式非常不滿意，但我們還是勉強了實現(xiàn)了結(jié)構(gòu)的復用。我們后面再來優(yōu)化它。

2. 生成 DOM 元素并且添加事件

你一定會發(fā)現(xiàn)，現(xiàn)在的按鈕是死的，你點擊它它根本不會有什么反應(yīng)。因為根本沒有往上面添加事件。但是問題來了，LikeButton 類里面是雖然說有一個 button，但是這玩意根本就是在字符串里面的。你怎么能往一個字符串里面添加事件呢?DOM 事件的 API 只有 DOM 結(jié)構(gòu)才能用。

我們需要 DOM 結(jié)構(gòu)，準確地來說：我們需要這個點贊功能的 HTML 字符串代表的 DOM 結(jié)構(gòu)。假設(shè)我們現(xiàn)在有一個函數(shù) createDOMFromString ，你往這個函數(shù)傳入 HTML 字符串，但是它會把相應(yīng)的 DOM 元素返回給你。這個問題就可以額解決了。

 
 
 
 
  
  
  
  
// ::String => ::Document 
  
  
  
  
const createDOMFromString = (domString) => { 
  
  
  
  
  // TODO  
  
  
  
  
} 
 
 
 

先不用管這個函數(shù)應(yīng)該怎么實現(xiàn)，先知道它是干嘛的。拿來用就好，這時候用它來改寫一下 LikeButton 類：

 
 
 
 
  
  
  
  
class LikeButton { 
  
  
  
  
    render () { 
  
  
  
  
      this.el = createDOMFromString(` 
  
  
  
  
         
  
  
  
  
          點贊 
  
  
  
  
           
  
  
  
  
         
  
  
  
  
      `) 
  
  
  
  
      this.el.addEventListener('click', () => console.log('click'), false) 
  
  
  
  
      return this.el 
  
  
  
  
    } 
  
  
  
  
  } 
 
 
 

現(xiàn)在 render() 返回的不是一個 html 字符串了，而是一個由這個 html 字符串所生成的 DOM。在返回 DOM 元素之前會先給這個 DOM 元素上添加事件再返回。

因為現(xiàn)在 render 返回的是 DOM 元素，所以不能用 innerHTML 暴力地插入 wrapper。而是要用 DOM API 插進去。

 
 
 
 
  
  
  
  
const wrapper = document.querySelector('.wrapper') 
  
  
  
  
 
  
  
  
  
const likeButton1 = new LikeButton() 
  
  
  
  
wrapper.appendChild(likeButton1.render()) 
  
  
  
  
 
  
  
  
  
const likeButton2 = new LikeButton() 
  
  
  
  
wrapper.appendChild(likeButton2.render()) 
 
 
 

現(xiàn)在你點擊這兩個按鈕，每個按鈕都會在控制臺打印 click，說明事件綁定成功了。但是按鈕上的文本還是沒有發(fā)生改變，只要稍微改動一下 LikeButton 的代碼就可以完成完整的功能：

 
 
 
 
  
  
  
  
class LikeButton { 
  
  
  
  
    constructor () { 
  
  
  
  
      this.state = { isLiked: false } 
  
  
  
  
    } 
  
  
  
  
 
  
  
  
  
    changeLikeText () { 
  
  
  
  
      const likeText = this.el.querySelector('.like-text') 
  
  
  
  
      this.state.isLiked = !this.state.isLiked 
  
  
  
  
      if (this.state.isLiked) { 
  
  
  
  
        likeText.innerHTML = '取消' 
  
  
  
  
      } else { 
  
  
  
  
        likeText.innerHTML = '點贊' 
  
  
  
  
      } 
  
  
  
  
    } 
  
  
  
  
 
  
  
  
  
    render () { 
  
  
  
  
      this.el = createDOMFromString(` 
  
  
  
  
         
  
  
  
  
          點贊 
  
  
  
  
           
  
  
  
  
         
  
  
  
  
      `) 
  
  
  
  
      this.el.addEventListener('click', this.changeLikeText.bind(this), false) 
  
  
  
  
      return this.el 
  
  
  
  
    } 
  
  
  
  
  } 
 
 
 

這里的代碼稍微長了一些，但是還是很好理解。只不過是在給 LikeButton 類添加了構(gòu)造函數(shù)，這個構(gòu)造函數(shù)會給每一個 LikeButton 的實例添加一個對象 state，state 里面保存了每個按鈕自己是否點贊的狀態(tài)。還改寫了原來的事件綁定函數(shù)：原來只打印 click，現(xiàn)在點擊的按鈕的時候會調(diào)用 changeLikeText 方法，這個方法會根據(jù) this.state 的狀態(tài)改變點贊按鈕的文本。

如果你現(xiàn)在還能跟得上文章的思路，那么你留意下，現(xiàn)在的代碼已經(jīng)和 React.js 的組件代碼有點類似了。但其實我們根本沒有講 React.js 的任何內(nèi)容，我們一心一意只想怎么做好“組件化”。

現(xiàn)在這個組件的可復用性已經(jīng)很不錯了，你的同事們只要實例化一下然后插入到 DOM 里面去就好了。

四、為什么不暴力一點?

仔細留意一下 changeLikeText 函數(shù)，這個函數(shù)包含了 DOM 操作，現(xiàn)在看起來比較簡單，那是因為現(xiàn)在只有 isLiked 一個狀態(tài)。但想一下，因為你的數(shù)據(jù)狀態(tài)改變了你就需要去更新頁面的內(nèi)容，所以如果你的組件包含了很多狀態(tài)，那么你的組件基本全部都是 DOM 操作。一個組件包含很多狀態(tài)的情況非常常見，所以這里還有優(yōu)化的空間：如何盡量減少這種手動 DOM 操作?

1. 狀態(tài)改變 -> 構(gòu)建新的 DOM 元素

這里要提出的一種解決方案：一旦狀態(tài)發(fā)生改變，就重新調(diào)用 render 方法，構(gòu)建一個新的 DOM 元素。這樣做的好處是什么呢?好處就是你可以在 render 方法里面使用***的 this.state 來構(gòu)造不同 HTML 結(jié)構(gòu)的字符串，并且通過這個字符串構(gòu)造不同的 DOM 元素。頁面就更新了!聽起來有點繞，看看代碼怎么寫：

 
 
 
 
  
  
  
  
class LikeButton { 
  
  
  
  
    constructor () { 
  
  
  
  
      this.state = { isLiked: false } 
  
  
  
  
    } 
  
  
  
  
 
  
  
  
  
    setState (state) { 
  
  
  
  
      this.state = state 
  
  
  
  
      thisthis.el = this.render() 
  
  
  
  
    } 
  
  
  
  
 
  
  
  
  
    changeLikeText () { 
  
  
  
  
      this.setState({ 
  
  
  
  
        isLiked: !this.state.isLiked 
  
  
  
  
      }) 
  
  
  
  
    } 
  
  
  
  
 
  
  
  
  
    render () { 
  
  
  
  
      this.el = createDOMFromString(` 
  
  
  
  
         
  
  
  
  
          ${this.state.isLiked ? '取消' : '點贊'} 
  
  
  
  
           
  
  
  
  
         
  
  
  
  
      `) 
  
  
  
  
      this.el.addEventListener('click', this.changeLikeText.bind(this), false) 
  
  
  
  
      return this.el 
  
  
  
  
    } 
  
  
  
  
  } 
 
 
 

其實只是改了幾個小地方：

• render 函數(shù)里面的 HTML 字符串會根據(jù) this.state 不同而不同(這里是用了 ES6 的字符串特性，做這種事情很方便)。
• 新增一個 setState 函數(shù)，這個函數(shù)接受一個對象作為參數(shù);它會設(shè)置實例的 state，然后重新調(diào)用一下 render 方法。
• 當用戶點擊按鈕的時候， changeLikeText 會構(gòu)建新的 state 對象，這個新的 state ，傳入 setState 函數(shù)當中。

這樣的結(jié)果就是，用戶每次點擊，changeLikeText 都會調(diào)用改變組件狀態(tài)然后調(diào)用 setState;setState 會調(diào)用 render 方法重新構(gòu)建新的 DOM 元素;render 方法會根據(jù) state 的不同構(gòu)建不同的 DOM 元素。

也就是說，你只要調(diào)用 setState，組件就會重新渲染。我們順利地消除了沒必要的 DOM 操作。

2. 重新插入新的 DOM 元素

上面的改進不會有什么效果，因為你仔細看一下就會發(fā)現(xiàn)，其實重新渲染的 DOM 元素并沒有插入到頁面當中。所以這個組件之外，你需要知道這個組件發(fā)生了改變，并且把新的 DOM 元素更新到頁面當中。

重新修改一下 setState 方法：

 
 
 
 
  
  
  
  
... 
  
  
  
  
    setState (state) { 
  
  
  
  
      const oldEl = this.el 
  
  
  
  
      this.state = state 
  
  
  
  
      thisthis.el = this.render() 
  
  
  
  
      if (this.onStateChange) this.onStateChange(oldEl, this.el) 
  
  
  
  
    } 
  
  
  
  
... 
 
 
 

使用這個組件的時候：

 
 
 
 
  
  
  
  
const likeButton = new LikeButton() 
  
  
  
  
wrapper.appendChild(likeButton.render()) // ***次插入 DOM 元素 
  
  
  
  
component.onStateChange = (oldEl, newEl) => { 
  
  
  
  
  wrapper.insertBefore(newEl, oldEl) // 插入新的元素 
  
  
  
  
  wrapper.removeChild(oldEl) // 刪除舊的元素 
  
  
  
  
} 
 
 
 

這里每次 setState 都會調(diào)用 onStateChange 方法，而這個方法是實例化以后時候被設(shè)置的，所以你可以自定義 onStateChange 的行為。這里做的事是，每當 setState 的時候，就會把插入新的 DOM 元素，然后刪除舊的元素，頁面就更新了。這里已經(jīng)做到了進一步的優(yōu)化了：現(xiàn)在不需要再手動更新頁面了。

非一般的暴力。不過沒有關(guān)系，這種暴力行為可以被 Virtual-DOM 的 diff 策略規(guī)避掉，但這不是本文章所討論的范圍。

這個版本的點贊功能很不錯，我可以繼續(xù)往上面加功能，而且還不需要手動操作DOM。但是有一個不好的地方，如果我要重新另外做一個新組件，譬如說評論組件，那么里面的這些 setState 方法要重新寫一遍，其實這些東西都可以抽出來。

五、抽象出 Component 類

為了讓代碼更靈活，可以寫更多的組件，我把這種模式抽象出來，放到一個 Component 類當中：

 
 
 
 
  
  
  
  
class Component { 
  
  
  
  
    constructor (props = {}) { 
  
  
  
  
      this.props = props 
  
  
  
  
    } 
  
  
  
  
 
  
  
  
  
    setState (state) { 
  
  
  
  
      const oldEl = this.el 
  
  
  
  
      this.state = state 
  
  
  
  
      thisthis.el = this.renderDOM() 
  
  
  
  
      if (this.onStateChange) this.onStateChange(oldEl, this.el) 
  
  
  
  
    } 
  
  
  
  
 
  
  
  
  
    renderDOM () { 
  
  
  
  
      this.el = createDOMFromString(this.render()) 
  
  
  
  
      if (this.onClick) { 
  
  
  
  
        this.el.addEventListener('click', this.onClick.bind(this), false) 
  
  
  
  
      } 
  
  
  
  
      return this.el 
  
  
  
  
    } 
  
  
  
  
  } 
 
 
 

還有一個額外的 mount 的方法，其實就是把組件的 DOM 元素插入頁面，并且在 setState 的時候更新頁面：

 
 
 
 
  
  
  
  
const mount = (wrapper, component) => { 
  
  
  
  
    wrapper.appendChild(component.renderDOM()) 
  
  
  
  
    component.onStateChange = (oldEl, newEl) => { 
  
  
  
  
      wrapper.insertBefore(newEl, oldEl) 
  
  
  
  
      wrapper.removeChild(oldEl) 
  
  
  
  
    } 
  
  
  
  
  } 
 
 
 

這樣的話我們重新寫點贊組件就會變成：

 
 
 
 
  
  
  
  
class LikeButton extends Component { 
  
  
  
  
    constructor (props) { 
  
  
  
  
      super(props) 
  
  
  
  
      this.state = { isLiked: false } 
  
  
  
  
    } 
  
  
  
  
 
  
  
  
  
    onClick () { 
  
  
  
  
      this.setState({ 
  
  
  
  
        isLiked: !this.state.isLiked 
  
  
  
  
      }) 
  
  
  
  
    } 
  
  
  
  
 
  
  
  
  
    render () { 
  
  
  
  
      return ` 
  
  
  
  
         
  
  
  
  
          ${this.props.word || ''} ${this.state.isLiked ? '取消' : '點贊'} 
  
  
  
  
           
  
  
  
  
         
  
  
  
  
      ` 
  
  
  
  
    } 
  
  
  
  
  } 
  
  
  
  
 
  
  
  
  
  mount(wrapper, new LikeButton({ word: 'hello' })) 
 
 
 

有沒有發(fā)現(xiàn)你寫的代碼已經(jīng)和 React.js 的組件寫法很相似了?而且還是可以正常運作的代碼，而且我們從頭到尾都是用純的 JavaScript，沒有依賴任何第三方庫。(注意這里加入了上面沒有提到過點 props，可以給組件傳入配置屬性，跟 React.js 一樣)。

只要有了上面那個 Component 類和 mount 方法加起來不足40行代碼就可以做到組件化。如果我們需要寫另外一個組件，只需要像上面那樣，簡單地繼承一下 Component 類就好了：

 
 
 
 
  
  
  
  
class RedBlueButton extends Component { 
  
  
  
  
    constructor (props) { 
  
  
  
  
      super(props) 
  
  
  
  
      this.state = { 
  
  
  
  
        color: 'red' 
  
  
  
  
      } 
  
  
  
  
    } 
  
  
  
  
 
  
  
  
  
    onClick () { 
  
  
  
  
      this.setState({ 
  
  
  
  
        color: 'blue' 
  
  
  
  
      }) 
  
  
  
  
    } 
  
  
  
  
 
  
  
  
  
    render () { 
  
  
  
  
      return ` 
  
  
  
  
        ${this.state.color}