#yyds干货盘点# 【js学习笔记四十】复杂工厂模式

简介: #yyds干货盘点# 【js学习笔记四十】复杂工厂模式

前言


我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷


导语


复杂工厂模式

图片.png

代码部分

//第一步 定义自行车的构造函数 两个属性 一个name和一个方法method
var BicycleShop = function(name){
    this.name = name;
    this.method = function(){
        return this.name;
    }
};
BicycleShop.prototype = {
    constructor: BicycleShop,
    /*
     * 买自行车这个方法
     * @param {model} 自行车型号
    */
    sellBicycle: function(model){
            var bicycle = this.createBicycle(model);
            // 执行A业务逻辑
            bicycle.A();
            // 执行B业务逻辑
            bicycle.B();
            return bicycle;
        },
        createBicycle: function(model){
            throw new Error("父类是抽象类不能直接调用,需要子类重写该方法");
        }
    };
    // 实现原型继承  Sub表示子类,Sup表示超类
    function extend(Sub,Sup) {
        // 首先定义一个空函数
        var F = function(){};
        // 设置空函数的原型为超类的原型
        F.prototype = Sup.prototype; 
        // 实例化空函数,并把超类原型引用传递给子类
        Sub.prototype = new F();
        // 重置子类原型的构造器为子类自身
        Sub.prototype.constructor = Sub;
        // 在子类中保存超类的原型,避免子类与超类耦合
        Sub.sup = Sup.prototype;
        if(Sup.prototype.constructor === Object.prototype.constructor) {
            // 检测超类原型的构造器是否为原型自身
            Sup.prototype.constructor = Sup;
        }
    }
    var BicycleChild = function(name){
        this.name = name;
// 继承构造函数父类中的属性和方法
        BicycleShop.call(this,name);
    };
    // 子类继承父类原型方法
    extend(BicycleChild,BicycleShop);
// BicycleChild 子类重写父类的方法
BicycleChild.prototype.createBicycle = function(){
    var A = function(){
        console.log("执行A业务操作");    
    };
    var B = function(){
        console.log("执行B业务操作");
    };
    return {
        A: A,
        B: B
    }
}
var childClass = new BicycleChild("龙恩");
console.log(childClass);

总结



以上就是复杂工厂模式的理解


相关文章
|
7月前
|
设计模式 JavaScript 数据安全/隐私保护
js设计模式之工厂模式
js设计模式之工厂模式
55 0
|
3月前
|
JavaScript 前端开发 API
Vue学习笔记3:对比纯JavaScript和Vue实现数据更新的实时视图显示
Vue学习笔记3:对比纯JavaScript和Vue实现数据更新的实时视图显示
|
2月前
|
JavaScript 前端开发
【干货分享】JavaScript学习笔记分享
【干货分享】JavaScript学习笔记分享
57 0
|
3月前
|
Web App开发 前端开发 JavaScript
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的云的学习笔记系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的云的学习笔记系统附带文章源码部署视频讲解等
41 0
|
5月前
|
设计模式 JavaScript 前端开发
js设计模式【详解】—— 工厂模式
js设计模式【详解】—— 工厂模式
22 0
|
7月前
|
设计模式 JavaScript 前端开发
JavaScript工厂模式:创建对象的简便方式!
JavaScript工厂模式:创建对象的简便方式!
|
7月前
|
移动开发 JavaScript 前端开发
webgl学习笔记3_javascript的HTML DOM
webgl学习笔记3_javascript的HTML DOM
65 0
webgl学习笔记3_javascript的HTML DOM
|
7月前
|
JavaScript 前端开发 Java
webgl学习笔记2_javascript基础快速学习
webgl学习笔记2_javascript基础快速学习
51 0
|
7月前
|
前端开发 JavaScript API
JavaScript学习笔记(一)promise与async
JavaScript学习笔记(一)promise与async
下一篇
无影云桌面