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

預備知識：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的朋友，均可以舉出一大堆組件化的好處：複用性高，容易維護，方便測試，高內聚，低耦合等等，這裏再也不累述。

當前的問題

如今的各類前端框架大行其道，在給你們帶來組件系統的同時，還帶來了各類方便炫酷的功能，好比說數據綁定，VisualDOM等等。

可是現實開發場景常常是很是複雜的，因爲各類技術，歷史，公司政治緣由致使可能沒法導入VueJS，ReactJS，AngularJS等等前端框架

以筆者就任的公司（日本最大的房地產信息平臺SUUMO）爲例，網站是一個後端使用PHP框架的大型CMS網站，並且對SEO要求很是高，因爲歷史緣由，後端只能使用PHP。現在想導入組件化概念，可是並不須要數據綁定，VirtualDOM等等炫酷的功能，只須要單純的組件化。

在沒有前端框架的狀況下實現組件化

這個時候咱們能夠藉助各類前端打包工具來實現

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

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

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

開發完畢以後經過loader，分別將組件的template分發到後端，將JS／CSS打包成分別打包到同一個文件分發到前端。

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

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

後續

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

不要緊，咱們也有方法（未完待續）

筆者博客

筆者微博