1.复习
模块化
一、模块化开发
1.1 模块覆盖
如果一个模块文件中存在两个没有id的模块，前面的模块覆盖后面的模块
如果一个模块文件中存在两个不同id的模块，可以兼容，要通过require方法分别引入。
如果一个模块文件中存在两个相同id的模块，前面的模块覆盖后面的模块
// commonjs是无法引入具有id的模块
// define(function(require) {
// // 引入其它模块
// var dom = require('./dom');
// console.log(dom);
// })
// 通过module transports规范
// 第一步要在模块依赖集合中加载模块文件
define(['require', './dom'], function(require) {
// 引入其它模块
// 第二步要通过require方法，引入指定id对应的模块(这里的require是异步方法)
require(['myId', 'myId2'], function(dom, dom2) {
console.log(dom, dom2);
});
})
// 总结:
// 如果一个模块文件中存在两个没有id的模块，前面的模块覆盖后面的模块
// 如果一个模块文件中存在两个不同id的模块，可以兼容，要通过require方法分别引入。
// 如果一`个模块文件中存在两个相同id的模块，前面的模块覆盖后面的模块
1.2 接口定义
基于commonjs规范定义的接口，
? module.exports.接口
? 简写 exports.接口
? module.exports = 值类型
? module.exports = 对象
? module.exports = 函数
? 注意：当this指向exports的时候，还可以通过this暴露接口
基于module transports规范，由于它们不依赖于require, exports, module，开发起来更灵活
? return 值类型
? return 对象
return 函数
? 注意：当this指向exports的时候，还可以通过this暴露接口
// 定义模块 通过commonjs规范
// define(function(require, exports, module) {
// console.log(this, arguments);
// module.exports.接口
// module.exports.msg = 'hello';
// 简写 exports.接口
// exports.title = 'nihao';
// 这种方式是不允许的:
// exports = {
// a: 1,
// b: 2
// }
// module.exports = 值类型
// 使用等号会丢弃之前的数据
// module.exports = 100;
// module.exports = 对象
// module.exports = {
// msg: 'message'
// }
// module.exports = 函数
// module.exports = function() { console.log('fn') }
// 注意：当this指向exports的时候，还可以通过this暴露接口
// this.msg = 'hello';
// })
// 基于module transports规范
// define(['exports'], function() {
// // return 值类型
// // return 100;
// // return 对象
// // return { msg: 'hello' }
// // return 函数
// // return function() { console.log('fun') }
// // 注意：当this指向exports的时候，还可以通过this暴露接口
// // console.log(this);
// // this.msg = 'hello world';
// })
// 还有一些方式 是即定义又暴露
// define(100);
// define({
// a: 1
// });
1.3 模块信息对象
exports: 定义向外暴露的接口对象
id: 模块的id， 默认与uri不相同
uri: 模块的文件路径，相对于html引入的
如果没有data-main属性，会在路径的前面加上一个./
1.4 配置
requirejs也提供了config方法用于设置配置信息
? paths：用于简化文件的路径。值是一个对象
? key: 新的文件路径，
? value: 原始路径
? shim：用于将文件转为模块。
? key：模块的文件路径，
? value：是一个对象
? exports: 用于定义暴露接口的对象
? deps: 定义依赖集合
? map：配置模块的。
? key模块的文件路径，
? value：是一个对象
key: 引入的文件
? value: 修改的文件
? baseUrl：设置根目录，
? 优先级：baseUrl > data-main > html
// 配置
require.config({
// map：配置模块的。
map: {
// key模块的文件夹路径
// value：是一个对象
'modules/header': {
// key: 引入的文件
// value: 原始文件路径
'jquery': '../lib/jquery50'
},
// 配置footer
'modules/footer': {
'jquery': '../lib/jquery100'
}
},
// shim 将文件转为模块
shim: {
'../lib/jquery50': {
// 定义向外暴露的接口
exports: '$',
},
'../lib/jquery100': {
exports: '$'
}
}
})
// 加载dom
requirejs(['./modules/header/header', './modules/footer/footer']);
1.5 CSS 插件
在require中不能直接引入css文件要作为模块来引入
要进行配置
require.config({
? map: {
? ‘ *’: {
? css: 插件路径
? }
? }
})
在引入css文件模块的时候，要加上css!前缀
// 配置
requirejs.config({
// 配置css
map: {
'*': {
// value 表示插件的地址
// 这里的配置不需要 ./ ../操作 并且.js后缀不能省略
css: 'lib/css.js'
}
}
})
// 加载demo.js文件
requirejs(['./demo']);
二、HTML5
2.1 本地存储
HTML5是html的第五个版本，里面规定了一些废弃标签，同时新增了一些标签，和一些功能
存储：前端仓库的意思
? 每一个网站分配一个“仓库”，只要浏览器不卸载，电脑不崩溃，它将一直存在（生命周期永久）
本地存储对象：localStorage，里面是没有任何数据， 既然是一个对象
? 我们可以使用对象的点语法，去添加数据
? 注意：在存储之前先转为字符串，在读取的时候再转为原类型（JSON.stringify）
本地存储也提供了相应的API，所以建议我们使用原型中的方法
? 存储数据：localStorage.setItem(key, value)
? key： 表示要存储的数据名称， 是一个字符串
? value: 要存储的数据 （默认转为字符串）
? 读取数据：localStorage.getItem(key)
? key: 要读取的数据名称
? 删除某一项数据：localStorage.removeItem(key)
? key: 要删除的数据名称
? 删除全部数据：localStorage.clear()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 由于是一个对象 所以可以使用点语法添加数据
// localStorage.msg = 'hello msg';
// 还可以通过中括号语法添加数据
// localStorage['title'] = 'nihao';
// 会将所有的数据都先转为字符串
// localStorage.obj = { a: 1, b: 2 };
// 定义对象
// var obj = { a: 1, b: 2 };
// 定义数组
// var arr = ['a', 'b', 'c'];
// 对象中的toString方法可以实现将对象转为字符串 还可以判断数据的类型 [object Object]
// console.log(obj.toString());
// console.log(arr.toString());
// 由于对象中的toString可以判断出来数据的类型 所以我们希望让arr使用
// console.log(Object.prototype.toString.call(arr)); // [object Array]
// 存储数组
// localStorage.arr = arr;
// 希望存储的数据 可以是对象 可以是数组（原类型）
// 解决方案：在存储之前先转为字符串，在读取的时候再转为原类型（JSON.stringify）
// 定义对象
// var obj = { a: 1, b: 2 };
// JSON.stringify是用于将对象转为字符串
// localStorage.obj = JSON.stringify(obj);
// JSON.parse用于将字符串转为对象的
// 读取数据
// console.log(JSON.parse(localStorage.obj).a);
// 定义数组
// var arr = ['a', 'b', 'c'];
// 存储数组也是要先转为字符串
// localStorage.arr = JSON.stringify(arr);
// 读取时候转为原类型
// console.log(JSON.parse(localStorage.arr));
// 定义函数
// function demo() {
// console.log('demo success');
// }
// 存储函数转为字符串
// 存储之后是一个undefined 原因就是json数据不能处理fn
// localStorage.fn = JSON.stringify(demo);
// 对于函数来说 直接存储
// localStorage.fn = demo;
// 有两种方式可以执行fn
// 1 eval函数
// 2 Function内置构造函数
// eval函数可以实现将字符串当作代码执行 (之后会作为全局变量存在)
// eval(localStorage.fn);
// 2 Function
// var fn = new Function('return ' + localStorage.fn)();
// 本地存储也提供了相应的API，所以建议我们使用原型中的方法
// 存储数据：localStorage.setItem(key, value)
// key： 表示要存储的数据名称， 是一个字符串
// value: 要存储的数据 （默认转为字符串）
// localStorage.setItem('msg', 'hello');
// 读取数据：localStorage.getItem(key)
// key: 要读取的数据名称
// console.log(localStorage.getItem('msg'));
// 删除某一项数据：localStorage.removeItem(key)
// key: 要删除的数据名称
// 删除全部数据：localStorage.clear()
// localStorage.clear();
// 打印本地存储对象
console.log(localStorage);
</script>
</body>
</html>
2.2 会话存储
除了本地存储之外还有一个存储对象叫做: sessionStorage
? 它与本地存储之间的区别就是生命周期的区别
? 本地存储的生命周期是永久的。
? 会话存储的生命周期是从页面打开到页面关闭。
? 与全局变量的区别是
? 会话存储可以刷新页面
? 全局变量不能刷新页面
? 生命周期长度：本地存储 > 会话存储 > 全局变量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 添加数据
// sessionStorage.setItem('session_msg', 'hello msg');
// sessionStorage.setItem('num', 100);
// 打印会话存储对象
// console.log(sessionStorage);
// 定义全局变量
// var num = 10;
// 生命周期长度：本地存储 > 会话存储 > 全局变量
</script>
</body>
</html>
2.3 webSQl
WebSql是前端数据库
openDatabase该方法用于打开或者是创建数据库
使用方式：openDatabase(dbname, version, descript, size)
? dbname: 数据库名称
? version: 版本号
? descript: 描述
? size: 大小
例如：var db = openDatabase(‘student’, 1, ‘这是一个数据库’, 1024 * 1024);
transaction：操作数据库
通过数据库对象可以调用原型中transaction，并且接受一个参数是回调函数，
? 函数中有一个参数：SQLTransaction
? 可以通过参数调用参数对象的原型方法：executeSql执行sql语句
? 使用方式：ta.executeSql(sql, [], successCallBack, failedCallBack)
? sql: 执行sql语句
? []: 替代数组
? successCallBack： 成功时候执行的回调函数
? failedCallBack: 失败时候执行的回调函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 创建或者是打开数据库
var db = window.openDatabase('class_46', 1.0, '这是46期的数据库', 1024 * 1024);
// 此时调用原型中的transaction方法 用于操作数据库
// db.transaction(function(ta) {
// // 调用ta原型中的executeSql执行sql语句
// ta.executeSql('create table list (name varchat(10), age int(10))', [],
// function() {
// console.log('success');
// },
// function() {
// console.log('fail');
// })
// })
// 提交数据
// db.transaction(function(ta) {
// // 调用ta原型中的executeSql执行sql语句
// ta.executeSql('insert into list values("小明", 12)', [],
// function() {
// console.log('success');
// },
// function() {
// console.log('fail');
// })
// })
// 查询数据
db.transaction(function(ta) {
// 调用ta原型中的executeSql执行sql语句
ta.executeSql('select * from list', [],
function(ta, result) {
console.log('success', arguments);
for (var i = 0; i < result.rows.length; i++) {
console.log('姓名是:', result.rows[i].name);
console.log('年龄是:', result.rows[i].age);
}
},
function() {
console.log('fail');
})
})
</script>
</body>
</html>
二、HTML5
1.1 历史记录
history.forward
? 该方法用于加载历史记录列表中的下一个URL（显示下一个页面）
调用该方法等价于点击了前进按钮或者是调用了history.go(1)
history.back
? 该方法用于加载历史记录列表中的上一个URL（显示上一个页面）
? 调用该方法等价于点击了后进按钮或者是调用了history.go(-1)
pushState：该方法用于向历史记录中添加新的历史记录。（注：状态改变不需要刷新页面）
? 使用方式：history.pushState(obj, title, url)
? obj: 添加的数据 是一个对象
? title: 新的网页标题 一般省略
? url: 新的网页的url
replaceState：该方法用于替换当前的历史记录
? 使用方式：history.pushState(obj, title, url)
? obj: 添加的数据 是一个对象
? title: 新的网页标题 一般省略
? url: 新的网页的url
window.onpopstate事件：该事件可以监听replaceState方法的执行以及页面的切换。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href="./thrid.html">thrid.html</a>
<button>后退</button>
<button>添加第一个状态</button>
<button>添加第二个状态</button>
<button>添加第三个状态</button>
<button>替换当前状态</button>
<script>
// 获取所有的按钮
var btn = document.getElementsByTagName('button');
// 后退
btn[0].onclick = function() {
// 返回上一个页面
history.go(-1);
}
// 添加第一个状态
btn[1].onclick = function() {
history.pushState({ page: 1 }, null, '#page-1');
}
// 添加第二个状态
btn[2].onclick = function() {
history.pushState({ page: 2 }, null, '#page-2');
}
// 添加第三个状态
btn[3].onclick = function() {
history.pushState({ page: 3 }, null, '#page-3');
}
// 替换当前状态
btn[4].onclick = function() {
history.replaceState({ page: 4 }, null, '#page-4');
}
// 在history对象中 有一个length属性 记录的是历史列表记录的总长度 当历史记录发生变化该长度都可以追踪到
// 监听历史记录变化
// window.onpopstate事件：该事件可以监听replaceState方法的执行以及页面的切换
window.onpopstate = function(e) {
// console.log(111, arguments);
// 具体的数据 在e.state中
console.log('传递过来的数据:', e.state);
}
</script>
</body>
</html>