首頁  >  文章  >  web前端  >  關於 jQuery的秘密

關於 jQuery的秘密

小云云
小云云原創
2017-11-25 09:37:241393瀏覽

關於jQuery有哪些特色呢?動態特效、AJAX、透過外掛程式來擴充、方便的工具-例如瀏覽器版本判斷、漸進增強、鍊式呼叫、多瀏覽器支持,支援Internet Explorer6.0+、Opera9.0+、Firefox2+、Safari2.0+ 、Chrome1.0+(在2.0.0中取消了對Internet Explorer6,7,8的支援)。

有時候我在想jQuery為什麼可以直接$操作,可以擁有比原生js更便利的DOM操作,而且只要你想就可以直接鍊式操作下去

#核心框架

揭開一萬多行程式碼的jQuery核心程式碼:

(function(window, undefined) {function jQuery(selector){return new jQuery.fn.init(selector)
}
jQuery.fn = jQuery.prototype = {
init: function () {
}
}
jQuery.fn.init.prototype = jQuery.fn;window.jQuery = window.$ = jQuery;
})(window)

閉包結構傳參window

減少內部每次引用window的查詢時間

方便壓縮程式碼

閉包結構傳入實參window,然後裡面用形參接收

形參undefined

因為ie低版本的瀏覽器可以給undefined賦值成功,所以為了確保undefined的純潔給它一個形參的位置而沒有實參,保證了它一定是undefined

jQuery傳參selector

selector可以是一對標籤,可以是id、類別、後代、子代等等,可以是jQuery對象,

jQuery原型對象賦值

方便擴展jQuery的原型方法

return 實例化原型方法init

其實就是為了我們每次使用$不用new $();

為什麼jQuery要new自己的原型方法呢,因為不new自己的就要new其他的函數返回,那幹嘛不自己利用自己

jQuery原型物件賦值給jQuery原型方法init的原型

因為內部給jQuery原型每擴展一個方法init也會有該方法,是不是很酷炫,init有了那麼$()出來的jQuery物件是不是也有啦

給window暴露可利用成員jQuery,$

給window暴露後那麼全域都可以直接使用了jQuery和$了

至於為什麼有$,因為短啊,當然你也可以每次jQuery()來使用

御用選擇器-Sizzle

Sizzle也是jQuery的根本,當然了你也單獨使用Sizzle

上面說過$(selector)的參數selector可以是id、類、後代、子代等等,可以是jQuery對象,那麼咱們每次$一下就可以心想事成的得到我們想要的jQuery物件是怎麼做到的呢,沒錯,就是因為Sizzle,Sizzle封裝了取得各種dom物件的方法,並且會把他們包裝成jQuery物件

#瀏覽器能力測試

Sizzle內部有個support對象,support對象儲存著正規測試瀏覽器能力的結果

對於有能力問題的選擇器使用通用相容方案解決(繁瑣的判斷程式碼)

正規

正規表示式在jQuery中使用的還是比較多的,正規的使用可以很大的提交我們對資料的處理效率

判斷

列如可能是個html標籤,那麼直接create一個selector標籤的DOM物件包裝成jQuery物件return出去

欄位如可能是個id名、類別名稱、標籤名稱等等,那麼直接透過Sizzle取得到DOM物件包裝成jQuery物件return出去

判斷是在init內部判斷selector的類型,

包裝

我已經說了很多次的包裝了,沒錯,jQuery物件其實也是個偽數組,這也是它的設計巧妙之處,因為用數組儲存資料方便我們去進行更多的資料處理,例如$("div").css("color ": "red") ,那麼jQuery會自動幫我們隱式迭代、再給頁面上所有div包含的文字顏色設定為red,簡單粗暴的一行程式碼搞定簡直是程式猿的最愛

對外擴展-extend

jQuery核心的結構處理完畢之後基本上就可以對外使用了,但是我們知道我們是可以基於jQuery來實現插件的,包括jQuery自己可擴展性也必須要求他要對外提供一個介面方便進行二次開發,所以有了extend方法

簡單的extend就是混入,列子:

function extend(obj) {        var k;        for(k in obj) {            this[k] = obj[k];
        }
    }
    Baiya.extend = extend;
    Baiya.fn.extend = extend;

對靜態方法的和實例方法的擴充都要有,例如each方法,可以$.each來使用,也可以是$("div").each來使用

之後jQuery一些方法都是基於extend來擴展的,當然我們自己也可以基於jQuery擴展方法

DOM操作

DOM操作也是jQuery的一大特點,因為它太好用了,包含了我們所能想到的所有使用場景,完善了增刪查改常用的方法

jQuery取得和設定類別的方法如html()/css()/val()等等這些傳參是設定值不傳參是取得值

#鍊式程式設計

jQuery是支援鍊式程式設計的,只要你想你就可以一行程式碼寫完所有的功能,這是怎麼做到的呢

每一個改變原​​型鏈的方法都會把目前的this物件保存成他自己的屬性,然後可以呼叫end方法找到上一級鏈從而方便我們可以進行鍊式操作

#事件操作

#jQuery的事件操作一般可以透過click類(mouseover/mouseleave等等)和on來使用,但是click類別的實作是呼叫on的

on的实现是对原生的onclick类的处理,因为相同的原生的事件在同一个DOM对象上只能被绑定一次,如果再次绑定会覆盖掉上一次的,所以jQuery帮我们封装了事件的存储,把相同的事件分成一个数组存储在一个对象里面,然后对数组进行遍历,依次调用数组里存储的每个方法

on实现之后会把所有的事件处理字符串处理一下用on来改造一下,如下:

Baiya.each(("onclick,onmousedown,onmouseenter,onmouseleave," +    "onmousemove,onmouseout,onmouseover,onmouseup,onfocus," +    "onmousewheel,
onkeydown,onkeypress,onkeyup,onblur").split(","),     function (i, v) {        var event = v.slice(2);
        Baiya.fn[event] = function (callback) {            return this.on(event, callback);
        }
    });

属性操作

jQuery也提供给了我们方便的属性操作,底层就是对原生方法的包装,处理兼容性问题,如果jQuery不对IE浏览器的兼容处理的话,那么它的代码量可能会缩一半,当然锅不能全部甩给IE,比如innerText方法火狐是不支持的,但是支持textContent方法,所以jQuery会尽可能的处理这种浏览器带来的差异

样式操作

基本思想如上

Ajax操作

Ajax可以说是前端的跨越性进步,毫不夸张的说如果没有Ajax的发展,那么今天的前端可能不叫前端,可能是美工……

Ajax是什么?

在我的理解来看Ajax就是一个方法,这个方法遵循着http协议的规范,我们可以使用这个方法来向服务器请求少量的数据,有了数据之后我们就可以操作DOM来达到局部更新网页的目的,这是一个非常酷的事情

jQuery的Ajax是基于XMLHttpRequest的封装,当然了他也有兼容性问题,具体的封装见我之前的文章 简单的ajax封装

具体就是区别get和post请求的区别,get请求的传参是直接拼接在url结尾,而post请求需要在send()里面传递,并且post请求还要设置请求头setRequestHeader("content-type", "application/x-www-form-urlencoded")

请求后对json或者text或者xml的数据进行处理就可以渲染到页面了

提到Ajax就不得不提到跨域了

跨域简单的来说限制了非同源(ip/域名/端口/协议)的数据交互,当然这肯定是极好的,因为如果不限制那么你的网页别人也可以操作是不是很恐怖

但是有些情况下我们需要调用别人的服务器数据,而且别人也愿意怎么办呢,程序员是很聪明的,html标签中img,script,link等一些带有src属性的标签是可以请求外部资源的,img和link得到的数据是不可用的,只有script标签请求的数据我们可以通过函数来接收,函数的参数传递可以是任何类型,所以创建一个函数,来接收,参数就是请求到的数据,而对方的数据也要用该函数来调用就可以实现跨域了

简单封装jsonp实现

// url是请求的接口// params是传递的参数// fn是回调函数function jsonp(url, params, fn){	// cbName实现给url加上哈希,防止同一个地址请求出现缓存
           var cbName = `jsonp_${(Math.random() * Math.random()).toString().substr(2)}`;            window[cbName] = function (data) {
               fn(data);                // 获取数据后移除script标签
               window.document.body.removeChild(scriptElement);
           };            // 组合最终请求的url地址
           var querystring = '';            for (var key in params) {
               querystring += `${key}=${params[key]}&`;
           }            // 告诉服务端我的回调叫什么
           querystring += `callback=${cbName}`;

           url = `${url}?${querystring}`;            // 创建一个script标签,并将src设置为url地址
           var scriptElement = window.document.createElement('script');
           scriptElement.src = url;            // appendChild(执行)
           window.document.body.appendChild(scriptElement);
       }

Animate

封装的代码

// element设置动画的DOM对象// attrs设置动画的属性object// fn是回调函数function animate(element, attrs, fn) {        //清除定时器
        if(element.timerId) {
            clearInterval(element.timerId);
        }
        element.timerId = setInterval(function () {            //设置开关
            var stop = true;            //遍历attrs对象,获取所有属性
            for(var k in attrs) {                //获取样式属性 对应的目标值
                var target = parseInt(attrs[k]);                var current = 0;                var step = 0;                //判断是否是要修改透明度的属性
                if(k === "opacity") {
                    current = parseFloat( getStyle(element, k)) * 100 || 0;
                    target = target * 100;
                    step = (target - current) / 10;
                    step = step > 0 ? Math.ceil(step) : Math.floor(step);
                    current += step;
                    element.style[k] = current / 100;                    //兼容ie
                    element.style["filter"] = "alpha(opacity="+  current +")";
                }else if(k === "zIndex") {
                    element.style[k] = target;
                } else {                    //获取任意样式属性的值,如果转换数字失败,返回为0
                    current = parseInt(getStyle(element, k)) || 0;
                    step = (target - current) / 10;                    console.log("current:" + current + "  step:" + step);
                    step = step > 0 ? Math.ceil(step) : Math.floor(step);
                    current += step;                    //设置任意样式属性的值
                    element.style[k] = current + "px";
                }                if(step !== 0) {                    //如果有一个属性的值没有到达target  ,设置为false
                    stop = false;
                }
            }            //如果所有属性值都到达target  停止定时器
            if(stop) {
                clearInterval(element.timerId);                //动画执行完毕  回调函数
                if(fn) {
                    fn();
                }
            }
        },30);
    }    //获取计算后的样式的值
    function getStyle(element, attr) {        //能力检测
        if(window.getComputedStyle) {            return window.getComputedStyle(element, null)[attr];
        }else{            return element.currentStyle[attr];
        }
    }

以上讲述这么多来分析jQuery,我相信大家也一定对jQuery有了新的认识和认知,希望大家能有收获。

相关推荐:

如何高效使用jquery

JS和JQUERY有什么区别

jq源码中绑在$,jQuery上面的方法

以上是關於 jQuery的秘密的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn