作者：Rekey
发布时间：November 29, 2010
分类：Develop
每当我们说起前端开发，似乎总是离不开兼容，离不开IE6。
以至于大多数招聘需求，大多数简历上都有重要的一点，能制作出兼容IE和Firefox的页面。
当然，有的同学会加上符合W3C规范的，合起来是能制作出兼容IE和Firefox的符合W3C规范的页面。
推荐梁璟彪[TwinsenLiang]的一篇博客WEB2.0的单手定则
他讲到的单手定则，有一下的5点：
所以从梁璟彪[TwinsenLiang]的观点应该是，作为一个相对全面的前端开发工程师，至少上面五项都要熟悉以上，可是，如果大家都把焦点集中在关于兼容问题上，我认为其实是一种本末倒置。
所以我认为：好的前端开发应该是在熟悉单手定则五项以后，能有兼容这个加分题来加分。
IE6毕竟只是一道加分题，要做，可不是最要做的。最要做的应该是好好学习基础。好好的看手册，看思路，好好的发挥想象力。好好的做事情。
P.s : 参考这段奇异的代码，其实无IE6，有关的只是一种思路的延续。
作者：Rekey
发布时间：August 9, 2010
分类：Develop
就不多写了.总觉得这个东西很搓.
/*
loader,用来加载需要的资源
* */
var loader = {
"Version" : '20100809',
"path" : {
"js":"/js/",
"css":"/css/"
},
"stats" : {
"smoothbox":{
"js":"smoothbox",
"css":"smoothbox"
},
"form":{
"js":"form",
"css":""
},
"humanmessage":{
"js":"humanmessage",
"css":""
}
},
"fnList" : {},
"use" : function(name,callback){
if(this.getStats(name) == 'loaded'){
callback();
return;
}
this.fnList[name] = [];
this.fnList[name].push(callback);
this.load(name);
},
"setStats":function(name,type,stat){
this.stats[name][type] = stat;
},
"getStats":function(name){
if(this.stats[name]['js'] == 'loaded' && this.stats[name]['css'] == 'loaded'){
return 'loaded';
}
if(this.stats[name]['js'] == 'loading' || this.stats[name]['css'] == 'loading'){
return 'loading';
}
return this.stats[name]['js'] + ' + ' + this.stats[name]['css'];
},
"load":function(name){
if(this.getStats(name) == 'loading'){
return;
}
var _this = this;
var widget = this.stats[name];
var callback = function(){
if(_this.getStats(name) == 'loaded'){
var fnList = _this.fnList[name];
for(var i = 0 , len = fnList.length ; i < len ; i++ ){
fnList.shift()();
}
}
};
for(var i in widget){
if(widget[i] == ''){
this.setStats(name,i,'loaded');
}else{
var url = this.path[i]+widget[i]+'.'+i;
this.setStats(name,i,'loading');
_this['load'+i](url,(function(i){
return function(){
_this.setStats(name,i,'loaded');
callback();
}
})(i));
}
}
},
"loadjs":function(url,callback,context){
var oHead = context || document.getElementsByTagName('head')[0];
var oScript= document.createElement("script");
oScript.type = "text/javascript";
oScript.src = url+'?t='+this.Version+'.js';
oScript.onload = oScript.onreadystatechange = function(){
if (!this.readyState || this.readyState == "loaded" || this.readyState == "complete") {
callback();
}
};
oHead.appendChild(oScript);
},
"loadcss":function(url,callback){
var oHead = document.getElementsByTagName('head')[0];
var oCss = document.createElement('link');
oCss.href = url+'?t='+this.Version+'.css';
oCss.rel = 'stylesheet';
oCss.type = 'text/css';
if(!Browser.Engine.trident && callback){
callback();
}
if(Browser.Engine.trident && callback){
oCss.onreadystatechange = function(){
if (this.readyState == "loaded" || this.readyState == "complete") {
callback();
}
};
}
oHead.appendChild(oCss);
}
}
作者：Rekey
发布时间：August 5, 2010
分类：Develop
大家用稍微牛逼点浏览器去测试下这段代码吧.CSS还是很牛逼的.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
#a{width:100px;height:100px;border:1px solid #666;background:#ccc;}
#b{width:100px;height:100px;border:1px solid #333;background:#666;margin:10px}
#a:hover + #b{
background:#eee;
}
</style>
</head>
<body>
<div id="a">aaa</div>
<div id="b">bbbb</div>
</body>
</html>
作者：Rekey
发布时间：April 23, 2010
分类：Develop
CSS分为三个部分
- Reset
- Layout
- Mod
CSS Reset : 通用设置,不需要处理.
CSS Layout : 根据设计稿定义的布局定义好整体布局,不频繁改动.
CSS Mod : 各种模块集合.
Reset 和 Layout 作为核心CSS定义.直接影响全局页面展示.所以不轻易进行修改.
Mod 为各个模块的集合.每个模块的CSS只控制模块内部展示,不对外部影响.
CSS关键字列表
由于模块元素的具有很多共同的元素,但是可能表现方式是一致的.所以需要定义一些自身定义的CSS关键字列表.在定义css关键字的类的时候不造成全局影响.
如Author , Title , time 之类的
Mod 开发
每个Mod的相关代码只影响Mod自身,不影响外部展示,比如
html代码:
<div class="mod-a”>
<span class="img">
<img src="demo.jpg" alt="" />
</span>
<div class="info">
<a class="title" href="#">item title</a>
<a class="author" href="#">item author</a>
</div>
</div>
如果要控制title和author的展示, 使用
CSS代码:
.mod-a .title{
Color:#f60;
}
.mod-a .author{
Color:#06f;
}
以用来保持只对mod-a内元素的控制
文件结构
- Style.css
- Base.css
- Mod-a.css
- Mod-b.css
Style.css作为一个统一的页面css,加载在页面当中.
Base.css 包含CSS Reset 和 CSS Layout ,作为基本样式
Mod-a.css , Mod-b.css 负责每个mod的样式.由不同的团队成员维护
Style.css包含代码
CSS代码:
@import url("base.css");
@import url("Mod-a.css");
@import url("Mod-b.css");
作者：Rekey
发布时间：April 22, 2010
分类：Develop
标题跟twinsen的走有中国特色的网站重构道路一样,实际上,一切都是幻觉,我要说的是另一件事情
引用下twinsen的言论先:
<div class="f14 cf60 fright">xxx</div>
肯定是14px大小 颜色f60
然后不改动html的时候改变样式，呵呵，SB了
他的言论其实是个引子,因为现在很流行这种开发方式
css代码:
.f14{
font-size:14px;
}
.cf60{
color:#f60;
}
html代码:
<div class="f14 cf60">14px的文字大小,颜色值是#f60</div>
于是乎,写html代码就真的变成了累积木的举动了.
大家一起高呼,哇,原来重构就这么容易啊.
等到某天.需要把某个div的颜色换成#333,傻逼了.这怎么改.改html.
顺便让asp,php,jsp,asp.net等各种程序员改改程序页面.
我举这么个例子不是想说这种思想错误.
只是我想突然想到一个问题.能不能换一种思维来想这个事情,尽管可能现在做不到.
以下代码是从未在css里出现过的..
诡异的CSS代码:
.f14{
font-size:14px;
}
.cf60{
color:#f60;
}
.mod{
include: .f14 , .cf60;
}
并不诡异的html代码:
<div class="mod">14px的文字大小,颜色值是#f60</div>
这种方式我称之为零件式开发.
很简单,做一些.f14,.cf60之类的小零件,然后让模块(也就是.mod之类)在css中包含,然后体现在表现当中.
这样做,是否可以继续累积木,但是又不会累出问题呢?
再次引用twinsen的话:
时刻铭记你不是一个“页面仔”，是一个重构工程师；或者更进一层，你在影响人类信息化社会的发展。
- 1
- 2
- 3
- 4
- »
