JS基础23

ES6新增特性

基本数据类型Symbol,用来表示唯一值，用来防止对象属性重名

 		let value1=Symbol('foo')
        console.log(typeof value1);
        //结果symbol
        let value2=Symbol('foo')
        console.log(value1===value2);
        //false

复杂数据类型

1. 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

2. 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

设计模式

1. 概念：设计模式代表了最佳实践，是面向对象编程人员总结出来的
2. 分类

• 创建型模式：创建对象同时隐藏创建逻辑的方式
• 结构型模式：关注类和对象，继承的概念被用来组合接口和定义组合对象获得新功能的方式
• 行为型模式：该设计模式更关注对象之间的通信

单例模式

1. 该模式属于创建型模式，提供了创建对象的最佳方式
2. 该模式能保证整个应用只有一个对象的存在
3. 核心代码

	  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

4. 示例

  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('第二条测试信息')
        //会覆盖第一条，页面显示第二条测试信息

组合模式

1. 组合模式就是把几个构造函数组合在一起，然后通过接口统一启动
2. 核心代码

class Compose{
            //定义一个空数组用于装所有执行的函数
            constructor(){
                this.compose=[]
            }
            //向数组里添加要执行函数
            add(task){
                this.compose.push(task)
            }
            //一个执行任务的方法
            execute(){
                this.compose.forEach(item=>item.init())
            }
        }

3. 实例代码

 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()
        //说话
        //吃饭

观察者模式

1. 当一个对象被改变时，所有依赖它的对象都将被改变，就不用直接去改变对象
2. 代码

 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('这是更新信息')

模块化编程

模块化理解

1. 概念：将一个程序依据一定规则封装成几个块
2. 模块中的数据是私有的，互不影响
3. 模块中数据通过export 暴露对象 暴露出去
4. 需要的模块通过import formter from ‘文件路径’

模块化规范

CommonJS规范

1. CommonJS规范，Node由应用模块组成，采用CommonJS规范，每个文件就是一个模块，在服务器端，模块的加载是同步加载的，在浏览器端，模块需要提前编译打包
2. 所有模块不会污染全局作用域，模块可以多次加载，但在第一次加载后就缓存了
3. 模块暴露

//add.js文件中有以下代码
var x=10;
var add=function(value){
	return value+x
}
module.exports=x;
module.exports=add

4. 引入模块

const example=require('add.js')
console.log(example.x)
//10
console.log(example.add(1))
//11

AMD规范

概念：浏览器应用的规范

CMD规范

1. 它整合了CommonJS和AMD规范的一些特点
2. define(factory);一个模块就是一个文件

ES6模块化

1. 设计理念：尽量静态化，在编译时就能确定模块相互依赖的关系
2. 模块暴露

const num1=1
const add=function(a,b){
    return a+b
}
export {num1,add}

3. 引入

<script type="module">
   import {num1,add} from './test2'
   console.log(add(num1+10));
</script>