Apabila anda membuat beberapa halaman, banyak daripada mereka dilaksanakan menggunakan ajax, terdapat banyak operasi tambah atau kemas kini untuk penyerahan borang anda di bawah Kongsi idea tentang cara menggunakan js untuk melaksanakan suntikan pergantungan, dan gerakkan idea rangka kerja bahagian belakang ke bahagian hadapan.
Senario aplikasi: surat-menyurat satu dengan satu antara bahagian hadapan dan belakang, menyimpan kandungan borang, penyataan senarai, dsb.
Idea seni bina: Pengedar, suntikan pergantungan, dsb.
Pernyataan kod asas:
j.extend({
dispatcher: (function () {
var _route = {},
// default module
_module = {
// 授权
authenticate: true,
// 验证
validation: true,
// 数据转换
dataTransform: true,
},
_state = {
error: function () { }
},
_ajax = function () {
j.ajax(this)
}
;
function _container() {
// initializer.
return _route;
}
function _configuration(config, _tmp_route) {
if (config) {
config.module && (_module = $.extend(_module, config.module))
config.state && (_state = $.extend(_state, config.state))
config.post && config.post.queryString && (function () {
if (!/^\?/.test(config.post.queryString)) {
_tmp_route += "?";
}
_tmp_route += config.post.queryString;
})()
config.list && (function () {
config.list = $.extend({
pageSize: 15,
wrapped: $('#list-container'),
searchForm: $('#form-post'),
searchButton: $('#search-button'),
post: {}
}, config.list);
})()
}
return _tmp_route;
}
return {
ajax: new _container(),
intercept: {
module: function (module) {
$.extend(true, _module, module);
},
route: function (route) {
if (!$.isEmptyObject(_route)) return;
$.extend(true, _route, route);
for (var i in _route) {
if (_route.hasOwnProperty(i)) {
var _controller = _route[i];
for (var k in _controller) {
if (_controller.hasOwnProperty(k) && j.utils.isFunction(_controller[k])) {
(function () {
var clone = j.clone(_controller[k]), _tmp_route = '/' + i + "/" + k;
_controller[k] = function (config) {
var url = _configuration(config, _tmp_route);
if (j.utils.isFunction(clone)) {
clone.apply(_module, config);
}
// todo modules
if (!(_module.authenticate && j.utils.isFunction(_module.authenticate)) && _module.authenticate() || _module.authenticate === true) {
console.log('j.ajax.' + i + "." + k + " authenticate failed.");
config.state.error();
return false;
}
if (config.validation) {
_module.validation.init(config.validation);
config.validation.fireTarget.on('click', function () {
if (!_module.validation || !config.validation.formTarget.valid())
return false;
var data = _module.dataTransform(!config.post.data ? config.validation.formTarget.serializeJson() : config.post.data)
var ajax_data = {
url: url,
data: data,
fireTarget: config.validation.fireTarget
}
ajax_data = $.extend(ajax_data, config.post);
_ajax.call(ajax_data);
return false;
})
}
if (config.list) {
if (!$.fn.pagination) {
throw new Error('j.dispatcher.intercept.list need jQuery.pagination,please load jQuery.pagination before this file.')
}
config.list.onChange = function (pageIndex) {
var $this = this;
this.showLoading();
var formData = config.list.searchForm.serializeJson();
formData.pageIndex = pageIndex;
formData.pageSize = $this.pageSize;
var data = _module.dataTransform(!config.list.post.data ? formData : config.list.post.data)
var ajax_data = {
url: url,
data: data,
}
$.extend(true, ajax_data, config.list.post);
ajax_data.success = function () {
$this.generateData(this.totalRecords, this.list);
}
j.jsonp(ajax_data)
}
j.list.table(config.list);
config.list.searchButton.on('click', function () {
config.list.wrapped.empty();
j.list.table(config.list);
})
}
}
}())
}
}
}
}
}
}
}
})()
})
var global = {
dataTransform: {
"default": function () {
if (typeof (arguments[0]) == "object" && Object.prototype.toString.call(arguments[0]).toLowerCase() == "[object object]" && !arguments[0].length) {
return j.json.toKeyValString(arguments[0],true);
}
else if (j.utils.isString(arguments[0])) {
return arguments[0];
}
else {
return {};
}
},
"objectData": function () {
if (typeof (arguments[0]) == "object" && Object.prototype.toString.call(arguments[0]).toLowerCase() == "[object object]" && !arguments[0].length) {
return { data: j.json.toString(arguments[0]) }
}
else if (j.utils.isString(arguments[0])) {
return arguments[0];
}
else {
return {};
}
}
}
}
j.dispatcher.intercept.module({
authenticate: function () {
},
validation: (function () {
var hasCongfig = false;
function _config() {
if (!$.fn.validate) {
throw new Error('j.dispatcher.intercept.module.validation need jQuery.validate,please load jQuery.validate before this file.')
}
jQuery.validator.addMethod("isPassword", function (value, element) {
return j.config.reg_phone.test(value);
}, "请输入6-20密码建议由数字、字母和符号组成！");
jQuery.validator.addMethod("isMobile", function (value, element) {
return j.config.reg_phone.test(value);
}, "请正确填写您的手机号码");
jQuery.validator.addMethod("isEamil", function (value, element) {
return j.config.reg_email.test(value);
}, "请填写正确的邮箱地址");
jQuery.validator.addMethod("isUserName", function (value, element) {
return j.config.reg_login_name.test(value);
}, "4-32位字符.支持汉字、字母、数字\"-\"\"_\"组合");
}
function _getRequired(parms, filters) {
if (parms instanceof jQuery && parms.length > 0 && parms[0].tagName == 'FORM') {
var config = {};
parms.find('[name]').each(function () {
if (!filters || filters.indexOf(this.name) == -1) {
config[this.name] = { required: true };
}
})
return config;
}
else {
for (var i in parms) {
if (parms[i]) {
parms[i]['required'] = true;
}
else {
parms[i] = { required: true };
}
}
return parms;
}
}
function _getMessage(parms, filters) {
if (parms instanceof jQuery && parms.length > 0 && parms[0].tagName == 'FORM') {
var config = {};
parms.find('[name]').each(function () {
if (!filters || filters.indexOf(this.name) == -1) {
config[this.name] = { required: $(this).attr("data-required-message") };
}
})
return config;
}
}
function _init(config) {
if (!hasCongfig) {
hasCongfig = true;
_config();
}
!config.formTarget && $('#form-post').length > 0 && (config.formTarget = $('#form-post'))
!config.fireTarget && $('#post-button').length > 0 && (config.fireTarget = $('#post-button'))
if (!(config.fireTarget && config.fireTarget instanceof jQuery && config.fireTarget[0].type.toUpperCase() == 'SUBMIT'))
throw new Error("j.validator.init needs config.submitTarget param, its type is submit");
if (!(config.formTarget && config.formTarget instanceof jQuery && config.formTarget[0].tagName == 'FORM'))
throw new Error("j.validator.init needs config.formTarget param, its type is form");
var rules = _getRequired(config.formTarget, config.filters), messages = _getMessage(config.formTarget, config.filters);
config.rulesCallBack && config.rulesCallBack(rules);
config.messagesCallBack && config.messagesCallBack(messages);
config.formTarget.validate({
debug: true,
rules: rules,
messages: messages
});
}
return {
init: function (config) {
_init(config);
},
validate: function () {
return config.formTarget.valid();
}
}
})(),
dataTransform: global.dataTransform.objectData
})
j.dispatcher.intercept.route({
passport: {
signin: function () {
this.dataTransform = global.dataTransform.default;
},
signout: function () { },
reg: function () { },
cpwd: function () {
this.dataTransform = global.dataTransform.default;
}
},
company: {
save: function () { },
getList: function () { }
},
account: {
save: function () { },
saveProfile: function () { },
getList: function () {
}
},
partnership: {
signup: function () {
},
getList: function () { }
},
venue: {
getList: function () {
save: function () { },
},
show: {
save: function () { },
}
});
Sebagai contoh, gunakan senarai:
j.dispatcher.ajax.account.getList({
list: {
header: ['编号', '用户名', '账户类型', '公司类型', '注册时间', '最后登录时间', '是否启用', '操作'],
rowField: ['AccountCode', 'AccountName', 'AccountType', 'CompanyType', 'RegisterTime', 'LastActivityTime', 'IsAvailable', function (item) {
var html = '<a href="/account/sub?type=edit&id=' + item.Id + '" class="k-table-icon fa-edit mr15" title="编辑信息" ></a>'
+ '<a href="javascript:;" class="k-table-icon fa-trash" title="删除账户" onclick="operate(this,\'delete\',{ id : \'' + item.Id + '\' })"></a>'
;
return html;
}],
formatColumn: function (item, data) {
if (item.IsAvailable != undefined) {
if (item.IsAvailable == true) {
return '<a href="javascript:;" onclick="operate(this,\'set\',{ id : \'' + data.Id + '\',isEnable : 0 })" class="k-table-icon glyphicon glyphicon-ok-circle" title="已启用"></a>';
}
else
return '<a href="javascript:;" onclick="operate(this,\'set\',{ id : \'' + data.Id + '\',isEnable : 1 })" class="k-table-icon c-error glyphicon glyphicon-ban-circle" title="已禁用"></a>';
}
else if (item.LastActivityTime) {
var now = moment(item.LastActivityTime);
return now.format('YYYY-MM-DD HH:mm:SS');
}
else if (item.RegisterTime) {
var now = moment(item.RegisterTime);
return now.format('YYYY-MM-DD HH:mm:SS');
}
},
rowClick: function () {
window.location = '/account/detail?accountName=' + encodeURIComponent(this.AccountName);
}
}
})
Rendering:
Contohnya, menyimpan kandungan borang adalah lebih mudah:
j.dispatcher.ajax.company.save({
pengesahan: {
RulesCallBack: fungsi (peraturan) {
Rules.Name.remote = {
url: '/handler/validation.ashx?type=cn',
jenis: "siaran", //Kaedah penyerahan
data: {
Nama Syarikat: function () {
kembalikan encodeURIComponent($("#Name").val()); //Data yang dikodkan
}
}
}
Rules.ConfirmParssword.equalTo = "#Kata Laluan";
Rules.AccountName.remote = {
url: '/handler/validation.ashx?type=an',
jenis: "siaran", //Kaedah penyerahan
data: {
Nama Akaun: function () {
return encodeURIComponent($("#AccountName").val()); //Data yang dikodkan
}
}
}
},
messagesCallBack: fungsi (mesej) {
messages.Name.remote = 'Syarikat ini telah didaftarkan! ';
messages.AccountName.remote = 'Nama pengguna ini sudah wujud! ';
messages.ConfirmParssword.equalTo = 'Dua kata laluan tidak konsisten';
},
Penapis: ['Telefon bimbit', 'E-mel']
},
Siaran: {
Kejayaan: fungsi () {
alert(this.message);
window.location ='/syarikat/senarai';
}
}
});
Bahagian belakang: Bahagian belakang sebenarnya adalah kelas yang sangat mudah, selagi ia mempunyai alamat pelaksanaan pengedar, seperti di atas: /company/save
PS: Rangka kerja pengurusan bahagian hadapan ialah rangka kerja bahagian belakang berdasarkan bootsrap.
Sesetengah pelajar bertanya, apakah itu js? Ini hanyalah perpustakaan js yang saya akan kongsikan dengan semua orang pada masa hadapan
Di atas adalah huraian keseluruhan artikel ini, saya harap ia akan membantu semua orang.
Adakah python bahagian hadapan atau belakang?
Cara melaksanakan pemesejan segera pada bahagian hadapan
Perbezaan antara front-end dan back-end
Pengenalan kepada kandungan kerja utama bahagian belakang
Pengenalan kepada hubungan antara php dan front-end
Cara menggunakan fungsi math.round
Perbezaan antara pemacu c dan pemacu d
penggunaan storan setempat
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
