bibliothèque d'expérience de développement jQuery

jQuery est une bibliothèque JavaScript multi-navigateurs qui simplifie les opérations entre HTML et JavaScript. 59 % des 10 000 sites Web les plus visités au monde utilisent jQuery, qui est actuellement la bibliothèque JavaScript la plus populaire. Dans cet article, nous aborderons la bibliothèque d'expérience de développement jQuery de manière globale.

Préface

Quand je réfléchissais à la raison pour laquelle jQuery peut directement fonctionner $, il peut avoir des opérations DOM plus pratiques que les js natifs, et comme tant que vous le souhaitez, vous pouvez directement enchaîner l'opération

Core Framework

Découvrez le code principal de jQuery avec plus de 10 000 lignes de code :

<span style="font-size: 14px;">(function(window, undefined) {<br>	function jQuery(selector){<br>		return new jQuery.fn.init(selector)<br>	}<br>	jQuery.fn = jQuery.prototype = {<br>		init: function () {<br><br>		}<br>	}<br>	jQuery.fn.init.prototype = jQuery.fn;<br>	window.jQuery = window.$ = jQuery;<br>})(window)<br></span>

• Fenêtre de passage des paramètres de la structure de fermeture

• Réduire chaque référence interne La requête temps de fenêtre

• compresse facilement le code

• La structure de fermeture passe dans le temps réel fenêtre des paramètres, puis utilisez le paramètre formel pour recevoir

• paramètre formel non défini

• Étant donné que les navigateurs dotés de versions inférieures d'IE peuvent attribuer avec succès une valeur à undéfini, afin de garantir la pureté de undéfini, une position de paramètre formelle lui est attribuée sans paramètres réels, garantissant qu'elle doit être indéfinie

• sélecteur de paramètres jQuery

• le sélecteur peut être une paire de balises, qui peut être un identifiant, une classe, un descendant, des descendants, etc., peuvent être des objets jQuery,

• affectation d'objet prototype jQuery

• Étendez facilement la méthode de prototype de jQuery

• retourne la méthode de prototype d'instanciation init

• En fait, c'est pour que nous n'ayons pas besoin de nouveau $() à chaque fois que nous utilisons $;

• Pourquoi jQuery a-t-il besoin de créer son propre prototype ? Quant à la méthode, car si vous ne créez pas le vôtre, vous devrez créer d'autres fonctions pour revenir, alors pourquoi ne pas utiliser la vôtre

• Objet prototype jQuery à attribuer à jQuery Le prototype de la méthode prototype init

• Parce que chaque fois qu'une méthode est étendue au prototype jQuery en interne, init aura également cette méthode, n'est-ce pas cool ? Alors, y a-t-il un objet jQuery qui sort de $() ? 🎜>

• expose le membre jQuery disponible à la fenêtre, $

• Après avoir été exposés à la fenêtre, jQuery et $ peuvent être utilisés directement globalement

• Quant à pourquoi $, parce que c'est court, bien sûr, vous pouvez aussi utiliser jQuery( ) à chaque fois

le sélecteur royal-Sizzle

• Sizzle est aussi la base de jQuery Bien sûr, vous pouvez également utiliser Sizzle seul

• comme mentionné ci-dessus $(selector) Le sélecteur de paramètre peut être id, class, descendant, descendant, etc., ou il peut s'agir d'un objet jQuery. Alors, comment pouvons-nous obtenir l'objet jQuery que nous voulons avec seulement $ à chaque fois ? Oui, c'est à cause de Sizzle que Sizzle encapsule des méthodes pour obtenir divers objets DOM et les emballe dans jQuery. objets

• Test de capacité du navigateur

• Il y a un objet de support dans Sizzle . L'objet de support stocke les résultats des tests réguliers des capacités du navigateur

• Utiliser une solution de compatibilité universelle pour les sélecteurs présentant des problèmes de capacités (code de jugement fastidieux)

Régulier
Les expressions régulières sont encore couramment utilisées dans jQuery. les expressions régulières peuvent grandement améliorer notre efficacité de traitement des données

Jugement

• 列如可能是个html标签，那么直接create一个selector标签的DOM对象包装成jQuery对象return出去

• 列如可能是个id名、类名、标签名等等，那么直接通过Sizzle获取到DOM对象包装成jQuery对象return出去

• 判断是在init内部判断selector的类型，

• 包装

• 我已经说了很多次的包装了，没错，jQuery对象其实也是个伪数组，这也是它的设计巧妙之处，因为用数组存储数据方便我们去进行更多的数据处理，比如 $("p").css("color": "red") ,那么jQuery会自动帮我们隐式迭代、再给页面上所有p包含的文字颜色设置为red,简单粗暴的一行代码搞定简直是程序猿的最爱

对外扩展-extend

• jQuery核心的结构处理完毕之后基本上就可以对外使用了，但是我们知道我们是可以基于jQuery来实现插件的，包括jQuery自己可扩展性也必须要求他要对外提供一个接口方便进行二次开发，所以有了extend方法

• 简单的extend就是混入，列子:

<span style="font-size: 14px;">function extend(obj) {<br>        var k;<br>        for(k in obj) {<br>            this[k] = obj[k];<br>        }<br>    }<br><br>    Baiya.extend = extend;<br>    Baiya.fn.extend = extend;<br></span>

 

对静态方法的和实例方法的扩展都要有，比如each方法，可以$.each来使用，也可以是$("p").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来改造一下，如下:

<span style="font-size: 14px;">Baiya.each(("onclick,onmousedown,onmouseenter,onmouseleave," +<br>    "onmousemove,onmouseout,onmouseover,onmouseup,onfocus," +<br>    "onmousewheel,onkeydown,onkeypress,onkeyup,onblur").split(","),     function (i, v) {<br>        var event = v.slice(2);<br>        Baiya.fn[event] = function (callback) {<br>            return this.on(event, callback);<br>        }<br>    });<br></span>

 

属性操作

• 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实现

<span style="font-size: 14px;">// url是请求的接口<br>// params是传递的参数<br>// fn是回调函数<br>function jsonp(url, params, fn){<br>			// cbName实现给url加上哈希，防止同一个地址请求出现缓存<br>            var cbName = `jsonp_${(Math.random() * Math.random()).toString().substr(2)}`;<br>            window[cbName] = function (data) {<br>                fn(data);<br>                // 获取数据后移除script标签<br>                window.document.body.removeChild(scriptElement);<br>            };<br><br>            // 组合最终请求的url地址<br>            var querystring = '';<br>            for (var key in params) {<br>                querystring += `${key}=${params[key]}&`;<br>            }<br>            // 告诉服务端我的回调叫什么<br>            querystring += `callback=${cbName}`;<br><br>            url = `${url}?${querystring}`;<br><br>            // 创建一个script标签，并将src设置为url地址<br>            var scriptElement = window.document.createElement('script');<br>            scriptElement.src = url;<br>            // appendChild(执行)<br>            window.document.body.appendChild(scriptElement);<br>        }<br></span>

 

Animate

• 很抱歉的是jQuery的动画源码我并没有阅读，但是我自己封装了一个动画函数，之后的源码阅读会补上的

• 封装的代码

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

以上内容就是 jQuery 开发经验库的分享，希望能帮助到大家。

相关推荐：

jQuery 开发者应该注意的9个错误_jquery

高效Web开发的10个jQuery代码片段

关于 jQuery的秘密

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!