js模块开发(一)

现在嵌入页面里面的javascript代码越来越复杂,于是可能依赖也越来越严重,使用别人开发的js也越来越多,于是在理想情况下,我们只需要实现核心的业务逻辑,其他都可以加载别人已经写好的模块。

于是js模块化开发就显的越来越重要了,但是,Javascript不是一种模块化编程语言,它不支持""(class),更遑论"模块"(module)了。(正在制定中的ECMAScript标准第六版,将正式支持"类"和"模块",但还需要很长时间才能投入实用。)在现有的开发中,使用“模块的效果”。于是我们简单的总结了几种模块开发的方式。

(1)原始写法:

模块就是实现特定功能的一组方法。

只要把不同的函数(以及记录状态的变量)简单地放在一起,就算是一个模块。

function f1(){

}
function f2(){

}

然后我们直接调用就可以了,但是这个做法有很多的弊端。例如:"污染"了全局变量,无法保证不与其他模块发生变量名冲突,而且模块成员之间看不出直接关系。

(2):使用对象的写法

为了解决上面的缺点,可以把模块写成一个对象,所有的模块成员都放到这个对象里面。这个写法在我现在的项目中经常使用。

var func={
var count=0;
inti:function(){

},
getValues:function(){

}
}

然后我们要使用的话直接 func.inti() .但是这个方式有一个缺点:这样的写法会暴露所有模块成员,内部状态可以被外部改写。func.count=1,这样就很不安全。

(3):立即执行函数写法

这个就可以防止修改内部的成员。

var func=({
var count=0;
inti:function(){

},
getValues:function(){

}
})():

func就是Javascript模块的基本写法。可以起到很好的保护私有成员的作用。

(4):放大模式

如果一个模块很大,必须分成几个部分,或者一个模块需要继承另一个模块,这时就有必要采用"放大模式"

 var func = (function (fn){
    fn.m = function () {
      //...
    };
    return fn;
  })(func)

  上面的代码为func模块添加了一个新方法m(),然后返回新的func模块。

(5):宽放大模式

在浏览器环境中,模块的各个部分通常都是从网上获取的,有时无法知道哪个部分会先加载。如果采用上一节的写法,第一个执行的部分有可能加载一个不存在空对象,这时就要采用"宽放大模式"。

var func = ( function (fn){
    //...
    return fun;
  })(window.func || {});

与"放大模式"相比,"宽放大模式"就是"立即执行函数"的参数可以是空对象。

(6):输入全局变量

独立性是模块的重要特点,模块内部最好不与程序的其他部分直接交互。为了在模块内部调用全局变量,必须显式地将其他变量输入模块。

 var func = (function ($, baidu) {
    //...
  })(jQuery, baidu);

  上面的func模块需要使用jQuery库和baidu库,就把这两个库(其实是两个模块)当作参数输入func。这样做除了保证模块的独立性,还使得模块之间的依赖关系变得明显。

待续:js模块加载器

时间: 2024-10-19 12:48:53

js模块开发(一)的相关文章

js 模块开发之一(模块开发价值)

首先引用我们的今天的主角 ----<前端模块化开发的价值> 1,前端开发最常见的两个问题 ---命名冲突和文件依赖 2,对于命名冲突的基本解决办法就是学习其他语言的习惯,添加命名空间 var org = {}; org.CoolSite = {}; org.CoolSite.Utils = {}; org.CoolSite.Utils.each = function (arr) { // 实现代码 }; org.CoolSite.Utils.log = function (str) { //

从node.js模块化开发来了解javascript闭包

之前看过很多关于javascript闭包的解释,只有短短几个demo,一大段晦涩难懂的介绍,巴拉巴拉一大段闭包的概念,但是到最后也没看懂闭包到底是什么意思,起什么作用,直到昨晚凌晨,我在学习node.js模块开发的时候,才突然恍然大悟,所以赶紧记下来,免得以后忘记.代码来源:廖雪峰的网站node.js教程. 直接上代码: 我们首先编写了一个hello.js文件,这个hello.js文件就是一个模块,模块的名字就是文件名(去掉.js后缀),所以hello.js文件就是名为hello的模块. 我们把

Developer - 如何自我保证Node.js模块质量

组里正在做SaaS产品,其中一些模块(Module)是Node.js实现,这里我们主要使用Node.js实现Web Server来提供服务. 在做SaaS项目之前,组里的开发模式是传统的Deverloper + QA的模式,这是传统的协作模式,Developer负责写代码开发,当然也会有基本的自测,QA负责测试,遇到问题,提Bug给Developer去修复,Developer修复Bug后,由QA来验证并记录Bug.但这样的协作模式已不适合SaaS产品的开发,SaaS产品更新迭代快,模块众多,这就

Clover周报模块 -- 开发总结

2014年7月8日 00:16:05 一.切图 这次开发,切图花了不少时间,样式是用scss写的,第一次用,不过用着用着就发现它的强大,层级.作用域.重用等都非常的方便,还有考拉神器,用着真是爽!不过,改起样式来就蛋疼了,通过浏览器看到的是css样式,然后从css里找到它是scss的第几行,多了一层转折,不能通过浏览器直接看到scss的样式,略感麻烦. 二.布局 整个周报页面是在一张HTML页面上实现的,用Ajax请求各种数据,然后展现到页面的不同位置.因为神框架Avalon的存在,数据的处理变

Titanium Module 模块开发(二)蓝牙控制 Module

今天 ,正好项目需要添加蓝牙的控制功能,我去Titianium 文档搜了一下,发现 只有Tizen 系统有,其他的都没有,只能自己做Module. 借这个机会,记录一下蓝牙控制Module 的开发过程中遇到的问题和一些知识点. 编写Module 建立项目 首先 ,建立一个Module 项目,不会的话参考:Titanium-Modules 模块开发 (一) :模块开发基础 创建完成后会是这样: 添加蓝牙相关方法 打开BluetoothadapterModule.java 文件 可看到如下代码: 2

DNN模块开发之利器篇:七种武器

我们在进行DNN模块开发时经常需要调用Dotnetnuke.dll中的方法函数,模块开发用到DNN的方法函数会让你的开发更加得心应手,下面我们就来介绍一下. 1) PortalModuleBase 所属命名空间:DotNetNuke.Entities.Modules 这是一个开发DNN模块所必须继承的基类,标志性的基类,在此基类中,你可以得到DNN所为你封装的一些模块基本信息,毋需你多费周折,其中包括当前用户UseID,UserInfo,TabID,ModulePath,ModuleConfig

node.js项目开发问题集锦(不定期更新,随时把开发过程中遇到的问题加上)

1.用express开发站点时,怎么定义通用的头部和尾部 方案1:用类似asp时代的include添加,如ejs模板: <% include ../header.ejs %> <h1 class="page-header"> 这里是内容. 注:..表示header.ejs在上一级目录,ejs扩展名可以去掉,直接写:include ../header </h1> <% include ../footer %> 方案2:用类似于MVC的lay

seajs实现JavaScript 的 模块开发及按模块加载

seajs实现了JavaScript 的 模块开发及按模块加载.用来解决繁琐的js命名冲突,文件依赖等问题,其主要目的是令JavaScript开发模块化并可以轻松愉悦进行加载. 官方文档:http://seajs.org/docs/#docs 首先看看seajs是怎么进行模块开发的.使用seajs基本上只有一个函数"define" fn.define = function(id, deps, factory) { //code of function- } 使用define函数来进行定

2015.3.12(遮罩层JS模块)

这两天了解了一些前端开发常用的工具和库和框架,有一个疑问,如果大量使用这些现成的框架,会不会导致大材小用呢?就是每一个页面都要加载一遍可能要用的框架和库,但实际上这个页面的实现只会用到一小部分,这样无形中就会拖慢速度或者是造成用户的流量浪费.这种问题要怎么解决呢?  没有开发经验啊,这种优化问题有点想不明白. 今天的练习需要一个可以用于点击图片放大图片以及用于替代系统自带的alert的遮罩层写了如下的js模块.方便在项目中直接调用. 下面是html部分的代码.只是在button的onclick事