网站咨询界面设计,大丰专业做网站,html 图片展示网站,开发企业门户网站单例模式工厂模式状态模式观察者模式桥接模式 设计模式#xff08;是一种通过经验中总结出来的经过反复验证能够解决一类通用问题的可以反复重用的就可称它为模式#xff0c;否则只能称为功能模块#xff09;#xff1b;模式#xff1a;把解决问题的方法抽取出来#xff… 单例模式工厂模式状态模式观察者模式桥接模式 设计模式是一种通过经验中总结出来的经过反复验证能够解决一类通用问题的可以反复重用的就可称它为模式否则只能称为功能模块模式把解决问题的方法抽取出来形成一种通用范例 单例模式
单例模式只需要一个对象产生不需要反复产生多个对象
headlink relstylesheet href3.util.css
/head
bodybutton onclicktest()弹出遮罩层/buttonscript src3.util.js/scriptscriptlet myObj{};//json数据就是依照单例模式的概念产生的数据模式let obj{name:月月,age:24,method1:{f1(){return f1;},f2(){return f2;}}}//弹出遮罩层案例function test() {/*let divcreateDiv(); //返回的对象div.show();*/createDiv();}/script
/body3.util.js文件
/*let createDivfunction () {let divdocument.createElement(div);div.classNamelayer;document.body.appendChild(div); // 放到页面显示出来let showfunction () {div.style.displayblock;document.body.style.overflowhidden}return {show,}//应该只create一次不然每次点击都创建div可能会造成反复叠加
}*/// 正确写法
let createDiv(function () {let div;return function () {if(divundefined){divdocument.createElement(div);div.classNamelayer;document.body.appendChild(div)}let showfunction () {div.style.displayblock;document.body.style.overflowhidden}show();}
})()3.util.css文件
body{height: 1500px;
}
.layer{position: absolute;top:30px;left:0;width: 100%;height: 100%;background-color: black;opacity: 0.3;display: none;
}效果 示例:
/*野兽约美女主动微信联系1.需要两个对象美女野兽2.需要通过微信3.先看美女有没有微信如果有微信就直接通过微信联系如果没有就先安装微信4.两个单例之间开始通信
*///野兽
let yeShou{callMeiNv:function (msg) {let MnmeiNv.getMessage(msg);alert(Mn.weChar)}
}//美女
let meiNv(function () { //meiNv{}let wxAppfunction(message) { //微信构造函数this.weCharmessage}let weChar;let info{ //美女信息getMessage:function (message) {console.log(message)if(!weChar){ //没有微信weCharnew wxApp(message)}return weChar; //对象wxmini.wxmini}}return info;
})()yeShou.callMeiNv(一起吃饭吗)工厂模式
//类似于做架构只需要调函数传参数
function createPerson() {function Person() {//一定会得到人但是是个什么样的人不确定弊端是不留接口的话Person()不能扩展}let anew Person();return a;
}
// new Person(); 不可用因为Person()在createPerson()中改不到
createPerson();function Plane() {}
Plane.prototype.speed30; //可随意更改模板//原型模式
function student() {}
student.prototype.name月亮;
student.prototype.workfunction () {}//构造函数
function myStudent(name) {this.namename;this.workfunction () {}
}
console.log(new myStudent(月月)) //有constructor属性/* 原型构造工作中使用*/
function emp(name) {this.namename;
}
// emp.prototype.workfunction () {
//
// } 有constructor属性emp.prototype{work(){},study(){},//解决没有constructor属性自己加上去constructor:emp
}
console.log(new emp(月亮)) //没有constructor属性class Demo{constructor() {//属性}//方法
}状态模式
button onclickmyMove(jump)跳/button
button onclickmyMove(run)跑/button
button onclickmyMove(walk)走/buttonscriptfunction myMove(a) {obj[a]();}let obj{jump(){console.log(跳)},run:function () {console.log(跑)},walk(){console.log(走)}}/*let obj{method1(){console.log(method1)},method2(){console.log(method2)},method3(){console.log(method3)},}let a1;if(a1){obj.method1()}else if(a2){obj.method2()}else if (a3){obj.method3()}let amethod1;obj[a]();*/
/script观察者模式
div idbox观察者模式/divscriptdocument.getElementById(box).addEventListener(click, function () {alert(hello 世界)})//vue---Object.defineProperty() 参考js笔记中的数据双向绑定原理/*观察者模式属于行为模式的一种定义了一对多的依赖关系让多个观察者同时监听一个主题对象这个主题对象在状态发生变化的时候会通知所有的观察者使他们自动更新。和观察者模式很像的发布订阅模式*/
/script桥接模式
桥接方式降低代码耦合度
!--
input typebutton value300x300 idinp1 οnclickchangeSize(this)
input typebutton value500x500 idinp2 οnclickchangeSize(this)
input typebutton value700x700 idinp3 οnclickchangeSize(this)
--input typebutton value300x300 idinp1
input typebutton value500x500 idinp2
input typebutton value700x700 idinp3divimg srcduorou.jpg alt
/divscript//普通方式:/*function changeSize(obj) {let btnValueobj.value;btnValuebtnValue.split(x)console.log(btnValue)let size{width:btnValue[0],height:btnValue[1]}let imgObjdocument.getElementsByTagName(img)[0];imgObj.style.widthsize.widthpx;imgObj.style.heightsize.heightpx;}*///桥接方式降低代码耦合度let changeSizefunction (btnValue) {let bValuebtnValue.split(x);let size{width:bValue[0],height:bValue[1]}let imgObjdocument.getElementsByTagName(img)[0];imgObj.style.widthsize.widthpx;imgObj.style.heightsize.heightpx;}// changeSize(100x100) 每一段都可以单独执行//桥let changeSizeBridgefunction (e) {let vale.target;console.log(val.value);changeSize(val.value)}//绑定事件function addEvent(eleObj,eName,eMethod) { //3个参数元素对象事件名称方法let objdocument.getElementById(eleObj); //找到页面的节点if(clickeName){obj.onclickfunction () {eMethod(event)}}}addEvent(inp1,click,changeSizeBridge)addEvent(inp2,click,changeSizeBridge)addEvent(inp3,click,changeSizeBridge)/script
