5
What’s the best way to set up old libraries that weren’t built using the AMD specification? I refer to libraries that have not been defined with instruction defines(). In this case, I am trying to load the Jquery library 1.4.
I read on the website of Requirejs on the use of the attribute Shim, I made a copy of the example on github and ran normally, however I could not make my own example based on the previous.
I have the following files:
aplicacao/index.html
aplicacao/js/main.js
aplicacao/js/app/app.js
aplicacao/js/lib/require.js
aplicacao/js/lib/jquery-1.4.2.min.js
index.html
<!DOCTYPE html>
<html>
<head>
<title>Testando JQuery + RequireJS</title>
<script data-main="js/main" src="js/lib/require.js"></script>
</head>
<body>
<h1>jQuery 1.4 + RequireJS</h1>
</body>
</html>
js/main.js
requirejs.config({
"paths": {
"jquery": "lib/jquery-1.4.2.min"
},
"shim": {
"jquery" : "jquery"
}
});
requirejs(["app/app"], function(app){
console.log(app); //imprime o objeto definido em js/app/app.js
});
js/app/app.js
define(["jquery"], function(jotaquery) {
console.log('carregou app ', jotaquery); //não carrega a dependência criada em js/main.js
console.log(jotaquery); //imprime undefined
return {
metodoUm : function() {
//código aqui
},
metodoDois : function() {
//código aqui
}
}
});
UPDATED
To make it clearer, I will put here a simple example to better illustrate my need.
Given the file dialogo.js, implemented without compliance with the AMD specification (without the use of the define()):
var Dialogo = (function() {
function exibirAlerta(msg) {
alert(msg);
}
function exibirConfirmacao(msg, callback) {
if (confirmacao(msg, callback)) {
if (typeof callback === "function") {
callback.call();
}
}
}
return {
exibirAlerta : exibirAlerta,
exibirConfirmacao : exibirConfirmacao
};
})();
How to load this dependency since it loads the file dialogo.js, but the variable Dialogue is not available for handling?
require(["dialogo"], function(Dialogo){
console.log(Dialogo);//undefined
});
If you implement the library dialogo.js according to the AMD standard, as it is in the code below, the previous instruction prints the object Dialogue correctly: Object {exibirAlerta: function, exibirConfirmacao: function}
.
define(function(){
function exibirAlerta(msg) {
alert("DIALOG ALERTA: " + msg);
}
function exibirConfirmacao(msg, callback) {
if (confirmacao(msg, callback)) {
if (typeof callback === "function") {
callback.call();
}
}
}
return {
exibirAlerta : exibirAlerta,
exibirConfirmacao : exibirConfirmacao
};
});
Hello, Conrad. The file is actually loaded, however the jQuery object I need to handle is not available within the scope of my module. I will edit the question by putting a more practical example for you to understand and so be able to help.
– Geison Santos
Conrad, I edited my question by putting a simpler example. If you can answer based on this example thank you.
– Geison Santos
@Geisonsantos Ok, I updated the answer. See if it solves your problem.
– Conrad Clark
Conrad, perfect. It worked fine. Thanks!
– Geison Santos