开始学习miniui了,虽然代码里有很多0o1l之类的,大概学一学还是可以的吧。
首先在miniui.js看一下有文档加载时会自动执行什么。先列举一下。
1、
OO00(window, "resize", function($) { var C = mini.__windowResizes; for (var _ = 0, A = C.length; _ < A; _++) { var B = C[_]; B[0][Oloool](B[1], $) } });
2、
mini_onload = function($) { OO00(window, "resize", mini_onresize) }; OO00(window, "load", mini_onload);
3、
OO00(window, "unload", mini_unload);
4、
(function() { if (hasOn) { var A = mini.getTopWindow(); if (A) { function $(_, $) { if ($ == document); else jQuery(document).trigger("mousedown") } jQuery(A.document)[O10lO0]("topmousedown", $); function _(_) { var $ = A.jQuery; if ($) $(A.document).trigger("topmousedown", [document]) } jQuery(document)[O10lO0]("mousedown", _); jQuery(window)[O10lO0]("unload", function() { jQuery(A.document).off("topmousedown", $); jQuery(document).off("mousedown", _) }) } } })();
5、
var DateUtil = {}; (function() { DateUtil.dateFormat = { days: { names: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"], namesAbbr: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"], namesShort: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"] }, months: { names: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December", ""], namesAbbr: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec", ""] }, AM: ["AM", "am", "AM"], PM: ["PM", "pm", "PM"], patterns: { d: "M/d/yyyy", D: "dddd,MMMM dd,yyyy", F: "dddd,MMMM dd,yyyy h:mm:ss tt", g: "M/d/yyyy h:mm tt", G: "M/d/yyyy h:mm:ss tt", m: "MMMM dd", M: "MMMM dd", s: "yyyy'-'MM'-'dd'T'HH':'mm':'ss", t: "h:mm tt", T: "h:mm:ss tt", u: "yyyy'-'MM'-'dd HH':'mm':'ss'Z'", y: "MMMM,yyyy", Y: "MMMM,yyyy" }, "/": "/", ":": ":", firstDay: 0 };
6、
(function() { var A = { tabindex: "tabIndex", readonly: "readOnly", "for": "htmlFor", "class": "className", maxlength: "maxLength", cellspacing: "cellSpacing", cellpadding: "cellPadding", rowspan: "rowSpan", colspan: "colSpan", usemap: "useMap", frameborder: "frameBorder", contenteditable: "contentEditable" }, $ = document.createElement("div"); $.setAttribute("class", "t"); var _ = $.className === "t"; mini.setAttr = function(B, C, $) { B.setAttribute(_ ? C: (A[C] || C), $) }; mini.getAttr = function(D, E) { if (E == "height") return jQuery(D).attr("height"); if (E == "value" && (isIE6 || isIE7)) { var $ = D.attributes[E]; return $ ? $.value: null } if (!D.getAttribute) return null; var C = D.getAttribute(_ ? E: (A[E] || E)); if (typeof C == "function" || E == "maxLength") { var F = D.attributes[E]; if (F) C = F.value } if (!C && E == "onload") { var B = D.getAttributeNode ? D.getAttributeNode(E) : null; if (B) C = B.nodeValue } return C } })();
还有一些我认为是在jQuery加载完毕之后执行:
1、
jQuery(function() { if (document.body) document.body.style.visibility = "visible"; if (isFirefox) oO1l(document.documentElement, "ff"); mini.updateDevice(); if (mini.autoParse) setTimeout(function() { var _ = document.documentElement; if ((isIE6 || isIE7) && (loo10o(document.body, "overflow") == "hidden" || (_ && loo10o(_, "overflow") == "hidden"))) { jQuery(document.body).css("overflow", "visible"); if (_) jQuery(_).css("overflow", "visible") } mini.__LastWindowWidth = document.documentElement.clientWidth; mini.__LastWindowHeight = document.documentElement.clientHeight; var $ = new Date(); mini.isReady = true; mini.parse(null, mini_layoutOnParse); OlO0o1() }, 1) });
2、
jQuery(function() { setTimeout(function() { var A = mini.getComponents(); for (var B = 0, C = A.length; B < C; B++) { var _ = A[B]; if (_ instanceof Olo01l) { var $ = _[o000l1]().value; if (_.value !== $) _.value = $ } } }, 300) });
3、
jQuery(function() { setTimeout(function() { try { var $ = mini.getActiveElement(); if ($) { var A = jQuery($).closest(".mini-buttonedit,.mini-textbox"); if (A.length) { var B = mini.get(A[0]); if (B) { B[lll0O1](); B[o1OOlO]() } } } } catch(_) {} }, 100) });
然后说一下上面的1,2,3。
它们会先向windows对象 apply事件 resize、onload、unload
创建委托添加到mini.listeners中
通过OO00 :
oOl11 = “findListener”
OO00 = function(_, D, B, A) { _ = l1O1(_); A = A || _; if (!_ || !D || !B || !A) return false; var C = mini[oOl11](_, D, B, A);//判断该listener是否已经存在 if (C) return false; var $ = mini.createDelegate(B, A);//如果不存在就创建委托,通过apply方法通过对象A来执行,这时候A为window mini.listeners.push([_, D, B, A, $]);//添加到mini.listeners数组中 if (mini.isFirefox && D == "mousewheel") D = "DOMMouseScroll"; jQuery(_).bind(D, $) };
l1O1在这里没什么用,还是返回window本身,看一下代码:
//找到该元素,B可以是元素,也可以是id/#id //既然document.getElementById() 不能找到元素, //为什么还要通过后续的操作,去遍历子节点判断id呢? //可能是构建了一个节点,并没有添加到DOM上。这样子的情况下B为子节点的id,_为父节点 l1O1 = function(B, _) { if (typeof B == "string") { if (B.charAt(0) == "#") B = B.substr(1); var $ = document.getElementById(B); if ($) return $; if (_ && !O1O0(document.body, _)) { var D = _.getElementsByTagName("*"); for (var A = 0, C = D.length; A < C; A++) { $ = D[A]; if ($.id == B) return $ } $ = null } return $ } else return B };
然后判断事件是否已经存在:
//判断该listener是否已经存在 findListener: function(A, F, C, B) { A = l1O1(A); B = B || A; if (!A || !F || !C || !B) return false; var _ = mini._getListeners(); for (var E = _.length - 1; E >= 0; E--) { var D = _[E]; try { if (D[0] == A && D[1] == F && D[2] == C && D[3] == B) return D } catch($) {} } }, _getListeners: function() { var $ = mini.listeners;//是mini对象的数组对象 return $ },
如果没有存在,就创建委托,并保存它。【注意apply的用法,$是window,还是不清楚通过这样子怎么触发对应的事件处理程序】
/创建委托,并通过$对象来执行该方法,返回的是一个方法 createDelegate: function(_, $) { if (!_) return function() {}; return function() { return _.apply($, arguments) } },
通过这样,在不添加任何js代码程序的情况下,的确绑定好了对应的事件处理程序。
比较有趣的是jQuery中的方法1的处理,里面有mini.parse()的调用。如果我们能够在此方法执行完毕之后再执行自己的js代码,那么我们就不用再写mini.parse()了。
下次再说说自己的mini.parse()和源文件中的mini.parse()的调用。其他一些执行的方法也之后看看做了一些什么事情。
good night.