为了账号安全,请及时绑定邮箱和手机立即绑定
  • 常见的栈与队列操作:push、pop、shift、unshift、求和、each、排序及筛选等。 快速找到集合中对应的目标元素:.get()、:index()、 :lt()、:gt()、:even()及 :odd()。它们会过滤它们前面的匹配表达式的集合元素,筛选的依据就是这个元素在原先匹配集合中的顺序。
    查看全部
  • end()方法主要用于JQ的链式属性中。当没有使用链式时,我们通常只是调用变量名上的前一个对象,所以不需要操作栈。 end()源码: end: function() { return this.prevObject || this.constructor(null); } prevObject在构建jQuery对象的时候,通过pushStack方法构建。
    查看全部
    0 采集 收起 来源:end与addBack

    2017-09-08

  • JQ内部维护着一个JQ对象栈,每个遍历方法都会找到一组新元素(一个JQ对象),然后JQ会把这组元素推入到栈中。 每个JQ对象都有3个属性:context、selector和prevObject。其中prevObject指向这个对象栈中的前一个对象,通过这个属性可以回溯到最初的DOM元素集中。比如:$("ul").find("li")返回li集合,prevObject则指向$("ul")。 回溯方法: .end()结束当前筛选操作,回到前一个JQ对象。 .addBack()(又名andSelf)把堆栈中之前的元素集添加到当前集合。
    查看全部
  • 插件接口:$.extend(target, [object1], ..., [objectN]) jQuery.extend = jQuery.fn.extend = function(){...}; jQuery.extend的this指向jQuery对象,jQuery.fn.extend的this指向fn对象(即JQ原型对象)。 插件开发有两种:1、挂在JQ命名空间下的全局函数(静态方法);2、挂在JQ原型下的方法(实例方法)。 插件接口把扩展的功能从主体框架中剥离出去,降低了框架的复杂度,实现了独立功能与框架的松耦合。
    查看全部
  • 链式调用其实就是一种Internal DSL。 JQ通过简单扩展原型方法并通过“return this”的形式来实现跨浏览器的链式调用;利用JS下的简单工厂方法模式,为所有对于同一个DOM对象的操作指定同一个实例。 优点: 1、节约了JS代码; 2、返回的都是同一个对象,可以提高代码的效率。 实现链式的基本条件:实例对象先创建好,调用自己的方法。
    查看全部
  • 分离构造器后,通过init.prototype = jQuery.fn把jQuery.prototype的引用赋给jQuery.fn.init.prototype,从而把init和jQuery构造器的原型给关联起来。 分离构造器实现了静态与实例方法的共享,实例方法(init的原型链方法)取于静态方法,静态方法挂在jQuery构造器上。
    查看全部
  • 构建对象的步骤:创建一个新对象 -> 将构造函数的作用域赋给新对象(所以this指向新对象) -> 执行构造函数中的代码 -> 返回这个新对象。 JQ把原型上的一个init方法作为构造器,避免了死循环问题: var jq = function(selector) { return new jq.fn.init(selector); } 通过new把init方法和jq方法分离成2个独立的构造器,此时jq的this就和原型链关联起来了。
    查看全部
    0 采集 收起 来源:分离构造器

    2018-03-22

  • JQ采用原型式结构,节省性能。
    查看全部
    0 采集 收起 来源:对象的构建

    2017-09-08

  • 冲突情况: 1、JQ采用$作为命名空间,可能与别的库或插件冲突。 2、JQ版本更新太快,插件跟不上,导致不同版本对插件的支持度不一样。 解决方案:使用noConflict函数,将变量的控制权让给第一个实现它的那个库。 该函数必须在导入JQ后、导入另一个冲突库前使用。 运行该函数后,就只能使用JQ变量访问JQ对象,比如$("#id")要换成jQuery("#id")。 代码: var _jQuery = window.jQuery, _$ = window.$; jQuery.noConflict = function( deep ) { if ( window.$ === jQuery ) { window.$ = _$; } if ( deep && window.jQuery === jQuery ) { window.jQuery = _jQuery; } return jQuery; };
    查看全部
  • DOM文档加载顺序:解析HTML结构 -> 加载外部JS和CSS文件 -> 解析并执行JS代码 -> 构造HTML DOM模型(ready) -> 加载图片等外部文件 -> 页面加载完毕(load)。 ready构建了基本的DOM结构,越快加载越好,因此ready比load先执行。 JQ的兼容策略: 针对高级的浏览器,使用DOMContentLoaded事件。 对于低版本IE浏览器,如果浏览器存在document.onreadystatechange事件,且该事件触发时document.readyState=='complete',则视为DOM树已载入;在非irame内时,不断地通过能否执行doScroll方法判断DOM是否加载完毕,doScroll未产生异常就表示加载完毕;通过查看readyState的状态来确定页面的加载是否完成了,保证执行的正确。
    查看全部
  • jQuery内部采用了一种叫“类数组对象”的方式作为存储结构,所以我们既可以像对象一样处理jQuery操作,也能像数组一样使用push、pop、shift、unshift、sort、each、map等类数组的方法操作jQuery对象。 jQuery的入口都是统一的$, 通过传递参数的不同,实现了9种方法的重载: 1. jQuery([selector,[context]]) 2. jQuery(element) 3. jQuery(elementArray) 4. jQuery(object) 5. jQuery(jQuery object) 6. jQuery(html,[ownerDocument]) 7. jQuery(html,[attributes]) 8. jQuery() 9. jQuery(callback) jQuery的无new构建原理:函数内部首先保证通过new操作符构建,这样就能保证当前构建的是一个带有this的实例对象,然后就可以把所有的属性与方法作为对象的key与value的方式给映射到this上。 同时,jQuery在结构上做了很多优化,不仅实现类数组结构、方法的原型共享,还实现方法的静态与实例的共存。
    查看全部
  • JQ利用JS函数作用域的特性,采用IIFE包裹自身的方法来解决命名空间与变量污染的问题。 JQ的IIFE写法: 1、(function(window, factory) { factory(window) }(this, function() { return function() { //jQuery的调用 } })) 2、var factory = function(){ return function(){ //执行方法 } } var jQuery = factory(); 3、(function(window, undefined) { var jQuery = function() {} // ... window.jQuery = window.$ = jQuery; })(window);
    查看全部
  • JQ2.1版本分为五大块:选择器、DOM操作、事件、AJAX、动画。 共13个模块:核心方法、回调函数、异步队列、数据缓存、队列操作、选择器引、属性操作、节点遍历、文档处理、样式操作、属性操作、事件体系、AJAX交互、动画引擎。
    查看全部
    0 采集 收起 来源:jQuery整体架构

    2017-09-08

  • JQ定义:一个轻量的JS库,兼容CSS3和各个浏览器,使用户方便地处理HTML、事件、效果和AJAX交互等。JQ2.0+不再支持IE8-。 JQ核心理念:简洁的API,优雅的链式,强大的查询,便捷的操作。 前端开发的基础核心:浏览器兼容,属性获取,逻辑流程,性能,……。
    查看全部
    0 采集 收起 来源:jQuery设计理念

    2017-09-08

  • 任何库与框架设计的第一个要点就是解决命名空间与变量污染的问题。 jQuery就是利用了JavaScript函数作用域的特性,采用立即调用表达式包裹了自身的方法来解决这个问题。 写法3: (function(window, undefined) { var jQuery = function() {} // ... window.jQuery = window.$ = jQuery; })(window); 从上面的代码可看出,自动初始化这个函数,让其只构建一次。详细说一下这种写法的优势: 1、window和undefined都是为了减少变量查找所经过的scope作用域。当window通过传递给闭包内部之后,在闭包内部使用它的时候,可以把它当成一个局部变量,显然比原先在window scope下查找的时候要快一些。 2、undefined也是同样的道理,其实这个undefined并不是JavaScript数据类型的undefined,而是一个普普通通的变量名。只是因为没给它传递值,它的值就是undefined,undefined并不是JavaScript的保留字。
    查看全部

举报

0/150
提交
取消
课程须知
源码的阅读不是一蹴而就的,需要大家有一定的功底,比如jQuery的基础运用以及API的熟悉度,除此之外要有牢固的javascript、DOM、CSS的基础功底,甚至还需要理解常见的设计模式、数据结构等等。当然大家也不要被这些给吓住了,理解,总是需要一种慢慢的学习过程。
老师告诉你能学到什么?
通过本课程的学习,您可以由浅入深地剖析jQuery库的设计与实现。 其中我们围绕的重心: 1、设计理念 2、结构组织 3、接口设计 4、模式运用 5、场景套用

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!