如何在沒有前端框架的情況下實現元件化

再見尼克發表於2017-10-12
前端框架元件化

預備知識：webpack 相關知識，傳統網站模版開發模式

什麼是元件

關於元件的定義有非常多的說法，我先舉幾個例子。

在vuejs下，元件長這個樣子

如何在沒有前端框架的情況下實現元件化

在ReactJS下，元件長這個樣子

  class HelloMessage extends React.Component {
    render() {
      return (
        <div>
          Hello {this.props.name}
        </div>
      );
    }
  }

  ReactDOM.render(
    <HelloMessage name="Jane" />,
    mountNode
  );複製程式碼

在Polymer下，元件長這個樣子

  <dom-module id="contact-card">
    <template>
      <style>
        compA {
          font-size: 12
        }
      </style>
      <div class="compA">I am a component</div>
    </template>
    <script>
      class ContactCard extends Polymer.Element {
        static get is() { return "contact-card"; }
        static get properties() {
          return {
            starred: { type: Boolean, value: true }
          }
        }
      }
      customElements.define(ContactCard.is, ContactCard);
    </script>
  </dom-module>複製程式碼

Web component 計劃官方是這麼定義的

Web components are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps. Custom components and widgets build on the Web Component standards, will work across modern browsers, and can be used with any JavaScript library or framework that works with HTML.

筆者理解的元件化

在筆者的簡單地總結一下就是：以元件為單位，將元件相關的HTML／JS／CSS放到同一個地方。這裡的同一個地方，可以是一個檔案，也可以是同一個資料夾之下。

（PS：當然元件化還包括custom elements/shadow DOM/....等等概念）

元件化的好處

相信用過VueJS ReactJS的朋友，都可以舉出一大堆元件化的好處：複用性高，容易維護，方便測試，高內聚，低耦合等等，這裡不再累述。

當前的問題

現在的各種前端框架大行其道，在給大家帶來元件系統的同時，還帶來了各種方便炫酷的功能，比如說資料繫結，VirtualDOM等等。

但是現實開發場景經常是非常複雜的，由於各種技術，歷史，公司政治原因導致可能無法匯入VueJS，ReactJS，AngularJS等等前端框架

以筆者就職的公司（日本最大的房地產資訊平臺SUUMO）為例，網站是一個後端使用PHP框架的大型CMS網站，而且對SEO要求非常高，由於歷史原因，後端只能使用PHP。如今想匯入元件化概念，但是並不需要資料繫結，VisualDOM等等炫酷的功能，只需要單純的元件化。

在沒有前端框架的情況下實現元件化

這個時候我們可以藉助各種前端打包工具來實現

筆者就藉助了webpack來實現元件化, 具體的做法是這樣的：

component-loader
component-loader

通過筆者自己實現的一個webpack-components-loader完成了以上的打包和分發功能

如圖所示，在開發環境中，以元件為單位，將元件相關的template(筆者這裡以smarty為例)／JS／CSS放到同一個檔案下。這樣在開發時，都是按照元件為單位進行開發的。

開發完畢之後通過loader，分別將元件的template分發到後端，將JS／CSS打包成分別打包到同一個檔案分發到前端。

這樣就在實現了，在開發時實現元件化開發，但是又沒有改變既有生產環境。

在此附上筆者實現的loader地址:
webpack-component-loader

後續

什麼？公司連webpack也不讓用？

沒關係，我們也有方法（未完待續）

作者部落格

相關文章