ES6新增特性
基本数据类型Symbol,用来表示唯一值，用来防止对象属性重名
let value1=Symbol('foo')
console.log(typeof value1);
//结果symbol
let value2=Symbol('foo')
console.log(value1===value2);
//false
复杂数据类型
- Map与简单对象集合很相似
- 里面传入数据类型为const m=new Map([[true,1],[function(){},{}]])
- m.size获取m里面数据个数
- m.delete()用来删除某个数据
- m.set()用来添加数据
- m.get()用来获取某个数据
- m.clear()用来清除全部数据
- m.has()用来判断是否有某个数据
const m=new Map([[true,1],[function(){
console.log(1);},{
}]])
console.log(m.get(true));
//1
console.log(m.has(true));
//true
m.set({
name:'jack'},1)
console.log(m.size);
//3
m.clear()
console.log(m.size);
//0
- Set与数组集合很相似，但他不允许出现相同的值
- 语法：const s=new Set([1,2,3,function(){},true])
- s.size获取s里面数据个数
- s.add()用来添加数据
- s.delete()用来删除某个数据
- s.clear()用来删除数组
- s.forEach()用来遍历数组
- 也可以用…展开运算符
const s=new Set([1,2,3,function(){
},true])
console.log(s.size);
//5
s.add(10)
console.log(s.size);
//6
s.forEach(item=>console.log(item))
//1
//2
//3
//f(){}
//true
//10
let a=[...s]
console.log(a);
//[1,2,3,f(){},true,10]
s.clear()
console.log(s.size);
//0
设计模式
- 概念：设计模式代表了最佳实践，是面向对象编程人员总结出来的
- 分类
- 创建型模式：创建对象同时隐藏创建逻辑的方式
- 结构型模式：关注类和对象，继承的概念被用来组合接口和定义组合对象获得新功能的方式
- 行为型模式：该设计模式更关注对象之间的通信
单例模式
- 该模式属于创建型模式，提供了创建对象的最佳方式
- 该模式能保证整个应用只有一个对象的存在
- 核心代码
function Person(){
}
//定义一个空值
let instance=null
function signPerson(){
if(instance==null){
//在它为空时给他赋一个值，不为空就返回instance
instance=new Person()
}
return instance
}
const p1=signPerson()
const p2=signPerson()
console.log(p1===p2);
//true
- 示例
class CreatDiv{
//static静态方法，该方法不会被实例继承，可以直接通过类调用
static getInstance(){
if(this.instance==null){
this.instance=new CreatDiv()
}
return this.instance
}
constructor(){
this.instance=null
this.divEle=document.createElement('div')
document.body.appendChild(this.divEle)
}
init(text){
this.divEle.innerHTML=text
}
}
let div1=CreatDiv.getInstance()
div1.init('第一条测试信息')
//页面显示第一条测试信息
let div2=CreatDiv.getInstance()
div2.init('第二条测试信息')
//会覆盖第一条，页面显示第二条测试信息
组合模式
- 组合模式就是把几个构造函数组合在一起，然后通过接口统一启动
- 核心代码
class Compose{
//定义一个空数组用于装所有执行的函数
constructor(){
this.compose=[]
}
//向数组里添加要执行函数
add(task){
this.compose.push(task)
}
//一个执行任务的方法
execute(){
this.compose.forEach(item=>item.init())
}
}
- 实例代码
class Compose{
//定义一个空数组用于装所有执行的函数
constructor(){
this.compose=[]
}
//向数组里添加要执行函数
add(task){
this.compose.push(task)
}
//一个执行任务的方法
execute(){
this.compose.forEach(item=>item.init())
}
}
class GetSay{
init(){
console.log('说话');
}
}
class GetEat{
init(){
console.log('吃饭');
}
}
const c=new Compose()
c.add(new GetSay())
c.add(new GetEat())
c.execute()
//说话
//吃饭
观察者模式
- 当一个对象被改变时，所有依赖它的对象都将被改变，就不用直接去改变对象
- 代码
class Subject{
constructor(name){
this.name=name
this.list=[]
}
//添加
add(observer){
this.list.push(observer)
}
//更新
updateMessage(message){
this.list.forEach(item=>item.nodify(this.name+message))
}
}
class Observer{
constructor(name){
this.name=name
}
nodify(message){
console.log(this.name+'接受到'+message);
}
}
const p1=new Observer('zs')
const p2=new Observer('ls')
const p=new Subject('主体')
p.add(p1)
p.add(p2)
p.updateMessage('这是更新信息')
模块化编程
模块化理解
- 概念：将一个程序依据一定规则封装成几个块
- 模块中的数据是私有的，互不影响
- 模块中数据通过export 暴露对象 暴露出去
- 需要的模块通过import formter from ‘文件路径’
模块化规范
CommonJS规范
- CommonJS规范，Node由应用模块组成，采用CommonJS规范，每个文件就是一个模块，在服务器端，模块的加载是同步加载的，在浏览器端，模块需要提前编译打包
- 所有模块不会污染全局作用域，模块可以多次加载，但在第一次加载后就缓存了
- 模块暴露
//add.js文件中有以下代码
var x=10;
var add=function(value){
return value+x
}
module.exports=x;
module.exports=add
- 引入模块
const example=require('add.js')
console.log(example.x)
//10
console.log(example.add(1))
//11
AMD规范
概念：浏览器应用的规范
CMD规范
- 它整合了CommonJS和AMD规范的一些特点
- define(factory);一个模块就是一个文件
ES6模块化
- 设计理念：尽量静态化，在编译时就能确定模块相互依赖的关系
- 模块暴露
const num1=1
const add=function(a,b){
return a+b
}
export {
num1,add}
- 引入
<script type="module">
import {
num1,add} from './test2'
console.log(add(num1+10));
</script>