如何编写自己的jqueryUI组件

一.概述

    现在的软件开发都追求组件化的思想，特别是前端开发，目前有很多前端的组件我们可以方便的使用来满足一些需求，比如图片的轮播，TAB切换等等。其实基本原理都是使用了jquery的ui组件，下面我们来自己动手基于jquery的ui组件来开发组件。这只是一个小例子，主要目的是演示如何写jquery的ui组件开发代码。

二.代码

<script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js" type="text/javascript"></script>
<script>
('timer' in jQuery.fn) ||(function($){
	$.widget('ui.timer', {
        options: {},
        // _init && _create 自动被调用
        _init:function(){
        	console.log("_init");
        	// 把客户端传递给组件的参数打印出来
        	console.log(this.options.from);
        	console.log(this.options.to);
        	console.log(this.options.format);
        },
        _create:function(){
        	console.log("_create")
        }
    });
})(jQuery);

// 测试刚才的小组件
jQuery(function($){
	$('<div></div>').timer({
		from:'fromDate',
		to:'toDate',
		format:'yyyy-MM-DD-HH-MM-SS'
	});
});
</script>

输出结果：
_create
_init
fromDate
toDate
yyyy-MM-DD-HH-MM-SS


注意这里的_init&&_create都是被jquery自己调用，不需要我们去调用。先调用_create再调用_init

三.随便写写

其实软件开发和框架开发都要遵循的是模块化，模块和模块之间的耦合度要低，模块本身的内聚度要高，这样就不会造成修改模块A后，其他模块也要修改。jquey的ui和jquery本身的api分开，这样ui组件大家可以随意去增加，这不会影响jquery的核心api.