大家在做些页面的时候，很多都是用ajax实现的，在显示的时候有很多表单提交的add或者update操作，显然这样很烦，突然想到了一个比较好的方法，下面给大家分享下如何用js 实现依赖注入的思想，后端框架思想搬到前端来。
应用场景： 前后端一一对应、表单内容保存、列表陈述等。
架构思路： 分发器、依赖注入等。
基本代码陈述：
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.datatransf
以上就是如何用js 实现依赖注入的详细内容。