基于RequireJS和JQuery的模块化编程日常问题解析

首页

web前端

js教程

基于RequireJS和JQuery的模块化编程日常问题解析_javascript技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:05 PM

由于js的代码逻辑越来越重，一个js文件可能会有上千行，十分不利于开发与维护。最近正在把逻辑很重的js拆分成模块，在一顿纠结是使用requirejs还是seajs的时候，最终还是偏向于requirejs。毕竟官方文档比较专业嘛...

不过即便是有完整的官方文档，仍然遇到不少的问题，比如jquery-ui的使用。

下面就循序渐进的讲解一下我遇到的问题，以及解决的办法。

关于AMD和CMD的理解

AMD（异步模块定义）的典型就是requirejs，而CMD（通用模块定义）的典型是淘宝的seajs。

他们的相同点是，都会异步的加载js。但是不同点是，require.js加载完会立即执行；而seajs则是等到进入主函数需要执行时才执行。

如果使用seajs初始的加载执行效率会比较高，但是在使用的过程中可能会取执行js，因此可能会出现卡顿，影响用户体验（由于我也没试过，要是说错了，别见怪）。而requirejs则是在一开始就把所有加载的js都执行，这时，如果你的模块中有一些执行方法，它们可能并不会按照你想的顺序执行。

因此，如果已经习惯了异步编程，并且希望有完善的文档推荐使用requirejs；如果是想对执行顺序有特殊要求，又方便开发，那么也可以使用seajs。

如何解决requirejs中循环依赖问题

如果你定义的某个a模块使用到了b模块，而b模块又使用了a模块，那么就会抛出循环依赖的异常。

比如，我这里写了一个循环依赖的例子。

主页面：

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script data-main="test.js" src="lib/require.js"></script>
</body>
</html>

主方法：

requirejs.config({
baseUrl: './'
});
requirejs(['js/a'],function (a){
console.log("in test");
a.testfromb();
});

a.js模块中，atest()方法提供b调用、testfromb()方法调用b的方法

define(function(require){
var b = require("js/b");
console.log("in a");
return {
atest:function(){
console.log("test in a");
},
testfromb:function(){
console.log("testfromb in a");
b.btest();
}
}
});

b模块中，调用了a的方法。

define(function(require){
var a = require("js/a");
console.log("in b");
return {
btest:function(){
console.log("test in b");
a.atest();
}
}
});

这样相当于a调用了b的方法，但是b的方法依赖于a的方法，这就造成了循环依赖。浏览器会提示错误：

Uncaught Error: Module name "js/a" has not been loaded yet for context: _

按照官方文档的说法，这种属于设计的问题，应该尽量避免。那么如果避免不了该怎么办呢？可以这样修改b模块：

define(function(require){
// var a = require("js/a");
console.log("in b");
return {
btest:function(){
console.log("test in b");
require("js/a").atest();
}
}
});

这里是等到执行atest()方法时，才加载a模块。这时，a模块很显然已经加载完了。可以看到输出的信息：

in b
a.js:3 in a
test.js:6 in test
a.js:9 testfromb in a
b.js:6 test in b
a.js:6 test in a

同样的方式，修改a可能就不好使了。这时因为模块加载的顺序是从b开始的。

关于循环依赖的源码可以参考云盘

如何在requirejs中使用jquery

如果想要使用jquery比较简单，直接在main.js中添加对应的依赖即可：

requirejs.config({
baseUrl: './',
paths:{
'jquery':'lib/jquery'
}
});
requirejs(['jquery'],
function ($){
$('#test').html('test');
});

如何在requirejs中使用jquery插件

对于jquery的插件，比较常见的做法都是传入一个jquery的对象，在这个jquery对象的基础上添加插件对应的方法。

首先需要添加jquery插件的依赖，这里用两个插件举例子——jquery-ui和jquery-datatables

requirejs.config({
baseUrl: './',
paths:{
'jquery':'lib/jquery',
'jquery-ui':'lib/jquery-ui',
'jquery-dataTables':'lib/jquery.dataTables'
},
shim:{
'jquery-ui':['jquery'],
'jquery-dataTables':['jquery']
}
});
requirejs(['jquery','jquery-ui','jquery-dataTables'],
function ($){
....
});

由于jquery插件都需要依赖于jquery，因此可以在shim中指定依赖关系。

除了上面这种使用方法，也可以使用commonJS风格的调用：

define(function(require){
var $ = require('jquery');
require('jquery-ui');
require('jquery-dataTables');
//下面都是测试，可以忽略
var _test = $('#test');
_test.selectmenu({
width : 180,
change : function(event, ui) {
console.log('change');
}
});
return {
test:function(){
//测试jquery-ui
_test.append($('<option>test1</option><option>test1</option>'));
_test.selectmenu("refresh");
//测试jquery-datatables
var _table = $('table');
_table.dataTable();
}
}
});

不过，执行上面的代码，会报一个异常：

Uncaught TypeError: _table.dataTable is not a function

这是因为，dataTables并不是一个require风格的模块，因此直接这样引入，并不会执行它内部的匿名函数。可以修改它的匿名函数，传入$对象，在最后一行：

*/
return $.fn.dataTable;
//}));原来是这样
}($)));//这里增加执行这个匿名函数，并且传入$对象。
}(window, document));

Dies ist auch eine Methode zur Suche im Internet, das Prinzip beruht jedoch auf mangelnder Erfahrung....

Sie können den Beispielcode auf der Cloud-Festplatte nachlesen. Da die importierten Ressourcen nicht vollständig sind, wird ein Fehler gemeldet und kann ignoriert werden. Denn die Ausführung des UI-Plug-Ins bedeutet, dass es erfolgreich war.

Probleme bei der Verwendung von jquery-ui mit requirejs

Da requirejs unmittelbar nach dem Laden der js-Datei ausgeführt wird, kann es dazu führen, dass die Ereignisse der Seite fehlschlagen, wenn Ihr JQuery-UI-Plug-in die DOM-Seite aktualisieren muss.

Nachdem Ihr Modul beispielsweise geladen wurde, ist ein Klickereignis an ein bestimmtes Element $('#test') auf der Seite gebunden. Wenn jedoch ein bestimmtes UI-Plug-in verwendet wird, rendert dieses Plug-in das DOM-Element neu und das dem Test entsprechende Klickereignis wird ungültig.

Lösung:

•Verzögern Sie die Ereignisbindung, bis das DOM-Element gerendert ist, und lösen Sie dann die Bindung manuell aus •Ereigniserfassung kann auch anstelle der Ereignisbindung von DOM-Elementen verwendet werden (zu mühsam...nicht empfohlen).

Im DOM-rekonstruierten JS-Modul lautet der Code, der das Rendern ausführt, beispielsweise wie folgt:

require("xxx").initEvents();

Häufige Szenarien:

Zum Beispiel verwende ich das jquery-steps-UI-Plug-in auf der Seite, das die Seite neu rendert. Dies führte dazu, dass die Ereignisse, die ich ursprünglich gebunden hatte, ungültig wurden. Ich konnte die Bindung nur verschieben, bis die js-Seite wiederhergestellt war, und dann erneut binden.

Das Obige ist die vollständige Beschreibung der Analyse der täglichen Probleme bei der modularen Programmierung mit RequireJS und JQuery. Ich hoffe, dass sie für alle hilfreich ist!

声明

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

在JavaScript中替换字符串字符Mar 11, 2025 am 12:07 AM

JavaScript字符串替换方法详解及常见问题解答本文将探讨两种在JavaScript中替换字符串字符的方法：在JavaScript代码内部替换和在网页HTML内部替换。在JavaScript代码内部替换字符串最直接的方法是使用replace()方法： str = str.replace("find","replace"); 该方法仅替换第一个匹配项。要替换所有匹配项，需使用正则表达式并添加全局标志g： str = str.replace(/fi

构建您自己的Ajax Web应用程序Mar 09, 2025 am 12:11 AM

因此，在这里，您准备好了解所有称为Ajax的东西。但是，到底是什么？ AJAX一词是指用于创建动态，交互式Web内容的一系列宽松的技术。 Ajax一词，最初由Jesse J创造

如何创建和发布自己的JavaScript库？Mar 18, 2025 pm 03:12 PM

文章讨论了创建，发布和维护JavaScript库，专注于计划，开发，测试，文档和促销策略。

如何在浏览器中优化JavaScript代码以进行性能？Mar 18, 2025 pm 03:14 PM

本文讨论了在浏览器中优化JavaScript性能的策略，重点是减少执行时间并最大程度地减少对页面负载速度的影响。

如何使用浏览器开发人员工具有效调试JavaScript代码？Mar 18, 2025 pm 03:16 PM

本文讨论了使用浏览器开发人员工具的有效JavaScript调试，专注于设置断点，使用控制台和分析性能。

jQuery矩阵效果Mar 10, 2025 am 12:52 AM

将矩阵电影特效带入你的网页！这是一个基于著名电影《黑客帝国》的酷炫jQuery插件。该插件模拟了电影中经典的绿色字符特效，只需选择一张图片，插件就会将其转换为充满数字字符的矩阵风格画面。快来试试吧，非常有趣！工作原理插件将图片加载到画布上，读取像素和颜色值： data = ctx.getImageData(x, y, settings.grainSize, settings.grainSize).data 插件巧妙地读取图片的矩形区域，并利用jQuery计算每个区域的平均颜色。然后，使用

如何构建简单的jQuery滑块Mar 11, 2025 am 12:19 AM

本文将引导您使用jQuery库创建一个简单的图片轮播。我们将使用bxSlider库，它基于jQuery构建，并提供许多配置选项来设置轮播。如今，图片轮播已成为网站必备功能——一图胜千言！决定使用图片轮播后，下一个问题是如何创建它。首先，您需要收集高质量、高分辨率的图片。接下来，您需要使用HTML和一些JavaScript代码来创建图片轮播。网络上有很多库可以帮助您以不同的方式创建轮播。我们将使用开源的bxSlider库。 bxSlider库支持响应式设计，因此使用此库构建的轮播可以适应任何