犀利开发—jQuery内核详解与实践-9_jQ辅助工具

第 1 章 jQ起步

第 2 章 jQ解密技术

第 3 章 高效选择的技巧与原理

第 4 章 文档对象的操作及高效实践

第 5 章 事件封装机制与解析

第 6 章 动画效果设计及其高效实践

第 7 章 Ajax异步通信高效实践

第 8 章 高效开发和使用插件

8.1 创建jQ插件

8.2 创建jQ插件实战

8.3 jQ UI插件应用

2018.1.20 星期六 22：59

第 9 章 jQ辅助工具

P398-P400

9.1 检测浏览器

1 jQuery检测浏览器的类型

$.browser 5个属性：safari,opera,msie,mozilla
缺乏灵活性，1.3本不建议使用

2 JS检测浏览器的类型

var userAgent=navigator.userAgent.toLowerCase()
jQuery.browser={
    version:(userAgent.match(/.+(?:rv|it|ra|ie)[\/:]([\d.]+)/)||[0,'0'])[1],
    safari:/webkit/.test(userAgent),
    opera:/opera/.test(userAgent),
    msie:/msie/.test(userAgent)&&!/opera/.test(userAgent),
    mozilla:/mozilla/.test(userAgent)&&!/(compatible|webkit)/  .test(userAgent)      
}

3 更灵巧的浏览器检测方法

字符串检测法（上面，1.3不再支持了）
现在多，特征检测法

4 检测浏览器版本号

1. jQuery实现
   $.browser.version
2. JS实现
   正则，nav.userAgent

   5 检测浏览器的盒模型

3. jQ
   $.boxModel
4. JS
   function isBoxModel(){

   var d=do.creE('div')
   d.st.wi=d.st.paddLe='1px'
   do.body.appC(d)
   var w=d.offsetWidth
   d.st.disp='none'
   do.body.reC(d)
   return w===2
   

   }

   6 浏览器特性综合测试

   1.3后重新设计了浏览器检测方法。把相关属性都放到support对象中
   boxModel,cssFloat,hrefNormalized,htmlSerialize,leadingWhitespace,
   noCloneEvent,objectAll,opacity,scriptEval,style,tbody

9.2 字符串处理

trim(),param()

1 修剪字符串

1. jQ
2. JS
   function trim(text){

   return (text||"").replace(/^\s+|\s+$/g,"")
   

   }

   2 序列化字符串

3. jQ
   jQuery.param(obj)
4. JS
   function param(a){

   var s=[]
   function add(key,val){
       s[s.length]=encodeURIComponent(key)+'='+encodeURIComponent(value)
   }
   for(var j in a){
       add(j,a[j])
   }
   return s.join("&").replace(/%20/g,"+")
   

   }

9.3 数组处理

1 检测数组

1. jQ
2. JS
   function isArray(obj){

   return Object.prototype.toString.call(obj)==="[object Array]"
   

   }
3. 关于isFunction()函数
   function isArray(obj){

   return Object.prototype.toString.call(obj)==="[object Function]"
   

   }

   2 遍历数组或集合对象

4. jQ
5. JS
   function each(obj,callback,args){

   var name,i=0,length=obj.length
   if(args){//如果存在第三个参数
       if(length===undefined){//如果是对象
           for(name in obj){
               if(callback.apply(obj[name],args)===false)
                   break;//回调函数返回false，跳出循环
           }
       }else{//如果数组
           for(;i<length;){
               if(callback.apply(obj[i++],args)===false)
                   break
           }
       }
   }else{
       if(length===undefined){
           for(name in object){
               if(callback.call(obj[name],name,obj[name])===false)
                   break
           }
       }else{
           for(var val=obj[0];i<length&&callback.call(val,i,val)!==false;
               val=obj[i++]){}
       }
   }
   return obj
   

   }

   3 转换为数组

6. jQ
   jQuery.makeArray($(‘li’))
7. JS

   4 过滤数组

8. jQ
   jQuery.grep(array,callback,[invert])
9. JS
   jQ定义的grep函数用法比较复杂，但使用JS直接定义方法却很简单

   5 映射数组

10. jQ jQuery.map(array,callback)

    6 合并数组

    7 删除数组中重复的元素

11. jQ
    jQuery.unique($arr1)
    只能处理DOM元素数组

// EXCLUDE:上中有些没有用过，而且JS现在已经有很好的数组处理方法

9.4 多库共存

1 解决$名字冲突

2 解决jQuery名字冲突

noConflict:function(deep){
    window.$=_$
        if(deep)
            window.jQuery=_jQuery
    return jQuery        
}

9.5 数据缓存

1 jQ数据缓存的作用

2 定义缓存数据

3 获取缓存数据

4 删除缓存数据

5 jQ数据缓存的JS实现

var expando='jQuery'+now(),uuid=0,windowData={}
jQuery.extend({
    cache:{},
    data:function(elem,name,data){
        elem=elem==window?windowData:elem
        var id=elem[expando]//为当前元素定义一个数据属性
        if(!id){
            id=elem[expando]=++uuid
        }
        //如果缓存数据对象中未存在特定数据的属性
        if(name&&!jQuery.cahce[id]){
            jQuery.cache[id]={}
        }
        if(data!==undefined){
            jQuery.cache[id][name]=data
        }
        return name?jQuery.cache[id][name]:id
    }
})

//下面JS模拟jQ实现方法，并通过示例看数据缓存的作用原理
var expando='jQuery'+now()
uuid=0
windowData={}
cache={}
function data(elem,name,data){
    elem=elem==window?windowData:elem
    var id=elem[expando]
    if(!id) id=elem[expando]=++uuid
    if(name&&!cache[id]) cache[id]={}
    if(data!==undefined) cache[id][name]=data
    return name?cache[id][name]:id
}
function now(){return +new Date}
//为方便jQ对象操作，有绑定到jQuery.fn原型对象上
jQuery.fn.extend({
    data:function(key,value){}
})

6 jQ数据缓存的使用规范

// TODO:数据缓存，在数据方面实用。再研究

9.6 数据队列

‘先进先出’ (FIFO: first in first out)
定义queue()方法实现对队列的完整操作
对于一系列需要按次序执行的函数特别有用：animate动画，Ajax异步请求，交互，ti’me’out

1 添加队列

$div.queue(name,callback)  //name 默认fx

// INCLUED:9.6_queue.html

2 获取队列

$div.queue(name)

如果匹配的元素不止一个，则返回第一个元素的

3 替换队列

$
$div.queue('fa',function(){})
$div.queue('fx',fa)

如果第二参数为空数组，会清除原来的动画序列

4 删除队列函数

$(this).dequeue()

9.7 内核工具

1 遍历jQ对象

2 遍历jQ对象的JS实现

..
// 然后在jQuery.fn对象上绑定原型方法
each:function(callback,args){
    return jQuery.each(this,callback,args)
}

3 获取jQ对象的元素个数

jQuery.fn=jQuery.prototype={
    size:function(){
        return this.length
    }
}

length属性，size()

4 获取选择器和选择范围

selector,context 属性

5 获取jQ对象的元素

var li=$li.get()//转换为DOM集合
li.reverse()

// CHECK:？返回的是jQ对象还是DOM

1.21 00：34

2018.1.21 日 22：34

第 10 章 使用jQ打造Ajax异步交互式动态网站

P401-P423
// INCLUED:10_case.html,case.js,…

10.1 案例背景介绍

电子相册网站

1. 照片按类展示
2. 照片视图包括缩微图、小图和灯箱视图
3. 照片分类可以任意定制
4. 可以定制相册皮肤，实现用户自己决定相册的肤色

   10.2 网站设计思路

   10.3 结构设计

   10.4 样式设计

   10.5 网站脚本设计

// EXCLUDE:通过case.js知道是2017.7月份，看了本书1，2，10章节
//本章内容不错；但是实际，而且现在的工作内容中，更加丰富和变化
//基于现在的工作，没有价值；但是ajax的思想是一直存在的

1.21 23：52