0

0

详解JavaScript模块化开发

黄舟

黄舟

发布时间:2017-02-21 11:57:56

|

1713人浏览过

|

来源于php中文网

原创


什么是模块化开发?

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

一个模块就是实现特定功能的文件,有了模块,我们就可以更方便地使用别人的代码,想要什么功能,就加载什么模块。模块开发需要遵循一定的规范,否则就都乱套了。

根据AMD规范,我们可以使用define定义模块,使用require调用模块。

目前,通行的js模块规范主要有两种:CommonJS和AMD。

AMD规范

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

立即学习Java免费学习笔记(深入)”;

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

AMD 是 RequireJS 在推广过程中对模块定义的规范化的产出。

define() 函数

AMD规范只定义了一个函数 define,它是全局变量。函数的描述为:

define(id?, dependencies?, factory);

参数说明:

id:指定义中模块的名字,可选;如果没有提供该参数,模块的名字应该默认为模块加载器请求的指定脚本的名字。如果提供了该参数,模块名必须是“顶级”的和绝对的(不允许相对名字)。

依赖dependencies:是一个当前模块依赖的,已被模块定义的模块标识的数组字面量。
依赖参数是可选的,如果忽略此参数,它应该默认为["require", "exports", "module"]。然而,如果工厂方法的长度属性小于3,加载器会选择以函数的长度属性指定的参数个数调用工厂方法。

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

模块名的格式

模块名用来唯一标识定义中模块,它们同样在依赖性数组中使用:

模块名是用正斜杠分割的有意义单词的字符串
单词须为驼峰形式,或者".",".."
模块名不允许文件扩展名的形式,如“.js”
模块名可以为 "相对的" 或 "顶级的"。如果首字符为“.”或“..”则为相对的模块名
顶级的模块名从根命名空间的概念模块解析
相对的模块名从 "require" 书写和调用的模块解析

使用 require 和 exports

创建一个名为"alpha"的模块,使用了require,exports,和名为"beta"的模块:

 define("alpha", ["require", "exports", "beta"], function (require, exports, beta) {
       exports.verb = function() {
           return beta.verb();
           //Or:
           return require("beta").verb();
       }
   });

require API 介绍: http://www.php.cn/

AMD规范中文版:http://www.php.cn/(%E4%B8%AD%E6%96%87%E7%89%88)

目前,实现AMD的库有RequireJS 、curl 、Dojo 、Nodules 等。

CommonJS规范

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

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

输出模块变量的最好方法是使用module.exports对象。

var i = 1;
var max = 30;

module.exports = function () {
  for (i -= 1; i++ < max; ) {
    console.log(i);
  }
  max *= 1.1;
};

上面代码通过module.exports对象,定义了一个函数,该函数就是模块外部与内部通信的桥梁。

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

CommonJS 规范:http://www.php.cn/

RequireJS和SeaJS

RequireJS由James Burke创建,他也是AMD规范的创始人。

define方法用于定义模块,RequireJS要求每个模块放在一个单独的文件里。

RequireJS 和 Sea.js 都是模块加载器,倡导模块化开发理念,核心价值是让 JavaScript 的模块化开发变得简单自然。

SeaJS与RequireJS最大的区别:

SeaJS对模块的态度是懒执行, 而RequireJS对模块的态度是预执行

不明白?看这篇图文并茂的文章吧:http://www.php.cn/

RequireJS API:http://www.php.cn/

RequireJS的用法:http://www.php.cn/

去日租网站系统
去日租网站系统

去日租程序是一款具有强大的功能的基于.NET+SQL2000+AJAX构架的房屋出租管理系统。 日租网站管理系统,采用ASP.NET2.0语言开发,它集成租房模块、文章模块、订单模块、邮箱短信模块、用户模板、SEO优化模块、房间模块、支付模块等多项强大功能。系统有多年经验的高级工程师采用三层架构开发,页面代码全部采用DIV+CSS,完全符合SEO标准,有利于搜索引擎关键排名优化。日租网站

下载

为什么要用requireJS

试想一下,如果一个网页有很多的js文件,那么浏览器在下载该页面的时候会先加载js文件,从而停止了网页的渲染,如果文件越多,浏览器可能失去响应。其次,要保证js文件的依赖性,依赖性最大的模块(文件)要放在最后加载,当依赖关系很复杂的时候,代码的编写和维护都会变得困难。

RequireJS就是为了解决这两个问题而诞生的:

(1)实现js文件的异步加载,避免网页失去响应;
(2)管理模块之间的依赖性,便于代码的编写和维护。

RequireJS文件下载:http://www.php.cn/

AMD和CMD

CMD(Common Module Definition) 通用模块定义。该规范明确了模块的基本书写格式和基本交互规则。该规范是在国内发展出来的。AMD是依赖关系前置,CMD是按需加载。

在 CMD 规范中,一个模块就是一个文件。代码的书写格式如下:

define(factory);

factory 为函数时,表示是模块的构造方法。执行该构造方法,可以得到模块向外提供的接口。factory 方法在执行时,默认会传入三个参数:require、exports 和 module:

define(function(require, exports, module) {

  // 模块代码

});

require是可以把其他模块导入进来的一个参数,而export是可以把模块内的一些属性和方法导出的。

CMD规范地址:http://www.php.cn/

AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。
CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。

对于依赖的模块,AMD 是提前执行,CMD 是延迟执行。

AMD:提前执行(异步加载:依赖先执行)+延迟执行
CMD:延迟执行(运行到需加载,根据顺序执行)

CMD 推崇依赖就近,AMD 推崇依赖前置。看如下代码:

// CMD
define(function(require, exports, module) {
var a = require('./a')
a.doSomething()
// 此处略去 100 行
var b = require('./b') // 依赖可以就近书写
b.doSomething()
// ... 
})

// AMD 默认推荐的是
define(['./a', './b'], function(a, b) { // 依赖必须一开始就写好
a.doSomething()
// 此处略去 100 行
b.doSomething()
...
})

另外一个区别是:

AMD:API根据使用范围有区别,但使用同一个api接口
CMD:每个API的职责单一

AMD的优点是:异步并行加载,在AMD的规范下,同时异步加载是不会产生错误的。
CMD的机制则不同,这种加载方式会产生错误,如果能规范化模块内容形式,也可以

jquery1.7以上版本会自动模块化,支持AMD模式:主要是使用define函数,sea.js虽然是CommonJS规范,但却使用了define来定义模块
所以jQuery已经自动模块化了

seajs.config({

'base':'/',

'alias':{

    'jquery':'jquery.js'//定义jQuery文件

}
});

define函数和AMD的define类似:

define(function(require, exports, module{

     //先要载入jQuery的模块

     var $ = require('jquery');

     //然后将jQuery对象传给插件模块

     require('./cookie')($);

     //开始使用 $.cookie方法

});

sea.js如何使用?

  • 引入sea.js的库

  • 如何变成模块?

    • define

  • 3.如何调用模块?

         -exports
         -sea.js.use
  • 4.如何依赖模块?

         -require
    
    
    
    
    
    
    
    

    A同事

    //A同事写的main.js:
    
    define(function (require,exports,module) {
        var oInput = document.getElementById('input1');
        var op1 = document.getElementById('p1');
        var op2 = document.getElementById('p2');
        var op3 = document.getElementById('p3');
    
        require('./drag.js').drag(op3);
        oInput.onclick = function () {
            op1.style.display = 'block';
            require('./scale.js').scale(op1,op2);
    
            require.async('./scale.js', function (ex) {
                ex.scale(op1,op2);
            })
        }
    });

    B同事

    //B同事写的drag.js:
    
    define(function(require,exports,module){
        
        function drag(obj){
            var disX = 0;
            var disY = 0;
            obj.onmousedown = function(ev){
                var ev = ev || window.event;
                disX = ev.clientX - obj.offsetLeft;
                disY = ev.clientY - obj.offsetTop;
                
                document.onmousemove = function(ev){
                    var ev = ev || window.event;
    
    
                     var L = require('./range.js').range(ev.clientX - disX , document.documentElement.clientWidth - obj.offsetWidth , 0 );
                     var T = require('./range.js').range(ev.clientY - disY , document.documentElement.clientHeight - obj.offsetHeight , 0 );
    
                    
                    obj.style.left = L + 'px';
                    obj.style.top = T + 'px';
                };
                document.onmouseup = function(){
                    document.onmousemove = null;
                    document.onmouseup = null;
                };
                return false;
            };
        }
        
        exports.drag = drag;//对外提供接口
        
    });

    C同事

    //C同事写的scale.js:
    
    define(function(require,exports,module){
        
        
        function scale(obj1,obj2){
            var disX = 0;
            var disY = 0;
            var disW = 0;
            var disH = 0;
            
            obj2.onmousedown = function(ev){
                var ev = ev || window.event;
                disX = ev.clientX;
                disY = ev.clientY;
                disW = obj1.offsetWidth;
                disH = obj1.offsetHeight;
                
                document.onmousemove = function(ev){
                    var ev = ev || window.event;
                    
                    var W = require('./range.js').range(ev.clientX - disX + disW , 500 , 100);
                    var H = require('./range.js').range(ev.clientY - disY + disH , 500 , 100);
                    
                    obj1.style.width = W + 'px';
                    obj1.style.height = H + 'px';
                };
                document.onmouseup = function(){
                    document.onmousemove = null;
                    document.onmouseup = null;
                };
                return false;
            };
            
        }
        
        exports.scale = scale;
        
    });

    D同事

    // D同事的range.js--限定拖拽范围
    
        define(function(require,exports,module){
            
            function range(iNum,iMax,iMin){
                
                if( iNum > iMax ){
                    return iMax;
                }
                else if( iNum < iMin ){
                    return iMin;
                }
                else{
                    return iNum;
                }
                
            }
            
            exports.range = range;
            
        });

    requirejs开发实例

    require.config是用来定义别名的,在paths属性下配置别名。然后通过requirejs(参数一,参数二);参数一是数组,传入我们需要引用的模块名,第二个参数是个回调函数,回调函数传入一个变量,代替刚才所引入的模块。

    main.js文件

    //别名配置
    requirejs.config({
        paths: {
            jquery: 'jquery.min' //可以省略.js
        }
    });
    //引入模块,用变量$表示jquery模块
    requirejs(['jquery'], function ($) {
        $('body').css('background-color','red');
    });

    引入模块也可以只写require()。requirejs通过define()定义模块,定义的参数上同。在此模块内的方法和变量外部是无法访问的,只有通过return返回才行.

    define 模块

    define(['jquery'], function ($) {//引入jQuery模块
        return {
            add: function(x,y){
                return x + y;
            }
        };
    });

    将该模块命名为math.js保存。

    main.js引入模块方法

    require(['jquery','math'], function ($,math) {
        console.log(math.add(10,100));//110
    });

    没有依赖

    如果定义的模块不依赖其他模块,则可以:

    define(function () {
    
        return {
            name: "trigkit4",
            age: "21"
        }
    });

    AMD推荐的风格通过返回一个对象做为模块对象,CommonJS的风格通过对module.exports或exports的属性赋值来达到暴露模块对象的目的。

    以上就是详解JavaScript模块化开发的内容,更多相关内容请关注PHP中文网(www.php.cn)!

相关文章

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
c++ 根号
c++ 根号

本专题整合了c++根号相关教程,阅读专题下面的文章了解更多详细内容。

57

2026.01.23

c++空格相关教程合集
c++空格相关教程合集

本专题整合了c++空格相关教程,阅读专题下面的文章了解更多详细内容。

57

2026.01.23

yy漫画官方登录入口地址合集
yy漫画官方登录入口地址合集

本专题整合了yy漫画入口相关合集,阅读专题下面的文章了解更多详细内容。

237

2026.01.23

漫蛙最新入口地址汇总2026
漫蛙最新入口地址汇总2026

本专题整合了漫蛙最新入口地址大全,阅读专题下面的文章了解更多详细内容。

393

2026.01.23

C++ 高级模板编程与元编程
C++ 高级模板编程与元编程

本专题深入讲解 C++ 中的高级模板编程与元编程技术,涵盖模板特化、SFINAE、模板递归、类型萃取、编译时常量与计算、C++17 的折叠表达式与变长模板参数等。通过多个实际示例,帮助开发者掌握 如何利用 C++ 模板机制编写高效、可扩展的通用代码,并提升代码的灵活性与性能。

17

2026.01.23

php远程文件教程合集
php远程文件教程合集

本专题整合了php远程文件相关教程,阅读专题下面的文章了解更多详细内容。

103

2026.01.22

PHP后端开发相关内容汇总
PHP后端开发相关内容汇总

本专题整合了PHP后端开发相关内容,阅读专题下面的文章了解更多详细内容。

73

2026.01.22

php会话教程合集
php会话教程合集

本专题整合了php会话教程相关合集,阅读专题下面的文章了解更多详细内容。

81

2026.01.22

宝塔PHP8.4相关教程汇总
宝塔PHP8.4相关教程汇总

本专题整合了宝塔PHP8.4相关教程,阅读专题下面的文章了解更多详细内容。

70

2026.01.22

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 4.1万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 2.4万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号