编程技巧 - 添加/编辑表单封装 ¶

• 作者：KK

• 发表日期：2016.11.07

有的程序员经常在做后台时有这么个烦恼：添加和编辑页面很相似，但他们总是要开发两个不同的模板页面，而且有修改时，改了一个又忘记改另一个，还有其它相关具体场景的维护问题

核心问题：能否只写一个模板实现添加、修改共用？ ¶

可以的，比如一个文章添加、编辑模板，我会封装成JS对象作为一个文章编辑页面插件，传相参数构造相应状态的界面：

var articlePage = {
	categories : [],

	buildForm : function(article){
		var categoriesHtml = '<option value="0">请选择</option>';
		for(var i in this.categories){
			var category = this.categories[i];
			var select = category.id == article.category_id ? ' selected' : '';
			categoriesHtml += '<option value="' + category.id + '"' + select + '>' + category.name + '</option>';
		}
		
		return '<form>\
			<input type="hidden" name="id" value="' + article.id + '"/><br/>\
			标题：<input type="text" name="title"/><br/>\
			文章分类：<select name="category_id">' + categoriesHtml + '</select>\
			内容：<textarea name="content">' + article.content + '</textarea>\
		</form>';
	},
	
	buildDefaultData : function(){
		return {
			id : 0,
			category_id : 0,
			content : ''
		};
	}
};

//这里以PHP的模板为演示
var articlePage.categories = <?php echo json_encode($categories); ?>;
var isAdd = location.href.indexOf('/add.html') !== -1;
var article = isAdd ? articlePage.buildDefaultData() : <?php echo json_encode($article); ?>;
$('body').html(articlePage.buildForm(article));