javascript - 什么是模块化？和组件化，jQuery插件这种有什么区别？

Question

一直不是很明白什么是模块化，我学过一点儿node，也用过里面的module.exports，require这些，我自己理解的是将不同功能封装成不同的模块，然后使用的时候来调用，那jquery插件算是模块化吗？组件化又是什么？js模块化具体都需要什么？还有模块化需要学习哪些知识？

Answer 1

如果你只是不知道“什么是模块化”，那你想想乐高玩具，一堆小零件，最后可以组装成各式各样的“飞机”、“坦克”、“轮船”。其中，各个小零件，就是模块化，也正是因为有了模块化，才是的乐高变得那么有乐趣，那么多变。

组件是稍微略高一级的抽象，譬如：用几个小零件拼出一堆“翅膀”，这样当小伙伴也想组装一个“飞机”的时候，关于“翅膀”，他不需要自己从头拼起，直接把我拼好的“翅膀”拿去就好了。这里的“翅膀”，就是组件化。

广义上讲，jquery的插件算是模块化的(具备逻辑的也可以叫组件了)，我们通常不那么热衷于说jquery是模块的，是因为我们通常讲的模块化，实际上是一些通用规范描述的标准，譬如：AMD，CommonJS，ES2015

Answer 2

个人理解：模块一般说的是功能，一个功能作为一个模块。比如注册功能，整个这个流程是一个模块。编程模块化有助于并行开发，相互不影响，能单独进行功能测试，所有模块都开发完成后，在集成到一起进行集成测试，然后交付。现在模块化开发很流行，一个团队开发，基本上一个人负责一块，最后再组合到一起。
组件化则更接近编码，将页面拆分成几个多个可服用的组件。组件是单一功能的代码片段，可以通过参数来显示出不同的状态，建议稍微看下react，组件化做的很详细。组件化就类似于积木一样，开发的最后结果是最终程序，但实际上是开发的单个积木零件，最后组合到一起。组件化能提高代码的复用率，但感觉后期维护性不那么好。一旦需求变更，可能需要做较大改动。

Answer 3

项目地址：https://github.com/chunmu/PDD-App
关于模块化：
我最近有一个搭建好骨架的项目，electron+redux+webpack+react
第一种是资源模块化，webpack把所有静态资源加载进js文件，当成一个个的资源模块，在页面查看图片的时候都是一堆堆的base64类型数据
第二种是程序开发的功能模块化，比如在electron中renderer和ipcMain之间的通信占了很大一个功能点，我把它抽离出来，暴露出api..
关于组件化：
比较react可以很好的实现组件化开发，比如各个页面之间通用的<header></header>,比如每个页面用到的优化的滚动条，都可以独立出一个组件
效果图：

贴上一段代码：

import React, { Component, PropTypes } from 'react'
import { render } from 'react-dom'
import { connect } from 'react-redux'
import { dispatch } from '../redux/store/store'
import { closeWindow, toMaxWindow, toMinWindow, resizeWindow } from '../common/desktop'
import { newDiary } from '../redux/actions/actions'




//分离头部  组件化
@connect((state) => {
  return {
    diary:state.diary
  }
})
export default class NewHeader extends Component {
  windowOpera(type, win){
    if(type == "close"){
      closeWindow(win)
    }
    if(type == 'tomin'){
      toMinWindow(win)
    }
    if(type == "tomax"){
      toMaxWindow(win)
    }
  }
  render(){
    let diary = this.props.diary
    let showButton = false
    const win = this.props.win
    const topic = this.props.topic
    if(win == 'diaryhome'){
      showButton = true
    }
    let nomin = this.props.nomin
    let nomax = this.props.nomax
    return (
      <p className="NewHeaderPage">
        <header>
          {
            showButton && this.renderShowButton()
          }
          {topic}
          <p className="nav nodrag">
            <p className="windowOpera close" onClick={()=>{this.windowOpera('close', win)}}>×</p>
            {
              !nomin && (
                <p className="windowOpera toMax" onClick={()=>{this.windowOpera('tomax', win)}}>□</p> 
              )
            }
            {
              !nomax && (
                <p className="windowOpera toMin" onClick={()=>{this.windowOpera('tomin', win)}}>━</p>
              )
            }
          </p>
        </header>
      </p>
    )
  }
  renderShowButton(){
    const win = this.props.win
    if(win == 'diaryhome'){
      const showLeft = this.props.showLeft
      if(!showLeft){
        return(
          <p className="Expansion" onClick={() => {this.changeShowLeft()}}></p> 
        )
      }else{
        return(
          <p className="Collapse" onClick={() => {this.changeShowLeft()}}></p>
        )
      }
    }
  }
  changeShowLeft(){
    const win = this.props.win
    if(win == 'diaryhome'){
      let diary = this.props.diary
      let showLeft = this.props.diary.showLeft
      if(showLeft){
        this.props.diary.showLeft = false
        resizeWindow(win, 400, 500)
      }else{
        this.props.diary.showLeft = true
        resizeWindow(win, 700, 500)
      }
      dispatch(newDiary(diary))
    }
  }
}