Lorsque vous créez certaines pages, beaucoup d'entre elles sont implémentées en utilisant ajax. Lors de l'affichage, il existe de nombreuses opérations d'ajout ou de mise à jour pour la soumission du formulaire. Évidemment, c'est très ennuyeux. J'ai soudainement pensé à une meilleure méthode. ci-dessous. Partagez l'idée d'utiliser js pour implémenter l'injection de dépendances et déplacez l'idée du framework back-end vers le front-end.
Scénarios d'application : correspondance individuelle entre le front-end et le back-end, enregistrement du contenu du formulaire, instructions de liste, etc.
Idées architecturales : distributeur, injection de dépendances, etc.
Déclaration du code de base :
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 () { },
}
});
Par exemple, utilisez la liste :
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);
}
}
})
Rendu :
Par exemple, enregistrer le contenu d’un formulaire est encore plus simple :
j.dispatcher.ajax.company.save({
validation : {
RulesCallBack : fonction (règles) {
Règles.Nom.remote = {
url : '/handler/validation.ashx?type=cn',
tapez : "post", //Méthode de soumission
données : {
Nom de l'entreprise : fonction () {
return encodeURIComponent($("#Name").val()); //Données codées
}
>
>
Rules.ConfirmParssword.equalTo = "#Password";
Rules.AccountName.remote = {
url : '/handler/validation.ashx?type=an',
tapez : "post", //Méthode de soumission
données : {
Nom du compte : fonction () {
return encodeURIComponent($("#AccountName").val()); //Données codées
}
>
>
},
messagesCallBack : fonction (messages) {
messages.Name.remote = 'Cette société a été enregistrée ! ';
messages.AccountName.remote = 'Ce nom d'utilisateur existe déjà ! ';
messages.ConfirmParssword.equalTo = 'Deux mots de passe sont incohérents';
},
Filtres : ['Téléphone portable', 'E-mail']
},
Message : {
Succès : fonction () {
alert(ce.message);
window.location ='/company/list';
>
>
});
Backend : Le backend est en fait une classe très simple, à condition qu'il ait l'adresse d'implémentation du distributeur, comme celle ci-dessus : /company/save
PS : Le framework de gestion front-end est un framework back-end basé sur bootsrap.
Certains étudiants ont demandé : qu'est-ce que js ? C'est juste une bibliothèque js encapsulée par moi-même, je la partagerai avec tout le monde à l'avenir
Ce qui précède est la description complète de cet article, j'espère qu'il sera utile à tout le monde.
Python est-il front-end ou back-end ?
Comment implémenter la messagerie instantanée sur le front-end
La différence entre front-end et back-end
Introduction au contenu principal du travail du backend
Introduction à la relation entre php et front-end
Comment résoudre l'opération expirée
Que signifie le masque PS ?
Quelles sont les technologies de sécurité des réseaux ?
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
