jQuery选择器源码分析和easyui核心分析
2020-12-13 02:01
标签：des style class java ext color 写在选择器源码分析之前 这里指对1.7.2版本的源码分析，更高版本添加了更多代码。 整个jQuery的代码是写在一个(function(window, undefined){})(window);这样一个闭包里。请思考，为什么要这样做？ 将其写在一个闭包函数里，并传入window直接运行的好处有三: 1，统一命名空间，防止变量的污染； 2，将window作为参数传入函数，在函数里调用window的时候，就不用再去找外层的对象，可以提高效率 ； 3，undefined并不是javascript的关键字，使用参数undefined是为了防外面定义了全局的undefined变量而受到污染。 jQuery的构造函数，其实返回的是一个jQuery.fn.init的对象。然后通过jQuery.fn.init.prototype = jQuery.fn = jQuery.prototype来将jQuery的原型和jQuery.fn.init的原型联系起来。这样写看起来有点晕，但是正因为这样的联系，使得new jQuery()和jQuery()都能返回一个jQuery对象(其实这里是jQuery.fn.init对象，但是由于原型都指向同一个对象，所以表面上可以无视这个问题)。 最后，jQuery对外提供的方法，末了都会将自身返回，以提供链式操作。 jQuery选择器源码分析 按选择器分类逐句分析 //rootjQuery = jQuery(document); init: function (selector, context, rootjQuery) { var match, elem, ret, doc;
// Handle $(""), $(null), or $(undefined) ->返回本身 if (!selector) { return this; } // Handle $(DOMElement) -> 如果是element ,就直接封装成jquery对象 if (selector.nodeType) { this.context = this[0] = selector; this.length = 1; return this; } //如果是body ->这里document.body作为条件，应该是为了兼容问题 //可是今天我在主流浏览器里测试，都能够同时找到document.body和 //document.documentElement if (selector === "body" && !context && document.body) { this.context = document; this[0] = document.body; this.selector = selector; return this; } if (typeof selector === "string") { //HTML string if (selector.charAt(0) === "" && selector.length >= 3) { //跳过检查 match = [null, selector, null]; } else { //RegExpObject.exec(string)返回一个数组，其中存放匹配的结果。如
//果未找到匹配，则返回值为 null。 //quickExpr是检查HTML字符串或ID字符串的正则 match = quickExpr.exec(selector); } //验证match, match[1](这里存放是html)为非的时候context也必须为非 //(这种情况是#id) if (match && (match[1] || !context)) { // HANDLE: $(html) -> $(array) if (match[1]) { //这里的context其实可以理解成selector的parentNode或者parent()
//context ->DOM对象 context = context instanceof jQuery ? context[0] : context; //如果制定了context,就返回context.ownerDocument(这里是 //context当前所属的document) || context，否则返回document doc = (context ? context.ownerDocument || context : document); //匹配成独立的标签（不含有属性之类，比如） ret = rsingleTag.exec(selector); if (ret) { //方法jQuery.isPlainObject( object )用于判断传入的参数是否 //是“纯粹”的对象，即是否是用对象直接量{}或new Object()创建
//的对象,如果是,那么context就是selector的属性 if (jQuery.isplainObject(context)) { selector = [document.createElement(ret[1])]; jQuery.fn.attr.call(selector, context, true); } else { selector = [doc.createElement(ret[1])]; } } else { //缓存selector的html。 ret = jQuery.buildFragment([match[1]], [doc]); //如果是缓存了的，就clone fragment(文档碎片节点在添加到文档树
//之后便不能再对其进行操作),否则就直接取fragment的 //childNodes selector = (ret.cacheable ? jQuery.clone(ret.fragment) : ret.fragment).childNodes; } //将selector合并到this，返回 return jQuery.merge(this, selector); // HANDLE: $("#id") } else { elem = document.getElementById(match[2]); if (elem && elem.parentNode) { //处理 IE and Opera 混淆ID与NAME的bug if (elem.id !== match[2]) { //调用Sizzle的方法 -- TODO，关于Sizzle.js，有待研究! return rootjQuery.find(selector); } this.length = 1; this[0] = elem; } this.context = document; this.selector = selector; return this; } // HANDLE: $(expr, $(...)) } else if (!context || context.jquery) { return (context || rootjQuery).find(selector); // HANDLE: $(expr, context) } else { return this.constructor(context).find(selector); } // HANDLE: $(function) } else if (jQuery.isFunction(selector)) { return rootjQuery.ready(selector); } //selector本身就是一个jQuery对象的情况 if (selector.selector !== undefined) { this.selector = selector.selector; this.context = selector.context; } //合并属性(与jQuery.merge不同的是，这里的selector可能不是数组) return jQuery.makeArray(selector, this); } easyui核心分析 Easyui控件是在jQuery.fn上扩展的，所以使用这些控件就如同使用jQuery方法一样方便（其实就是！）。精妙的地方： 1，创建控件和调用控件的方法，用法都和调用jQuery的方法一样，只在传参的区别。非常方便。 2，在某dom上创建的控件，需要添加或修改一些控件的属性时，和创建控件时用法也一样。 以combobox为例， $.fn.combobox = function(options, param){ //如果传入的第一个参数是string，则认为是调用控件的方法 if (typeof options == ‘string‘){ //查找对应的方法 var method = $.fn.combobox.methods[options]; if (method){ //存在对应的方法，则调用 return method(this, param); } else { //没有找到对应的方法，则调用$.fn.combobox(easyui中 //的控件继承关系的原理) return this.combo(options, param); } } //传入的options不是string，则认为是创建combobox控件 options = options || {}; return this.each(function(){ //获取绑定在dom上的combobox对应的数据 var state = $.data(this, ‘combobox‘); if (state){ //如果dom上有绑定combobox对应的数据，则与传入的 //options合并，重新创建控件 $.extend(state.options, options); create(this); } else { state = $.data(this, ‘combobox‘, { options: $.extend({}, $.fn.combo.defaults, $.fn.combobox.defaults, parseOptions(this), options) }); create(this); //重新绑定用到的其他的控件的对应数据到dom上 loadData(this, transformData(this)); } if (state.options.data){ loadData(this, state.options.data); } request(this); }); }; 关于$.data $.data可以将数据存在dom上，但又相比直接存放在HTMLElement的属性上要更安全，而且在dom的元素中添加过多的属性，对浏览器来说也是一种负荷。 jQuery选择器源码分析和easyui核心分析,搜素材,soscw.com jQuery选择器源码分析和easyui核心分析 标签：des style class java ext color 原文地址：http://www.cnblogs.com/huhy/p/3714618.html