闭包模块化
- 模块化的基本实现
- 闭包的自调用函数
// 闭包实例
var fn = function(){
var a = 10;
return {
init(){
a++;
console.log(a);
}
}
}
var f1 = new fn();
var f2 = new fn();
f1.init();
f1.init();
f2.init();
// 闭包应用
var KTV=(function(){
return {
pay(){
},
total(){
}
}
})()
AMD模块化
- 概念
- AMD：async module define：异步模块定义
- AMD其实就是requireJS实现的模块化解决方案
requireJS
-
中文网
http://www.requirejs.cn/docs/api.html#jsfiles
-
基本使用
- 文件夹目录
- index.html
- main.js
- js
- 02.js
- 03.js
- 04.js
- lib
- jquery-3.3.1.js
- require.js
- 文件夹目录
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script data-main='main' src='./js/lib/require.js'></script>
</head>
<body>
<button id="user">点我</button>
<button id="begin">初始化</button>
</body>
</html>
// main.js
require.config({
// baseUrl 配置模块基础路径
baseUrl: './js',
// paths 常用来配置一些常用的文件，文件夹路径
paths: {
jquery: 'lib/jquery-3.3.1'
}
})
require(['jquery', '03', '02', '04'], function($, three, two, four){
$('body').append('<div>逻辑思维</div>');
var btnUser = document.querySelector('#user');
var btnBegin = document.querySelector("#begin");
btnUser.onclick = function(){
three();
two();
}
btnBegin.onclick = function(){
four.init();
four.begin();
}
})
// 02.js
define([], function(){
return function(){
console.log('我是老二');
}
})
// 03.js
define(['02'], function(two) {
return function(){
console.log('我是老三');
two();
}
});
// 04.js
define([], function(){
return {
init(){
console.log('老四，初始化');
},
begin(){
console.log('老四，开工了')
}
}
})
- 若是组件函数没有返回值
- 形参中 a,,c
- 形参中 b=''
案例——模块依赖子模块
//productAdd.js
define([],function(){
return {
init(){
console.log("添加商品");
}
}
})
//productEdit.js
define([],function(){
return {
init(){
console.log("编辑商品");
}
}
})
//product.js
define(["productAdd","productEdit"],function(productAdd,productEdit){
return {
init(){
console.log("商品列表");
},
add(){
productAdd.init();
},
edit(){
productEdit.init();
}
}
})
//首页：
require(["product"],function(product){
product.init();
product.add();
product.edit();
})
检测第三方库是否支持AMD规范
- 搜索源码
if ( typeof define === "function" && define.amd ) {
define([], function() {
return jQuery;
} );
}
常用的模块、文件夹路径的配置
- 一般用于配置第三方模块，比如jquery、bootstrap、zepto等等
require.config(
paths:{
jquery:"js/lib/jquery-1.11.min",
zepto:"js/lib/zepto.min",
bootstrap:"assets/bootstrap/js/bootstrap.min"
}
)
define(["jquery","zepto"],function($,$$){
})
require(["jquery","bootstrap"],function($){
})
- 目录结构
- dist 编译存放目录
- src 业务存放目录
- css
- imgs
- assets
- bootstrap
- js
- lib
- require.js
- jquery.js
- lib
- index.html
- app.js
requirejs解决循环依赖
-
场景描述
- index.js 已经依赖了组件 add.js
- 但是 add.js 也需要依赖 index.js 时
- 发生循环依赖
- 此时，不要通过回调函数的形参获取返回值
-
解决方案
- 在组件 add.js 中，需要执行组件 index.js 时
- 以 require()的方式解决
require('index')()
define(['jquery', 'service/salemanService', 'require', 'saleman/index'], function($, salemanService, require) {
return function(){
var addStr = `
<form>
<label>姓名：</label><input type='text' name='name'>
<label>年龄：</label><input type='number' name='age'>
<button type='submit'>提交</button>
</form>
`;
var $add = $(addStr)
$add.on('submit', function(e){
e.preventDefault();
// 数据获取
var name = $(this).find('input[name=name]').val();
var age = $(this).find('input[name=age]').val();
// 调用数据页面的方法，将数据传入
salemanService.addList(name, age);
// 页面刷新
// $(".aside .aside-item:eq(0)").trigger("click");
// 循环调用，页面刷新
require('saleman/index')();
});
$('#main .content').html($add);
}
});
AMD插件
- 插件网址
https://github.com/requirejs/requirejs/wiki/Plugins
路由
前端路由的意义
-
通过路由将各个功能从url上面就分辨出来了
- /user/list
- /user/3
- /user/edit/3
-
路由还可以进行前进、后退等导航操作
前端路由的实现方式
-
监听window对象的hashchange事件
- hash值：通过localtion.hash获取，获取的值以"#"开头
- 也可以通过localtion.hash来设置hash值，当然设置的新hash也应该以"#"开头
-
history对象：popState/pushState
ES6模块化
- 浏览器调试
<script type="module">
//导入模块
</script>
- 基本用法
//cart.js
export default {
name:"张三",
age:18
}
//index.js
import cart from "cart.js"
cart.name
cart.age
- 导出模块
//cart.js
export const age = 18;
export function f1(){
console.log("f1函数");
}
export default {
init(){
console.log("初始化");
}
}
//index.js
import cart,{ age,f1 } from "cart.js"
cart.init();
age,
f1();
- 导入模块
//index.js
import cart as cartIndex from "cart.js"
import { age as AGE } from "product.js"
//使用变量：cartIndex
//使用变量：AGE