这次给大家带来jQuery内init构造器使用详解,jQuery内init构造器使用的注意事项有哪些,下面就是实战案例,一起来看一下。
init 构造器
由于这个函数直接和 jQuery()
的参数有关,先来说下能接受什么样的参数。
源码中接受 3 个参数:
init: function (selector, context, root) { ... }
jQuery()
,空参数,这个会直接返回一个空的 jQuery 对象,return this。jQuery( selector [, context ] )
,这是一个标准且常用法,selector 表示一个 css 选择器,这个选择器通常是一个字符串,#id 或者 .class 等,context 表示选择范围,即限定作用,可为 DOM,jQuery 对象。jQuery( element|elements )
,用于将一个 DOM 对象或 DOM 数组封装成 jQuery 对象。jQuery( jQuery object|object )
,会把普通的对象或 jQuery 对象包装在 jQuery 对象中。jQuery( html [, owner<a href="http://www.php.cn/code/658.html" target="_blank">Document</a> ] )
,这个方法用于将 html 字符串先转成 DOM 对象后在生成 jQuery 对象。jQuery( html, attributes )
,和上一个方法一样,不过会将 attributes 中的方法和属性绑定到生成的 html DOM 中,比如 class 等。jQuery( callback )
,此方法接受一个回掉函数,相当于 window.onload 方法,只是相对于。
介绍完入口,就开始来看源码。
init: function (selector, context, root) { var match, elem; // 处理: $(""), $(null), $(undefined), $(false) if (!selector) { return this; } // rootjQuery = jQuery( document ); root = root || rootjQuery; // 处理 HTML 字符串情况,包括 $("<p>")、$("#id")、$(".class") if (typeof selector === "string") { //此部分拆分,留在后面讲 // HANDLE: $(DOMElement) } else if (selector.nodeType) { this[0] = selector; this.length = 1; return this; // HANDLE: $(function) } else if (jQuery.isFunction(selector)) { return root.ready !== undefined ? root.ready(selector) : // Execute immediately if ready is not present selector(jQuery); } return jQuery.makeArray(selector, this); }</p>
上面有几点需要注意,root = root || rootjQuery;
,这个参数在前面介绍用法的时候,就没有提及,这个表示 document,默认的话是 rootjQuery,而 rootjQuery = jQuery( document )
。
可以看出,对于处理 $(DOMElement)
,直接是把 jQuery 当作一个数组,this[0] = DOMElement
。其实,这要从 jQuery 的基本构造讲起,我们完成一个 $('p.span')
之后,然后一个 jQuery 对象(this),其中会得到一组(一个)DOM 对象,jQuery 会把这组 DOM 对象当作数组元素添加过来,并给一个 length。后面就像一些链式函数操作的时候,若只能对一个 DOM 操作,比如 width、height,就只对第一个元素操作,若可以对多个 DOM 操作,则会对所有 DOM 进行操作,比如 css()。
jQuery 大题思路如下,这是一个非常简单点实现:
jQuery.prototype = { // 简单点,假设此时 selector 用 querySelectorAll init: function(selector){ var ele = document.querySelectorAll(selector); // 把 this 当作数组,每一项都是 DOM 对象 for(var i = 0; i <p style="text-align: left;">所以对于 DOMElement 的处理,直接将 DOM 赋值给数组后,return this。</p><p style="text-align: left;"><code>jQuery.makeArray</code> 是一个绑定 数组的函数,和上面的原理一样,后面会谈到。</p><p style="text-align: left;">在介绍下面的内容之前,先来介绍一个 jQuery 中一个识别 Html 字符串的<a href="http://www.php.cn/wiki/588.html" target="_blank">正则表达式</a>,</p><pre class="brush:php;toolbar:false">var rquickExpr = /^(?:\s*()[^>]*|#([\w-]+))$/; rquickExpr.exec('<p>') //["</p><p>", "</p><p>", undefined] rquickExpr.exec('</p><p></p>') //["<p></p>", "<p></p>", undefined] rquickExpr.exec('#id') //["#id", undefined, "id"] rquickExpr.exec('.class') //null
上面这一系列的正则表达式 exec,只是为了说明 rquickExpr 这个正则表达式执行后的结果,首先,如果匹配到,结果数组的长度是 3,如果匹配到
这种 html,数组的第三个元素是 underfined,如果匹配到 #id,数组的第二个元素是 underfined,如果匹配不到,则为 null。
另外还有一个正则表达式:
var rsingleTag = ( /^:\x20\t\r\n\f]*)[\x20\t\r\n\f]*\/?>(?:|)$/i ); rsingleTag.test('<p></p>') //true rsingleTag.test('<p></p>') //true rsingleTag.test('<p></p>') //false rsingleTag.test('<p>') //false</p>
这个正则表达式主要是对 html 的字符串进行验证,达到不出差错的效果。在这里不多介绍 exec 和正则表达式了。
下面来看下重点的处理 HTMl 字符串的情况:
if (selector[0] === "" && selector.length >= 3) { // 这个其实是强行构造了匹配 html 的情况的数组 match = [null, selector, null]; } else { match = rquickExpr.exec(selector); } // macth[1] 限定了 html,!context 对 #id 处理 if (match && (match[1] || !context)) { // HANDLE: $(html) -> $(array) if (match[1]) { //排除 context 是 jQuery 对象情况 context = context instanceof jQuery ? context[0] : context; // jQuery.merge 是专门针对 jQuery 合并数组的方法 // jQuery.parseHTML 是针对 html 字符串转换成 DOM 对象 jQuery.merge(this, jQuery.parseHTML( match[1], context && context.nodeType ? context.ownerDocument || context : document, true)); // HANDLE: $(html, props) if (rsingleTag.test(match[1]) && jQuery.isPlainObject(context)) { for (match in context) { // 此时的 match 非彼时的 match if (jQuery.isFunction(this[match])) { this[match](context[match]); // ...and otherwise set as attributes } else { this.attr(match, context[match]); } } } return this; // 处理 match(1) 为 underfined 但 !context 的情况 } else { elem = document.getElementById(match[2]); if (elem) { // this[0] 返回一个标准的 jQuery 对象 this[0] = elem; this.length = 1; } return this; } // 处理一般的情况,find 实际上上 Sizzle,jQuery 已经将其包括进来,下章详细介绍 // jQuery.find() 为 jQuery 的选择器,性能良好 } else if (!context || context.jquery) { return (context || root).find(selector); // 处理 !context 情况 } else { // 这里 constructor 其实是 指向 jQuery 的 return this.constructor(context).find(selector); }
关于 nodeType,这是 DOM 的一个属性,详情 Node.nodeType MDN。nodeType 的值一般是一个数字,比如 1 表示 DOM,3 表示文字等,也可以用这个值是否存在来判断 DOM 元素,比如 context.nodeType。
整个 init 函数等构造逻辑,非常清晰,比如 (selector, context, root) 三个参数,分别表示选择的内容,可能存在的的限制对象或 Object,而 root 则默认的 jQuery(document)
。依旧采用 jQuery 常用的方式,对每一个变量的处理都非常的谨慎。
如果仔细看上面两部分源代码,我自己也加了注释,应该可以把整个过程给弄懂。
find 函数实际上是 Sizzle,已经单独出来一个项目,被在 jQuery 中直接使用,将在下章介绍 jQuery 中的 Sizzle 选择器。通过源码,可以发现:
jQuery.find = function Sizzle(){...} jQuery.fn.find = function(selector){ ... //引用 jQuery.find jQuery.find() ... }
衍生的函数
init 函数仍然调用了不少 jQuery 或 jQuery.fn
的函数,下面来逐个分析。
jQuery.merge
这个函数通过名字,就知道它是用来干什么的,合并。
jQuery.merge = function (first, second) { var len = +second.length, j = 0, i = first.length; for (; j <p style="text-align: left;">这样子就可以对类似于数组且有 length 参数的类型进行合并,我感觉主要还是为了方便对 jQuery 对象的合并,因为 jQuery 对象就是有 length 的。</p><p style="text-align: left;"><strong>jQuery.parseHTML</strong></p><p style="text-align: left;">这个函数也非常有意思,就是将一串 HTML 字符串转成 DOM 对象。</p><p style="text-align: left;">首先函数接受三个参数,第一个参数 data 即为 html 字符串,第二个参数是 document 对象,但要考虑到浏览器的兼容性,第三个参数 keepScripts 是为了删除节点里所有的 script tags,但在 parseHTML 里面没有体现,主要还是给 buildFragment 当作参数。</p><p style="text-align: left;">总之返回的对象,是一个 DOM 数组或空数组。</p><pre class="brush:php;toolbar:false">jQuery.parseHTML = function (data, context, keepScripts) { if (typeof data !== "string") { return []; } // 平移参数 if (typeof context === "boolean") { keepScripts = context; context = false; } var base, parsed, scripts; if (!context) { // 下面这段话的意思就是在 context 缺失的情况下,建立一个 document 对象 if (support.createHTMLDocument) { context = document.implementation.createHTMLDocument(""); base = context.createElement("base"); base.href = document.location.href; context.head.appendChild(base); } else { context = document; } } // 用来解析 parsed,比如对 "<p></p>" 的处理结果 parsed:["<p></p>", "p"] // parsed[1] = "p" parsed = rsingleTag.exec(data); scripts = !keepScripts && []; // Single tag if (parsed) { return [context.createElement(parsed[1])]; } // 见下方解释 parsed = buildFragment([data], context, scripts); if (scripts && scripts.length) { jQuery(scripts).remove(); } return jQuery.merge([], parsed.childNodes); }
buildFragment 函数主要是用来建立一个包含子节点的 fragment 对象,用于频发操作的添加删除节点。parsed = buildFragment([data], context, scripts);
建立好一个 fragment 对象,用 parsed.childNodes
来获取这些 data 对应的 HTML。
jQueyr.makeArray
jQuery 里面的函数调用,真的是一层接一层,虽然有时候光靠函数名,就能知道这函数的作用,但其中思考之逻辑还是挺参考意义的。
jQuery.makeArray = function (arr, results) { var ret = results || []; if (arr != null) { if (isArrayLike(Object(arr))) { jQuery.merge(ret, typeof arr === "string" ? [arr] : arr); } else { push.call(ret, arr); } } return ret; }
makeArray 把左边的数组或字符串并入到右边的数组或一个新数组,其中又间接的引用 jQuery.merge
函数。
接下来是着 isArrayLike 函数,可能需要考虑多方面的因素,比如兼容浏览器等,就有了下面这一长串:
function isArrayLike(obj) { // Support: real iOS 8.2 only (not reproducible in simulator) // `in` check used to prevent JIT error (gh-2145) // hasOwn isn't used here due to false negatives // regarding Nodelist length in IE var length = !!obj && "length" in obj && obj.length, type = jQuery.type(obj); if (type === "function" || jQuery.isWindow(obj)) { return false; } return type === "array" || length === 0 || typeof length === "number" && length > 0 && (length - 1) in obj; }
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
위 내용은 jQuery의 init 생성자 사용에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

예, JavaScript의 엔진 코어는 C로 작성되었습니다. 1) C 언어는 효율적인 성능과 기본 제어를 제공하며, 이는 JavaScript 엔진 개발에 적합합니다. 2) V8 엔진을 예를 들어, 핵심은 C로 작성되며 C의 효율성 및 객체 지향적 특성을 결합하여 C로 작성됩니다.

JavaScript는 웹 페이지의 상호 작용과 역학을 향상시키기 때문에 현대 웹 사이트의 핵심입니다. 1) 페이지를 새로 고치지 않고 콘텐츠를 변경할 수 있습니다. 2) Domapi를 통해 웹 페이지 조작, 3) 애니메이션 및 드래그 앤 드롭과 같은 복잡한 대화식 효과를 지원합니다. 4) 성능 및 모범 사례를 최적화하여 사용자 경험을 향상시킵니다.

C 및 JavaScript는 WebAssembly를 통한 상호 운용성을 달성합니다. 1) C 코드는 WebAssembly 모듈로 컴파일되어 컴퓨팅 전력을 향상시키기 위해 JavaScript 환경에 도입됩니다. 2) 게임 개발에서 C는 물리 엔진 및 그래픽 렌더링을 처리하며 JavaScript는 게임 로직 및 사용자 인터페이스를 담당합니다.

JavaScript는 웹 사이트, 모바일 응용 프로그램, 데스크탑 응용 프로그램 및 서버 측 프로그래밍에서 널리 사용됩니다. 1) 웹 사이트 개발에서 JavaScript는 HTML 및 CSS와 함께 DOM을 운영하여 동적 효과를 달성하고 jQuery 및 React와 같은 프레임 워크를 지원합니다. 2) 반응 및 이온 성을 통해 JavaScript는 크로스 플랫폼 모바일 애플리케이션을 개발하는 데 사용됩니다. 3) 전자 프레임 워크를 사용하면 JavaScript가 데스크탑 애플리케이션을 구축 할 수 있습니다. 4) node.js는 JavaScript가 서버 측에서 실행되도록하고 동시 요청이 높은 높은 요청을 지원합니다.

Python은 데이터 과학 및 자동화에 더 적합한 반면 JavaScript는 프론트 엔드 및 풀 스택 개발에 더 적합합니다. 1. Python은 데이터 처리 및 모델링을 위해 Numpy 및 Pandas와 같은 라이브러리를 사용하여 데이터 과학 및 기계 학습에서 잘 수행됩니다. 2. 파이썬은 간결하고 자동화 및 스크립팅이 효율적입니다. 3. JavaScript는 프론트 엔드 개발에 없어서는 안될 것이며 동적 웹 페이지 및 단일 페이지 응용 프로그램을 구축하는 데 사용됩니다. 4. JavaScript는 Node.js를 통해 백엔드 개발에 역할을하며 전체 스택 개발을 지원합니다.

C와 C는 주로 통역사와 JIT 컴파일러를 구현하는 데 사용되는 JavaScript 엔진에서 중요한 역할을합니다. 1) C는 JavaScript 소스 코드를 구문 분석하고 추상 구문 트리를 생성하는 데 사용됩니다. 2) C는 바이트 코드 생성 및 실행을 담당합니다. 3) C는 JIT 컴파일러를 구현하고 런타임에 핫스팟 코드를 최적화하고 컴파일하며 JavaScript의 실행 효율을 크게 향상시킵니다.

실제 세계에서 JavaScript의 응용 프로그램에는 프론트 엔드 및 백엔드 개발이 포함됩니다. 1) DOM 운영 및 이벤트 처리와 관련된 TODO 목록 응용 프로그램을 구축하여 프론트 엔드 애플리케이션을 표시합니다. 2) Node.js를 통해 RESTFULAPI를 구축하고 Express를 통해 백엔드 응용 프로그램을 시연하십시오.

웹 개발에서 JavaScript의 주요 용도에는 클라이언트 상호 작용, 양식 검증 및 비동기 통신이 포함됩니다. 1) DOM 운영을 통한 동적 컨텐츠 업데이트 및 사용자 상호 작용; 2) 사용자가 사용자 경험을 향상시키기 위해 데이터를 제출하기 전에 클라이언트 확인이 수행됩니다. 3) 서버와의 진실한 통신은 Ajax 기술을 통해 달성됩니다.


핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

인기 기사

뜨거운 도구

SecList
SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.

PhpStorm 맥 버전
최신(2018.2.1) 전문 PHP 통합 개발 도구

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

맨티스BT
Mantis는 제품 결함 추적을 돕기 위해 설계된 배포하기 쉬운 웹 기반 결함 추적 도구입니다. PHP, MySQL 및 웹 서버가 필요합니다. 데모 및 호스팅 서비스를 확인해 보세요.

Atom Editor Mac 버전 다운로드
가장 인기 있는 오픈 소스 편집기
