浅谈javascript - 模块化规范

一,JS模块化演变过程

1.普通函数封装

1 function fn1(){
2
3 }
4
5 function fn2(){
6
7 }

最初的这种普通函数封装的缺点很明显:污染了全局变量,无法避免的会与其他模块发生变量名冲突,而且自身模块成员之间没有任何联系,,说白了就是没有做到“高内聚,低耦合”原则

2.对象

 1 var myModule = {
 2     var1: 1,
 3     var2: 2,
 4     fn1: function(){
 5
 6     },
 7     fn2: function(){
 8
 9     }
10 }

技术一直在进步,这种做法的避免了变量污染,只要保证模块名唯一即可,自身模块内的成员也有了联系;

但是新的问题出现了,看似不错的解决方案,也有缺陷,外部可以随意修改内部成员;

如:myModel.val = 100;  说白了就是产生了安全问题

3.立即执行函数

 1 var myModule = (function(){
 2     var var1 = 1;
 3     var var2 = 2;
 4     function fn1(){
 5
 6     }
 7     function fn2(){
 8
 9     }
10     return {
11         fn1: fn1, fn2: fn2
12     };
13 })();

这种做法就是我们JS模块化的基础,技术永无止境,随着JS模块化技术提高,产生了不同流派,分支;其中主要有两种:CommonJS和AMD

二,CommonJS

1.定义模块:

根据CommonJS规范,一个单独的文件为一个模块,每个模块是一个单独的作用域,即在自身模块内部定义的变量,其他模块无法读取,除非是定义为global对象的属性

2.模块输出:

每个模块只有一个出口,即module.exports对象,我们需要把模块希望输出的内容放入该对象

3.加载模块:

加载模块使用require方法,该方法读取一个文件并执行,返回文件内部的module.exports对象

 1 //模块定义
 2 myModel.js
 3 var name = ‘Byron‘;
 4 function printName(){
 5     console.log(name);
 6 }
 7 function printFullName(firstName){
 8     console.log(firstName + name);
 9 }
10 module.exports = {
11     printName: printName,
12     printFullName: printFullName
13 }
14 //加载模块
15 var nameModule = require(‘./myModel.js‘);
16 nameModule.printName();

不同的实现对require时的路径有不同要求,一般情况可以省略js拓展名,可以使用相对路径,也可以使用绝对路径,甚至可以省略路径直接使用模块名(前提是该模块是系统内置模块)

问题:

仔细看上面的代码,会发现require是同步的。模块系统需要同步读取模块文件内容,并编译执行以得到模块接口。

这在服务器端实现很简单,也很自然,然而, 想在浏览器端实现问题却很多。

浏览器端,加载JavaScript最佳、最容易的方式是在document中插入script 标签。但脚本标签天生异步,传统CommonJS模块在浏览器环境中无法正常加载。

解决思路之一是,开发一个服务器端组件,对模块代码作静态分析,将模块与它的依赖列表一起返回给浏览器端。 这很好使,但需要服务器安装额外的组件,并因此要调整一系列底层架构。

另一种解决思路是,用一套标准模板来封装模块定义,但是对于模块应该怎么定义和怎么加载,又产生的分

三,AMD

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

由于不是JavaScript原生支持,使用AMD规范进行页面开发需要用到对应的库函数,也就是大名鼎鼎RequireJS,实际上AMD 是 RequireJS 在推广过程中对模块定义的规范化的产出。

requireJS主要解决两个问题

1.多个js文件可能有依赖关系,被依赖的文件需要早于依赖它的文件加载到浏览器

2.js加载的时候浏览器会停止页面渲染,加载文件越多,页面失去响应时间越长

语法

requireJS定义了一个函数 define,它是全局变量,用来定义模块。

define(id?, dependencies?, factory);

id:可选参数,用来定义模块的标识,如果没有提供该参数,脚本文件名(去掉拓展名);

dependencies:是一个当前模块依赖的模块名称数组

factory:工厂方法,模块初始化要执行的函数或对象。如果为函数,它应该只被执行一次。如果是对象,此对象应该为模块的输出值;

 1 // 定义模块
 2 myModule.js
 3 define([‘dependency‘], function(){
 4     var name = ‘xlw‘;
 5     function printName(){
 6         console.log(name);
 7     }
 8     return {
 9         printName: printName
10     };
11 });
12 // 加载模块
13 require([‘myModule‘], function (my){
14     my.printName();
15 });

在页面上使用require函数加载模块

1 require([dependencies], function(){
2
3 });

require()函数接受两个参数

第一个参数是一个数组,表示所依赖的模块

第二个参数是一个回调函数,当前面指定的模块都加载成功后,它将被调用。加载的模块会以参数形式传入该函数,从而在回调函数内部就可以使用这些模块

require()函数在加载依赖的函数的时候是异步加载的,这样浏览器不会失去响应,它指定的回调函数,只有前面的模块都加载成功后,才会运行,解决了依赖性的问题。

敬请留言指正补充

(完~~)

时间: 2024-11-14 13:14:37

浅谈javascript - 模块化规范的相关文章

浅谈 JavaScript 编程语言的编码规范

对于熟悉 C/C++ 或 Java 语言的工程师来说,JavaScript 显得灵活,简单易懂,对代码的格式的要求也相对松散.很容易学习,并运用到自己的代码中.也正因为这样,JavaScript 的编码规范也往往被轻视,开发过程中修修补补,最终也就演变成为后续维护人员的恶梦.软件存在的长期价值直接与编码的质量成比例.编码规范能帮助我们降低编程中不必要的麻烦.而 JavaScript 代码是直接发送给客户浏览器的,直接与客户见面,编码的质量更应该受到关注. 本文浅谈 JavaScript 编程中关

《浅谈JavaScript系列》系列技术文章整理收藏

<浅谈JavaScript系列>系列技术文章整理收藏 1浅谈JavaScript中面向对象技术的模拟 2浅谈javascript函数劫持[转自xfocus]第1/3页 3浅谈javascript 面向对象编程 4老鱼 浅谈javascript面向对象编程 5浅谈javascript的数据类型检测 6浅谈Javascript嵌套函数及闭包 7根据一段代码浅谈Javascript闭包 8浅谈JavaScript编程语言的编码规范 9浅谈Javascript面向对象编程 10浅谈JavaScript

浅谈javascript单体【读javascript设计模式第五章节单体有感】

单体,整个运行环境就独有一份,最简单的一种单体就是一个把所有属性和方法都集中在一起的对象,区别于一般的字面量对象,一般字面量对象是对一个物体的描述,集合该物体所具有的一些属性和方法,而单体则包含更多的些逻辑在里面,单体的好处有,划分命名空间,如果用来作为网页包装器,可以使得页面所有变量都封装在一个对象里,大幅度减小网页里的全局变量, 代码如: common.js (function(wz){ $.extend({ init:function(){ var self = this; this.bi

JavaScript模块化规范

JavaScript模块化规范主要遵循CommonJS和AMD规范. CommonJS规范-服务器端JavaScript规范 Node.js是一个服务器端JavaScript项目,采用了CommonJS标准实现其模块系统. CommonJS中采用一个全局require方法来加载模块,主要由原生模块module来实现和完成,该模块在启动时已经被加载. 模块主要分为两类:原生模块,文件模块. 1.原生模块 原生模块也是Node.js中最核心的模块.原生模块在Node.js源代码编译的时候编译进了二进

浅谈javascript继承【读javascript设计模式第四章节继承有感】

javascript继承,无任是类式继承,原型式继承还是渗元式继承都是通过不同方法去围绕着prototype转,简单分析下三种不同继承方法是如何围绕prototype转的 一:类似继承,先上关键代码 function extend(subClass,supClass){ var fn = function(){}; fn.prototype = supClass.prototype; subClass.prototype = new fn(); subClass.prototype.constr

浅谈javascript函数劫持

http://www.xfocus.net/articles/200712/963.html 浅谈javascript函数劫持 文章提交:hkluoluo (luoluonet_at_hotmail.com) by luoluo on 2007-11-30 luoluonet_at_yahoo.cn http://www.ph4nt0m.org 一.概述 javascript函数劫持,也就是老外提到的javascript hijacking技术.最早还是和剑心同学讨论问题时偶然看到的一段代码,大

浅谈JavaScript中的原型模式

在JavaScript中创建对象由很多种方式,如工厂模式.构造函数模式.原型模式等: <pre name="code" class="html">//工厂模式 function createPerson(name,age,job) { var o = new Object; o.name = name; o.age = age; o.job = job; o.sayName = function() { alert(this.name); } retur

浅谈javascript的原型及原型链

浅谈javascript的原型及原型链 这里,我们列出原型的几个概念,如下: prototype属性 [[prototype]] __proto__ prototype属性 只要创建了一个函数,就会为该函数创建一个prototype属性,指向该函数的原型对象.实例对象是不会拥有该属性的.默认情况下,该原型对象也会获得一个constructor属性,该属性包含一个指针,指向prototype属性所在的函数. Person.prototype.constructor===Person [[proto

浅谈JavaScript运行机制

浅谈JavaScript运行机制 ? 想要了解一门语言,最好的办法就是了解它的运行机制.掌握了运行机制,能够让我们在开发中少走许多弯路,写出高质量的代码.本文简单介绍什么是JavaScript的运行机制,给刚刚接触JavaScript的小白一个初步的了解,为将来打好基础. 一.JavaScript 代码运行分两个阶段: 1.预解析---把所有的函数定义提前,所有的变量声明提前,变量的赋值不提前 2.执行---从上到下执行(按照js运行机制) 二.JavaScript运行机制的特点 1.JavaS