设为首页|加入收藏 精品推荐:

前端设计的7种JavaScript设计模式

来源:未知 | 作者:技术小白 | 点击:
    前端开发人员将JavaScript规划形式作为处理问题的模板是很适宜的,但并不是说这些形式能够替代开发人员的作业。
    经过规划形式,咱们能够将许多开发人员的经验结合起来,以优化过的方式来结构代码,然后处理咱们所面临的问题。规划形式还供给了用于描述问题处理计划的通用词汇表,而不是去枯燥地描述代码的语法和语义。
    JavaScript规划形式可协助开发人员编写出有条不紊、漂亮且结构合理的代码。虽然规划形式很简单重用,但它们并不是要取代开发人员的作业;它们是开发人员的支撑与辅佐,供给了与特定应用程序无关的通用处理计划,然后尽量避免那些可能导致Web应用程序的开发作业出现重大问题的小漏洞。
    ​
    与临时计划相比,它们消除了不必要的重复,然后缩减了代码库的全体巨细,并让咱们的代码更加健壮。
    在本文中,我将探讨7种最出色和最受欢迎的JavaScript规划形式,这些形式首要归为以下三类:创造规划形式、结构规划形式和行为规划形式。
    1、结构函数规划形式
    这是一种特殊的办法,用于在分配内存后初始化新创立的目标。由于JavaScript一般来说是面向目标的,所以它打交道最多的便是目标。于是我打算深入研究目标结构函数。在JavaScript中创立新目标有三种办法可用。
    以下创立结构函数规划形式的一种办法。
    //创立一个新的空目标
    varnewObject={};
    //创立一个新的空目标
    varnewObject=Object.create(Object.prototype);
    varnewObject=newObject();
    要访问函数的属性,你需求初始化目标。
    constobject=newConstructorObject();
    上面的new关键字告诉JavaScript,一个constructorObject应该充任一个结构函数。这个规划形式并不支撑承继。
    2、原型形式
    原型形式是基于原型承继的。在这种形式中,被创立的目标充任其他目标的原型。实际上,原型(prototype)是被创立的每个目标结构函数的蓝图。
    示例
    varmyCar={
    name:"FordEscort",
    brake:function(){
    console.log("Stop!Iamapplyingbrakes");
    }
    Panic:function(){
    console.log("wait.howdoyoustopthuisthing?")
    }
    }
    //运用objectcreate实个新的例化一car
    varyourCar=object.create(myCar);
    //现在它便是另一个的原型了
    console.log(yourCar.name);]
    3、模块规划形式
    模块(module)规划形式对原型形式做了一些改善。模块形式设置了不同类型的修饰符(私有和公共)。你能够创立相似的函数或属性而不会发生冲突。咱们还能够灵敏地揭露重命名函数。这个规划形式的一个缺陷是无法覆盖(override)外部环境中创立的函数。
    示例
    functionAnimalContainter(){
    constcontainer=[];
    functionaddAnimal(name){
    container.push(name);
    }
    functiongetAllAnimals(){
    returncontainer;
    }
    functionremoveAnimal(name){
    constindex=container.indexOf(name);
    if(index<1){
    thrownewError("Animalnotfoundincontainer");
    }
    container.splice(index,1)
    }
    return{
    add:addAnimal,
    get:getAllAnimals,
    remove:removeAnimal
    }
    }
    constcontainer=AnimalContainter();
    container.add("Hen");
    container.add("Goat");
    container.add("Sheep");
    console.log(container.get())//Array(3)["Hen","Goat","Sheep"]
    container.remove("Sheep")
    console.log(container.get());//Array(2)["Hen","Goat"]
    4、单例形式
    在仅需求创立一个实例的情况下(例如一个数据库连接),这个形式是必需的。在这个形式中,只能在封闭连接时创立一个实例,或者在翻开新实例之前有必要封闭已有的实例。此形式也称为严厉形式,它的一个缺陷是测验时的体验很差,因为它隐藏的依靠项目标很难挑出来进行测验。
    示例
    functionDatabaseConnection(){
    letdatabaseInstance=null;
    //追踪特定时刻创立实例的数量
    letcount=0;
    functioninit(){
    console.log(`Openingdatabase#${count+1}`);
    //现在执行操作
    }
    functioncreateIntance(){
    if(databaseInstance==null){
    databaseInstance=init();
    }
    returndatabaseInstance;
    }
    functioncloseIntance(){
    console.log("closingdatabase");
    databaseInstance=null;
    }
    return{
    open:createIntance,
    close:closeIntance
    }
    }
    constdatabase=DatabseConnection();
    database.open();//Opendatabase#1
    database.open();//Opendatabase#1
    database.open();//Opendatabase#1
    database.close();//closedatabase
    5、工厂形式
    这个形式的创新之处在于,它不需求结构函数就能创立目标。它供给了用于创立目标的通用接口,咱们能够在其中指定要创立的工厂(factory)目标的类型。这样一来,咱们只需指定目标,然后工厂会实例化并回来这个目标供咱们运用。当目标组件设置起来很杂乱,而且咱们期望依据所在的环境轻松地创立不同的目标实例时,运用工厂形式便是很明智的选择。在处理许多共享相同属性的小型目标,以及创立一些需求解耦的目标时也能够运用工厂形式。
    示例
    //DealerA
    DealerA={};
    DealerA.title=functiontitle(){
    return"DealerA";
    };
    DealerA.pay=functionpay(amount){
    console.log(
    `setupconfigurationusingusername:${this.username}andpassword:${
    this.password
    }`
    );
    return`Paymentforservice${amount}issuccessfulusing${this.title()}`;
    };
    //DealerB
    DealerB={};
    DealerB.title=functiontitle(){
    return"DealerB";
    };
    DealerB.pay=functionpay(amount){
    console.log(
    `setupconfigurationusingusername:${this.username}
    andpassword:${this.password}`
    );
    return`Paymentforservice${amount}issuccessfulusing${this.title()}`;
    };
    //@param{*}DealerOption
    //@param{*}config
    functionDealerFactory(DealerOption,config={}){
    constdealer=Object.create(dealerOption);
    Object.assign(dealer,config);
    returndealer;
    }
    constdealerFactory=DealerFactory(DealerA,{
    username:"user",
    password:"pass"
    });
    console.log(dealerFactory.title());
    console.log(dealerFactory.pay(12));
    constdealerFactory2=DealerFactory(DealerB,{
    username:"user2",
    password:"pass2"
    });
    console.log(dealerFactory2.title());
    console.log(dealerFactory2.pay(50));
    6、观察者形式
    观察者(observer)规划形式在许多目标一起与其他目标集通讯的场景中用起来很方便。在观察者形式中不会在状况之间发生不必要的事件push和pull;相比之下,所触及的模块仅会修改数据的当时状况。
    示例
    functionObserver(){
    this.observerContainer=[];
    }
    Observer.prototype.subscribe=function(element){
    this.observerContainer.push(element);
    }
    //下面是从container中移除一个元素
    Observer.prototype.unsubscribe=function(element){
    constelementIndex=this.observerContainer.indexOf(element);
    if(elementIndex>-1){
    this.observerContainer.splice(elementIndex,1);
    }
    }
    /**
    *wenotifyelementsaddedtothecontainerbycalling
    *eachsubscribedcomponentsaddedtoourcontainer
    */
    Observer.prototype.notifyAll=function(element){
    this.observerContainer.forEach(function(observerElement){
    observerElement(element);
    });
    }
    7、指令形式
    最终介绍的是指令(command)形式。指令规划形式将办法调用、操作或恳求封装到单个目标中,以便咱们能够自行传递办法调用。指令规划形式让咱们能够从任何正在执行的指令中发出指令,并将职责托付给与之前不同的目标。这些指令以run()和execute()格式显示。
    (function(){
    varcarManager={
    //恳求的信息
    requestInfo:function(model,id){
    return"Theinformationfor"+model+"withID"+id+"isfoobar";
    },
    //现在购买这个car
    buyVehicle:function(model,id){
    return"YouhavesuccessfullypurchasedItem"+id+",a"+model;
    },
    //现在arrangeviewing
    arrangeViewing:function(model,id){
    return"Youhavesuccessfullybookedaviewingof"+model+"("+id+")";
    }
    };
    })();
    小结
    对于JavaScript开发人员来说,运用规划形式的好处许多。规划形式的一些首要长处包括进步项目的可维护性,还能减少开发周期中不必要的作业。JavaScript规划形式能够为杂乱的问题供给处理计划,进步开发速度并进步生产率。

您可能对以下内容感兴趣

小编分享

  • 广告位一
  • 广告位二
  • 广告位三
  • 广告位四
  • 广告位五

最新评论文章

回到顶部