关于HarmonyOS的学习

day34

一、设计模式

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

复制代码

1.工厂模式

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

复制代码

1.    function person(name, age){
2.        let obj = {
3.            name,
4.            age
5.        }
6.        obj.say = function(){
7.            console.log(this.name + '喜欢演讲！')
8.        }
9.        return obj
10.    }
11.    let p1 = person('张', 18)
12.    let p2 = person('陈', 18)
13.    console.log(p1, p2)
14. ​
15.    function Person(name, age){
16.        this.name = name
17.        this.age = age
18.        this.say = function(){
19.            console.log(this.name + '喜欢演讲！')
20.        }
21.    }

复制代码

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

1.    class Person {
2.        constructor(){}
3.        init(name){
4.            this.name = name
5.        }
6.        // static可以把原型方法变成静态方法
7.        static getInstance(name){
8.            if(!this.instance){
9.                this.instance = new Person(name)
10.            }
11.            this.instance.init(name)
12.            return this.instance
13.        }
14.    }
15.    let p1 = Person.getInstance('张')
16.    // let p2 = Person.getInstance('陈')
17.    console.log(p1)

复制代码

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

复制代码

单例模式弹窗
样式：

1.    *{
2.        margin: 0;
3.        padding: 0;
4.    }
5.    html, body{
6.        height: 100%;
7.    }
8.    button{
9.        width: 100px;
10.        height: 28px;
11.        margin: 10px;
12.    }
13.    .mask{
14.        width: 100%;
15.        height: 100%;
16.        background-color: rgba(0, 0, 0, .5);
17.        position: fixed;
18.        top: 0;
19.        left: 0;
20.        display: none;
21.    }
22.    .mask .content{
23.        width: 500px;
24.        height: 300px;
25.        background-color: #fff;
26.        position: absolute;
27.        left: 0;
28.        right: 0;
29.        top: 0;
30.        bottom: 0;
31.        margin: auto;
32.        display: block;
33.    }
34.    .mask .content span{
35.        position: absolute;
36.        right: 0;
37.        top: 0;
38.        width: 15px;
39.        height: 15px;
40.        background-color: #ccc;
41.        color: #fff;
42.        text-align: center;
43.        line-height: 15px;
44.        font-size: 12px;
45.        cursor: pointer;
46.    }
47.    .mask .content p{
48.        text-align: center;
49.        line-height: 300px;
50.    }
51.    /* 自定义三个背景颜色 */
52.    .sy1{
53.        background-color: hotpink !important;
54.    }
55.    .sy2{
56.        background-color: orange !important;
57.    }
58.    .sy3{
59.        background-color: greenyellow !important;
60.    }    
61.    <button>弹窗1</button>
62.    <button>弹窗2</button>
63.    <button>弹窗3</button>
64.    <div class="mask">
65.        <div class="content">
66.            <span>&times;</span>
67.            <p></p>
68.        </div>
69.    </div>

复制代码

1.    let aBtn = document.querySelectorAll('button')
2.    class Layer {
3.        constructor(){}
4.        init(text, sy){
5.            this.mask = document.querySelector('.mask')
6.            this.content = document.querySelector('.content')
7.            this.p = document.querySelector('p')
8.            this.span = document.querySelector('span')
9.            this.content.classList.add(sy)
10.            this.p.innerHTML = text
11.            this.show()
12.            this.hide(sy)
13.        }
14.        show(){
15.            this.mask.style.display = 'block'
16.        }
17.        hide(sy){
18.            this.span.onclick = ()=>{
19.                this.mask.style.display = 'none'
20.                this.content.classList.remove(sy)
21.            }
22.        }
23.        static getInstance(text, sy){
24.            if(!this.instance){
25.                this.instance = new Layer(text, sy)
26.            }
27.            this.instance.init(text, sy)
28.            return new Layer(text, sy)
29.        }
30.    }
31.    aBtn[0].onclick = ()=>{
32.        Layer.getInstance('张特别喜欢这个弹窗', 'sy1')
33.    }
34.    aBtn[1].onclick = ()=>{
35.        Layer.getInstance('陈说嘿嘿', 'sy2')
36.    }
37.    aBtn[2].onclick = ()=>{
38.        Layer.getInstance('王喜欢美女', 'sy3')
39.    }

复制代码

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

1.    // 例如：报名千锋的课程
2.    
3.    // Lsson就是一个调度中心，所谓的调度中心其实就是平台
4.    class Lesson {
5.        constructor(){
6.            // 数据结构设计，对象加数组格式
7.            this.message = {}
8.            console.log(this.message)
9.        }
10.        add(type, fn){
11.            // 判断下对象里面是否存在某个类型的课程
12.            // this.message['HarmonyOS']第一次进来没有这个课程，值是undefined，取反就进入判断体里面
13.            if(!this.message[type]){
14.                // 可以把这个属性添加进对象，并赋值为数组
15.                this.message[type] = []
16.            }
17.            this.message[type].push(fn)
18.        }
19.        cancel(type, fn){
20.            // 判断下有没有这个课程，如果没有就终止函数执行
21.            if(!this.message[type]) return
22.            // 可以使用过滤
23.            //                                                    zt != zt false
24.            //                                                    wwn != zt true              
25.            this.message[type] = this.message[type].filter(item=> item != fn)
26.        }
27.        emit(type, info){
28.            // 判断下有没有这个课程，如果没有就终止函数执行
29.            if(!this.message[type]) return
30.            // 如果有这个课程就通知
31.            this.message[type].forEach(item=>{
32.                item(info)
33.            })
34.        }
35.    }  
36.    let qf = new Lesson()
37. ​
38.    function zt(info){
39.        console.log('张报名了HarmonyOS课程，' + info)
40.    }
41.    function wwn(info){
42.        console.log('王报名了HarmonyOS课程，' + info)
43.    }
44.    function ty(info){
45.        console.log('陶报名了HarmonyOS课程，' + info)
46.    }
47.    function cjh(info){
48.        console.log('陈报名了JavaEE课程，'+ info)
49.    }
50.    function lsj(info){
51.        console.log('李报名了JavaEE课程，'+ info)
52.    }
53.    
54.    // 参数1表示的是课程名称，课程类型
55.    qf.add('HarmonyOS', zt)
56.    qf.add('HarmonyOS', wwn)
57.    qf.add('HarmonyOS', ty)
58.    qf.add('JavaEE', cjh)
59.    qf.add('JavaEE', lsj)
60. ​
61.    // 可以报名课程，也可以取消课程
62.    // 参数1表示取消课程的类型
63.    // 参数2表示谁取消课程
64.    // qf.cancel('HarmonyOS', zt)
65. ​
66.    // 发布开课信息
67.    // 参数1表示开课的类型
68.    // 参数2表示课程相关的信息
69.    qf.emit('JavaEE', '11月11号开课了，请到肖家河大厦三楼前台报道')
70.    let btn = document.querySelector('button')

复制代码

4.策略模式（定义一系列的算法，将他们一个个封装起来，使他们直接可以相互替换。）
例：必要实现一个计算员工奖金的程序，效绩为 S 则发基本工资的4倍，A 则3倍，以此类推

1.     // 策略模式
2.     let obj = {
3.         "S": function(price){
4.             return price * 4
5.         },
6.         "A": function(price){
7.             return price * 3
8.         },
9.         "B": function(price){
10.             return price * 2
11.         }
12.     }
13.     function calc(leval, price){
14.         return obj[leval](price)
15.     }
16.     // 通过函数的静态方法，新增一个等级
17.     calc.add = function(leval){
18.         obj[leval] = function(price){
19.             return price * 1.5
20.         }
21.     }
22.     calc.add('C')
24.     // 新增一个删除等级方法
25.     calc.del = function(leval){
26.         delete obj[leval]
27.     }
28.     calc.del('S')
29.     console.log(obj)

复制代码

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

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

复制代码

1.     // 实例化ajax对象
2.     let xhr = new XMLHttpRequest()
3.     // console.log(xhr.readyState) // 0时-未初始化, 对象已建立, 尚未调用open()
4.     /*
5.         配置信息
6.         + 你要给那个服务器发送请求，告诉ajax，你的请求方式是什么，告诉ajax，你发送的请求是同步的还是异步的，告诉ajax
7.         + 参数1表示请求类型
8.         + 参数2表示的是请求地址（api）
9.         + 参数3表示的是同步还是异步，默认就是异步的
10.         基准地址
11.         + http://localhost:8888
12.         + 根地址 --- /
13.     */
14.     // xhr.open('get', 'http://localhost:8888/test/first')
15.     xhr.open('get', 'http://localhost:8888/test/second')
16.     // console.log(xhr.readyState) // 1时-初始化, 对象建立未调用send()
18.     // 监听请求状态
19.     xhr.onreadystatechange = ()=>{
20.         // 2时-发送数据, send()方法调用, 但是当前的状态及http头未知, 请求未完成
21.         // 3时-数据传输中, 接受部分数据
22.         // 4时-响应内容解析完成
23.         // console.log(xhr.readyState)
24.         // console.log(xhr.responseText)
26.         if(xhr.readyState === 4){
27.             if(xhr.status === 200){
28.                 // console.log(xhr.responseText)
29.                 console.log(JSON.parse(xhr.responseText))
30.             }else{
31.                 console.log('请求失败')
32.             }
33.         }
35.         // if(xhr.readyState === 4 && xhr.status === 200){
36.         //     console.log(xhr.responseText)
37.         // }else{
38.         //     console.log('请求失败')
39.         // }
40.     }
41.     // 发送请求
42.     xhr.send()

复制代码

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

1.get请求

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

复制代码

2.post请求

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

复制代码

3.get请求封装

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

复制代码

1.     function ajax_get(url, parmas, success, error){
2.         let xhr = new XMLHttpRequest()
3.         // 判断是否存在请求参数
4.         if(parmas){
5.             // 能进来说明存在参数
6.             // 把对象转成查询字符串
7.             let str = '?'
8.             for(let key in parmas){
9.                 //  str +=name='张'
10.                 str += `${key}=${parmas[key]}`
11.                 str += '&'
12.             }
13.             str = str.slice(0, -1)
14.             xhr.open('get', url+str)
15.         }else{
16.             // 这里说明没有参数
17.             xhr.open('get', url)
18.         }
19.         xhr.onreadystatechange = ()=>{
20.             if(xhr.readyState === 4){
21.                 if(xhr.status === 200){
22.                     success && success(xhr.responseText)
23.                 }else{
24.                     error && error()
25.                 }
26.             }
27.         }
28.         xhr.send()
29.     }
30.     ajax_get('http://localhost:8888/test/third', {name: '张', age: 18}, function(result){
31.         console.log(JSON.parse(result))
32.     }, function(){
33.         console.log('请求失败')
34.     })

复制代码

4.get请求封装优化

1.    function ajax_get(options){
2.        let xhr = new XMLHttpRequest()
3.        // 判断是否存在请求参数
4.        if(options.params){
5.            // 能进来说明存在参数
6.            // 把对象转成查询字符串
7.            let str = '?'
8.            for(let key in options.params){
9.                //  str +=name='张'
10.                str += `${key}=${options.params[key]}`
11.                str += '&'
12.            }
13.            str = str.slice(0, -1)
14.            xhr.open('get', options.url+str)
15.        }else{
16.            // 这里说明没有参数
17.            xhr.open('get', options.url)
18.        }
19.        xhr.onreadystatechange = ()=>{
20.            if(xhr.readyState === 4){
21.                if(xhr.status === 200){
22.                    options.success && options.success(xhr.responseText)
23.                }else{
24.                    options.error && options.error()
25.                }
26.            }
27.        }
28.        xhr.send()
29.    }
30.    // ajax_get('http://localhost:8888/test/third', {name: '张', age: 18}, function(result){
31.    //     console.log(JSON.parse(result))
32.    // }, function(){
33.    //     console.log('请求失败')
34.    // })
35. ​
36.    ajax_get({
37.        url: 'http://localhost:8888/test/third',
38.        params: {name: '张', age: 18},
39.        success(result){
40.            console.log(JSON.parse(result))
41.        },
42.        error(){
43.            console.log('请求失败')
44.        }
45.    })

复制代码

5.post请求封装

1.    function ajax_post(options){
2.        let xhr = new XMLHttpRequest()
3.        xhr.open('post', options.url)
4.        xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')
5.        xhr.onreadystatechange = ()=>{
6.            if(xhr.readyState === 4){
7.                if(xhr.status === 200){
8.                    options.success && options.success(xhr.responseText)
9.                }else{
10.                    options.error && options.error()
11.                }
12.            }
13.        }
14.        if(options.params){
15.            // 把对象转成查询字符串
16.            let str = ''
17.            for(let key in options.params){
18.                //  str +=name='张'
19.                str += `${key}=${options.params[key]}`
20.                str += '&'
21.            }
22.            str = str.slice(0, -1)
23.            xhr.send(str)
24.        }else{
25.            xhr.send()
26.        }
27.    }
28.    ajax_post({
29.        url: 'http://localhost:8888/test/fourth',
30.        params: {name: '张', age: 18},
31.        success(result){
32.            console.log(JSON.parse(result))
33.        },
34.        error(){
35.            console.log('请求失败')
36.        }
37.    })

复制代码

6.函数参数对象化（使用的过程中必要注意参数的顺序问题，假如参数比力多的情况下，很容易肴杂参数表示意义）

1.    function fn(options){
2.        options.arr.push('hello')
3.        console.log(options.num + 666)
4. ​
5.        console.log(options)
6.    }
7.    fn({
8.        num: 10,
9.        arr: [10, 20, 30],
10.    })

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。