一种“声明式”DOM事件绑定的思路和方法

声明式编程在dojo框架里很常见，jquery mobile尤其是样式方面更是这样，在DOM加载好未渲染到页面之前，根据DOM的一些特有声明（约定好的）进行动态改变，思路很简单。

 

如果是一些很少的需求，用JQuery，大概代码如下$(function(){

  getYourDeclaredElements.each(doYourMethods);

  doYourMethod = function(){
    var data = getYourDeclarelation();
    // change this elements...
  };
});

 

我这里有一个这样的实现——由于使用了seajs，所以作为一个模块来用，简单实现了”下拉框填充“，”关联菜单“，”自动填充“，”快捷键“等

大家可以参考下，欢迎提出改进意见或更好的实现方式，Thx

 

/*
	根据约定做页面的组件初始化
	只是一个例子，可以根据具体需求和风格按照此思路实现一个
*/
define(function(require, exports, module) {
	require('jquery.autocomplete');
	require('jquery.hotkeys');

	var $ = require('jquery');
	var _ = require('underscore');
	var Log = require('log');
	var Consts = require('consts');
	var XInvoke = require('x/x.invoke');
	var XForm = require('x/x.form');

	var XCoc = {
		ns: 'data-', 
		sp: ',',

		// 自定义的attribute的值转换成参数
		genParams: function(vals, keys, options){
			var params = options || {};
			if(!vals || !keys)
				return params;

			var arr = vals.split(this.sp);
			var i = 0;
			for(; i < arr.length; i++){
				var val = arr[i];
				if(val){
					// boolean
					if('false' == val)
						val = false;

					params[keys[i]] = val;
				}
			}
			return params;
		}, 

		// 模板方法，获取目标属性的dom对象和参数，然后再回调
		init: function(suf, keys, options, fn, fnBatch){
			var attr = this.ns + suf;
			var _el = $('[' + attr + ']');
			if(_el.size() == 0)
				return;

			if(fnBatch){
				var ll = _el.map(function(){
					var params = XCoc.genParams($(this).attr(attr), keys, options);
					return {_el: $(this), params: params};
				}).get();
				fnBatch(ll);
			}else{
				_el.each(function(){
					var params = XCoc.genParams($(this).attr(attr), keys, options);
					fn($(this), params);
				});
			}
		}, 

		// *** *** *** *** *** *** *** ***
		// *** *** *** *** *** *** *** ***
		// 查询表单
		queryForm: {
			suf: 'query-form', 
			keys: [''], 

			init: function(_el, params){
			}
		},

		// 列表
		grid: {
			suf: 'grid', 
			keys: [''], 

			init: function(_el, params){
			}
		}, 

		// 下拉框
		combox: {
			suf: 'combox', 
			keys: ['key', 'url', 'targetVal', 'canBlank', 'labelWithVal'], 

			options: {url: Consts.reqUrlSufCombox, canBlank: true}, 

			init: function(_el, params){
				if(!params.key){
					Log.w(this.suf + ' key required!');
					return;
				}

				XInvoke.ai(Consts.reqUrl(params.url), {key: params.key}, function(r){
					XForm.select.optionAppend(r.ll, 
						_el, 
						params.targetVal, 
						params.canBlank, 
						params.labelWithVal, 
						'label', 'value');
				});
			}
		}, 

		// 关联菜单项
		selTrigger: {
			suf: 'sel-trigger', 
			keys: ['targetId', 'name', 'url', 'targetVal', 'canBlank', 'labelWithVal'], 

			options: {url: Consts.reqUrlSufCombox, canBlank: true}, 

			init: function(_el, params){
				if(!params.name || !params.targetId){
					Log.w(this.suf + ' name/targetId required!');
					return;
				}

				_el.change(function(){
					var val = _el.val();
					if(!val)
						return;

					var data = {};
					data[params.name] = val;
					XInvoke.ai(Consts.reqUrl(params.url), data, function(r){
						var _target = $('#' + params.targetId);
						XForm.select.optionAppend(r.ll, 
							_target, 
							params.targetVal,
							params.canBlank, 
							params.labelWithVal, 
							'label', 'value');
					});
				});
			}
		}, 

		// 自动填充
		autoComplete: {
			suf: 'auto-complete', 
			keys: ['targetId', 'url', 'minChars', 'maxItemsToShow'], 

			options: {minChars: 3}, 

			init: function(_el, params){
				if(!params.targetId || !params.url){
					Log.w(this.suf + ' targetId/url required!');
					return;
				}
				// ajax json : 
				// [{data: {result: i}, value: 'Col' + i}]
				_el.autocomplete({
					url: Consts.reqUrl(params.url), 
					minChars: params.minChars, 
					maxItemsToShow: params.maxItemsToShow, 
					remoteDataType: 'json', 
					onItemSelect: function(item){
						$('#' + params.targetId).val(item.data.result);
					}
				});
			}
		},

		// 快捷键
		shortkey: {
			suf: 'shortkey', 
			keys: ['key', 'triggerType'], 

			options: {triggerType: 'click'}, 

			init: function(_el, params){
				if(!params.key){
					Log.w(this.suf + ' key required!');
					return;
				}

				$.hotkeys.add(params.key, function(){
					_el.trigger(params.triggerType);
				});
			}
		},

		// *** *** *** *** *** *** *** ***
		// *** *** *** *** *** *** *** ***
		// 开始渲染页面和绑定事件
		coc: function(targets){
			targets = targets || ['queryForm', 
				'grid', 
				'combox', 
				'selTrigger', 
				'autoComplete',
				'shortkey'];
			_.each(targets, function(it){
				var item = XCoc[it];
				if(!item)
					return;

				XCoc.init(item.suf, item.keys, item.options, item.init);
			});
		},

		dump: ''
	};
	module.exports = XCoc;
});