[英]Using JavaScript modules in external files
我有一個模塊的骨架,單擊按鈕即可將記錄添加到數據庫中。
var Person = (function () {
var ajaxOpts = {
type: "POST",
url: "",
contentType: "application/json",
dataType: "json",
success: function () { },
error: function () { },
data: {}
}
function insert(data) {
ajaxOpts.url = "../Service.asmx/InsertPerson";
ajaxOpts.data = JSON.stringify(data);
ajaxOpts.error = function (xhr) {
console.log(xhr.status);
};
ajaxOpts.success = function (data) {
console.log('record successfully added');
console.log(data.d);
}
$.ajax(ajaxOpts);
};
return {
insert: insert
}
} ());
然后從我的網頁中調用它,例如:
$(document).ready(function () {
$('#btnSubmit').click(function () {
var data = {
personId: $('#personId').val(),
firstName: $('#firstName').val(),
lastName: $('#lastName').val()
};
Person.insert(data);
});
});
我如何修改此代碼以確保$
是jQuery對象而不是另一個庫?
對於插件,通常將代碼包裝在IIFE中,然后將jQuery
映射到$
。 您可以對模塊執行相同的操作(甚至已經擁有IIFE):
var Person = (function($) {
// ...
}(jQuery));
對於document.ready
回調,將對jQuery的引用傳遞給該回調:
jQuery(document).ready(function($) {
// ...
});
只要確保您在函數之外使用jQuery
。
如何像這樣在您的主頁中替換代碼:
(function($) {
$('#btnSubmit').click(function () {
var data = {
personId: $('#personId').val(),
firstName: $('#firstName').val(),
lastName: $('#lastName').val()
};
Person.insert(data);
});
}(jQuery));
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.