分享：前端模块化和组件化

[xxapp]

模块化

发展

无 --> IIFE

(function () {
    var arr = [];
    alert(1);

    window.jQuery = arr;
})()

IIFE --> Ext.loader

Ext.define('module1', function (arg1, arg2) { return  });

var module1 = Ext.loader.load('module1', 1, 2);

Ext.loader -->

• requirejs(AMD)
• seajs(CMD)

// requirejs
// a.js
define(['jquery', 'lodash'], function ($, _) {
    // ...
);

// b.js
require('a.js')

--> commonjs （可以通过webpack或者FIS来搭建commonjs环境）

define('a', function (require, module, exports){
    // a.js
    var $ = require('jquery');
    var _ = require('lodash');

    exports.obj = { $: $, _: _}
})

// b.js
var obj = require('a');

--> ES6(Babel) （同样可以通过webpack或者FIS来搭建）

// a.js
import * as $ from 'jQuery'
import * as _ from 'lodash'

export default { *, _ }

// b.js
import { *, _ } from 'a'

出现原因

前端需求增加 --> 软件危机 --> 软件工程化

模块设计的原则

高内聚，低耦合

组件化

发展

Ext.component (combobox tree > combotree)

Angularjs

webcomponent

Reactjs(Angular2, Vuejs)

出现原因

复用逻辑

<input class="js-datepicker" type="text" />

$('.js-datepicker').datepicker({ ... });

构建工具

• Gulp
• Webpack
• FIS

包管理器

• npm
• bower

[xxapp]

开始学习模块化可以用 requirejs 或 seajs 中的一个做练习