八款js框架
Posted on: 2月 20, 2009
Dojo
Dojo 是目前最为强大的JS框架，它在自己的 Wiki 上给自己下了一个定义，Dojo 是一个用 JavaScript 编写的开源的DHTML工具箱。Dojo 很想做一个“大一统”的工具箱，不仅仅是浏览器层面的，野心还是很大的。Dojo 包括 Ajax、Browser、Event、Widget 等跨浏览器 API，包括了 JS 本身的语言扩展，以及各个方面的工具类库，和比较完善的 UI 组件库，也被广泛应用在很多项目中，他的 UI 组件的特点是通过给 HTML 标签增加 TAG 的方式进行扩展，而不是通过写 JS 来生成，Dojo 的 API 模仿 Java 类库的组织方式。用 Dojo 写 Web OS 可谓非常方便。Dojo 现在已经 4.0 了，Dojo 强大的地方在于界面和特效的封装，可以让开发者快速构建一些兼容标准的界面。
优点：库相当完善，发展时间也比较长，功能强大，据说利用 Dojo 的 io.bind() 可以实现 comet 看见其功能强大非一般，得到 IBM 和 SUN 的支持。
缺点：文件体积比较大，200多KB，初次下载相当慢，此外，Dojo 的类库使用显得不是那么易用，JS语法增强方面不如 Prototype
Prototype
它是一个非常优雅的 JS 库，定义了 JS 的面向对象扩展，DOM 操作API，事件等等，以 Prototype 为核心，形成了一个外围的各种各样的 JS 扩展库，是相当有前途的 JS 底层框架，值得推荐，感觉也是现实中应用最广的库类（RoR 集成的 AJAX JS 库），之上还有 Scriptaculous 实现一些JS组件功能和效果。
优点：基本底层，易学易用，甚至是其他一些js特效开发包的底层，体积算是最小的了。
缺点：如果说缺点，可能就是功能是他的弱项
dScriptaculous
Scriptaculous 是基于prototype.js 框架的 JS 效果。包含了 6 个 js 文件，不同的文件对应不同的 js 效果，所以说，如果底层用 prototype 的话，做js效果用 Scriptaculous 那是再合适不过的了，连大名鼎鼎的 digg 都在用他，可见不一般
优点：基于prototype 是最大的优点，由于使用 prototype 的广泛性，无疑对用户书锦上添花。
缺点：刚刚兴起，需要时间的磨练
Yui-ext
基于 Yahoo UI 的扩展包 yui-ext 是具有 CS 风格的 Web 用户界面组件，能实现复杂的 Layout 布局，界面效果可以和 backbase 媲美，而且使用纯 javascript 代码开发。真正的可编辑的表格 Edit Grid，支持 XML 和 Json 数据类型，直接可以迁入 Grid。许多组件实现了对数据源的支持，例如动态的布局，可编辑的表格控件，动态加载的 Tree 控件、动态拖拽效果等等。从 1.0 beta 版开始同 Jquery 合作，推出基于 jQuery 的 Ext 1.0，提供了更多有趣的功能。
优点：结构化，类似于 java 的结构，清晰明了，底层用到了 Jquery 的一些函数，使整合使用有了选择，最重要的一点是界面太让让人震撼了。
缺点：太过复杂，整个界面的构造过于复杂。
Jquery
JQuery 是一款同 prototype 一样优秀 js 开发库类，特别是对 css 和 XPath 的支持，使我们写 js 变得更加方便！如果你不是个 js 高手又想写出优秀的 js 效果，那么 JQuery 可以帮你达到目的！并且简介的语法和高的效率一直是jQuery追求的目标。
优点：注重简介和高效，js 效果有 yui-ext 的选择，因为 yui-ext 重用了很多 jQuery 的函数
缺点：据说太嫩，历史不悠久。
Mochikit
MochiKit 自称为一个轻量级的 js 框架。MochiKit 主要受到 Python 和 Python 标准库提供的很多便利之处的启发，另外还缓解了浏览器版本之间的不一致性。其中的 MochiKit.DOM 尤其方便，能够以比原始 JavaScript 更友好的方式处理 DOM 对象。MochiKit.DOM 大部分都是针对 XHTML 文档定制的，如果与 MochiKit 和 Ajax 结合在一起，使用 XHTML 包装的微格式尤其方便。Mochikit 可以直接对字符串或者数字格式化输出，比较实用和方便。它还有自己的 js 代码解释器
优点：MochiKit.DOM 这部分很实用，简介也是很突出的
缺点：轻量级的缺点
Mootools
MooTools 是一个简洁，模块化，面向对象的 JavaScript 框架。它能够帮助你更快，更简单地编写可扩展和兼容性强的 JavaScript 代码。Mootools 跟 prototypejs 相类似，语法几乎一样。但它提供的功能要比 prototypejs 多，而且更强大。比如增加了动画特效、拖放操作等等。
优点：可以定制自己所需要的功能，可以说是 prototypejs 的增强版。
缺点：不大不小，具体应用具体分析。
Moo.fx
Moo.fx是 一个超级轻量级的 javascript 特效库（7k），能够与 prototype.js 或mootools 框架一起使用。它非常快、易于使用、跨浏览器、符合标准，提供控制和修改任何 HTML 元素的 CSS 属性，包括颜色。它内置检查器能够防止用户通过多次或疯狂点击来破坏效果。moo.fx整体采用模块化设计，所以可以在它的基础上开发你需要的任何特效。
优点：小块头有大能耐
缺点：这么小了，已经不错了
ps：上面的也不尽完全正确，要看没个人的需求和熟悉程度
js–2維數據排序
Posted on: 2月 20, 2009
昨天去tecent面試，突然問我一個2維數組排序的問題，唉，當時竟然沒有達上來！后來想想還是基本功不到位啊！在這里copy網上一個解決方案！
var temp = [
{ x:X-1, y:Y-1, ct:5, d:0},
{ x:X, y:Y-1, ct:2, d:1},
{ x:X+1, y:Y-1, ct:7, d:2},
{ x:X+1, y:Y, ct:3, d:3},
{ x:X+1, y:Y+1, ct:0, d:4},
{ x:X, y:Y+1, ct:1, d:5},
{ x:X-1, y:Y+1, ct:6, d:6},
{ x:X-1, y:Y, ct:4, d:7}
];
做ct的排序。
<script type=”text/javascript”>
function compareIntegers(vNum1,vNum2)
{
if(vNum1>vNum2)
{
return 1;
}
else if(vNum1<vNum2)
{
return -1;
}
else
{
return 0;
}
}
###這個方法可以簡化成
function cmp(a,b,c) {
if(a[c] == b[c])
return 0;
return a[c] > b[c] ? 1:-1;
} #####
function mySort(arr)
{
arr.sort(compareIntegers);
return arr;
}
string数组排序可以直接用 String的localCompare（）方法
function compareStrings(string1,string2)
{
return string1.localeCompare(string2);
}
csdn：
<script>
function cmp(a,b,c) {
if(a[c] == b[c])
return 0;
return a[c] > b[c] ? 1:-1;
}
for(i=0;i<temp.length-1;i++)
for(j=i;j<temp.length;j++)
if(cmp(temp[i],temp[j],”ct”) > 0) {
c = temp[i]
temp[i] = temp[j]
temp[j] = c
}
</script>
年会上中了3等奖！喔耶～ 牛年开个好头！
Posted on: 1月 20, 2009
昨天公司年会，在新梅园吃的饭，宴开48桌，吃的还不错，同事们的表演也很精彩，抽奖的礼品也很丰富和有分量。中奖的比例是4：1，还是挺大比例的，很多奖品。一等奖是索尼的DV和富士康的Notebook～ 可惜我没那么多好运啊，只得了3等奖！我的奖品是prince thunder lite网球拍，价值1000块喔！哈哈，难道是知道我最近有在打网球吗～ 噢哈哈哈……
不管怎么样，希望是来年的一个好兆头！牛年好运！
buffer & cache & cookie
Posted on: 1月 15, 2009
1.buffer 的主要目的是缓冲数据发送方和接收方速度不匹配的问题。根据磁盘的读写设计的，把分散的写操作集中进行，减少磁盘碎片和硬盘的反复寻道，从而提高系统性能
两者都是RAM中的数据。简单来说，buffer是即将要被写入磁盘的，而cache是被从磁盘中读出来的。
2.Cache ：即高速缓冲存储器，是位于CPU与主内存间的一种容量较小但速度很高的存储器。由于CPU的速度远高于主内存，CPU直接从内存中存取数据要等待一定时 间周期，Cache中保存着CPU刚用过或循环使用的一部分数据，当CPU再次使用该部分数据时可从Cache中直接调用,这样就减少了CPU的等待时 间,提高了系统的效率。Cache又分为一级Cache(L1 Cache)和二级Cache(L2 Cache)，L1 Cache集成在CPU内部，L2 Cache早期一般是焊在主板上,现在也都集成在CPU内部，常见的容量有256KB或512KB L2 Cache
3.Cookie”是小量信息，由网络服务器发送出来以存储在网络浏览器上，从而下次这位独一无二的访客又回到该网络服务器时，可从该浏览器读回此信息。这是 很有用的，让浏览器记住这位访客的特定信息，如上次访问的位置、花费的时间或用户首选项（如样式表）。Cookie 是个存储在浏览器目录的文本文件，当浏览器运行时，存储在 RAM 中。一旦阁下从该网站或网络服务器退出，Cookie 也可存储在计算机的硬驱上。Cookie 的用途之一是存储用户在特定网站上的密码和 ID。另外，也用于存储起始页的首选项。在提供个人化查看的网站上，将要求阁下的网络浏览器利用阁下计算机硬驱上的少量空间来储存这些首选项。这样，每次 阁下登录该网站时，阁下的浏览器将检查阁下是否就该唯一的服务器有任何预先定义的首选项（cookie）。如果有的话，浏览器将此 cookie 随阁下对网页的请求一起发送给服务器。
Cookies最典型的应用是判定注册用户是否已经登录网站;另一个重要应用场合是“购物车”之类处理。用户可能会在一段时间内在同一家网站的不同页面中选择不同的商品，这些信息都会写入Cookies，以便在最后付款时提取信息。
使用Cookie Pal软件查看到的Cookie信息;Cookie是利用了网页代码中的HTTP头信息进行传递的，浏览器的每一次网页请求，都可以伴随Cookie传递;Cookie包含Server、Expires、Name、value这几个字段;Server是存储Cookie的网站，Expires记录了Cookie的时间和生命期，Name和value字段则是具体的数据.
多数网页编程语言都提供了对Cookie的支持。如 javascript、VBScript、Delphi、ASP、SQL、PHP、C#等。在这些面向 对象的编程语言中，对Cookie的编程利用基本上是相似的，大体过程为：先创建一个Cookie对象（Object），然后利用控制函数对Cookie 进行赋值、读取、写入等操作.
一般来说，Cookie通过HTTP Headers从服务器端返回到浏览器上。首先，服务器端在响应中利用Set-Cookie header来创建一个Cookie ，然后，浏览器在它的请求中通过Cookie header包含这个已经创建的Cookie，并且反它返回至服务器，从而完成浏览器的论证. js–var cookieContent = document.cookie;
js控制cookie的例子：http://bbs.blueidea.com/thread-2801130-1-1.html
几种常见的浏览器内核简介
Posted on: 1月 15, 2009
浏览器最重要或者说核心的部分是“Rendering Engine”，可大概译为“解释引擎”，不过我们一般习惯将之称为“浏览器内核”。负责对网页语法的解释（如HTML、JavaScript）并渲染（显示）网页。
不同的浏览器内核对网页编写语法的解释也有不同，因此同一网页在不同的内核的浏览器里的渲染（显示）效果也可能不同，这也是网页编写者需要在不同内核的浏览器中测试网页显示效果的原因。
几种常见的浏览器内核简介：
Trident：Windows 下的 IE 浏览器使用的内核代号。除 IE 外，众多的 IE Shell（如 Maxthon ）都使用这个内核。
Gecko：Mozilla Firefox 浏览器使用的内核代号。使用 Gecko 内核的浏览器也有不少，如 Netscape 、MozillaSuite/SeaMonkey 等。另外，Mozilla Thunderbird 也使用 Gecko 。
Presto：Opera 浏览器使用的内核代号，这是目前公认网页浏览速度最快的浏览器内核。
KHTML/WebCore： Konqueror/Safari 浏览器使用的内核代号。Konqueror 是 X 协议下的 KDE 桌面环境使用的浏览器和资源管理器，可以用在 Unix/GNU/Linux/BSD 系统中，据说 KDE 4.0 以后会有向 Windows 移植的计划；Safari 则是 Apple 用户中最受欢迎的浏览器。
textarea 中的换行！
Posted on: 1月 13, 2009
只想说明一点，在FF下内容可以用\n,在IE下必须用\r.
在鼠标focus的时候，才能都适用。
<textarea name=”reject_memo” cols=”50″ id=”tttt” cols=90 rows = 15></textarea>
<SCRIPT LANGUAGE=”JavaScript”>
var tt = document.getElementById(‘tttt’);
var sNormal=”請提供：\r 1. 成立宗旨(50字以內)、\r 2. 活動性質 (50字以內)、\r 3. 部落格用途與更新頻率 (100字以內)、\r 4. 團體簡介 (50字以內，此描述則顯示在貴單位 logo 旁)”;
if(isFirefox=navigator.userAgent.indexOf(“Firefox”)>0){ var sNormal=”請提供：\n 1. 成立宗旨(50字以內)、\n 2. 活動性質 (50字以內)、\n 3. 部落格用途與更新頻率 (100字以內)、\n 4. 團體簡介 (50字以內，此描述則顯示在貴單位 logo 旁)”;}
if(tt.value.replace(/\s/g,”)==”){tt.value = sNormal;}
tt.onfocus = function(){if(tt.value.replace(/\n/ig,”)==sNormal.replace(/\n/ig,”)){tt.value = ”;}}
tt.onblur=function(){if(tt.value.replace(/\s/g,”)==”){tt.value = sNormal;}}
</SCRIPT>
JavaScript的9个陷阱及评点
Posted on: 1月 13, 2009
| 来自 Nine Javascript Gotchas , 以下是JavaScript容易犯错的九个陷阱。虽然不是什么很高深的技术问题，但注意一下，会使您的编程轻松些，即所谓make life easier. 笔者对某些陷阱会混杂一些评点。
1. 最后一个逗号 如这段代码，注意最后一个逗号，按语言学角度来说应该是不错的（python的类似数据类型辞典dictionary就允许如此）。IE会报语法错误，但语焉不详，你只能用人眼从几千行代码中扫描。 <span class=”code”><script type=”text/javascript”><!– 2. this的引用会改变 如这段代码： <span class=”code”><input id=”MyButton” type=”button” value=”Gotcha!” /> 并不如你所愿，答案并不是”JavaScript rules”。在执行MyObject.ClickHandler时，代码中红色这行，this的引用实际上指向的是document.getElementById(“theText”)的引用。可以这么解决： <span class=”code”><input id=”theText” type=”button” value=”Gotcha!” /> 实质上，这就是JavaScript作用域的问题。如果你看过，你会发现解决方案不止一种。 3. 标识盗贼 在JavaScript中不要使用跟HTML的id一样的变量名。如下代码： <span class=”code”><input id=”TheButton” type=”button” /> IE会报对象未定义的错误。我只能说：IE sucks. 4. 字符串只替换第一个匹配 如下代码： <span class=”code”><script type=”text/javascript”><!– <span class=”code”>var fileName = “This is a title”.replace(/ /g,”_”);</span> |
| 5. mouseout意味着mousein
事实上，这是由于事件冒泡导致的。IE中有mouseenter和mouseleave，但不是标准的。作者在此建议大家使用库比如YUI来解决问题。 6. parseInt是基于进制体系的 这个是常识，可是很多人给忽略了parseInt还有第二个参数，用以指明进制。比如，parseInt(“09”)，如果你认为答案是9，那就错了。因为，在此，字符串以0开头，parseInt以八进制来处理它，在八进制中，09是非法，返回false，布尔值false转化成数值就是0. 因此，正确的做法是parseInt(“09”, 10). 7. for…in…会遍历所有的东西 有一段这样的代码： var arr = [5,10,15] 运行得好好的，不是吗？但是有一天它不干了，给我返回的值变成了NaN, 晕。我只不过引入了一个库而已啊。原来是这个库改写了Array的prototype，这样，我们的arr平白无过多出了一个属性（方法），而for…in…会把它给遍历出来。所以这样做才是比较安全的： for ( var x = 0; x < arr.length; x++) { 其实，这也是污染基本类的prototype会带来危害的一个例证。 8. 事件处理器的陷阱 这其实只会存在使用作为对象属性的事件处理器才会存在的问题。比如window.onclick = MyOnClickMethod这样的代码，这会复写掉之前的window.onclick事件，还可能导致IE的内容泄露（sucks again）。在IE还没有支持DOM 2的事件注册之前，作者建议使用库来解决问题，比如使用YUI: YAHOO.util.Event.addListener(window, “click”, MyOnClickMethod); 这应该也属于常识问题，但新手可能容易犯错。 9. Focus Pocus 新建一个input文本元素，然后把焦点挪到它上面，按理说，这样的代码应该很自然： <span class=”code”>var newInput = document.createElement(“input”);<br/>document.body.appendChild(newInput);<br/>newInput.focus();<br/>newInput.select();</span> 但是IE会报错（sucks again and again）。理由可能是当你执行fouce()的时候，元素尚未可用。因此，我们可以延迟执行： var newInput = document.createElement(“input”); 在实践中，JavaScript的陷阱还有很多很多，大多是由于解析器的实现不到位而引起。这些东西一般都不会在教科书中出现，只能靠开发者之间的经验分享。谢天谢地，我们生活在网络时代，很多碰到的问题，一般都可以在Google中找到答案。 |
止损值 -与- 生活
Posted on: 1月 13, 2009
我不是炒股的人，可是从股市中得到一些道理。
每天上班下班，等车坐车是一件不可避免的事，谁叫咱没钱买车了。2辆车可以到我家，一辆快车，30分钟到，不过等车的时间不好预测，10-30分钟不等。另一辆是满车50分钟左右，一般5分钟就有一辆。我以前是从来不爱做慢车的。可是每次等快车的时候，等的那叫一个着急啊！有一天，我等了将近20分钟的快车，其中慢车已经过去了6辆左右，最后等的着急，后来就坐上了慢车，不过刚坐上，快车就来了，看着快车呼啸而过，那叫一个气啊！郁闷～
后来回家和老公没事闲聊的时候，说起这件事，他就跟我说了一个 –止损值。在心里有一个最低的损失值，达到这个值，不管多少都要抛，也就等到你心里的那个最长等车时间，不过来什么车都做。
顿时豁然开朗，觉的很收益，很有道理。老公虽然炒股亏的很多，不过也是学到很多道理，哈哈，道理是需要金钱和时间换取的。
YUI 压缩工具
Posted on: 1月 9, 2009
1，下载一个YUI Compressor工具。下载地址是http://www.julienlecomte.net/yuicompressor/。
2，确认你的电脑上有java虚拟机，确认你的js都通过了jslint的测试才行。
3，运用命令行 cd 进入下载包的那个目录。
4，运行java -jar yuicompressor-x.y.z.jar myfile.js -o myfile-min.js（将压缩myfile.js文件并输出为myfile-min.js 【x.y.z 为具体的版本号】）
ps：一下其他相关命令。
Global Options
-h, –help 显示帮助信息
–type 指明需要压缩的文件是js还是css。
–charset 指明需要压缩的文件的
–line-break 在指定的列换行
-o 指定输出文件 。默认为标准输出（屏幕）。
JavaScript Options
–warn 打印代码中的错误信息
–nomunge Minify only, do not obfuscate
–preserve-semi Preserve all semicolons
–preserve-strings Do not merge concatenated string literals, Use this option to specify that concatenated string literals should never be merged.
转载 –2008年最佳Web设计/前端开发技巧、脚本及资源总结
Posted on: 1月 8, 2009
工具&Web应用
13个可能会让你说”Thank You”的必不可少的开源应用
20个免费的SEO网站分析工具(已翻译成中文)
11个功能强大甚至可以替代标准应用程序的Firefox3扩展插件
15个前端开发/网页设计师必备的Bookmarklet(已翻译成中文)
脚本、补丁及Hack
30+JavaScript, Ajax & CSS工具提示脚本
40+最热门的wordpress秘诀和技巧， 30+ More
精选30个优秀的CSS技术和实例(已翻译成中文)
12种Javascript解决常见浏览器兼容问题的方法(已翻译成中文)
63个必不可少的Wordpress Hack、教程、帮助文件和手册
20个神奇的Javascipt脚本原型、元素、Widgets、类…
技巧
整理及优化CSS代码的7个原则(已翻译成中文)
使用CSS为图片添加更多趣味的5种方法(已翻译成中文)
10个CSS简写技巧让你永远受用(已翻译成中文)
资源
推荐20个关于网站可用性及界面设计的网站(已翻译成中文)
精选31个网站界面设计实践教程(已翻译成中文)
成为Web设计/开发自由职业者所要遵循了53个步(60+资源)
Ajax网页趋势研究，什么是最好的免费Ajax资源？(70+最佳Ajax资源)
155个Wordpress资源、教程、插件、主题、Ajax、播客…庞大的WP列表
10个非常棒的Ajax及Javascript实例资源网站(已翻译成中文)
精选2008年最佳设计素材资源&灵感 (已翻译成中文)
精选15个国外CSS框架(已翻译成中文)
推荐20个让你学习并精通CSS的网站(已翻译成中文)
65个优秀的jQuery资源(教程、手册、电子书、demo、插件…)
300+Jquery, CSS, MooTools 和 JS的导航菜单资源(已翻译成中文)
网页设计必备的10套漂亮图标集(已翻译成中文)
Eva's Blog 