关于HarmonyOS的学习

day34

一、设计模式

        + 设计模式是一些对解决问题的总结和经验，设计模式是解决某个问题的最佳的方案，无数人优秀人的程序员的实验和错误总结+ 共23种

1.工厂模式

          => 对于批量创建对象的一种解决方案=> 函数可以传递参数=> 本质利于函数的特性，然后在函数内部创建一个对象，每次传递参数，把新的对象以返回值的形式返回

    function person(name, age){let obj = {name, age}obj.say = function(){console.log(this.name + '喜欢演讲！')}return obj}let p1 = person('张', 18)let p2 = person('陈', 18)console.log(p1, p2)
​function Person(name, age){this.name = namethis.age = agethis.say = function(){console.log(this.name + '喜欢演讲！')}}

2.单例模式（一个类一生中只能有一个实例化对象）

    class Person {constructor(){}init(name){this.name = name}// static可以把原型方法变成静态方法static getInstance(name){if(!this.instance){this.instance = new Person(name)}this.instance.init(name)return this.instance}}let p1 = Person.getInstance('张')// let p2 = Person.getInstance('陈')console.log(p1)

    function Person(name){}Person.prototype.init = function(name){this.name = name}// 单例模式核心代码，使用静态方法Person.getInstance = function(name){// instance是绑定给Person构造函数的一个属性，这里取反，说明可以进入判断体里面，因为第一次的时候this.instance没有值的，所以是undefinedif(!this.instance){this.instance = new Person(name)}// 每次返回之前，先调用一次init方法，把参数传递进来this.instance.init(name)// 如果是第二次进来，那么说明有这个实例化对象了，那么直接把实例化对象返回return this.instance}let p1 = Person.getInstance('张')let p2 = Person.getInstance('陈')
​console.log(p1, p2) // true

单例模式弹窗

样式：

    *{margin: 0;padding: 0;}html, body{height: 100%;}button{width: 100px;height: 28px;margin: 10px;}.mask{width: 100%;height: 100%;background-color: rgba(0, 0, 0, .5);position: fixed;top: 0;left: 0;display: none;}.mask .content{width: 500px;height: 300px;background-color: #fff;position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;display: block;}.mask .content span{position: absolute;right: 0;top: 0;width: 15px;height: 15px;background-color: #ccc;color: #fff;text-align: center;line-height: 15px;font-size: 12px;cursor: pointer;}.mask .content p{text-align: center;line-height: 300px;}/* 自定义三个背景颜色 */.sy1{background-color: hotpink !important;}.sy2{background-color: orange !important;}.sy3{background-color: greenyellow !important;}    <button>弹窗1</button><button>弹窗2</button><button>弹窗3</button><div class="mask"><div class="content"><span>&times;</span><p></p></div></div>

    let aBtn = document.querySelectorAll('button')class Layer {constructor(){}init(text, sy){this.mask = document.querySelector('.mask')this.content = document.querySelector('.content')this.p = document.querySelector('p')this.span = document.querySelector('span')this.content.classList.add(sy)this.p.innerHTML = textthis.show()this.hide(sy)}show(){this.mask.style.display = 'block'}hide(sy){this.span.onclick = ()=>{this.mask.style.display = 'none'this.content.classList.remove(sy)}}static getInstance(text, sy){if(!this.instance){this.instance = new Layer(text, sy)}this.instance.init(text, sy)return new Layer(text, sy)}}aBtn[0].onclick = ()=>{Layer.getInstance('张特别喜欢这个弹窗', 'sy1')}aBtn[1].onclick = ()=>{Layer.getInstance('陈说嘿嘿', 'sy2')}aBtn[2].onclick = ()=>{Layer.getInstance('王喜欢美女', 'sy3')}

3.发布订阅模式（一种对象间一对多的依赖关系，当一个对象的状态发送改变时，所有依赖于它的对象都将得到状态改变的通知）

    // 例如：报名千锋的课程// Lsson就是一个调度中心，所谓的调度中心其实就是平台class Lesson {constructor(){// 数据结构设计，对象加数组格式this.message = {}console.log(this.message)}add(type, fn){// 判断下对象里面是否存在某个类型的课程// this.message['HarmonyOS']第一次进来没有这个课程，值是undefined，取反就进入判断体里面if(!this.message[type]){// 可以把这个属性添加进对象，并赋值为数组this.message[type] = []}this.message[type].push(fn)}cancel(type, fn){// 判断下有没有这个课程，如果没有就终止函数执行if(!this.message[type]) return// 可以使用过滤//                                                    zt != zt false//                                                    wwn != zt true              this.message[type] = this.message[type].filter(item=> item != fn)}emit(type, info){// 判断下有没有这个课程，如果没有就终止函数执行if(!this.message[type]) return// 如果有这个课程就通知this.message[type].forEach(item=>{item(info)})}}   let qf = new Lesson()
​function zt(info){console.log('张报名了HarmonyOS课程，' + info)}function wwn(info){console.log('王报名了HarmonyOS课程，' + info)}function ty(info){console.log('陶报名了HarmonyOS课程，' + info)}function cjh(info){console.log('陈报名了JavaEE课程，'+ info)}function lsj(info){console.log('李报名了JavaEE课程，'+ info)}// 参数1表示的是课程名称，课程类型qf.add('HarmonyOS', zt)qf.add('HarmonyOS', wwn)qf.add('HarmonyOS', ty)qf.add('JavaEE', cjh)qf.add('JavaEE', lsj)
​// 可以报名课程，也可以取消课程// 参数1表示取消课程的类型// 参数2表示谁取消课程// qf.cancel('HarmonyOS', zt)
​// 发布开课信息// 参数1表示开课的类型// 参数2表示课程相关的信息qf.emit('JavaEE', '11月11号开课了，请到肖家河大厦三楼前台报道')let btn = document.querySelector('button')

4.策略模式（定义一系列的算法，将他们一个个封装起来，使他们直接可以相互替换。）

例：需要实现一个计算员工奖金的程序，效绩为 S 则发基本工资的4倍，A 则3倍，以此类推

    // 策略模式let obj = {"S": function(price){return price * 4},"A": function(price){return price * 3},"B": function(price){return price * 2}}function calc(leval, price){return obj[leval](price)}// 通过函数的静态方法，新增一个等级calc.add = function(leval){obj[leval] = function(price){return price * 1.5}}calc.add('C')// 新增一个删除等级方法calc.del = function(leval){delete obj[leval]}calc.del('S')console.log(obj)

二、ajax（用于前后端数据交互）

        + 是用来和后端交互数据的一种技术，你可以通过ajax给后端传递数据，也可以接收后端传递过来的数据+ ajax不是一个新的技术，实际上是几个技术的组合=> xml 数据交互格式 --- json=> http 协议=> request 请求+ 注意点=> 发送请求，必须在服务器的环境下+ 接收服务器返回的请求信息=> xhr.responseText=> 接收返回的字符串和json数据=> xhr.responseXML=> 接收返回的xml格式的数据=> xhr.response=> 接收xml、字符串、json数据xhr.readyState+ 返回当前请求的状态+ 通过这个属性查看ajax请求进行到哪一个步骤了=> 0时-未初始化, 对象已建立, 尚未调用open()=> 1时-初始化, 对象建立未调用send()=> 2时-发送数据, send()方法调用, 但是当前的状态及http头未知, 请求未完成=> 3时-数据传输中,接受部分数据（如果数据量比较小的时候的，3的时候其实就可以接收完成，如果数据量比较大的时候，3表示只能接收部分数据接收不完整）=> 4时-响应内容解析完成

    // 实例化ajax对象let xhr = new XMLHttpRequest()// console.log(xhr.readyState) // 0时-未初始化, 对象已建立, 尚未调用open()/*配置信息+ 你要给那个服务器发送请求，告诉ajax，你的请求方式是什么，告诉ajax，你发送的请求是同步的还是异步的，告诉ajax+ 参数1表示请求类型+ 参数2表示的是请求地址（api）+ 参数3表示的是同步还是异步，默认就是异步的基准地址+ http://localhost:8888+ 根地址 --- /*/ // xhr.open('get', 'http://localhost:8888/test/first')xhr.open('get', 'http://localhost:8888/test/second')// console.log(xhr.readyState) // 1时-初始化, 对象建立未调用send()// 监听请求状态xhr.onreadystatechange = ()=>{// 2时-发送数据, send()方法调用, 但是当前的状态及http头未知, 请求未完成// 3时-数据传输中, 接受部分数据// 4时-响应内容解析完成// console.log(xhr.readyState) // console.log(xhr.responseText)if(xhr.readyState === 4){if(xhr.status === 200){// console.log(xhr.responseText)console.log(JSON.parse(xhr.responseText))}else{console.log('请求失败')}}// if(xhr.readyState === 4 && xhr.status === 200){//     console.log(xhr.responseText)// }else{//     console.log('请求失败')// }}// 发送请求xhr.send()

三、两个请求（get=>Query String Parameters post =>Form Datas）

1.get请求

    let btn = document.querySelector('button')btn.onclick = ()=>{// 创建ajax对象let xhr = new XMLHttpRequest()// 填写配置信息// get请求传递参数，使用查询字符串格式// 注意点：get请求会存在缓存问题，一般会返回304http状态码。拼接时间戳的目的是让地址每次变化不一样，解决缓存问题xhr.open('get', `http://localhost:8888/test/third?name=张&age=18&time=${Date.now()}`)// 监听请求状态xhr.onreadystatechange = ()=>{if(xhr.readyState === 4){if(xhr.status === 200){console.log(JSON.parse(xhr.responseText))}else{console.log('请求失败')}}}// 发送请求xhr.send()}

2.post请求

    let btn = document.querySelector('button')btn.onclick = ()=>{// 创建ajax对象let xhr = new XMLHttpRequest()// 填写配置信息// get请求传递参数，使用查询字符串格式xhr.open('post', 'http://localhost:8888/test/fourth')// 携带请求头信息，这个是post请求规定的，因为post安全性比较高的// application/x-www-form-urlencoded表示以form表单的数据格式来给后端传递数据xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')// 监听请求状态xhr.onreadystatechange = ()=>{if(xhr.readyState === 4){if(xhr.status === 200){console.log(JSON.parse(xhr.responseText))}else{console.log('请求失败')}}}// 发送请求// post传递参数不能使用查询字符串，必须在send()方法里面传递xhr.send('name=张&age=18')}

3.get请求封装

        + 参数=> @parmas { string } url 表示要请求的地址（api接口地址）=> @parmas { object } parmas 表示请求的参数=> @parmas { function } success 表示成功时的回调函数=> @parmas { function } error 表示失败时的回调函数

    function ajax_get(url, parmas, success, error){let xhr = new XMLHttpRequest()// 判断是否存在请求参数if(parmas){// 能进来说明存在参数// 把对象转成查询字符串let str = '?'for(let key in parmas){//  str +=name='张' str += `${key}=${parmas[key]}`str += '&'}str = str.slice(0, -1)xhr.open('get', url+str)}else{// 这里说明没有参数xhr.open('get', url)}xhr.onreadystatechange = ()=>{if(xhr.readyState === 4){if(xhr.status === 200){success && success(xhr.responseText)}else{error && error()}}}xhr.send()}ajax_get('http://localhost:8888/test/third', {name: '张', age: 18}, function(result){console.log(JSON.parse(result))}, function(){console.log('请求失败')})

4.get请求封装优化

    function ajax_get(options){let xhr = new XMLHttpRequest()// 判断是否存在请求参数if(options.params){// 能进来说明存在参数// 把对象转成查询字符串let str = '?'for(let key in options.params){//  str +=name='张' str += `${key}=${options.params[key]}`str += '&'}str = str.slice(0, -1)xhr.open('get', options.url+str)}else{// 这里说明没有参数xhr.open('get', options.url)}xhr.onreadystatechange = ()=>{if(xhr.readyState === 4){if(xhr.status === 200){options.success && options.success(xhr.responseText)}else{options.error && options.error()}}}xhr.send()}// ajax_get('http://localhost:8888/test/third', {name: '张', age: 18}, function(result){//     console.log(JSON.parse(result))// }, function(){//     console.log('请求失败')// })
​ajax_get({url: 'http://localhost:8888/test/third',params: {name: '张', age: 18},success(result){console.log(JSON.parse(result))},error(){console.log('请求失败')}})

5.post请求封装

    function ajax_post(options){let xhr = new XMLHttpRequest()xhr.open('post', options.url)xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')xhr.onreadystatechange = ()=>{if(xhr.readyState === 4){if(xhr.status === 200){options.success && options.success(xhr.responseText)}else{options.error && options.error()}}}if(options.params){// 把对象转成查询字符串let str = ''for(let key in options.params){//  str +=name='张' str += `${key}=${options.params[key]}`str += '&'}str = str.slice(0, -1)xhr.send(str)}else{xhr.send()}}ajax_post({url: 'http://localhost:8888/test/fourth',params: {name: '张', age: 18},success(result){console.log(JSON.parse(result))},error(){console.log('请求失败')}})

6.函数参数对象化（使用的过程中需要注意参数的顺序问题，如果参数比较多的情况下，很容易混淆参数表示意义）

    function fn(options){options.arr.push('hello')console.log(options.num + 666)
​console.log(options)}fn({num: 10,arr: [10, 20, 30],})