本文共 2338 字,大约阅读时间需要 7 分钟。
(function(window, module2){ var data = 'atguigu.com' function foo() { module2.xxx() console.log('foo()'+data) } function bar() { console.log('bar()'+data) } window.module = {foo}})(window, module2)
exports.xxx = valuemodule.exports = value
var module = require('模块名/模块相对路径')
* require.js* 基本语法 * 定义暴露模块: define([依赖模块名], function(){return 模块对象}) * 引入模块: require(['模块1', '模块2', '模块3'], function(m1, m2){//使用模块对象}) * 配置: ``` require.config({ //基本路径 baseUrl : 'js/', //标识名称与路径的映射 paths : { '模块1' : 'modules/模块1', '模块2' : 'modules/模块2', 'angular' : 'libs/angular', 'angular-messages' : 'libs/angular-messages' }, //非AMD的模块 shim : { 'angular' : { exports : 'angular' }, 'angular-messages' : { exports : 'angular-messages', deps : ['angular'] } } }) ```
* sea.js* 基本语法 * 定义暴露模块: ``` define(function(require, module, exports){ 通过require引入依赖模块 通过module/exports来暴露模块 exports.xxx = value }) ``` * 使用模块seajs.use(['模块1', '模块2'])
* ES6内置了模块化的实现* 基本语法 * 定义暴露模块 : export * 暴露一个对象: ``` export default 对象 ``` * 暴露多个: ``` export var xxx = value1 export let yyy = value2 var xxx = value1 let yyy = value2 export {xxx, yyy} ``` * 引入使用模块 : import * default模块: ``` import xxx from '模块路径/模块名' ``` * 其它模块 ``` import {xxx, yyy} from '模块路径/模块名' import * as module1 from '模块路径/模块名' ```* 问题: 所有浏览器还不能直接识别ES6模块化的语法 * 解决: * 使用Babel将ES6--->ES5(使用了CommonJS) ----浏览器还不能直接支行 * 使用Browserify--->打包处理----浏览器可以运行
转载地址:http://mavii.baihongyu.com/