摘要：
js的同步、异步和延迟1、默认情况下，js是同步和阻塞DOM解析的。在解析DOM的过程中，当遇到script时，会暂停DOM解析，开始请求script并执行js，执行完成之后再接着解析DOM树。2、之前一直不知道DOMReady是在什么时候，也从来没在书上看到对这个时间点的解释。现在感觉，DOMReady是解析完body的结束标签之后。所以所有的js的应该绑定在body标签之前。否则其中的DOMReady所触发的回调可能无法执行。3、想要js不阻塞DOM解析的方法有： 将js写在body的结束标签之前，其它所有的html之后 为script添加defer和async属性。添加了这两个属性是.. 阅读全文
摘要：
Element对象有以下重要属性：1、style。 a)Element的css样式 b) 可以通过elem.style.backgroundColor = "red"的形式才动态的修改css样式2、className。 elem.className = "highlight"; // 修改elem的classHTML文档中嵌入js的四种方法：1、内联，js内容放到script标签中间2、由scirpt标签的src属性引入 // 最常用的方式，也是最推荐的一种3、通过html的onclick、onmouseover这样的属性指定// 取消元素的默认行为时常 阅读全文
摘要：
通过这几天对Sizzle源码的阅读，发现想要读懂Sizzle，需要良好的原生js基础。否则基本没有可能了解其中的很多处理的含义。基于对业务是否有帮助的考虑，想要放弃Sizzle的阅读，开始阅读jQuery UI的源码。但通过阅读发现，jQuery UI的源码是在jQuery的基础上进行的。很多功能都是需要基于jQuery代码来扩展的。所以如果jQuery源码没有理解好，就去阅读jQuery UI的源码的话，将会事倍功半。因此，通过这几天的考虑，还是决定从基础的基础开始入手：补充原生js的知识。学习计划：两个月内了解原生js所提供的api。1、准备资料。两天（原生js书籍）1、基础部分。由于业务 阅读全文
摘要：
在Sizzle的入口方法Sizzle()中看到的一个根据浏览器来初始化document各个方法的函数setDocument()，接下来主要看一下这个方法都做了什么。但之前有必要看一下它用到的一些Sizzle内部使用的方法：// 通过创建一个div元素，检测被传入的fn是否被当前浏览器支持function assert( fn ) { var div = document.createElement("div"); //此处用try-catch的原因是：被传入的fn很有可能是会报错的。因为fn中用的方法或属性很可能不被当前浏览器所支持。 try { // 尝试执行被传入的方. 阅读全文
摘要：
自己开始尝试读Sizzle源码。1、Sizzle同过自执行函数的方式为自己创建了一个独立的作用域，它可以不依赖于jQuery的大环境而独立存在。因此它可以被应用到其它js库中。实现如下：(function(window, undefined){})(window, undefined);2、Sizzle中最头疼的就是一大片的复杂正则表达式： // 为正则准备的字符串。匹配选择器中的布尔值，例如 $( "input:checked" ); booleans = "checked|selected|async|autofocus|autoplay|controls|d 阅读全文
摘要：
今天还是主要看别人对Sizzle的分析。1、Sizzle拿到css选择器，通过tokenize方法，将选择器转化成一个数组，数组内部使用下面格式的对象存储分解后的选择器 { "type" : "CLASS", "value" : ".red", "matchs" : " " }2、开始从右向左，也就是从第一步生成的数组的最后开始扫描。由于性能的需要，Sizzle优先使用浏览器自带的api： getElementById，getElementsByName，getElement 阅读全文
摘要：
1、浏览器对css选择器采取逆向（从右向左）解析的原因： 如果正向解析，例如「div div p em」，我们首先就要检查当前元素到 html 的整条路径，找到最上层的div，再往下找，如果遇到不匹配就必须回到最上层那个 div，往下再去匹配选择器中的第一个 div，回溯若干次才能确定匹配与否，效率很低。 逆向匹配则不同，如果当前的 DOM 元素是 div，而不是 selector 最后的 em，那只要一步就能排除。只有在匹配时，才会不断向上找父节点进行验证。找到所有的em之后，再通过查找他的父元素是不是p来进行过滤。2、Sizzle如果分解用户传入的css选择器字符串以”div > d 阅读全文