[英]How to make a jQuery plugin (jquery.cookie, jquery.validate.unobtrusive) loadable with requirejs and use.js
我一直在嘗試從http://net.tutsplus.com/tutorials/javascript-ajax/building-a-scalable-app-with-backbone-js/擴展模板應用程序。 通過以下實現,我將面臨“ Uncaught ReferenceError:未定義jQuery”。 有人可以讓我知道造成問題的原因是什么。
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
現在,有一種使用較新的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)
}
)
})
使用不帶“ .js”的計划JavaScript文件,使其像模塊ID一樣受所有“映射”和“路徑”修改的約束,但是當/如果普通JS文件不是模塊,仍然不會抱怨。
這些模塊不會在以后的加載中重新加載,因為它們是從第一次緩存開始的。 利潤!
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.