module

模块开发

传统引入js的方式:

开发过程中分成多个js文件：方便维护
(1)js加载过程为同步，js文件越多，响应时间越长
(2)js之间存在依赖问题，要格外注意引入的顺序

requirejs:

在js中加载js文件的方式代替传统的script加载步骤.主要目的还是为了代码的模块化
优点:
(1)实现js文件的异步加载，避免网页失去响应；
(2)管理模块之间的依赖性，便于代码的编写和维护。

requirejs

RequireJS的目标是鼓励代码的模块化，它使用在js中加载js文件的方式代替传统的script加载步骤。可以用它来加速、优化代码，但其主要目的还是为了代码的模块化

requirejs的出现主要解决两个问题：

实现js文件的异步加载，避免网页失去响应；
管理模块之间的依赖性，便于代码的编写和维护。

官网：http://requirejs.org/
中文网：http://www.requirejs.org.cn/

常用方法

• 配置参数：requirejs.config/require.config
• 加载模块：requirejs/require
• 定义模块：define

require.js的使用步骤：

1.在页面上只需引入一个js为require.js,指定一个js文件为主模块(可以省略js后缀)

<script src ="require.js" data-main ="main"></script>

2.加载模块：require([依赖的包的路径],回调函数(形参))

回调函数的代码必须等待依赖的包都加载完毕后，才执行（延迟加载）

回调函数的形参代表每个模块的返回值，各参数的位置与依赖的包的路径的位置相同

路径问题：
若带后缀名js,书写的路径是相对于html页面的。
若不带后缀js，书写的路径是相对于baseurl的.
baseurl就是data-main的路径

依赖的包加载是异步的,即同时执行

/* 项目结构 
	html
		katsuki.html
	js
		base.js
		katsuki.js
		require.js
*/
//katsuki.html
<script src ="require.js" data-main ="../js/base"></script>

//base.js
带js后缀时路径相对于html
require(["../js/katsuki.js"],function(katsuki){
	//打印katsuki.js的返回内容
	console.log(katsuki);
})

不带js后缀时路径相对于引入该js的html的data-main
require(["./katsuki"],function(kasami){
	//打印katsuki.js的返回内容
	console.log(kasami); 
	//调用
	console.log(kasami.katsuki); 
})

//katsuki.js
define(function(){
    return {
		katsuki : function(){
			console.log('katsuki');
		}
	};
})

配置config

baseUrl：指定基础路径
paths 左边是模块名（别名），右边是路径
shim
deps 解决模块之间的依赖问题

/* 项目结构 
	html
		katsuki.html
	js
		base.js
		config.js
		require.js
	lib
		kasami.js 此文件是基于jquery.3.2.1.js编写的
		jquery.3.2.1.js
*/
//katsuki.html
<script src ="require.js" data-main ="../js/base"></script>

//config.js
requirejs.config({
    // baseUrl : "../base", 和data-main相同，可以不写
    paths : {
         "jq" : "../lib/jquery.3.2.1",
         "kasa": "../lib/kasami"
    },
    //当存在js文件是基于其他js文件编写时使用
    shim : {
	    "kasa" : {
	     deps : ["jq"]
	    }
    }
})

//kasami.js
config.js设置了shim的define
define(function(){
	//经过基于jq的代码处理后返回的content
    return content;
})

config.js未设置shim的define
define(["jq"],function(){
	//经过基于jq的代码处理后返回的content
    return content;
}

//base.js
先请求配置模块
require(["./config"],function(){
    require(["jq","kasa"],function(a,b){
    	//a : 若jq中没设置return，获取到的形参为 undefine
    	//b : kasami.js拿到 content
        console.log(a,b);
    })
})

ES6 module

在ES6前， 前端就使用RequireJS或者seaJS实现模块化，ES原生支持模块化

export
格式：export{接口}

export 输出：可输出对象、函数、类、变量
default 匿名输出，导入时可使用任意变量

//lib.js
let myname = katsuki;
export default myname;
//导入
import nickname from './lib';

import
*: 导入所有接口
as: 重命名，避免命名冲突

//lib.js
let katsuki = (data)=>{console.log(data)}
//导出重命名
export katsuki as ka;
//导入重命名
import get as k from './lib';