开发工具与关键技术:封装JS
作者:郑名方
撰写时间:2019年6月 10日
老师刚开始教项目的时候给我们说明自己封装JS可以减小代码量,而下面的代码图片就是老师的。
/**
* jquery 根据json对象填充form表单
* @author en
* @param fromId form表单id
* @param jsonDate json对象
*/
上面的是样式还是代码的注释、解释。反正是自己封装JS代码的第一步。
封装JS的代码就是为了方便使用,就比如可以封装一些常用的代码,不用重复书写多次。
function loadDatatoForm(fromId, jsonDate) {
var obj = jsonDate;
var key, value, tagName, type, arr;
for (x in obj) {//循环json对象
key = x;
value = obj[x];
//$("[name='"+key+"'],[name='"+key+"[]']").each(function(){
//更加form表单id 和 json对象中的key查找 表单控件
$("#" + fromId + " [name='" + key + "'],#" + fromId + " [name='" + key + "[]']").each(function () {
tagName = $(this)[0].tagName;
type = $(this).attr('type');
if (tagName == 'INPUT') {
if (type == 'radio') {
$(this).attr('checked', $(this).val() == value);
} else if (type == 'checkbox') {
try {
//数组
arr = value.split(',');
for (var i = 0; i < arr.length; i++) {
if ($(this).val() == arr[i]) {
$(this).attr('checked', true);
break;
}
}
} catch (e) {
//单个
$(this).attr('checked', value);
}
} else {
$(this).val(value);
}
} else if (tagName == 'TEXTAREA') {
$(this).val(value);
} else if (tagName == 'SELECT') {
//console.log($(this).hasClass("select2"));
if ($(this).hasClass("select2")) {
//select2 插件的赋值方法
$(this).val(value).trigger("change");
} else {
$(this).val(value);
}
}
});
}
}
根据json对象填充form表单循环json对象用:
$("[name=’"+key+"’],[name=’"+key+"[]’]").each(function(){
更加form表单id 和 json对象中的key查找 表单控件。
自全局使用 var Key,value,tagName,type,arr;
For(x in obj){
}可以在内部书写代码。Form表单循环里很定嵌套了n+的循环。ajaxSubmit()提交表单:我们直接通过form提交的话,提交后当前页面跳转到form的action所指向的页面。然而,很多时候我们并不希望提交表单后页面跳转,那么,我们就可以使用ajaxSubmit(obj)来提交数据ajaxSubmit(obj)方法是jQuery的一个插件jquery.form.js里面的方法,所以使用此方法需要先引入这个插件。
封装好的插件的页面怎么使用,就把封装代码样式书写然后后面写要实现的功能点、页面跳转的接口等。