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

jQuery 개발 경험 라이브러리

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

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

    • Sizzle은 jQuery의 뿌리이기도 합니다. 물론 Sizzle만 단독으로 사용해도 됩니다
    • 위에서 언급했듯이 $(selector)의 매개변수 선택자는 id, class,Descendant,Descendant 등이 될 수 있습니다. jQuery 객체일 수도 있으므로 $를 클릭할 때마다 그것에 대해 생각할 수 있습니다. jQuery를 성공적으로 가져올 수 있는 방법은 무엇입니까? Sizzle은 다양한 DOM 객체를 얻기 위한 메소드를 캡슐화하여 jQuery 객체로 패키징합니다. . 지원 개체는 일반 브라우저 기능 테스트 결과를 저장합니다
    • 기능 문제가 있는 선택자의 경우 범용 호환성 솔루션을 사용합니다(지루한 판단) 코드)

    Regular
  • 정규식은 여전히 ​​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 开发经验库的分享,希望能帮助到大家。

相关推荐:

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

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

关于 jQuery的秘密

위 내용은 jQuery 개발 경험 라이브러리의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.