JS基础23

2022年05月11日 阅读数:5
这篇文章主要向大家介绍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
  1. 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
  1. 示例
  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())
            }
        }
  1. 实例代码
 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

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

AMD规范

概念:浏览器应用的规范javascript

CMD规范

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

ES6模块化

  1. 设计理念:尽可能静态化,在编译时就能肯定模块相互依赖的关系
  2. 模块暴露
const num1=1
const add=function(a,b){
   
   
    return a+b
}
export {
   
   num1,add}
  1. 引入
<script type="module">
   import {
   
   num1,add} from './test2'
   console.log(add(num1+10));
</script>