집 > 기사 > 웹 프론트엔드 > jQuery 개발 경험 라이브러리

jQuery 개발 경험 라이브러리

小云云원래의: 2017-12-05 09:07:191220검색

jQuery는 HTML과 JavaScript 간의 작업을 단순화하는 크로스 브라우저 JavaScript 라이브러리입니다. 세계에서 가장 많이 방문한 상위 10,000개 웹사이트 중 59%가 현재 가장 인기 있는 JavaScript 라이브러리인 jQuery를 사용합니다. 이 기사에서는 jQuery 개발 경험 라이브러리에 대해 전반적으로 논의합니다.

머리말

jQuery가 직접 $ 연산을 할 수 있는 이유를 생각해보니 네이티브 js보다 DOM 연산이 더 편리하고 원하는 만큼 직접 연쇄 연산이 가능합니다

Core Framework

10,000줄이 넘는 코드로 이루어진 jQuery 핵심 코드 발견:

<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>

매개변수 창을 전달하는 닫힌 구조

창에 대한 각 내부 참조의 쿼리 시간을 줄입니다.
코드 압축에 편리함
전달된 패키지 구조 실제 매개변수 창을 사용하고 형식 매개변수를 사용하여

형식 매개변수를 받습니다. 정의되지 않은 경우 형식 매개변수를 제공합니다. 실제 매개변수가 없는 위치는 정의되지 않았음을 보장합니다

jQuery 전달 매개변수 선택기

selector는 ID일 수 있는 태그 쌍일 수 있습니다. 클래스, 자손, 자손 등 jQuery 객체일 수 있습니다.

jQuery 프로토타입 객체 할당

jQuery의 프로토타입 메서드를 편리하게 확장

프로토타입 반환 메소드 초기화

사실 $를 사용할 때마다 새로운 $()가 필요하지 않습니다. 새로운 함수를 반환하려면 새로운 다른 함수가 필요하므로 자신을 사용하는 것이 좋습니다

jQuery 프로토타입 개체는 jQuery 프로토타입 메서드 init
때문에 메소드가 내부적으로 jQuery 프로토타입으로 확장되면 init에도 이 메소드가 있습니다. 멋지지 않습니까? $()에서 나오는 jQuery 객체가 있습니까? 멤버 jQuery를 $

창에 노출시킨 후 jQuery와 $를 글로벌 세계에서 직접 사용할 수 있습니다

$가 있는 이유는 짧기 때문입니다. 물론 매번 jQuery()를 사용할 수도 있습니다

Queen Selector-Sizzle

정규식은 여전히 jQuery에서 많이 사용됩니다. 정규식을 사용하면 데이터 처리 효율성을 크게 향상시킬 수 있습니다
Judgment

列如可能是个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 开发经验库的分享，希望能帮助到大家。