第四十四课：jQuery UI和jQuery easy UI

jQuery UI是jQuery官方提供的功能效果和UI样式。作为官方出的东西，它一直没有被人们看重，一是它没有datagrid，tree等UI库必备的东西，二是它修改太过频繁，体积庞大。其实它所有以ui开头的插件都来自开源社区，为了统一它们的接口，jQuery花了很长的时间。在jQuery1.9中，它共有autocomplete，dialog，menu，tabs，slider，tooltip等十个UI。

jQuery UI的开发模式跟jQuery插件化操作规范是一样的，第一次传参为对象，就进入配置模式，第二传参为方法名，就调用其方法，举个例子：

初始化时，传一个对象：$(".selector").accordion({ heightStyle:"fill", {active :2 }});

调用方法时，传一个方法名：$(".selector").accordion("option", "active");  //option为方法名，active是option方法的传参

jQuery UI中的各个控件有不同的方法和属性，但由于都是同一个基类，因此有如下相同的操作：

让控件不可用有两种方式：第一种，使用配置模式$(".selector").accordion("option", "disabled", true);

第二种，直接传入disable方式 $(".selector").accordion("disable");

让控件可用，也有两种方式：第一种，$(".selector").accordion("option", "disabled", false);第二种，$(".selector").accordion("enable");

由于jQuery官方UI库不好用，于是人们开始设计自己的UI库。国外最顶尖的是jQuery tools，bootstrap等，国内的有easyUI，DWZ等。

我们来说下，easyUI相比于jQuery UI的优势：智能加载和个性化制定

大家都知道UI库通常很庞大，jQuery UI的插件少，但是你要使用它，需要加载很多东西，依赖关系也非常复杂。

而easy UI有两种应用插件的方式，一种类似于EXT（这里不讲），一种类似于bootstrap。bootstrap的方式就是要求你按照文档的范本写HTML，里面有指定的类名，这些类名非常重要。easy UI只要求你引入核心库和parse.js文件，其中parse.js有一段代码在你domReady后，会扫描你的DOM树，把这些带有特定类名的元素全部找出来，并且根据这些类名来加载对应的UI插件的js文件，最后初始化它们，不像jQuery UI需要一次性加载很多东西。

个性化制定。由于jQuery是集合操作，$(".selector")可能得到5个匹配的元素，而$(".selector").tabs(options)这样的操作，会对这5个元素应用相同的配置。但是，有时我们需要根据不同的元素进行不同的配置。easyUI就有这个东西，它会对元素的data-options的属性值弄成一个配置对象，同时还支持直接传入一个数组弄成一个配置对象，最后把这些配置对象都扩展到最终的配置对象中去，这样，如果元素想要不同的配置，可以在data-options中添加或者把配置值放在一个数组中传进去。比如：

<div data-options="width:100px,height:100px" minDate="2015-1-11">ddd</div>

$.parse.parseOptions(element , ["minDate", {isShowWeek:"boolean"}])

针对每一个元素，它所得到的配置对象是：

$.extend({}, defaults, $.parse.parseOptions(element , ["minDate", {isShowWeek:"boolean"}]) , options)

其中options为统一配置项， $.parse.parseOptions(element , ["minDate", {isShowWeek:"boolean"}]) 为个性化配置项，defaults为默认配置项。

接下来，我们来看下$.parse.parseOptions方法源码解析：

$.parse.parseOptions = function(element, properties){

　　var $ele = $(element), options={};

　　var value = $.trim($ele.attr("data-options"));   //这里取到的值"width:100px,height:100px"

　　if(value){

　　　　var first = value.substr(0,1);

　　　　var last = value.substr(value.length-1,1);

　　　　if(first != "{"){

　　　　　　value = "{" + value;      

　　　　}　

　　　　if(last != "}"){

　　　　　　value = value + "}";     //value等于"{width:100px,height:100px}"

　　　　}

　　　　options = (new Function( "return " + value))();       //执行这个新建的方法，options = {width:100px,height:100px}

　　}

　　if(properties){   //如果传入了数组，这里是 ["minDate", {isShowWeek:"boolean"}]

　　　　var opts = {};

　　　　for(var i=0;i<properties.length;i++){

　　　　　　var name = properties[i];

　　　　　　if(typeof name == "string"){   //name = "minDate"

　　　　　　　　opts[name] = $ele.attr(name);  //这里的opts={minDate:"2015-1-11"}

　　　　　　}else{    //name = {isShowWeek:"boolean"}

　　　　　　　　for(var key in name){

　　　　　　　　　　var type = name[key];     //type = "boolean",key = isShowWeek

　　　　　　　　　　if(type == "boolean"){

　　　　　　　　　　　　opts[key] = $ele.attr(key) ? ($ele.attr(key) == "true") : undefined;  //如果元素上有isShowWeek的属性值，并且为true，那么opts = {minDate:"2015-1-11" , isShowWeek: true}，这里的div元素上没有，所以opts = {minDate:"2015-1-11" , isShowWeek: undefined}

　　　　　　　　　　}

　　　　　　　　}

　　　　　　}

　　　　}

　　　　$.extend(options, opts);   //   options =  {width:100px,height:100px,minDate:"2015-1-11" , isShowWeek: undefined}

　　}

　　return options;    

}

上面说的这两个特点，在jQuery1.3后也添加了。只是方法不一样，像jQuery1.43，它支持通过抽取元素上的data-*属性值来做配置对象。

最后，我们来讲下操作UI实例的各种方式的比较：

jQuery UI是直接传字符串的形式来调用UI实例的方法，比如前面讲的：$("div").dropdown({....})，实例化一个UI组件，如果想调用此组件的方法，那么，可以用$("div").dropdown(方法名, arg1,arg2....)，其中的方法名就是传字符串的形式。

jQuery tools是直接操作UI实例，比如：var tooltip = $("#input1").tooltip({api : true}); tooltip.show()，这里的tooltip就是UI实例。这显然比jQuery UI的方式好。

我们来看下它的源码：

$.fn.tooltip = function(options){

　　var api = this.data("tooltip");

　　if(api)　　return api;   //如果元素已经实例化过了，那么就直接返回。这里返回的是一组元素的第一个UI实例

　　options = $.extend(true, {} , defaults , options);

　　this.each(function(){

　　　　api = new Tooltip(this, options);   //给每个元素实例化一个UI对象Tooltip

　　　　$(this).data("tooltip", api);

　　});

　　return options.api ? api : this;   //如果配置中的api属性为true，就返回最后一个UI实例，如果为false或者没有，就返回this（jQuery对象），进行链式操作

}

上面的问题，就是如果要调用一组元素的UI实例，我们只能得到最后一个UI实例，尽管我们可以每次只选择一个元素进行UI操作，但是这无法保证。

有一种更好的方式，请看源码：

$.fn.tooltip = function(options){

　　var api = [];

　　this.each(function(){

　　　　api.push(new Tooltip(this, options));    //把UI实例存入到一个数组中api

　　});

　　return options.api ? $.ui.api(api) : this;   //当需要对UI实例进行操作时，返回$.ui.api(api)，$.ui.api方法请看下面源码

}

(function($){

　　$.ui = $.ui || {};

　　$.ui.api = function(opts){     //这里的opts是[UI实例1 , UI实例2 , UI实例3......]

　　　　var api = $(opts),first = opts[0];

　　　　for(var name in first){   //遍历UI实例的每一个属性值

　　　　　　(function(name){

　　　　　　　　if(typeof first[name] === "function"){   //如果是实例Tooltip的方法

　　　　　　　　　　api[name] = (/^get[^a-z]/.test(name))?

　　　　　　　　　　　　function(){  return first[name].apply(first,arguments);   } :  //如果方法名是get开头的方法，那么方法中只执行第一个UI实例的同名方法。

　　　　　　　　　　　　function(){       //如果不是get开头的方法，那么就执行所有UI实例的同名方法。

　　　　　　　　　　　　　　var arg = arguments;

　　　　　　　　　　　　　　api.each(function(idx){

　　　　　　　　　　　　　　　　var apix = api[idx];

　　　　　　　　　　　　　　　　apix[name].apply(apix, arg);

　　　　　　　　　　　　　　});

　　　　　　　　　　　　}

　　　　　　　　}

　　　　　　})(name);

　　　　}

　　　　return api;    //返回的api对象，有UI实例的所有同名的方法

　　}

})(jQuery);

var tooltip = $("#div1,#div2").tooltip( {api:true} );

tooltip.show();   //会同时处理div1和div2两个元素。

tooltip.getXXX();   //只会处理div1元素。

这一课的东西，要理解还是需要一定的时间的，反复去看，就理解了。

下一课，终于来到了MVVM模式的讲解。

 

 

 

加油！