模块化开发

什么是模块化开发?

在前端开发中,起初只要在script标签中嵌入几十上百行代码就能实现一些基本的交互效果,后来js得到重视,应用也广泛起来,jQuery,Ajax,Node.js,MVC,MVVM等的助力也使得前端的开发得到重视,也使得前端的项目越来越复杂,然而,javascript却没有为阻止代码提供任何明显的帮助,甚至没有类的概念,更不用说模块化了,那么究竟什么是模块化开发那?

模块化开发

一个模块是实现特定功能的文件,有了模块,我们就可以更方便的使用别人的代码,想要什么功能,就天津爱什么模块。模块开发需要遵循一定的规范,否则就全乱套了,那么我们就需要使用amd规范,我们根据amd规范,使用defined定义模块,使用require调用模块,目前,通行的js模块规范主要有两种:CommonJS和AMD

 

AMD规范

AMD即Asynchronous Module Definition,中文名是“异步模块定义”的意思,它是一个浏览器模块化开发的规范,服务器端的规范是CommonJS

模块将被异步加载,模块加载不影响后面语句的运行,所有依赖某些模块的语句均放置在回调函数中

AMD是RequiredJS在推广的过程中对模块定义的规范的产生

 

CommonJS规范

CommonJS是服务器端模块的规范,Node.js采用了这个规范,Node.js首先采用了js模块化的概念

根据CommonJS规范,一个单独的文件就是一个模块,每一个模块都是一个单独的作用域,也就是说,在该模块内部定义的变量,无法被其它模块读取,除非定义为global对象的属性

CommonJS是node的规范,运行在服务器端,不是浏览器端,如果使用在浏览器端,需要使用对该文件进行打包编译(借鉴工具browserify,webpack,gulp...

输出模块变量的最好的方法是使用exports.xxx=...,但是还有一种方法module.exports={}

最好使用第一种方法,第一种方法,可以添加多个对象,而第二种方法的添加会后者覆盖前者

 

引入模块require(路径)

commonJS是node的规范,但他是同步加载的,同步加载在浏览器端是一个坑,只要有一个环节卡住了,后面的就没法执行了,所以不建议使用,如果非要使用就需要编辑打包

 

web端

每个js都是一个模块,每个模块都必须有一个暴露接口,每个js文件有一个全局的方法叫require()用于引入模块

 

上一篇:开发模式


下一篇:javascript – 花括号内的变量启动