February 15, 2009 - by Macji - HTML/CSS/JS/PHP - javascript, ajax, 302
如果我们的web应用有大量的异步请求，而这些异步请求是在web服务器认证的情况下，那当我们请求发生在服务器认证失效下，服务器自动302到登录页面，那我们异步获取的是登录页面的数据。我们看YUI代码，当ajax请求发生301 302属于失败事件。
...
if(httpStatus >= 200 && httpStatus < 300 || httpStatus === 1223){
//
}
...
但事实上，并没有发生失败事件，浏览器会再发一次ajax请求到302的地址，如果还是发生302，一直请求，直到完成请求或者请求跨域失败为止。对于js来说，301 302这种跳转是透明的，无法处理。
测试地址（请用firebug， 打开控制台，查看数据，一目了然）
那到底如何当ajax正确处理302呢，这是浏览器级别的问题，也就是说没有浏览器能正确处理302。对于我们前端来说，正确的验证ajax回来的数据，并给出提示，那也不友好（比如服务器端希望我们去登录页面）。更友好的处理是当服务器端发生302，那ajax就当"错误"处理，也做302跳转。
//success的时候 不是你想要的数据后，做如下验证
if(-1 != data.indexOf('x')){//x为302后页面特定的字符
var LOGIN_DOMAIN = 'xxx';//302地址
window.location = LOGIN_DOMAIN;
return true;
}
//当302跳转后，ajax发生跨域，可以在failure处理，但 ie返回的是o.status 是 0
failure: function(o){
if(302 == o.status){
//
}
}
January 26, 2009 - by Macji - 我的生活 - review
已经1点了，牛年到了，鼠年我做了什么，新的一年，我又该回顾点什么呢？
嗯，08年4月，结束了我人生的第一份工作，被前老板称之为美工，我不懂设计，不懂美学。我更喜欢的是敲敲代码，研究点我不明白的东西。正如我08年初所说的，我如愿的进入了UED部门，感谢小马哥带我进入淘宝UED，成为一位web前端开发者，这比美工要好听多了，为了对得起这title，我正努力的学习着。
2008年，工作很忙，但正是忙才能让我有所进步。
2008年，感谢小马，安排有意思的工作给我，当我反馈工作给你时，你总是说这不行，那不行，正是你说的不，才让我想的更多，思考的更多，进步的更多。完美主义的你，让我学到很多很多。但总觉得有点抱歉，每次去你家吃饭，白吃白喝，打麻将还赢你们钱，我在这里表示抱歉啦。
2008年，感谢正淳，你的热心，接触过你的人，都知道你是多么的热心，拜托你的事，准没问题。听到你的声音，就知道你有多么的爱淘宝，爱工作。从最底层看问题，让我也了解到问题的另一面。你说我能教你的，就是那点经验。这话不是一般人能听得到的，感动ing。
2008年，最要感谢我的师傅 圆心，让我重新认识技能上的东东，你的学习方法，你的学习态度，你看问题的方式，做的你徒弟，我学到的太多了，唯一没学到的就是你的体重=.=，我没有在骂人哦，说实在话，谢谢你在这一年中带着我，你不烦耐心的跟我讲解着这个问题那个问题，09年，我会加油的。
2008年，要感谢的人太多了，感谢UED前端组，也感谢我自己。
2009年，该做点什么呢，提高效率。工作为什么很忙，效率是一方面，当然经验是效率的瓶颈。要好好记录工作最花时间的地方，总结原因。希望09年少加班，按时回家，然后做一些自己喜欢做的事。希望借着牛年，让我自己变得牛气冲天。
2009年，87年的我，多多少少也有点年纪了，看着UED进来比我年轻的人，感叹年轻真好，后生可畏。当然我也没有资格说这些话，我还是挺年轻的。嗯，比猥琐男，比学术男，比腔调男要年轻多。好好努力，好好去对得起这个年纪，对的起我的title。
娟娟，你真的太好了，我是一个不会说话的人，很多肉麻的话，我都没说出来。在新年之际，我要在这里好好谢谢你。时间过得真快，一年这么快就过去了，这一年中你从东边跟着我到西边，这些苦，这些累，你从来不说；这一年我们在欢声笑语中，让给我们更懂得了生活是平淡的，但我们让平淡的生活，变得非常的缤纷多彩；在这一年，我加班没时间陪你，你总是很体贴我，我加班回来，你总是会给我烧蛋炒饭，紫菜汤，我累了，你会给我按摩。我有这么好的一个老婆，我骄傲啊。在09年，我要做到逛街不喊累，吃辣不喊辣，吃醋不喊酸。其实还有很多话要说，这些全都是只属于我们俩的。
2009年，结果，结果，结果，让我们的结果牛气冲天。
January 18, 2009 - by Macji - HTML/CSS/JS/PHP - javascript, this
this指向当前作用域的对象，如果找不到，往上一层找，直到window。
this 关键字很好用，很灵活，正因为很灵活，所以一不小心你就会掉进陷阱，所以你要注意以下几点：
- 元素对象的this，始终指向该元素，如事件绑定。
- 全局的this或者window的相关方法的this始终指向window对象，如setTimeout(function(){alert(this);}, 10)。
- 自己创建的对象（{}, new function等）里的this指向自己对象，如var obj = {xxx: function(){alert(this);}}
- 匿名函数的this，始终指向window对象，如(function(){alert(this);})();
- 想不到还有什么了，望达人补充。
遇到在某function里不能正常使用this时，可以用call或者在其正常的作用域里var _this = this;然后用_this，最鹾的就是直接用对象名来调用。
另给自己定义的对象都应该创建一个属于该对象的 toString方法。
January 15, 2009 - by Macji - HTML/CSS/JS/PHP - javascript, bugs, yui
November 3, 2008 - by Macji - HTML/CSS/JS/PHP - 渐进增强, tab, Progressive, Enhancement
大家一直在讲Progressive Enhancement，如果你不看英文，那么请看玉伯翻译的理解渐进增强（Progressive Enhancement）。也标题一下，做一个tab切换实例，来进一步说明Progressive Enhancement(渐进增强)。
需求：做一个tab，要求当用户禁止javascript后，tab还能照样使用。
貌似不能实现，可仔细想想是可以实现的，连这个都能实现，何况一个tab呢。。。
- 首先我们写html结构
<div id="tab" class="mj">
<ul class="mj-nav">
<li class="first"><a href="#"><span>类目1</span></a></li>
<li><a href="#"><span>类目2</span></a></li>
<li><a href="#"><span>类目3</span></a></li>
</ul>
<div class="panel">
这是类目1
</div>
<div class="panel">
这是类目2
</div>
<div class="panel">
这是类目3
</div>
</div>
测试地址一 - 写上css
.mj{
width:500px;
padding:10px 0;
border:solid 1px #bfbfbf;
}
.mj-nav, .mj-nav *{
background:url(cat_selector.png) no-repeat 100px 100px;
}
/* tab 导航条 */
.mj .mj-nav{
height:25px;
padding:0 10px;
line-height:25px;
background-position:0 0;
}
.mj-nav li{
float:left;
}
.mj-nav a{
float:left;
padding-left:20px;
}
.mj-nav span{
display:block;
padding-right:20px;
}
.mj-nav a{
background-position:-500px 0;
}
.mj-nav .first a{
background-position:100px 100px;
}
.mj-nav .selected{
position:relative;
margin:0 -1px 0 0;
}
.mj-nav .selected a{
background-position:0 -25px;
}
.mj-nav .selected span{
background-position:100% -25px;
}
测试地址二 - 引入js，这里直接用Tbar，
<script src="http://assets.taobaocdn.com/js/tbra/tbra-widgets.js?t=20081028.js" type="text/javascript"></script>
<script type="text/javascript">
TB.widget.SimpleTab.decorate('tab', {eventType:'click', currentClass:'selected'});
</script>
测试地址三 - ok，到这里我们的tab就算完成了。只要浏览器支持javascript，那么就可以使用我们的tab，但是，如果用户禁止了javascript，那后果该是怎样的呢？惨不忍睹。测试地址四
- 我们都知道锚点(url#xxx)，定位到页面的位置。如果我们的锚点都在一个容器里面(div)，并且这个容器只有100像素高(height:100px;overflow:hidden)，然后我们锚点到它的字容器(字容器都是height:100px)，那该是怎么样的呢？答案是可行的，可惜只有Opera不支持这种机制。
//在原来的css基础上加上
.panels{
height:50px;
overflow:hidden;
}
.panel{
height:50px;
}
<div id="tab" class="mj">
<ul class="mj-nav">
<li class="first"><a href="#panel1"><span>类目1</span></a></li>
<li><a href="#panel2"><span>类目2</span></a></li>
<li><a href="#panel3"><span>类目3</span></a></li>
</ul>
<div class="panels">
<div id="panel1" class="panel">这是类目1</div>
<div id="panel2" class="panel">这是类目2</div>
<div id="panel3" class="panel">这是类目3</div>
</div>
</div>
我们只要再做一点点，就能让用户在没有javascript的情况下，也能使用tab，可乐而不为呢？测试地址五 - 但是，当页面很长时，点击切换后，我们tab导航看不到了，测试地址六
- 其实，我们只要在css上，调整一下就可以了。
.mj{
position:relative;
width:500px;
padding:10px 0;
border:solid 1px #bfbfbf;
}
.mj-nav, .mj-nav *{
background:url(cat_selector.png) no-repeat 100px 100px;
}
/* tab 导航条 */
.mj .mj-nav{
position:absolute;
left:0;
top:10px;
width:480px;
height:25px;
padding:0 10px;
line-height:25px;
background-position:0 0;
}
测试地址七 - 这时，javascript可以出场了。我们给其加上脚本。测试地址八
- 可恨的firefox 3，在有锚点，又有脚本，错位了。测试地址九
- 写上obj.scrollTop = 0;就可以了。
var TabSelector = (function(){
var el = $D.get('tab');
if ( !el ) return false;
return {
init: function(){
$E.on(el.getElementsByTagName('ul')[0], 'click', function(){
$E.stopEvent(ev);
});
TB.widget.SimpleTab.decorate('tab', {
eventType:'click',
tabPanelClass:'panel',
currentClass:'selected'
});
$D.getLastChild(el).scrollTop = 0;
}
}
})();
$E.onDOMReady(TabSelector.init);
比较完美的tab，测试地址十，如果再渐进增强，比如键盘事件，盲人触摸等，更极端的，当css失效时，但我没疯。
其实到第三步，一个tab就做好了，也不需要考虑这么多了，但考虑下去，不是很难，疯一次也是不错的。