[英]How to make a jQuery plugin (jquery.cookie, jquery.validate.unobtrusive) loadable with requirejs and use.js
I been trying to extend template application from http://net.tutsplus.com/tutorials/javascript-ajax/building-a-scalable-app-with-backbone-js/ . 我一直在尝试从http://net.tutsplus.com/tutorials/javascript-ajax/building-a-scalable-app-with-backbone-js/扩展模板应用程序。 With following implementation I am facing “Uncaught ReferenceError: jQuery is not defined”.
通过以下实现,我将面临“ Uncaught ReferenceError:未定义jQuery”。 Can someone please let me know what could be the problem causing it.
有人可以让我知道造成问题的原因是什么。
config.js
// Set the require.js configuration for your application.
require.config({
// Initialize the application with the main application file
deps: ["main"],
urlArgs: "bust=" + (new Date()).getTime(),
waitSeconds: 15,
paths: {
// JavaScript folders
libs: "../assets/js/libs",
plugins: "../assets/js/plugins",
// Libraries
//jquery: "../assets/js/libs/jquery",
jquery: "http://code.jquery.com/jquery-1.7.min",
jquerycookie: "../assets/js/libs/jquery.cookie",
jqueryDataTables: "../assets/js/libs/jquery.dataTables.min",
jqueryValidate: "../assets/js/libs/jquery.validate",
jqueryValidateUnobtrusive: "../assets/js/libs/jquery.validate.unobtrusive",
underscore: "../assets/js/libs/underscore",
backbone: "../assets/js/libs/backbone",
highcharts: "../assets/js/libs/highcharts/highcharts",
highstock: "../assets/js/libs/highcharts/highstock",
easyXDM: "../assets/js/libs/easyXDM/easyXDM.min",
dateFormat: "../assets/js/libs/date.format",
// Shim Plugin
use: "../assets/js/plugins/use"
},
priority: [
'jquery',
'jquerycookie',
'jqueryValidate',
'jqueryValidateUnobtrusive',
'underscore',
'easyXDM',
"highcharts",
"highstock",
"dateFormat"
],
use: {
backbone: {
deps: ["use!underscore", "jquery"],
attach: "Backbone"
},
jqueryDataTables: {
deps: ["jquery"]
},
jqueryValidate: {
deps: ["jquery"]
},
jqueryValidateUnobtrusive: {
deps: ["jquery", "jqueryValidate"]
},
jquerycookie: {
deps: ["jquery"]
},
underscore: {
attach: "_"
},
highcharts: {
exports: 'Highcharts'
},
highstock: {
exports: 'highstock'
}
}
});
main.js
require([
"namespace",
// Libs
"jquery",
"jqueryDataTables",
"use!backbone",
'jquerycookie',
'jqueryValidate',
'jqueryValidateUnobtrusive',
'highcharts',
// Modules
"modules/tricklebot",
"modules/home",
"modules/dashboard",
"modules/profile",
"modules/transactions",
"modules/analysis",
"modules/signup",
],
function(namespace, $, jqDT, Backbone,
jqCookie, jqValidate, jqValidateUnobtrusive, highcharts,
tricklebot, Home, Dashboard, Profile, Transactions, Analysis, Signup) {
......
......
我认为您正在遵循一个过时的教程,require.js配置中的use
和priority
已被shim
替换,请查看: https : //github.com/jrburke/requirejs/wiki/Upgradeing-to-RequireJS-2.0
There is an easier way to load plain JS files now with newer RequireJS - a way that avoids all that paths, maps, shim nonsense: 现在,有一种使用较新的RequireJS来加载普通JS文件的简便方法,该方法可以避免所有路径,映射和匀称废话:
require(['jquery'],function($){
require(
[
'path/to/my/module'
, 'path/to/plugin1' // <- plain js file but OMIT ".js" extension in the ID
, 'path/to/plugin2' // <- plain js file but OMIT ".js" extension in the ID
, 'path/to/plugin3' // <- plain js file but OMIT ".js" extension in the ID
]
, function(myModule /*, it does not matter what plugins return*/){
// jQuery will have all the above plugins applied by now
// because they apply their code to global window.jQuery
// just start using them
$(selector).plugin1(blah)
}
)
})
The use of plan JavaScript file without ".js" makes it subject to all 'maps' and 'paths' modifications just like module IDs, but still does not complain when/if the plain JS file is not a module. 使用不带“ .js”的计划JavaScript文件,使其像模块ID一样受所有“映射”和“路径”修改的约束,但是当/如果普通JS文件不是模块,仍然不会抱怨。
The modules are NOT reloaded on subsequent loads because they are cached from the first time. 这些模块不会在以后的加载中重新加载,因为它们是从第一次缓存开始的。 Profit!
利润!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.