关于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 = name
this.age = age
this.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没有值的，所以是undefined
if(!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>×</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 = text
this.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.onclick = ()=>{
Layer.getInstance('张特别喜欢这个弹窗', 'sy1')
}
aBtn.onclick = ()=>{
Layer.getInstance('陈说嘿嘿', 'sy2')
}
aBtn.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){
// 可以把这个属性添加进对象，并赋值为数组
this.message = []
}
this.message.push(fn)
}
cancel(type, fn){
// 判断下有没有这个课程，如果没有就终止函数执行
if(!this.message) return
// 可以使用过滤
// zt != zt false
// wwn != zt true
this.message = this.message.filter(item=> item != fn)
}
emit(type, info){
// 判断下有没有这个课程，如果没有就终止函数执行
if(!this.message) return
// 如果有这个课程就通知
this.message.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(price)
}
// 通过函数的静态方法，新增一个等级
calc.add = function(leval){
obj = function(price){
return price * 1.5
}
}
calc.add('C')
// 新增一个删除等级方法
calc.del = function(leval){
delete obj
}
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}`
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}`
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}`
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: ,
})
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]