关于JavaScript组件化的探索

Loaders

先放出项目地址：https://github.com/j20041426/Loaders

这是一个可以动态选择加载动画的样式和颜色的插件。这个项目仅仅是作为对js组件化的一个探索，不太建议用在生产环境中。

原理

通过动态渲染页面元素的方式，实现加载动画的样式选择；再通过less的客户端插件，动态改变css样式中的背景颜色，从而实现加载动画的颜色选择。

讲解

1. 结构

var Loader = (function(){

	var _instance;	//私有属性，对外界隐藏

	var LoadingFun = function(config){
		...
	}
	
	LoadingFun.prototype.show = function(){
		...
	}
	
	LoadingFun.prototype.hide = function(){
		...
	}
	
	return LoadingFun;
})();

这是这个插件的大体结构。在IIFE（立即执行函数）中，返回一个函数结构LoadingFun，并且在原型链中增加show和hide两个方法，这样对外界就只暴露了Loader这个构造函数，以及show和hide这两个成员函数。而_instance这个属性，就作为私有成员存在，而不被外界所知。

2. 构造方法

var LoadingFun = function(config){
	_adaptParams(config);				//参数的适配器
	_init();							//初始化动画
	_render();							//渲染动画到页面中
	_instance.style.display = "none";	//默认隐藏
}

2.1 适配器

其中_adaptParams这个函数的作用是适配参数。不管调用者是否传递参数，或者以随机顺序传递参数，都可以让loaders正确接收到相应的参数。

var _config = {				//默认参数
	type : "ball-pulse",
	color : "#fff"
}
var _adaptParams = function(config){	//适配器
	if(config){
		for(var param in _config){
			if(config[param]){
				_config[param] = config[param];
			}
		}
	}
}

2.2 初始化动画

这个函数的作用是动态加载需要的less文件，并设置less文件中的全局参数@color为参数中的颜色值，然后动态引用less客户端插件进行less文件的预编译，最终得到需要的css样式代码。

var _init = function(){
	var head = document.getElementsByTagName('HEAD').item(0);
	var style = document.createElement('link');
	style.href = 'css/loaders.less';
	style.rel = 'stylesheet/less';
	style.type = 'text/css';
	head.appendChild(style);
	var options = document.createElement('script');
	options.innerHTML = "less = {globalVars:{color:'" + _config.color + "'}};";
	head.appendChild(options);
	var script = document.createElement('script');
	script.type = 'text/javascript';
	script.src = 'js/less.min.js';
	head.appendChild(script);
}

2.3 渲染

根据不同加载动画的DOM结构，动态生成对应的DOM元素，然后append到body元素中。

var divs= {
	"ball-pulse" : 3,
	...
};

var loader = document.createElement("div");
loader.className = "loader";
var loader_inner = document.createElement("div");
loader_inner.className = "loader-inner " + _config.type;
for(var i = 0; i < divs[_config.type]; i++){
	var div = document.createElement("div");
	loader_inner.appendChild(div);
}
loader.appendChild(loader_inner);
document.body.appendChild(loader);
_instance = loader;		//将渲染的DOM元素存到私有成员_instance中，便于后续的显示控制

3. 显示控制

因为渲染时得到了加载动画的DOM对象_instance，所以可以通过_instance来控制元素的显示与隐藏。

_instance.style.display = "flex" 这里设置成flex是因为加载动画是用flexbox来控制居中显示的。

return this 返回this对象可以实现链式调用。

LoadingFun.prototype.show = function(){
	_instance.style.display = "flex";
	return this;
}

LoadingFun.prototype.hide = function(){
	_instance.style.display = "none";
	return this;
}

4. 结语

由于在加载和渲染动画时，使用了less的预编译功能，所以加载会有时间损耗。不太建议用在生产环境中，如果一定要使用的话，尽量在页面首次加载时，调用var loaders = new Loaders()，然后在需要显示和隐藏时，再分别调用loaders.show()、loaders.hide()。

由于自己在前端方面也是个新手，欢迎大家的指正。