博客园_Mr.Think的博客@MrThink.net...

原生AJAX入门讲解（含实例）

2011-03-29T05:16:00Z

相对于jQuery、YUI以及其他一些类库的AJAX封装，原生JS的AJAX显得那么的尴尬，兼容性不好，要记很多的方法属性，调用不便捷，代码臃肿...但我还是想说，原生JS才是最根本最底层的知识（虽然实际项目中我也是以jQuery AJAX为主，为什么？高效！），求木之长者，必固其根本。什么是AJAX? 它的优点劣势是什么？Asynchronous JavaScript and XML（异步JavaScript和XML），是一种创建交互式网页应用的网页开发技术。简单的说它是多种技术的组合，目的就是让前台的数据交互变得更快捷，不用刷新页面就可以完成数据的更新。关于它的概念，止于此。想了解更多，请前往：http://zh.wikipedia.org/zh/AJAX优点很明显，利于用户体验，不会打断用户的操作，在不刷新页面的情况下更新内容，减小服务器压力也是它很硬性的一个优点；而缺点，除了倍受追捧的SEO问题，安全问题、前进后退（这个虽然可以用其他方法解决，但AJAX本身的机制还是没变）、破坏程序的异常机制以及对新兴手持设备支持不完美的问题都是它现存的一些缺点。人无完人，AJAX也是如此，我们并不能因为它有缺点而摒弃它。什么地方需要AJAX?其实这是一个太宽泛的问题，各人各项目都有不同的用处，依我的经验与理解，AJAX应该用于小面积更新数据而不希望整个页面刷新的情况下使用。比如对用户名或者注册邮箱等数据判断、内容选项卡内容、弹出的登录注册窗口以及用户提交信息后的反馈信息等等。实践出真知！崇尚思考加实践，我坚信这是深入任何一门技术的必备法宝。下面，我就以一个常用的验证用户是否使用的实例，浅尝辄止的讲解一下基础的AJAX。查看样例演示验证用户名这种数据判断，不用多说了，会一点点前端的人都知道是必须的。最传统的模式可能是输入信息，然后用户点提交后alert出一个窗口，告诉用户XXX用户名已被注册，请重新输入！我讨厌极丑的alert框！我想大多用户也是一样。此时，AJAX就可以华丽登场了。当用户输入完名字后，在表单外任何地方点一下（失去焦点），AJAX就迅速把用户输入的信息反馈到服务器端判断，并迅速返回一个信息告知用户输入的昵称是否可用。如此，我们需要一个前台的输入表单，代码如下：
另外，我们还需要一个判断输入昵称是否存在的后端页面（本文以PHP为例，这部分不用细究）:...
if(isset($_GET['entryname'])){
$entryname=$_GET['entryname'];
}else{
$entryname='DATA NULL';
}
$sql=sprintf("select * from i_test_ajax where nickname='%s'",$entryname);
$res=$iajax->query($sql);
//sleep只是为了展示readState==1时的效果
sleep(1);
if(($res->num_rows)>0){
echo "抱歉！此昵称已存在 :(";
}else{
echo "恭喜！此昵称可注册 :)";
}
...
如此，万事俱备，只欠东风，剩下的就交给AJAX来处理了。XMLHttpRequest，不得不提的一个对象，AJAX最核心也是最底层的对象。可悲哀的是，它是W3C的一个标准，但微软IE一直很自我（微软IE）。怎么办？当然是用一个方法和谐掉它们。微软IE支持ActiveXObject('Microsoft.XMLHTTP')对象，这样就简单了：//兼容的XMLHttpRequest对象
IXHR: function(){
if(window.ActiveXObject){
XHR=new ActiveXObject('Microsoft.XMLHTTP');
}else if(window.XMLHttpRequest){
XHR=new XMLHttpRequest();
}else{
return null;
}
}
兼容的XMLHttpRequest对象实现了，接下来写一个简单的onblur事件，即当输入值后，表单失去焦点后开始判断并迅速回馈一个信息到前台。代码如下：//触发焦点时执行
document.forms['iform'].nickname.onblur = function(){
//输入的值
var val=document.forms['iform'].nickname.value;
//对用户名的判断
if(!/^[a-zA-Z0-9_]{3,16}$/.test(val)){
alert('请输入3~16位由英文、数字、下划线组成的昵称！');
return false;
}
//初始化一下XHR
iBase.IXHR();
//原来需要新打开的判断页面用GET使用异步
XHR.open('GET','/demo/ajax/iajax20110306_query.php?entryname='+val,true);
//与readyState属性有关，当readyState改变时它才会触发
XHR.onreadystatechange=returnFun;
//异步处理完成后发送数据出去（比如某些需要在焦点事件后再执行的）
XHR.send(null);
}
解释一下AJAX部分的代码。iBase.IXHR()，初始化XHR，以保证XMLHttpRequest对象的兼容。接下来，通过以GET的方式，异步发送到/demo/ajax/iajax20110306_query.php页面进行验证。有人会问什么是GET，GET是从服务器上请求数据，GET方法就是把数据参数队列加到一个URL上，值和表单是一一对应的，比如本文的entryname=val。这个概念可能属于后台程序的范畴，不在此细说。然后，我们需要用到一个onreadystatechange事件属性，这个属性是用来存储函数（或函数名），每当readyState属性改变时，就会调用该函数，即本文中的returnFun；最后，我们还要发送一个数据到服务器，send属性一般用于数据交换,而本文只是一个简单的验证判断，所以，send一个空值。基本的判断与数据发送完成了，接下来还剩一个关键的信息获取，即returnFun。先看代码：function returnFun(){
//当send()已调用，正在发送请求时，显示Loading...
if(XHR.readyState==1){
iBase.Id('tips').innerHTML='Loding...';
}else if(XHR.readyState==4){
//当响应内容解析完成，可以调用时
//更缜密，再判断一下status是否成功
if(XHR.status==200){
//responseText为返回的文本
iBase.Id('tips').innerHTML=XHR.responseText;
}
//使用完请销毁，避免内存泄露
XHR=null;
}
}

此函数是用来通过判断readyState及status状态也及时反馈给用户相应的提示信息。readyState有五种状态：0 (未初始化)： (XMLHttpRequest)对象已经创建，但还没有调用open()方法；1 (载入)：已经调用open() 方法，但尚未发送请求；2 (载入完成)：请求已经发送完成；3 (交互)：可以接收到部分响应数据；4 (完成)：已经接收到了全部数据，并且连接已经关闭。如此一来，你应该就能明白readyState的功能，而status实际是一种辅状态判断，只是status更多是服务器方的状态判断。关于status，由于它的状态有几十种，我只列出平时常用的几种：100——客户必须继续发出请求101——客户要求服务器根据请求转换HTTP协议版本200——成功201——提示知道新文件的URL300——请求的资源可在多处得到301——删除请求数据404——没有发现文件、查询或URl500——服务器产生内部错误至此，一个简单的AJAX验证实例就完成了：查看样例演示关于AJAX的基础介绍与实例就这么多，关键还是在于自己的实践与思考。其实这其中涉及知识并不复杂，若有后端程序的基础，学起AJAX会更加容易，关键是要想明白其中的逻辑关系。有兴趣的话，可以自己写一个不刷新页面加载新内容的AJAX，或者研究一下jQuery中关于AJAX的封装。

原文发布于Mr.Think的博客：http://mrthink.net/ajax-starter-xmlhttpreq/ 转载请注明

本文链接

基于jQuery的可用于选项卡及幻灯的切换插件

2011-03-28T03:26:00Z

最近公司项目页面中用到选项卡与幻灯比较多，特地写了个集选项卡、幻灯片与播放控制于一体的插件，同页面可多次使用。思路就不说了，记得以前写过一个自动切换的幻灯插件：http://mrthink.net/jq-plugin-ifadeslide/，思路有部分是类似的。当然，本文中插件源码中也有注释~插件核心代码：点此查看样例$.fn.WIT_SetTab=function(iSet){
/*
* @Mr.Think
* Nav: 导航钩子；
* Field：切换区域
* K:初始化索引；
* CurCls：高亮样式；
* Auto：是否自动切换；
* AutoTime：自动切换时间；
* OutTime：淡入时间；
* InTime：淡出时间；
* CrossTime：鼠标无意识划过时间
* Ajax：是否开启ajax
* AjaxFun：开启ajax后执行的函数
*/
iSet=$.extend({Nav:null,Field:null,K:0,CurCls:'cur',Auto:false,AutoTime:4000,OutTime:100,InTime:150,CrossTime:60},iSet||{});
var acrossFun=null,hasCls=false,autoSlide=null;
//切换函数
function changeFun(n){
iSet.Field.filter(':visible').fadeOut(iSet.OutTime, function(){
iSet.Field.eq(n).fadeIn(iSet.InTime).siblings().hide();
});
iSet.Nav.eq(n).addClass(iSet.CurCls).siblings().removeClass(iSet.CurCls);
}
//初始高亮第一个
changeFun(iSet.K);
//鼠标事件
iSet.Nav.hover(function(){
iSet.K=iSet.Nav.index(this);
if(iSet.Auto){
clearInterval(autoSlide);
}
hasCls = $(this).hasClass(iSet.CurCls);
//避免无意识划过时触发
acrossFun=setTimeout(function(){
//避免当前高亮时划入再次触发
if(!hasCls){
changeFun(iSet.K);
}
},iSet.CrossTime);
},function(){
clearTimeout(acrossFun);
//ajax调用
if(iSet.Ajax){
iSet.AjaxFun();
}
if(iSet.Auto){
//自动切换
autoSlide = setInterval(function(){
iSet.K++;
changeFun(iSet.K);
if (iSet.K == iSet.Field.size()) {
changeFun(0);
iSet.K=0;
}
}, iSet.AutoTime)
}
}).eq(0).trigger('mouseleave');
}
原文发布于Mr.Think的博客：http://mrthink.net/jq-settab-slide/ 转载请注明

本文链接

求贤令：西安智讯互动渴求1~2名PHP大牛

2011-03-10T02:18:00Z

——听说你跳槽了？回西安了？
——恩。
——薪水很高吗？
——跟原来差不多。
——那你去那儿干啥？
——购买力增强三倍。
要求：
1. 只招猛人，菜鸟绕行！
2. 高效、专注、诚实、负责，能承受高强度工作；
3. 精通PHP+MySQL，熟悉WAMP开发流程,能写优质的代码；
4. 三年以上商用网站开发经验，熟悉XHTML/CSS/JAVASCRIPT及AJAX技术者优先；
薪资：
提供京广沪相同水准的薪水及同等的福利（不明确？能力决定薪水）。
公司介绍：
智讯互动，西安首家整合互动营销机构，已搞定西安最优质的客户，万事具备，只欠猛人。
我们提供与京广沪相同水平的薪水，在西安这座很有味道的城市，大家可以过上更体面的生活。
热切欢迎业内的西安游子回来。
我们的人才理念很简单：
·我们诚挚的邀请优秀的人才加盟，并为他们创造尽量宽松、愉快的工作环境。
·我们推崇专注而高效的工作，轻松开放的沟通，用创造性的想法解决问题。
·我们提供高于同城行业标准的薪水，能让你在这个城市里体面、有尊严的生活。
在我们的团队中，有艺术生、文科生、理科生、退学生；
有人热衷相声表演，有人钻研佛教文化，也有人喜欢泡淘宝和豆瓣；
有人是手持设备技术发烧友，有人是游戏狂人，霸占公司那台Wii；

我们鼓励背景各异的人在此互相分享，激荡创造力。
投递:
cnbluebird#gmail.com（非诚勿扰）

本文链接

HTML5之表单详解

2011-02-23T02:18:00Z

请在新版标准浏览器(Chrome/Opera/Firefox/Safari...)中浏览本文中的样例,否则你看到的只是一个个空白的表单! ⊙﹏⊙‖∣

时光车轮滚滚碾来,前端之路永无止歇.对于这个前端这门精一多专的技术,任何一次技术革新,我们都必须第一时间去了解它学习它,比如Web世界里这簇美艳的花朵---HTML5.虽然HTML5发布之初,许多人(包括我)都觉得普及它还很遥远,但自发布以来,许多企业级网站对它的尝试应用(比如<!doctype html>应用,比如canvas的应用),使HTML5的迈出了一大步,随之而来IE9的发布,无疑又让我们看到了HTML5离我们不再遥远.学习HTML5半年有余了,虽然对它的离线存储以及canvas等革新性技术还是一知半解,但我还是希望我现在所学到的能帮助更多的前端人学习这门毋庸置疑是新趋势的技术.本文我将详细介绍一下HTML5中对表单功能的更新.阅读本文前建议在Opera最新版中打开样例演示页查看样例演示一、表单结构更自由XHTML中需要放在form之中的诸如inpu/button/select/textarea等标签元素,在HTML5中完全可以放在页面任何位置,然后通过新增的form属性指向元素所属表单的ID值,即可关联起来.比如:

二、多样的输入类型(大部分新类型目前并不为所有标准浏览器支持,请参见样例演示中的提示)email输入类型
此类型要求输入格式正确的email地址,否则浏览器是不允许提交的,并会有一个错误信息提示.此类型在Opera中必须指定name值,否则无效果.url输入类型
上面代码展示的文本域要求输入格式正确的URL地址,Opera中会自动在开始处添加http://.日期时间相关输入类型(这些个很牛X的)

这一系列是很酷的一个类型,完全解决了烦琐的JS日历控件问题.但目前MS只有Opera/Chrome新版本支持,且展示效果也不一样.number输入类型(这些个很牛X的)
这个不用多解释了,要求输入一个数字字符,若未输入则会抛出一个错误.range输入类型
此类型将显示一个可拖动的滑块条,并可通过设定max/min/step值限定拖动范围.拖动时会反馈给value一个值.search输入类型
此类型表示输入的将是一个搜索关键字,通过results=s可显示一个搜索小图标.tel输入类型
此类型要求输入一个电话号码,但实际上它并没有特殊的验证,与text类型没什么区别.color输入类型
此类型表单,可让用户通过颜色选择器选择一个颜色值,并反馈到value中.三、新增的表单属性placeholder属性
这是一个很实用的属性,免去了用JS去实现点击清除表单初始值.浏览器支持也还不错,MS除了Firefox,其他标准浏览器都能很好的支持.require/pattern属性

表单验证属性,require类型时,若输入值为空,则拒绝提交,并会有一个提示.上面两种写法都对,这个很有用.并且可以用于textarea以及hidden/image/submit类型.pattern类型为正则验证,可以完成各种复杂的验证.这两种类型在Opera中必须指定name值,否则无效果.autofocus属性
默认聚焦属性,可在页面加载时聚焦到一个表单控件,类似于JS的focus().list属性

该属性需要与datalist属性共用,datalist是对选择框的记忆,而list属性可以为选择框自定义记忆的内容.max/min/step属性
限制值的输入范围,以及值的输入渐进程度,比如可在number设定输入最大值最小值,或者在range中设定拖动阶梯.autocomplete属性

此属性是为表单提供自动完成功能.如果该属性为打开状态可很好地自动完成.一般来说,此属性必须启动浏览器的自动完成功能.
路漫漫其修远兮，吾将上下而求索.前端之路,学无止尽.痛并快乐着. ╰(￣▽￣)╮

原文首发于Mr.Think的博客: http://mrthink.net/html5-newfeatures-form/ 转载请注明.

本文链接

JS实现动态显示当前时间(12/24小时制)

2011-02-19T00:32:00Z

今天又要用到动态显示当前时间,且要求可以切换24/12小时制, 记得很久前写过一个24小时制的,但一时没能找着, 于是又重新写了个,若有需要的朋友自行复制粘贴一份吧. 很简单的一个功能函数,实现方式不多言,用Date()对象获取到当前时间,然后用setTimeout每隔1秒获取最新的时间.写的过程中碰到过一个小小的问题: 我最初的想法是用setInterval()每隔1秒获取最新时间,可是可以,但setInterval如果放在主函数内部,但导致内存泄漏(至于原因,暂时还没想明白),后来在Rocky的提醒下用setTimeout()才解决内存泄漏问题,感谢Rocky同学:)核心代码及演示查看样例演示function nowTime(ev,type){
/*
* ev:显示时间的元素
* type:时间显示模式.若传入12则为12小时制,不传入则为24小时制
*/
//年月日时分秒
var Y,M,D,W,H,I,S;
//月日时分秒为单位时前面补零
function fillZero(v){
if(v<10){v='0'+v;}
return v;
}
(function(){
var d=new Date();
var Week=['星期天','星期一','星期二','星期三','星期四','星期五','星期六']
Y=d.getFullYear();
M=fillZero(d.getMonth()+1);
D=fillZero(d.getDate());
W=Week[d.getDay()];
H=fillZero(d.getHours());
I=fillZero(d.getMinutes());
S=fillZero(d.getSeconds());
//12小时制显示模式
if(type && type==12){
//若要显示更多时间类型诸如中午凌晨可在下面添加判断
if(H<=12){
H='上午 '+H;
}else if(H>12 && H<24){
H-=12;
H='下午 '+fillZero(H);
}else if(H==24){
H='下午 00';
}
}
ev.innerHTML=Y+'年'+M+'月'+D+'日 '+' '+W+' '+H+':'+I+':'+S;
//每秒更新时间
setTimeout(arguments.callee,1000);
})();
}
原文发布于Mr.Think的博客: http://mrthink.net/js-nowtime-12or24mode/ 转载请注明出处.

本文链接

原生JS实现淡入淡出效果(fadeIn/fadeOut/fadeTo)

2011-01-29T08:50:00Z

淡入淡出效果,在日常项目中经常用到,可惜原生JS没有类似的方法,而有时小的页面并不值得引入一个jQuery库,所以就自己写了一个,已封装, 有用得着的朋友, 可以直接使用. 代码中另附有一个设置元素透明度的方法, 是按IE规则(0~100)设置, 若改成标准设置方法(0.00~1.00), 下面使用时请考虑浮点精确表达差值.参数说明:fadeIn()与fadeOut()均有三个参数,第一个是事件, 必填; 第二个是淡入淡出速度, 正整数, 大小自己权衡, 可选参数; 第三个, 是指定淡入淡出到的透明度值(类似于jQuery中的fadeTo()), 0~100的正整数值, 也是可选参数.核心代码及演示: 查看样例演示

//淡入效果(含淡入到指定透明度)
function fadeIn(elem, speed, opacity){
/*
* 参数说明
* elem==>需要淡入的元素
* speed==>淡入速度,正整数(可选)
* opacity==>淡入到指定的透明度,0~100(可选)
*/
speed = speed || 20;
opacity = opacity || 100;
//显示元素,并将元素值为0透明度(不可见)
elem.style.display = 'block';
iBase.SetOpacity(elem, 0);
//初始化透明度变化值为0
var val = 0;
//循环将透明值以5递增,即淡入效果
(function(){
iBase.SetOpacity(elem, val);
val += 5;
if (val <= opacity) {
setTimeout(arguments.callee, speed)
}
})();
}

//淡出效果(含淡出到指定透明度)
function fadeOut(elem, speed, opacity){
/*
* 参数说明
* elem==>需要淡入的元素
* speed==>淡入速度,正整数(可选)
* opacity==>淡入到指定的透明度,0~100(可选)
*/
speed = speed || 20;
opacity = opacity || 0;
//初始化透明度变化值为0
var val = 100;
//循环将透明值以5递减,即淡出效果
(function(){
iBase.SetOpacity(elem, val);
val -= 5;
if (val >= opacity) {
setTimeout(arguments.callee, speed);
}else if (val < 0) {
//元素透明度为0后隐藏元素
elem.style.display = 'none';
}
})();
}

原文转载自Mr.Think的博客: http://mrthink.net/js-fadein-fadeout-fadeto/,转载请注明.

本文链接

前端学习书籍推荐

2011-01-21T06:31:00Z

时常遇到朋友问我前端学习该如何学习, 看哪些书藉. 自己也希望将自己的一些学习心得与经验传教于初学者. 抱着对初学者负责的态度, 如何学习前端, 我还需要在心成有个成熟的底稿后再来写, 本文先以自己学习过程中看过的书为基础, 总结一下前端学习各个阶段书籍的选择.
HTML与CSS阶段书藉选择
对初学都来说,这一阶段应该是XHTML与CSS2的学习. 学习前期, 建议至多看两本书: 《CSS权威指南》和《CSS那些事儿》, 有一定CSS基础后, 可以看《精通CSS：高级Web标准解决方案》. 或许你会问,为什么没有HTML学习的书籍, 就我个人立场而言, 在你还没入门前, W3C在线教程或者HTML手册都是你最好的入门书. 前期你需要掌握的HTML知识并不要很多. 简单一点, 你能知道何处该用哪个HTML标签即可. 如果还想简单一点, 可以找一份HTML标签汇总表记下对应的标签(可参考HTML技巧: 语义化你的代码一文的附表) .
对于CSS, 入门的话, 一本CSS2.0手册以及3C在线教程也是你入门首选方法. 入门之后,我非常推荐买一本《CSS权威指南》, 这本书最新版已到第三版. 可以当成参考书, 亦可以是系统学习CSS2.0的书. 这本书该什么时候读呢? 会与不会之间, 阅读这本书你需要对CSS最基础的东西有个了解. 这本书最大的优点便是讲的透彻易懂(对于初学都,这是多么重要), 知识系统全面, 章节也分布的合理. 只要你用心读完这本书之后, 你的CSS水平一定有一个不小的提升. 在此期间, 还可以买一本《CSS那些事儿》, 作为实践用书. 我一直坚信, 任何一门技术, 自己写代码实践永远都是第一要务. CSS基础基本掌握,并有一定的项目经验后, 可以开始读《精通CSS：高级Web标准解决方案》一书, 此书描述比较简洁(我看的是第一版, 据说第二版翻译的比较差劲), 里面有许多实用的项目技巧, 对常用BUG的查找及修复有整章的描述, 书最后还有两个实例介绍, 是本很不错的进阶书籍.
JavaScript与JS库学习
原生JavaScript入门首选, 当然是《JavaScript DOM编程艺术》, 毋庸置疑的经典之作. 前前后后我至少完整的读过三篇, 每次都有不同的收获. 透彻易懂, 表述流畅, 作者一直在用一种极简的文字描述对于初学者来说非常晦涩的理论, 并有完整且并不复杂的样例相辅. 只要你用心读完它, 你就会大概的知识JavaScript是怎么回事. 读过《JavaScript DOM编程艺术》之后, 很多人推荐看《JavaScript权威指南》, 我个人觉得不妥, 或许对于有程序基础的人来说, 这本书可以相对轻松的读下去, 但对于初学者, 读它无疑是一种挫败感很强的打击, 这本书很全面涵盖的很广, 的确是一本不错的书, 但前期仅是一本工具书而已. 如比让你学英文就直接给你一本牛津词典, 学起来谈何容易. 我个人的推荐是, 学透《JavaScript DOM编程艺术》后(起码对里面的实例自己能独立完成,并且知道所以然), 用一到两个月时间实践JS, 积累一定的知识基础后, 可以开始看《精通JavaScript》, 这是一本进阶的书籍, 也是一本很实用的书, 作者是jQuery之父John Resig, 书中介绍并演示了很多轻量级的功能函数, 并对实现原理有很详细的讲解(书中样例的源码注释也翻译成中文了, 这一点翻译做的很周到). 在这本书之前,《ppk 谈 JavaScript》一书也值得一读, 但我个人而言, 此书让我读起来很不舒服. 全书基本是在9个样例基础上讲的, 里面对JS的可用性与可访问性有很到位的讲解, 但作者将样例都拆散了讲的, 感觉很散乱, 有时看到后面, 还得去前面找与之相应的内容. 所以, 这本书是否去读, 读者可根据实际情况选择. 前面的书看完了, 可以回过头来看《JavaScript权威指南》, 将是不错的选择.
上面的书都看完并读懂之后, 原生JavaScript算是入门且有一定的功力了, 接下来可能需要你实践与领悟了, 后面的该读什么样的书相信自己也有一个大概的方向了.
学完原生JavaScript, 顺便再提下库的学习. 库的目的是让我们更便捷的使用JS, 但原生JS才是根本, 若过于倚重库, 而忽略原生JS, 你永远也只是知其然, 而不知其所以然. 原生JS与库应该是相辅相成的,所以, 学习库之前, 一定要对原生JS有一定了解, 并且花在学习原生JS上的时间永远要多于库的学习. 因本人仅熟悉jQuery库, 本文只推荐一本jQuery库学习书藉: 《锋利的jQuery》. 这是一本讲jQuery再简单化的讲述给读者的书, 书中的内容都可以通过jQuery API找到, 但作者用更直白的语言描述出来, 并辅以样例, 清晰易懂. 只要稍稍用心, 看完此书, 写完书中样例, jQuery基本算是会了.
HTML5与CSS3
HTML5与CSS3的学习, 目前除了API还没有更多可以选择的书. 本人最近在阅读《HTML 5用户指南》, 此书对HTML5的新标签与新功能讲的还清晰, 虽然还没读完, 但就目前我读过的前七章(共十章),感觉此书还是值得一读的. 至于CSS3, 除了API还没找到对应的书.
Web前端其他知识学习
前端是精一多专的职业, 前端不仅仅要会HTML/CSS/JS, 还需要你对综合知识, 比如用户体验, 搜索优化, 后台语言等都要有一定的了解. 其实这方面的书, 我自己读的也比较少, 更多的是在网络上关注相关的知识并加之自己领悟消化.
这里我只推荐两本书《用户体验的要素》和《Web前端开发修炼之道》, 并且这两本书都是可选的.
《用户体验的要素》是一本没有代码的理论书, 但它并不枯燥. 全书都在告诉你用户体验的思想, 所以这不是一本有答案的书. 可以说, 此书对我本人对用户体验的认知有一个深层次的理解.
《Web前端开发修炼之道》一书是前端经验进阶的书, 喜忧参半, 文中有部分让人受益知识, 但也有不少地方我认为是糟粕. 比如, 书中对CSS过于模块化的思想, 比如讲第五章讲JavaScript的样例竟然没有一条注释. 所以, 这本书读者选择前请慎重. 阅读过程中也要有自己的主见, 取其精华, 弃其糟粕.

最后, 希望本文对初学者选择学习书籍有帮助, 也希望高手们对本文书藉选择提出指正.

本文链接

Css技巧: 模块化编码

2011-01-10T08:36:00Z

原生Js因jQuery的"write less,do more"变得极简, Html因语义化编码变得简明, 那么, 有没有一种方式让Css也更加的高效精致呢? 当然有, 那便是模块化编码.Css的模块化,我们可以理解成(抑或本身就是)OOP思想, 重用性、灵活性、可扩展性便是它终极的目标, "类"便是它的核心, OOP的多用组合少用继承一样是它的基本原则. Css模块化是一个新颖高效的Css编码方式, 若有接触过YUI Css的朋友肯定对这种方式有所了解.如何Css模块化, 我想这才是大家真正关心的. 我所理解的Css模块化, 应该从两大块去区分. 第一大块, 从整站全局模块化. 这一点大家并不陌生, 时常用到的reset css便是模块化的一部分, 全局通用的字体样式, 链接样式, 以及通用头部底部及主体容器等等这些我们已经熟知, 另外诸如定义文字排版(如.f12{font-size:12px})、定位(如.tl{text-align:left})、长度高度(如.w10{width:10px})、边距(如.m10{margin:10px})等页面中会常用到的样式，这一类，我们称之为Css通用原子类(哈,与类扯上关系了,那就权当成类吧).通用原子类有两个特点: 通用性和原子性, 任何页面都可以随意使用它们, 且他们只表现最基础的样式, 一个通用原子类只设置一个样式,不可再分. 关于整站全局模块化不再详述, 本文后面我会贴出阿当的《Web前端开发修炼之道》一书中常用通用原子类样式.第二大块, 是从视觉效果上模块化, 在视觉上样式和功能相对独立稳定的部分即可视为模块. 拆分这些模块, 应该尽量遵循一个原则: 模块与模块之间尽量不要包含相同的部分, 若有相同部分就再拆出来独立成一个模块.下图是我画的一个简易的页面视觉图: 看到上图, 菜鸟的Css编码一般是为1~4定义四个类名,为他们写各自的样式; 明智一点的写法是为1~4定义四个类名, 用.a .b .c .d{...}方式定义共同样式, 然后再为各自定义不同部分的样式; 但是, 还有一种完美的方式, 那便是模块化. 下面我就以上图为例做个简单的模块化分析.第一步, 分析整个视觉共用部分. 可以看出,1~4中,标题背景,标题文字,内容文字这三个部分的样式都是相同的, 所以, 我们可以为这个四个区块定义一个类名, 将共同的样式写给这个类名:

...
<div class="box">
<h2>倒霉松鼠再出山</h2>
<p>20世纪福克斯将为卖座动画片《冰河世纪》(Ice Age内地译做《冰川时代》)再次开拍续集...</p>
</div>
<div class="box">
<h2>倒霉松鼠再出山</h2>
<p>20世纪福克斯将为卖座动画片《冰河世纪》(Ice Age内地译做《冰川时代》)再次开拍续集...</p>
</div>

<h2>倒霉松鼠再出山</h2>
<p>20世纪福克斯将为卖座动画片《冰河世纪》(Ice Age内地译做《冰川时代》)再次开拍续集...</p>
</div>
<div class="box">
<h2>倒霉松鼠再出山</h2>
<p>20世纪福克斯将为卖座动画片《冰河世纪》(Ice Age内地译做《冰川时代》)再次开拍续集...</p>
</div>
...

第二步, 分析出不同部分, 并权衡高效使用. 可以看出, 不同部分, 主要是内容背景色和区块宽度两部分. 先说背景色, 背景色有三种, 淡黄(1个), 白色(2个), 灰色(1个), 遵从"模块与模块之间尽量不要包含相同的部分, 若有相同部分就再拆出来独立成一个模块"的原则, 我们要把2个白底的样式提出来, 另两个单独定义, 而根据Css优先原则, 我们可以把白底默认定义到第一步中的box样式中, 另两种背景色可做重定义处理. 再来看看宽度与定位, 2,4宽度等同且都右浮动, 所以, 我们可以把这部分提出来模块化, 而浮动一般可以直接调用通用原子类, 所以, 我们仅仅需要定义一个宽度样式中(若这个宽度在通用原子类中也有就更好了). 如此以来, Html可以这样写:

...
<div class="box bg_y">
<h2>倒霉松鼠再出山</h2>
<p>20世纪福克斯将为卖座动画片《冰河世纪》(Ice Age内地译做《冰川时代》)再次开拍续集...</p>
</div>
<div class="box fr right_w">
<h2>倒霉松鼠再出山</h2>
<p>20世纪福克斯将为卖座动画片《冰河世纪》(Ice Age内地译做《冰川时代》)再次开拍续集...</p>
</div>
<div class="box">
<h2>倒霉松鼠再出山</h2>
<p>20世纪福克斯将为卖座动画片《冰河世纪》(Ice Age内地译做《冰川时代》)再次开拍续集...</p>
</div>
<div class="box fr right_w bg_g">
<h2>倒霉松鼠再出山</h2>
<p>20世纪福克斯将为卖座动画片《冰河世纪》(Ice Age内地译做《冰川时代》)再次开拍续集...</p>
</div>
...

或许, 这样的结构对Html页面来说, 会显的有些臃肿, 但Css文件因为重用性的提高而大大的减小了. Css模块化是一个比较实用但也需要去领悟的思想, 实际使用中也需要全面的分析, 过多的模块也会导致维护性的降低, 如同OOP编程一样, 我们也要考虑"公有属性"与"私有属性".本文通过一个简单的例子解析了Css模块化的基本思想, 更多关于Css模块化的知识, 可以看YUI Css或者其他网络上的资源.do write, less more...Css也可以做到.附: 阿当《Web前端开发修炼之道》一书中分享的通用原子类:

/*文字排版*/
.f12{font-size:12px}
.f13{font-size:13px}
.f14{font-size:14px}
.f16{font-size:16px}
.f20{font-size:20px}
.fb{font-weight:bold}
.fn{font-weight:normal}
.t2{text-indent:2em}
.lh150{line-height:150%}
.lh180{line-height:180%}
.lh200{line-height:200%}
.unl{text-decoration:underline;}
.no_unl{text-decoration:none;}
/*定位*/
.tl{text-align:left}
.tc{text-align:center}
.tr{text-align:right}
.bc{margin-left:auto;margin-right:auto;}
.fl{float:left;display:inline}
.fr{float:right;display:inline}
.cb{clear:both}
.cl{clear:left}
.cr{clear:right}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{display:inline-block}* html .clearfix{height:1%}.clearfix{display:block}
.vm{vertical-align:middle}
.pr{position:relative}
.pa{position:absolute}
.abs-right{position:absolute;right:0}
.zoom{zoom:1}
.hidden{visibility:hidden}
.none{display:none}
/*长度高度*/
.w10{width:10px}
.w20{width:20px}
.w30{width:30px}
.w40{width:40px}
.w50{width:50px}
.w60{width:60px}
.w70{width:70px}
.w80{width:80px}
.w90{width:90px}
.w100{width:100px}
.w200{width:200px}
.w250{width:250px}
.w300{width:300px}
.w400{width:400px}
.w500{width:500px}
.w600{width:600px}
.w700{width:700px}
.w800{width:800px}
.w{width:100%}
.h50{height:50px}
.h80{height:80px}
.h100{height:100px}
.h200{height:200px}
.h{height:100%}
/*边距*/
.m10{margin:10px}
.m15{margin:15px}
.m30{margin:30px}
.mt5{margin-top:5px}
.mt10{margin-top:10px}
.mt15{margin-top:15px}
.mt20{margin-top:20px}
.mt30{margin-top:30px}
.mt50{margin-top:50px}
.mt100{margin-top:100px}
.mb10{margin-bottom:10px}
.mb15{margin-bottom:15px}
.mb20{margin-bottom:20px}
.mb30{margin-bottom:30px}
.mb50{margin-bottom:50px}
.mb100{margin-bottom:100px}
.ml5{margin-left:5px}
.ml10{margin-left:10px}
.ml15{margin-left:15px}
.ml20{margin-left:20px}
.ml30{margin-left:30px}
.ml50{margin-left:50px}
.ml100{margin-left:100px}
.mr5{margin-right:5px}
.mr10{margin-right:10px}
.mr15{margin-right:15px}
.mr20{margin-right:20px}
.mr30{margin-right:30px}
.mr50{margin-right:50px}
.mr100{margin-right:100px}
.p10{padding:10px;}
.p15{padding:15px;}
.p30{padding:30px;}
.pt5{padding-top:5px}
.pt10{padding-top:10px}
.pt15{padding-top:15px}
.pt20{padding-top:20px}
.pt30{padding-top:30px}
.pt50{padding-top:50px}
.pb5{padding-bottom:5px}
.pb10{padding-bottom:10px}
.pb15{padding-bottom:15px}
.pb20{padding-bottom:20px}
.pb30{padding-bottom:30px}
.pb50{padding-bottom:50px}
.pb100{padding-bottom:100px}
.pl5{padding-left:5px}
.pl10{padding-left:10px}
.pl15{padding-left:15px}
.pl20{padding-left:20px}
.pl30{padding-left:30px}
.pl50{padding-left:50px}
.pl100{padding-left:100px}
.pr5{padding-right:5px}
.pr10{padding-right:10px}
.pr15{padding-right:15px}
.pr20{padding-right:20px}
.pr30{padding-right:30px}
.pr50{padding-right:50px}
.pr100{padding-right:100px}

原文发布于Mr.Think的博客: http://mrthink.net/css-tips-oopcoding/, 转载请注明.

本文链接

多组处理, 仅展开一个区块的折叠效果(原生Js和jQ版)

2011-01-07T03:24:00Z

上午在项目中遇到的一个问题, 折腾了半小时才把思路理顺. 需求是, 同一个页面, 有多组(不固定), 每组区块数量不一定一样的小区块. 要求每次只展开一个区块. 实现原理其实很简单, 点击导航, 若它的区块为隐藏, 则展开它, 同时, 隐藏掉同组其他区块; 若它的区块为展开, 则隐藏它, 同时, 展开同组其他区块中的一个. 一开始以为仅仅简单的两个遍历就能搞定. 但事实并非如此. 冷静思考了下, 通过点击的元素取到当前组的相关元素, 再单独处理当前组才合理. 顺着这个思路, 功能终于实现了, 写了原生Js版本, 用同样的思路写了个jQ版本. 时间关系, 写的也比较零散, 就没有封装. 其实, 对这种思路也不是很满意, 感觉太散了, 哪位大师有更好的思路请赐教.另, 在演示页面中, 点击jQ版区块的标题, 会有一个Js错误, 那是因为获取Js版下的h2时, 我偷了个懒, 把jQ的也遍历进去了. 我想, 实际应用中, 也不会有人同一个效果, 一边用Js一边用jQ吧.核心代码点此查看样例

//原生Js版本 ***** start
window.onload=function(){
//共用函数区
var iBase={
//document.getElementById
Id: function(name){return document.getElementById(name)},
//通过class获取元素
GetByClass: function(name,tagName,elem){
var c=[];
var re=new RegExp('(^|\\s)'+name+'(|\\s$)');
var e=(elem || document).getElementsByTagName(tagName || '*');
for(var i=0; i < e.length; i++){
if(re.test(e[i].className)){
c.push(e[i]);
}
}
return c;
},
//获取样式属性
AttrStyle: function(elem,attr){
if(elem.attr){
return elem.style[attr];
}else if(elem.currentStyle){
return elem.currentStyle[attr];
}else if(document.defaultView && document.defaultView.getComputedStyle){
attr=attr.replace(/([A-Z])/g,'-$1').toLowerCase();
return document.defaultView.getComputedStyle(elem,null).getPropertyValue(attr);
}else{
return null;
}
},
//获取祖辈元素中符合指定样式的元素
Parents: function(elem,name){
var r=new RegExp('(^|\\s)'+name+'(|\\s$)');
elem=elem.parentNode;
if(elem!=null){
return r.test(elem.className) ? elem : iBase.Parent(elem,name) || null;
}
},
//取索引值
Index: function(cur,obj){
for(var i=0; i < obj.length; i++){
if(obj[i]==cur){
return i;
}
}
}

}

//变量定义
var listBox=iBase.GetByClass('js','div');
var navItem=iBase.Id('demo').getElementsByTagName('h2');//此处将jQ区块中的h2也取到了,所以页面会有个小小的错误
var icoItem=null,boxItem=null,boxDisplay=null,elemIndex=null,elemParent=null;
//初始化展开第一个
for(var i=0; i < listBox.length;i++){
iBase.GetByClass('box','div',listBox[i])[0].style.display='block';
listBox[i].getElementsByTagName('span')[0].innerHTML='-';
}
//遍历所有点击项
for(var i=0; i < navItem.length;i++){
navItem[i].onclick=function(){
elemParent=iBase.Parents(this,'js');//获取当前点击所在区块
navItem=elemParent.getElementsByTagName('h2');//获取当前区块下的点击项
icoItem=elemParent.getElementsByTagName('span');//获取当前区块下的展开关闭
boxItem=iBase.GetByClass('box','div',elemParent);//获取需要控制的区块
elemIndex=iBase.Index(this,navItem);//获取当前点击在当前区块点击项中的索引
//切换展开关闭图标
icoItem[elemIndex].innerHTML= icoItem[elemIndex].innerHTML=='-' ? '+' : '-';
if(iBase.AttrStyle(boxItem[elemIndex],'display')=='block'){
//控制项展开状态下,隐藏当前,展开其他的第一项
//此处有个展开0/1的判断,因为当点击第一个时是不能再展开第一个的
boxItem[elemIndex].style.display='none';
if(elemIndex==0){
boxItem[1].style.display='block';
icoItem[1].innerHTML='-'
}else{
boxItem[0].style.display='block'
icoItem[0].innerHTML='-'
}
}else{
//控制项展开状态下,展开当前,隐藏其他项
boxItem[elemIndex].style.display='block';
for(var k=0;k < boxItem.length; k++){
if(k!=elemIndex){
boxItem[k].style.display='none';
icoItem[k].innerHTML='+';
}
}
}
}
}

}

//jQuery版本 ***** start
$(function(){
//变量定义区
var _listBox=$('.jq');
var _navItem=$('.jq>h2');
var _boxItem=null, _icoItem=null, _parents=null, _index=null;

//初始化第一个展开
_listBox.each(function(i){
$(this).find('div.box').eq(0).show();
$(this).find('h2>span').eq(0).text('-');
});

//遍历所有的点击项
_navItem.each(function(i){
$(this).click(function(){
//找到当前点击父元素为listbox(单个区块)的元素
_parents=$(this).parents('.listbox');
_navItem=_parents.find('h2');//此区块中的点击项
_icoItem=_parents.find('span');//此区块中的展开关闭图标
_boxItem=_parents.find('div.box');//此区块中展开关闭项
_index=_navItem.index(this);//取得当前点击在当前区块下点击项中的索引值
if(_boxItem.eq(_index).is(':visible')){
//若当前点击项下的展开关闭项是显示的,则关闭,同时展开另外项中的第一个
_boxItem.eq(_index).hide().end().not(':eq('+_index+')').first().show();
_icoItem.eq(_index).text('+').end().not(':eq('+_index+')').first().text('-');
}else{
//若当前点击项下的展开关闭项是隐藏的,则展开,同时隐藏其他项
_boxItem.eq(_index).show().end().not(':eq('+_index+')').hide();
_icoItem.eq(_index).text('-').end().not(':eq('+_index+')').text('+');
}
});
});
});
原文发布于Mr.Think的博客: http://mrthink.net/jsjq-flod-onlyone/ 转载请注明

本文链接

Html技巧: 语义化你的代码

2010-12-31T05:54:00Z

最近在读阿当的《Web前端开发修炼之道》, 其中有不少东西值得前端路上的朋友学习. 结合自己日常编码的一些经验, 我将陆陆续续将一些从书中学到的以及自己总结的一些前端方面的技巧分享给大家.

Html语义化, 似乎是一个老生常谈的问题. Google一下,也有大把关于语义化的文章. 为什么要语义化标签? 我是这样认为的:Html的每个标签都有它特定的意义,而语义化,就是让我们在适当的位置用适当的标签, 以更好的让人和机器(机器可理解为浏览器可理解为搜索引擎)都一目了然. 如果我的解释不够明了, 请Google. 如何在合适的位置使用合适的标签? 这是一个简单的理解逻辑. 比如, h1~h6标签是用于标题类的; ul是用于无序列表的; ol是用于有充列表的; dl是用于定义列表的; em,strong标签是用来强调的...说白了, Html标签的每个英文释义决定了它的语义(本文后面, 我会放一份常用Html标签的英文释义对照表供参考).什么是让人和机器都能一目了然? 检查Html页面是否语义化最好的方法, 便是去掉页面的Css链接, 看网页结构是否井然有序, 页面是否仍然有很好的可读性. 为什么可以这么说? 大家都知道浏览器都有默认的样式(推荐使用Chrome的Web Developer Tools for Chrome插件, 或者Firefox的Web Developer插件), 比如h1~h6, 会有加粗/字号依次减小、上下边距的默认样式, ul、ol、dl都有默认的项目符号, strong默认有加粗的样式...所以, 同样的页面, 语义化良好的Html可以在页面Css去掉的情况下依然有良好的表现.还有一点, 好的语义化编码, 对搜索引擎有更好的友好性. 搜索蜘蛛是不认识你的Css的, 但它能识别Html标签.下面是一个简单的例子:

通过上面的简单的示例和没有任何Css定义情况下的效果图, 该明白了两者的区别了吧. 如果你在学习Html5, 它的header、footer、sidebar、article等元素都是新增的语义化标签.Html编码语义化是迈向高质量前端开发的一步. 即更好的遵循Web标准, 也能让你页面在去掉样式后依然井然有序. 关于语义化更多更详细的介绍, 可以自行Google或阅读阿当的《Web前端开发修炼之道》第三章.附: 标签语义中英文对照表(删除线为html5不支持的标签)

标签名	英文全拼	中文翻译
a	anchor	锚
abbr	abbreviation	缩写词
acronym	acronym	取首字母的缩写词
address	address	地址
b	bold	粗体
big	big	变大
blockquote	block quotation	区块引用于
br	break	换行
caption	caption	标题
center	center	居中
dd	definition description	定义描述
del	delete	删除
div	division	分隔
dl	definition list	定义列表
dt	definition term	定义术语
em	emphasized	加重
fieldset	fieldset	域集
font	font	字体
h1~h6	header1~header6	标题1~标题6
hr	horizontal rule	水平尺
i	italic	斜体
ins	inserted	插入
legend	legend	图标
li	list item	列表项目
ol	ordered list	排序列表
p	paragraph	段落
pre	preformatted	预定义格式
s	strikethrough	删除线
small	small	变小
span	span	范围
strong	strong	加重
sub	subscripted	下表
sup	superscripted	上标
u	underlined	下划线
ul	unordered list	不排序列表
var	variable	变量

原文发布于Mr.Think的博客: http://mrthink.net/html-tips-semantization/ 转载请注明

本文链接