各种JS模块化特性

Copy 
1define(id?, depencies?, factory);
2
3define('foo', ['utils', 'bar'], function(utils, bar) {
4  utils.add(1, 2);
5  return {
6    name: 'foo'
7  }
8})

Copy 
1rj.config({ paths: {
2  'jquery': 'https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js'
3} });
4
5rj(['jquery'], function(jquery) {
6  // ....
7})

Copy 
1// RequestJs('')
2rj(['moduleA'], function(moduleA) {});

Copy 
1rj('moduleA', [], function() {
2  return 'hello zhuawa!';
3})

Copy 
1// RequireJS
2define('a', function () {
3  console.log('a load')
4  return {
5    run: function () { console.log('a run') }
6  }
7})
8
9define('b', function () {
10  console.log('b load')
11  return {
12    run: function () { console.log('b run') }
13  }
14})
15
16require(['a', 'b'], function (a, b) {
17  console.log('main run') // 🔥
18  a.run()
19  b.run()
20})
21
22// a load
23// b load
24// main run
25// a run
26// b run

Copy 
1// sea.js
2define('a', function (require, exports, module) {
3  console.log('a load')
4  exports.run = function () { console.log('a run') }
5})
6
7define('b', function (require, exports, module) {
8  console.log('b load')
9  exports.run = function () { console.log('b run') }
10})
11
12define('main', function (require, exports, module) {
13  console.log('main run')
14  var a = require('a')
15  a.run()
16  var b = require('b')
17  b.run()
18})
19
20seajs.use('main')
21
22// main run
23// a load
24// a run
25// b load
26// b run

Copy 
1// a.js
2var name = 'morrain'
3var age = 18
4exports.name = name
5exports.getAge = function(){
6    return age
7}
8// b.js
9var a = require('a.js')
10console.log(a.name) // 'morrain'
11a.name = 'rename'
12var b = require('a.js')
13console.log(b.name) // 'rename'

Copy 
1// a.js
2var name = 'morrain'
3var age = 18
4exports.name = name
5exports.age = age
6exports.setAge = function(a){
7    age = a
8}
9// b.js
10var a = require('a.js')
11console.log(a.age) // 18
12a.setAge(19)
13console.log(a.age) // 18

Copy 
1// ep.js
2// 最常用的大概就是声明命名导出了
3export const name = 'bababa' // var let const function class 均可
4// 默认导出
5export default constant
6export default function() {}
7export { constant as default } // 重命名默认导出
8// 命名导出
9export { ep1, ep2, ep3 }
10export { ep1 as _ep1, ep2 as _ep2, ep3 as _ep3 } // 重命名导出
11// 重定向导出
12export * from 'action' // 重定向导出(导出不包含模块内的default的所有)，重定向的命名并不能在本模块使用，只是搭建一个桥梁。
13// 下面是几个错误范例
14export 1
15const $ep = 1
16export $ep

Copy 
1// 命名导入
2import { ep1, ep2, ep3 } from './ep'
3// 重命名导入
4import { ep1 as _ep1, ep2 as _ep2, ep3 as _ep3 } from './ep'
5// 混合导入
6import * as ep from './ep'
7import default,  { ep1, ep2, ep3 as $ep3 } from './ep'
8// effect 执行  多次引入也只会执行一次，有点像php里的include_once
9import './ep'
10// 动态导入
11import('./ep').then()
12
13// 下面是几个错误范例
14import { 'ep1' + 'ep2' } from './ep' // import是编译阶段，所以不能动态加载