JavaScript 设计模式

2021-02-24 11:35:11 阅读：129 来源： 互联网

标签：function obj name age JavaScript var div 设计模式

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>设计模式</title>
    <script src="jquery.min.js"></script>
</head>
<body>
    <button id="btn">click</button>
   <script>
	//原始模式
    var person = new Object();
    person.name ='ben';
    person.showName= function(){
        console.log(this.name)
    };
    person.showName();

    //工厂模式
    // function person(name,age){
    //     var obj = new Object();
    //     obj.name = name;
    //     obj.age = age;
    //     obj.showName = function(){
    //         return this.name
    //     }
    //     return obj;
    // };
    // var p1 = person('a1',20);
    // var p2 = person('a2',20);
    //缺点：全部都是object   date  array

    //构造函数模式
    function Person(name,age){
        this.name = name;
        this.age = age;
        this.showName = function(){
            return this.name
        }
    };
    var p1 = new Person('a1',20);
    var p2 = new Person('a2',20);
    //缺点：每次创建实例时都要重新创建一次方法

    function Person(name,age){
        this.name = name;
        this.age = age;
        this.showName = showName;
    };
    function showName(){
        return this.name
    }
    var p1 = new Person('a1',20);
    var p2 = new Person('a2',20);

    //混合模式(原型模式+构造函数模式)
    function Person(name,age){
        this.name = name;
        this.age = age;
        //this.showName = showName;
    };
    Person.prototype.showName = function(){
        return this.name
    }
    var p1 = new Person('a1',20);
    var p2 = new Person('a2',20);

    //单例模式（单体模式）   只有一个实例
    // function createWindow() {
    //     var div = document.createElement("div");
    //     div.innerHTML="hello world";
    //     div.style.display = "none";
    //     document.body.appendChild(div);
    //     return div;
    // };
    var createWindow = (function() {
        var div;
        return function (){
            if(!div){
                div = document.createElement("div");
                div.innerHTML="hello world";
                div.style.display = "none";
                document.body.appendChild(div);
            };
            return div;
        }
    })();
	document.getElementById("btn").onclick = function() {
        var str = createWindow();
        str.style.display ='block';
    };

    //观察者模式（订阅模式）
    //1、发布 者（卖家）
    //2、发布者添加一个缓存列表(用于存入订阅者回调函数）
    //3、发布 消息，遍历缓存列表，依次触发订阅者的回调函数
    var obj ={}; //卖家
    obj.list = [];  //缓存列表
    obj.listen = function(fn) {   //订阅者信息（增加）
        obj.list.push(fn);
    };
    obj.trigger = function(){   //发布消息
        // for(var i=0,fn;fn=this.list[i++];){
        //     fn.apply(this,arguments);
        // }
        for(var i=0;i<this.list.length;i++){
            var fn;
            fn = this.list[i];
            //fn这个函数在当前对象中调用
            fn.apply(this,arguments);   //arguments内置的属性 类似是Array  
        }
    };
    //小红订阅消息
    obj.listen(function(color,size){
        console.log('姓名'+'小红');
        console.log('颜色'+color);
        console.log('尺寸'+size);
    });
    //小明订阅消息
    obj.listen(function(color,size){
        console.log('姓名'+'小明');
        console.log('颜色'+color);
        console.log('尺寸'+size);
    });
    //发布消息
    obj.trigger('红色','s');

    //适配器模式
    //自行车 bike    人驱动 Hdrive
    //电动车  Ebile   电驱动 Edrive

    //自行车抽象类   便于扩展功能
    var Bike = function() {}
    Bike.prototype.wheel = function() {
        throw new Error("错误")   //自定义错误信息
    };
    Bike.prototype.Hdrive= function() {
        throw new Error("错误")
    };
    //电动车抽象类   便于扩展功能
    var Ebile = function() {}
    Ebile.prototype.wheel = function() {
        throw new Error("错误")
    };
    Ebile.prototype.Edrive= function() {
        throw new Error("错误")
    };

    //自行车的实现类
    var RealizeBike = function() {}
    RealizeBike.prototype = new Bike(); //继承
    RealizeBike.prototype.wheel = function() {
        console.log('我有二个轮子')
    };
    RealizeBike.prototype.Hdrive= function() {
        console.log('人驱动')
    };
    //电动车的实现类
    var RealizeEbile = function() {}
    RealizeEbile.prototype = new Ebile(); //继承
    RealizeEbile.prototype.wheel = function() {
        console.log('我有二个轮子')
    };
    RealizeEbile.prototype.Edrive= function() {
        console.log('电驱动')
    };

    //自行车适配器
    var BikeAdapter = function(o) {
        //Ebile.apply(this);
        this.o = o;
    };
    BikeAdapter.prototype = new Ebile();//继承
    BikeAdapter.prototype.Edrive= function() {
        console.log(this.o);
        console.log(this.o.wheel());
		//console.log(this.o.Hdrive());
    };
    var b1 = new RealizeBike();  //实例化自行车
    //b1.Hdrive();//人驱动
    var e1 = new RealizeEbile();  //实例化电动车
    //e1.Edrive(); //电驱动
    //适配器自行车的行为
    var aa = new BikeAdapter(b1);
    aa.Edrive();


   </script>
</body>
</html>

标签：function,obj,name,age,JavaScript,var,div,设计模式
来源： https://www.cnblogs.com/Dewumu/p/14440334.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

JavaScript 设计模式