新来的书，恶补理论知识！

web标准－结构，样式和行为的分离。除些之外，还要做到三点：精简、重用、有序。
标签语义化－代码量相对小，结构清晰，对搜索引擎友好。
尽可能少用无语义标签 div 和 span 。

怪异模式和DTD
怪异模式通常模拟老式浏览器的行为以防止老站点无法工作。
盒状模型
标准模式下，网页元素的宽度由 padding border width 三者的宽度相加决定的；
怪异模式下，width本身就包括了padding border 的宽度。此外居中方法设定width，然后 margin-left:auto;margin-right:auto;也无法正常工作；
怪异模式的触发与DTD有关，有关DTD 详见 重新认识HTML

接下来是CSS的模块化，这个和我前年的想法差不多，详见 CSS模块化[二] CSS模块化[一]

以前我一直以为 IE6，IE7 是支持 display:inline-block; 的，原来我错了，用这个CSS属性的时候，是摸拟出来的，全因 display:inline-block 激活了IE 的 hasLayout 这个属性！

今天到的书，前两部分我已经看完了，以上是我新学了的知识点，列出来分享一下~~
剩下的javascript部分晚点再看了。
加油！！

Ajax实现原理
实现Ajax的关键是使用XMLHttpRequest对象(下简称XHR对象). 要注意的是XHR不是一个W3C标准, 所以不同浏览器存在不同的实现方式. 因此这影响了最最基本的第一步.
Step 1. 创建XHR对象实例. 以下的代码是一基本实现逻辑:
var xmlHttp; 　　fucntion createXMLHttpRequest(){ 　　 if(window.ActiveXObject){ 　　 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 　　 } 　　 else if(window.XMLHttpRequest){ 　　 xmlHttp = new XMLHttpRequest(); 　　 } 　　}
Step 2. 向服务器做请求. 利用第一步创建的XHR对象实例中的open方法建立对服务器脚本的调用. open方法的原型是void open(string method, string url, boolean asynch, string username, string password). 其中前两个参数是必要的, 后三个是可选的. method即调用方法, 可以是GET, POST或PUT. asynch参数设定此请求为异步还是同步, 默认值为true, 异步(设置为false就没意义了撒).
　　xmlHttp.open("GET", "http://server/process.php?user=xxx");
Step 3. 指定回调函数, 即当服务器返回结果时如何处理结果. 这里要把回调函数的指针赋值给XHR对象的onreadystatechange事件. 需要注意的是在回调函数检查XHR对象的readyState和status(分别是请求的状态/*0=未初始化, 未调用open; 1=正在加载, open之后send之前; 2=已加载, 通常此时可使用响应的头部信息; 3=交互中; 4=完成*/和服务器的HTTP状态/*200对应OK, 404对应Not Found*/). IBM developWorks有文章介绍, 不同浏览器对于"请求的状态"有不同的处理, 比如Firefox有1234, Opera就只有34. 1,2这两个状态是被支持得最少的, 所以如果要写函数处理这两个状态的话, 就可能报错.
一般来说, 回调函数只要检查readyState是否为4, HTTP状态码是否为200就行了.
服务器的响应可以字符串或XML对象两种形式返回. 如此则在浏览器端可分别使用XHR对象的responseText或responseXML来接收.
　　xmlHttp.onreadystatechange=callback; 　　function callback(){ 　　 if(xmlHttp.readtState==4){ 　　 if(xmlHttp.status==200){ 　　 alert("Server responsed the text: "+xmlHttp.responseText);//执行指定的FUNCTION 　　 } 　　 } 　　}
Step 4. 使用XHR对象的send方法发送请求. send方法有一个参数, 通常是一个字符串或者是一个XML对象. 当open方法中设置的method为"GET"的时候, send的参数常常是null; 使用"POST"方法发送数据的话, 则需要给send提供参数. ("PUT"方法的话, 暂时还没看到)
　　xmlHttp.send(null);
当客户端的某事件触发了, 通常是用户点击了某个链接或者button, 需要向服务器进行交互了, 那么就可以在那么Event Handler中使用以上函数或语句了.
另外, IBM developeWorks建议, XHR对象应该声明为全局变量, 并且它的初始化应该也是在全局中进行, 以便在发现浏览器不能使用XHR对象的时候作相应处理.

Read More »

第三章　2011-12-21
1，访问DOM的次数越多，代码运行速度越慢。减少访问DOM的次数，把运算尽量留在ECMAScript这一端处理。
2，使用数组来合并大量字符串，会让innerHTML效率更高。
3，循环一个HTML集合比循环一个数组效率要低很多。
var toArray(coll){ for(var i=0,a=[],len=coll.length;i<len;i++){ a[i] = coll[i]; } return a; }
此函数把一个HTML集合转换为一个普通数组
以前我经常犯的一个错误
var a = document.getElementsByTagName('div'); for(var i=0;i<a.length;i++){ //do something }
正确写法应该是
var a = document.getElementsByTagName('div'); for(var i=0,len=a.length;i<len;i++){ //do something }

Read More »

第二章
在函数执行的过程中，每遇到一个变量，都会经历一次标识符解析过程，该过程搜索运行期上下文的作用域，查找同名的标识符，这个过程会影响性能。
如
var initUI = function(){ var bd = document.body, links = document.getElementsByTagName('a'), i = 0, len = links.length; while(i < len){ update(links[i++]); } document.getElementByID('go-btn').onclick = function(){ start(); } bd.className = 'active'; }
解析，此函数用了三次document，而document是全局对象。
优化后
var initUI = function(){ var doc = document, bd = doc.boby, links = doc.getElementsByTagName('a'), i = 0, len = links.length; while(i < len){ update(links[i++]); } doc.getElementByID('go-btn').onclick = function(){ start(); } bd.className = 'active'; }
把document引用存储到局部变量doc中，从而使访问全局变量的次数由3次减少到1次。
PS：以前我见到人家这么写，我还在暗自说，此举不是多余的吗，一直不惑，原来是有种原因，以后写东西也要养成这个习惯了~~~　:)

Read More »

上周买的书，今天终于到了，所以充电开始中。。。
记一下笔记，可能会记得更牢，翻了这本书的第一章，感觉还不错！
以下是第一章的主要内容
优化Javascript
1、将脚本放在底部
2、不要把内嵌脚本紧跟在 link 标签后面
3、动态脚本，应该将新创建的script添加到 head 里面，如果是添加在 boby 里，IE会抛出“操作已中止”的错误信息
侦听动态脚本加载完成时的状态
无阻塞模式之一
var script = document.creatElement('script'); script.type = 'text/javascript'; //FF,opera,chrome,safari3+ script.onload = function(){ alert('加载完成'); } //IE script.onreadystatechange = function(){ if(script.readyState == 'loaded' || script.readyState == 'complete'){ script.onreadystatechange = null; alert('加载完成'); } }

Read More »