如何在没有前端框架的状况下实现组件化

预备知识：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

经过笔者本身实现的一个webpack-components-loader完成了以上的打包和分发功能

如图所示，在开发环境中，以组件为单位，将组件相关的template(笔者这里以smarty为例)／JS／CSS放到同一个文件下。这样在开发时，都是按照组件为单位进行开发的。

开发完毕以后经过loader，分别将组件的template分发到后端，将JS／CSS打包成分别打包到同一个文件分发到前端。

这样就在实现了，在开发时实现组件化开发，可是又没有改变既有生产环境。

在此附上笔者实现的loader地址:
webpack-component-loader

后续

什么？公司连webpack也不让用？

不要紧，咱们也有方法（未完待续）

做者博客