May 22, 2008 - by Macji - HTML/CSS/JS/PHP - microformats
如果你接触过IE8的WebSlice,那么你对他并不陌生。hatom 是microformats 的一部分,但现在还不是一个开放的标准,还是一个草案。
hAtom is a microformat for content that can be syndicated, primarily but not exclusively weblog postings. hAtom is based on a subset of the Atom syndication format. hAtom will be one of several microformats open standards. 你可以使用Firebug查看我的源代码,就是一套命名规则(hslice完全是为了IE8的WebSlice,你可以用ie8来浏览我的博客)。你可以收藏我博客中你喜欢的文章。
其实google的Blogger 已经在使用它了。如果你也想让用户可以收藏你网页中的某一块东西,那么你就使用它(比RSS更灵活)。
May 18, 2008 - by Macji - HTML/CSS/JS/PHP - css , hack
我一直呼吁尊重浏览器,少用hack,可是为解决IE特殊情况,难免要用到一点点hack。我们在动态添加CSS,习惯在head里添加一个style元素,在这元素里增加css内容。
var addCSS = function(cssText, doc) {
doc = doc || document;
var styleEl = doc.createElement("style");
styleEl.type = "text/css";
if (styleEl.styleSheet) {
styleEl.styleSheet.cssText = cssText;
} else {
styleEl.appendChild(doc.createTextNode(cssText));
}
doc.getElementsByTagName("head")[0].appendChild(styleEl);
}
虽然这样写没有错,可是我们的IE在这种情况下,不认hack和important,也就是说IE会忽略所有无关的字符(_color:#fff; !@#$%^&colo:000;r),非要增加一个hack,我们只能通过判断浏览器是否是IE,然后给IE增加特定的CSS。
换一种思路,假如我们直接给CSS样式表增加CSS呢?try
var addCSS = function(selector, cssText) {
var styles = document.styleSheets[0];//获取css样式表
var rules = styles.cssRules || styles.rules;
if (styles.insertRule)//W3C方式
styles.insertRule(selector + "{" + cssText + "}", rules.length);
else if(styles.addRule)//IE方式
styles.addRule(selector, cssText, rules.length);
}
//假如我们已经有一个H1
(function() {
var _css = "{color:#f60!important; color:#000; _color:#369;}";
addCSS("h1", _css);
})();
YES,就这么简单,你可能觉得这样写不好,是,我们最需要的是权衡。
update: 先创建,再添加就可以了。by 秦歌
var addCSS = function(cssText, doc) {
doc = doc || document;
var styleEl = doc.createElement("style");
styleEl.type = "text/css";
doc.getElementsByTagName("head")[0].appendChild(styleEl);//选创建
if (styleEl.styleSheet) {//再添加css规则
styleEl.styleSheet.cssText = cssText;
} else {
styleEl.appendChild(doc.createTextNode(cssText));
}
}
April 29, 2008 - by Macji - HTML/CSS/JS/PHP - css
今天遇到,记录一下。谢谢怿飞 ,同时我也看到他对待问题的态度(学习的地方)。
我们首先看看W3C 的规定
relative : The box"s position is calculated according to the normal flow (this is called the position in normal flow). Then the box is offset relative to its normal position. When a box B is relatively positioned, the position of the following box is calculated as though B were not offset. The effect of "position:relative" on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined.元素在正常文档流(position in normal flow),并没有被移出。在ie中,relative会把元素移出文档流,但占物理位置。父容器overflow:hidden将不能隐藏。我们先看例子。
body{
color:#fff;
}
.box-0{
width:500px;
height:100px;
padding:20px 0 0 20px;
overflow:hidden;
background:#f60;
}
.box-1{
width:500%;
height:100px;
position:relative;/* */
line-height:100px;
text-indent:100px;
background:#000;
}
this is box-0
this is box-1
查看测试
March 19, 2008 - by Macji - HTML/CSS/JS/PHP - javascript , closure
Mike West 说:
Scope is one of the foundational aspects of the JavaScript language, and probably the one I’ve struggled with the most when building complex programs. I can’t count the number of times I’ve lost track of what the this keyword refers to after passing control around from function to function, and I’ve often found myself contorting my code in all sorts of confusing ways, trying to retain some semblance of sanity in my understanding of which variables were accessible where.要学会JavaScript,必须得先去理解它的作用域是怎样的。
没有块级作用域
JavaScript变量的作用域只有全局和局部作用域。全局作用域是定义在JavaScript 中(非函数体内),可以在任何地方改变它的值,这是非常危险的。局部作用域是定义在函数体内的,它的作用域是该函数的范围。外界不能访问他,只允许函数内部访问。JavaScript的变量没有块级作用域。
var g = "G";
function F() {
alert(g); //显示G
if ( true ) {
var num = 10;
}
alert(num); //显示10
}
F();
alert(num + "1");//显示错误,num没有定义
我们再看一个例子
var p = "G";
function F2() {
alert(p);//undefined
var p = "L";
alert(p);//L
}
F2(); 为什么会这样呢?我们看一张图(画不好图-_-!)。这就它查找变量的方式。
词法作用域
JavaScript函数的作用域是通过词法来划分作用域。也就是说函数是定义在函数时的那个作用域里运行的。每定义一个函数,那么JavaScript解析器就保存了该函数的作用域链了。执行该函数时,它就跑到定义那函数的地方去运行,也可以理解成引用。我们先看一个例子。
function F4() {
var a = 10;
function F5() {
return a;
}
alert(F5());//10
}
F4(); 当运行F4()时,它跑到function F4的地方,然后一行一行执行下来,定义a = 10;定一个function F5;运行alert(F5()),它先在F5函数体内找a的值,找不到,再向上一层,在F4体内查找a,找到了,那么alert 10出来(如果没有找到,那么再向上,找到全局时,还没有找到,那么就是没有定义)。
垃圾回收机制与闭包
JavaScript采用自动回收,也就是当一个对象没有对其他引用的时候,那么销毁它。这很好理解,那闭包很难用专业词汇解释。其实也很容易理解。函数一 被 A 引用,函数一 体内的 函数二 又被 B 引用,那么当A引用完毕后,函数一也该销毁了,但不是这样的,它体内的函数二被B引用着,所以函数一没有被销毁,这些综合体我们叫他闭包。 (解释的不好,建议找些专业的解释理解一下。)这是一种很强大的技术,理解了作用域和垃圾回收机制,这也很好理解了。在浏览器里,所有用户定义的函数都是闭包,但像上述中的函数二被第三者引用,这种闭包才有意思。
一个闭包的例子
继续
Realazy翻译的一篇关于作用域的文章
February 6, 2008 - by Macji - 我的生活 - review
2007,你就这么走了,走了也好。
元旦在女友家里,无聊翻看了一本很老的算命书。这书很破很破,也就是说明它老的原因吧。算命书上说我2007大劫,08年是大幸(我双手握六枚一毛的硬币,心中默念我的事,双手抖几下,然后抛下空中,再根据正反数,翻看书上的解释。。。很愚蠢吧?反正是免费的)。不知道是不是真的,但我还是相信它。仔细一想,07我确实遇到过很多劫难,刚从学校出来,什么都不懂,吃苦啊。07都过去了,苦就不提了。
网上说:“射手座2008年的财宫强旺,不再会有太大的金钱压力。你会更专注很多心力在追逐个人成就上,其实射手座不在乎职位的高低,务实地从事自己的工作的话,反而能在金钱上有更好的收获。人缘不错的射手座能在这一年因自身的才华与表现获得上司的支持与赏识,也有奉派至外地或国外的工作机会,不要放弃这个能自我成长又可吸收不同文化的机会。”
看来我挺迷信的啊,居然连这些相信。哎,快和我老妈一样了。
还是先总结一下吧。
07年我做网站美工,只要是前端的,什么都做。没办法,那时只有我一个美工,咬着牙,想着红军两万五。后来发现有web前端开发工程师这个职位,就开始努力向这方向发展。结合在以前学校的经验,上网找资料,加QQ群,和别人交流,一起学习,发现这样也学的挺快的。但牛人从来不上QQ或者懒的和我这样的人交流。还是上论坛问别人来的实在。学是学会了点,但都不是很深入,想进大公司,必须得精。
在深入学习css,觉得不容易啊,后来在和别人交流的同时,过了这个弯,也觉得比较简单了。这里要感谢gemini,骑士,青蛙等和我一起交流的伙伴,我无聊的时候,喜欢和他们吵吵嘴。现在回忆起来,只觉得时间过的真快,自己学会了不少,还认识了这么多好兄弟,可惜在自己上班时,却没有人能和我交流。
我不怎么会javascript,属于入门的那种吧,确实javascript的很多方法都没用过。幸运的是我喜欢专研,想不通的问题,我会在睡觉前,闭上眼睛还在想。第二天去上班的路上还在想,但每次都很幸运,都会被我想通,也许这也是一种学习方法吧。我喜欢上51js,看某些牛人写的文章,虽然不怎么能看懂他们写的内容,但能理解他们牛逼的样子。也让我学会了,把自己写的东西拿出来分享,在分享的时,能交到很多好朋友。写博客也是为了拓展自己的人脉。写个javascript的小程序,也能让我高兴好久。08年要好好深入javascript,越往下学发现越有意思。
过完年就22岁了(我是87年12月的,在大学是读两年制的专科),再过几年就到结婚的年龄了。哎,时间过的太快了。好怀念在学校的日子,想着以前逃课去踢足球(我不会踢的),想和他们去吃火锅,去唱K,想我的那些好兄弟,好姐妹。想和同寝室的条帝国,和别的寝室打cs,跑卡丁车(每次赢了,都情不自禁的骄傲几下,跑去讥笑他们)。可惜这一切都不会再有了。
08年,希望能去ued部门,想和他们一起奋战。以前都是一个人奋战,太无趣了。可是大公司才有这部门吧。不过不要紧,我才22岁,我很年轻,我很激情。。。
07年对我来说不容易啊,最要感谢的还是我家小娟娟。肉麻的话就不多说了,还是说点实在的话好。这一年,不管多苦,你都一直陪伴在我身边。我们的这一年的经历,我想很多人一辈子也经历不到吧(起床,刷牙洗脸,吃早饭,上班,吃午饭,下班,吃晚饭,加班,回家,看电视,看电影,学习,打电动,挤火车,吃烧烤,吵架,打雪仗,堆雪人,睡觉。。。。。)。我们几乎24小时都在一起。我们坐末班车坐过头,然后徒步走几个小时才走回家。你喜欢逛大街,我陪你逛到脚酸;你喜欢吃小吃,我们跑去吃;你喜欢吃辣,我学会吃辣椒;你喜欢吃香菜,我学会吃香菜(刚开始吃觉得这味道像昆虫被踩死的气味);你喜欢吃火锅,我们去卖菜,在电饭煲里吃的痛快等等。太多太多,都讲不过来了。08年,你还会陪我一起走过,还有09年,10年,11年,12年,13年。。。xx年。