2015年第7周技术小结

var Site = Site || {};

Site.View = function(){

    var template_mapper = {};
    
    var View = function(template_name, args){

	var findContainer = function(name){
	    var container = document.querySelector('[view-template="' + name + '"' + ']');
	    return container;
	};

	var registerEventHandler = function(target, type, callback) {
	    if(target.addEventListener){
		target.addEventListener(type, callback);
	    } else {
		target.attachEvent('on' + type, callback);
	    }
	};

	this.template_name = template_name;
	this.container = findContainer(template_name);

	this.param = function(object){
	    var encodedString = '';
	    for (var prop in object) {
		if (object.hasOwnProperty(prop)) {
		    if (encodedString.length > 0) {
			encodedString += '&';
		    }
		    encodedString += encodeURI(prop + '=' + object[prop]);
		}
	    }
	    return encodedString;
	};

	this.ajax = function(ele){

	    var xhr = new XMLHttpRequest();
	    var ext_obj = {};

	    ext_obj.loadRemoteHtmlFragment = function(callback){
		var url = ele.getAttribute('data-uri');
		xhr.open('GET', url);
		xhr.setRequestHeader('Content-Type', 'text/html');
		xhr.onload = function(){
		    if(xhr.status === 200){
			ele.innerHTML = xhr.responseText;
			if(callback){
			    callback();
			}
		    }
		};
		xhr.send();
	    }

	    return ext_obj;
	};

	this.data = (function(){
	    var lastId = 0;
	    var store = {};

	    return function(ele){
		return {
		    set: function(info) {
			var id;
			if (ele.myCustomDataTag === undefined) {
			    id = lastId++;
			    ele.myCustomDataTag = id;
			}
			store[id] = info;
		    },

		    get: function() {
			return store[ele.myCustomDataTag];
		    }
		}
	    };
	}());

	this._ = function(ele){

	    var ext_obj = {};
	    
	    ext_obj.on = function(type, callback){
		if(ele[0]){
		    for(var i=0; i < ele.length; i++){
			registerEventHandler(ele[i], type, callback);
		    }
		} else {
		    registerEventHandler(ele, type, callback);
		}
	    };

	    ext_obj.removeClass = function(class_name){
		var reg_str = '\(\^\|\\s\)' + class_name + '\(\\s\|\$\)';
		var reg = new RegExp(reg_str, 'g');
		ele.className = ele.className.replace(reg, '');
	    };

	    
	    return ext_obj;
	};

	this.parseCssTextToObject = function(css_text){
	    var pairs = css_text.split(';');
	    var obj = {};
	    for(var i = 0; i < pairs.length; i++){
		if(pairs[i]){
		    var kv = pairs[i].split(':');
		    var key, value;
		    
		    if(kv[0]){
			key = kv[0].replace(/(^\s+)|(\s+$)/, '');
		    }
		    if(kv[1]){
			value = kv[1].replace(/(^\s+)|(\s+$)/, '');
		    }

		    if(key){
			obj[key] = value
		    }
		    
		}
	    }

	    return obj;
	};

	this.t = function(key){
	    return Csite.i18n.t(key);
	};

	var template = new template_mapper[template_name](this, args);

	return template;
    };

    View.loadTemplate = function(template_name, context){
	template_mapper[template_name] = context;
    };

    View.render = function(template_name, args){
	  document.addEventListener('DOMContentLoaded', function(){
	    var container = document.querySelector('[view-template="' + template_name + '"' + ']');
	    if(container){
		  var template = new View(template_name, args);
		  if(template.render){
		    template.render();
		  }
	    }
	  })
	}

    return View;
    
}();

Site.View.loadTemplate('home.index.alert', function(view){
  alert('ok');
})

Site.View.render('home.index.alert');