美文网首页
H5-2.25Javascript模块模式

H5-2.25Javascript模块模式

作者: 冬天不爱洗头 | 来源:发表于2017-02-26 13:52 被阅读0次

从javascript对象创建说起
说起Module(模块)模式,可能一些刚刚接触javascript的同学还是觉得比较陌生,但是相信大多数学习javascript的同学都知道javascript对象创建的方式。最熟悉的莫过于构造器方式创建对象。
Constructor(构造器)模式
基本Construcor(构造器)

function Car(model,year,miles){
   this.model = model;
   this.year = year;
   this.miles = miles;

this.toShow = function(){
    return this.model + "已经行驶了:" +this.miles + "公里!";
    }
 }

 //用法:

//可以创建car的新实例
var benz = new Car('Benz',2012,2000);
var bmw = new Car('bmw',2014,5000);

//打开浏览器控制台(console),查看这些对象上           调用toShow()方法的输出
   console.log(benz.toShow());
   console.log(bmw.toShow());

什么是模式

模式很容易被复用
就像上面的构造器模式,它是我们创建对象的一种模式,只要掌握了这种模式,它就是一种立即可用的解决方案。构造器模式给我们提出了快速大量简单的创建javascript对象的办法。

模式是已经验证的解决方法
解决方案其实就是开发人员的经验和见解,他们为定义和改进这些方法提供了帮助。从而形成了模式。比如构造器模式,从上面的列子就可以看出,为了更好的实现对象的创建,构造器模式在慢慢的改进,让其达到最能适合创建javascript对象的形式

模式富有表达力
看到模式时,通常就表示有一个设置好的结构和表达解决方案的词汇。很简单,做项目时,只要你说通过原型的构造器模式创建对象。那么大家都知道你说的是什么意思。或者你说这个问题可以用观察者模式去解决。只要大家都熟悉观察者模式,那么在程序员之间就少了很多沟通的障碍。

所以模式也就是一种可以复用的解决方案而已,用来解决软件设计中遇到的常见问题。

Module(模块)模式
模块是任何强大应用程序架构中不可或缺的一部分,它通常能够帮我们清晰的分离和组织项目中的代码单元。简单的比喻的话,javascript中模块就类似于C#中的命名空空间,Java中的包。
在javasctipt中,有几种用于实现模块的方法,包括
对象字面量表示法

Module模式

AMD模块

CommonJS模块

ECMAScript Harmony模块

对象字面量
对象字面量的表示法相信大家都不会陌生,一个对象被描述为一组包含在大括号( { } )中,以逗号(,)分隔的name/value对,对象内的名称可以是字符串或者标识符,后面跟着一个冒号。对象中最后一个name/value对的后面不能加逗号,不然会导致出错

 var myObjectLiteral = {
variableKey:variableValue,
functionKey:function(){
    //...
  }
}




 var myModule = {
  myProperty:"someValue",

//对象字面量可以包含属性和方法
//例如:可以声明模块的配置对象
//注意:无论是对象还是方法写完,如果不是最后一个记得加上(,)
myConfig:{
    useCaching:true,
    language:'en'
},

//基本方法
myMethod:function(){
    console.log('输出基本信息');
},

//根据配置输出信息
myMethod2:function(){
    console.log('缓存是:' + (this.myConfig.useCaching)?'可用的':'不可用');
},

//重写配置
myMethod3 = function(newConfig){
    if(typeof newConfig === 'object'){
        this.myConfig = newConfig;
        console.log(this.myConfig.language);
    }
}
};

//调用:

//输出基本方法
myModule.myMethod();

//输出:可用的
 myModule.myMethod2();

//输出:fr
myModule.myMethod3({
   language:'fr',
   useCaching:false
});

Module(模块)模式
在javascript中,Module模式用于进一步模拟类的概念,通过这种方式,可以使一个单独的对象拥有公有/私有方法和变量,从而屏蔽来自全局作用域的特殊部分。产生的结果是:函数名与在页面上其他脚本定义的函数冲突的可能性降低
私有
Module模式使用闭包封装”私有”状态和组织。它提供了一种包装混合公有/私有方法和变量的方式,防止其泄露至全局作用域,并与别的开发人员的接口发生冲突。通过该模式,只需返回一个公有API,而其他的一切都维持在私有闭包里面。
这样做为我们提供了一个屏蔽处理底层事件逻辑的整洁解决方案,同时只暴露一个接口供应用程序的其他部分使用。该模式除了返回一个对象而不是一个函数之外,非常类似于一个立即调用的函数表达式(IIFE)

购物车实例
代码:

  var basketModule = (function(){
         //购物车数组,私有变量
        var basket = [];
       //私有函数
       function doSomethingPrivate(){
       //。。。
      }
              
//私有函数
function doSomethingElsePrivate(){
    //。。。
}

//返回一个暴露出的公有对象
return {
    //添加item到购物车
    addItems:function(values){
        basket.push(values);
    },

    //获得购物车里商品总数
    getItemCount:function(){
        return basket.length;
    },

    //私有函数的公有形式别名
    doSomething:doSomethingPrivate,

    //获取所有商品的总价格
    getTotal:function(){
        var itemCount = this.getItemCount(),
            total = 0;
        while(itemCount--){
            total += basket[itemCount].price;
        }
        return total;
    }
};
})();

   //用法:
basketModule.addItem({
item:"面包",
price:5
});
basketModule.addItem({
item:"可乐",
price:2
});

 //2
console.log(basketModule.getItemCount());
//7
console.log(basketModule.getTotal());

相关文章

  • H5-2.25Javascript模块模式

    从javascript对象创建说起说起Module(模块)模式,可能一些刚刚接触javascript的同学还是觉得...

  • 前端设计模式

    模块模式 工厂模式 构造函数模式 混合模式 单例模式 发布订阅模式 模块模式 用于模块封装,用立即执行的函数嵌套一...

  • 《SPA设计与架构》之JavaScript模块化

    原文 博客原文 大纲 1、什么是模块?2、基本的模块模式3、模块模式概念4、模块结构5、揭示模式6、模块编程的意义...

  • 高级任务6-前端设计模式

    写出 构造函数模式、混合模式、模块模式、工厂模式、单例模式、发布订阅模式的范例 构造函数模式 混合模式 模块模式 ...

  • 前端设计模式

    写出 构造函数模式、混合模式、模块模式、工厂模式、单例模式、发布订阅模式的范例。 构造函数模式 混合模式 模块模式...

  • 前端设计模式

    写出 构造函数模式、混合模式、模块模式、工厂模式、单例模式、发布订阅模式的范例。 构造函数模式 混合模式 模块模式...

  • 高级6

    1、写出 构造函数模式、混合模式、模块模式、工厂模式、单例模式、发布订阅模式的范例。 构造函数: 混合模式: 模块...

  • 高级任务6---前端设计模式

    1、写出 构造函数模式、混合模式、模块模式、工厂模式、单例模式、发布订阅模式的范例。 构造函数模式 混合模式 模块...

  • 前端设计模式

    1.写出 构造函数模式、混合模式、模块模式、工厂模式、单例模式、发布订阅模式的范例。 工厂模式 模块模式 构造函数...

  • 前端设计模式

    1. 写出 构造函数模式、混合模式、模块模式、工厂模式、单例模式、发布订阅模式的范例。 模块模式var Perso...

网友评论

      本文标题:H5-2.25Javascript模块模式

      本文链接:https://www.haomeiwen.com/subject/oxkowttx.html