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模块加载器
js模块开发(一)的更多相关文章
- js模块开发
js模块开发(一) 现在嵌入页面里面的javascript代码越来越复杂,于是可能依赖也越来越严重,使用别人开发的js也越来越多,于是在理想情况下,我们只需要实现核心的业务逻辑,其他都可以加载别人已经 ...
- js 模块开发之一(模块开发价值)
首先引用我们的今天的主角 ----<前端模块化开发的价值> 1,前端开发最常见的两个问题 ---命名冲突和文件依赖 2,对于命名冲突的基本解决办法就是学习其他语言的习惯,添加命名空间 va ...
- Developer - 如何自我保证Node.js模块质量
组里正在做SaaS产品,其中一些模块(Module)是Node.js实现,这里我们主要使用Node.js实现Web Server来提供服务. 在做SaaS项目之前,组里的开发模式是传统的Deverlo ...
- JS模块式开发
问题:js文件须严格保证加载顺序(比如上例的1.js要在2.js的前面),依赖性最大的模块一定要放到最后加载,当依赖关系很复杂的时候,代码的编写和维护都会变得困难! C语言中模块开发-include ...
- JS模块化开发:使用SeaJs高效构建页面
一.扯淡部分 很久很久以前,也就是刚开始接触前端的那会儿,脑袋里压根没有什么架构.重构.性能这些概念,天真地以为前端===好看的页面,甚至把js都划分到除了用来写一些美美的特效别无它用的阴暗角落里,就 ...
- electron之Windows下使用 html js css 开发桌面应用程序
1.atom/electron github: https://github.com/atom/electron 中文文档: https://github.com/atom/electron/tree ...
- seajs实现JavaScript 的 模块开发及按模块加载
seajs实现了JavaScript 的 模块开发及按模块加载.用来解决繁琐的js命名冲突,文件依赖等问题,其主要目的是令JavaScript开发模块化并可以轻松愉悦进行加载. 官方文档:http:/ ...
- 第三课:sea.js模块加载原理
模块加载,其实就是把js分成很多个模块,便于开发和维护.因此加载很多js模块的时候,需要动态的加载,以便提高用户体验. 在介绍模块加载库之前,先介绍一个方法. 动态加载js方法: function l ...
- DNN模块开发之利器篇:七种武器
我们在进行DNN模块开发时经常需要调用Dotnetnuke.dll中的方法函数,模块开发用到DNN的方法函数会让你的开发更加得心应手,下面我们就来介绍一下. 1) PortalModuleBase ...
随机推荐
- 线程安全的无锁RingBuffer的实现
这里的线程安全,是指一个读线程和一个写线程,读写两个线程是安全的,而不是说多个读线程和多个写线程是安全的.. 在程序设计中,我们有时会遇到这样的情况,一个线程将数据写到一个buffer中,另外一个线程 ...
- A:手把手教Wordpress仿站(基础)
安装源码 需要服务器有php环境(PHP,Mysql,Apeach/Ngnax) 我用的主机宝(环境一键安装工具) 打开后台突然出现这种情况 Briefly unavailable for sch ...
- 超酷jQuery进度条加载动画集合
在丰富多彩的网页世界中,进度条加载动画的形式非常多样,有利用gif图片实现的loading动画,也有利用jQuery和CSS3实现的进度加载动画,本文主要向大家介绍很多jQuery和CSS3实现的进度 ...
- linuxmint 17安装scim输入法
安装输入法框架: sudo apt-get install scim 安装输入法: sodu apt-get install scim-pinyin 此时启动的输入法的候选词框不随着光标移动,需要安装 ...
- 配置SQL server远程连接(局域网)
具体步骤: 1) 2) 3) 4) 5) 6) 7) 最后为了防火墙有影响,直接把防火关了,测试连接通过在来设置防火墙.
- Windows 7安装解压版MySQL 5.6(不包含配置文件优化)
到官网下载MySQL5.6 下载地址:http://dev.mysql.com/downloads/mysql/5.6.html, 提供了 .exe版本 和 .zip解压版,因为我的操作系统是64位的 ...
- 【Network】Calico, Flannel, Weave and Docker Overlay Network 各种网络模型之间的区别
From the previous posts, I have analysed 4 different Docker multi-host network solutions - Calico, F ...
- Java Swing
参考帖子http://chenchaobox.blog.163.com/blog/static/6043759020127845945569/ http://wenku.baidu.com/link? ...
- 在linux中减小和增大LV的过程与思考
今天在安装oracle 11 rac的时候,查看操作系统df -lh,发现/home目录竟然分了500多G,/根目录才有50G,当时我就爆了句粗口,这TM系统是怎么做的. Filesystem ...
- 关于 iOS 加密的一些详谈
iOS 加密算法有那么几种,如 md5,sha1,AES,base64 和 rsa 等. 1. md5: MD5即Message-Digest Algorithm 5(信息-摘要算法5),用于确保信息 ...