前端观察

页面模块化实现的条件和基本实现思路

页面模块化实现的很大的受制于页面的结构和表现;一个统一的页面结构和表现能很好的实现页面的模块话。

比如一个“网友评论”模块这个会在很多地方使用到,比如日志,照片,等等,如果这个“网友评论”模块结果和表现是统一的那么我们就不用重复劳动去重新设计制作页面甚至是行为等等,包括后台的数据存贮。

页面模块化(设想)》上面总结了页面模块化的优点,《前端模块化设计思路》也提到要做到模块化的前提条件:

为了做到这一点,我们需要有一个设计规则,所有的模块都在这个规则下进 行设计。良好的设计规则,会把耦合密集的设计参数进行归类作为一个模块,并以此划分工作任务。而模块之间彼此通过一个固定的接口(所谓的可见参数)进行交互,除此之外的内部实现(所谓的隐参数)则由模块的开发团队进行自由发挥。

我们应给怎么样建立一套设计规则呢?

首先我们要从页面的表现开始,视觉上我们要采用统一的视觉设计规则,比如:

  1. 应用网页栅格化来确定网页布局;
  2. 页面标题栏,字体大小,文本间距统一;
  3. 表单类的表现统一,比如按钮,文本框等;
  4. 图片规格统一;
  5. 行为类的弹窗,浮层等表现统一;
  6. 等等…

其次为模块编写统一的html结构,

  1. 要合理使用语言化的标签;
  2. 可以保存成代码片段或者单独的html文件等,
  3. 如果需要可以加上适当的注释;
  4. 考虑扩张性和维护性;

Read More »

页面模块化(设想)

这段时间做一个项目,其实项目本身很简单,页面表现和结构甚至是交互都是现有的,就是将现有的多个项目页面一些功能做一下重新的拼装组合。

看上去很简单,其实做起来非常痛苦。因为由于历史和前期项目开发的原因其实做这些拼装是很痛苦的事情。现在碰到的一个问题,要开一个C项目,使用A项目的头部、底部、布局,使用B项目的模块功能,同时A项目和B项目本身存在这千丝万缕的联系,很多功能A项目和B项目功能是重叠的,表现上又是很统一、但是又有细微的区别。A项目和B项目都相对独立,css样式也是很独立的,根据每个项目都有一套独立的样式。结果导致在项目维护中A项目改了,B项目也要改,得改2个地方不说。现在有出来一个C项目,又是A项目和B项目合体……,开发时候一些公用样式受到A项目和B项目影响,无法公用不说,维护成本可想而知。这个几乎让我崩溃。

如何既能提高开发效率又能降低维护成本是最为一个前端开发工程师必须考虑的问题。正好前几天程序员和我讨论模板的问题,因为他们在开发C项目的时候也碰到了很多和我类似的问题。模板就是将页面的某部分分装成独立的版块,便于各个使用他的地方调用。那么我们的html和css可不可以按照功能模块或者展现模块来划分呢?答案显然是肯定的,至少在我们公司、我们网站由于页面表现和功能模块比较统一,这无疑给页面模块化提供了很好的萌芽环境。 Read More »

写在js森林一周年之际

时间过的真快啊!一下子js森林群一周年了!去年的7月1日我,丸子,肉饼,大白等等一堆网友建立了这个群,当时的想法很简单,大家都是为了学好js。js森林有严格的群规,就是上班时间不准灌水,前期js森林甚至不能讨论css问题,进群需要考试,肯定要js基础。那时js森林有独立的群博客,有js论坛(博客和论坛由于某个原因现在都不复存在了)……
通过网上认识的很多朋友也给面子,很多都被我邀请进了js森林,我记得一开始这个群只有我和demo两个人,这个群号也只在一些关于js的文章上做一些推广,过了半年的时间也就30-40个人,后来建了js森林后才一下子到了200号人,人多了群就难管理,后来就严格限制进群条件。一般只是通过群员推荐,或者直接找我。
今天一下子T了42个人,因为丸子说7月1日一周年之际T半年不说话的,也幸亏丸子提醒,不然我还真忘了这个日志。
在这年里我在群里学了很多,认识很多朋友,虽然有一段时间我一直在学jq,但是前端时间开始我又重新回来学了原生的js,虽然很难,但是我从原生的js到jq再回到原生的js我学会很多东西,很多东西恍然大悟。

在js森林我感谢丸子,其实这个群是丸子的,因为丸子付出的最多;感谢肉饼,大白,当时没有他们我也不会建这个群;感谢六哥,六哥回答问题总是立竿见影,孜孜不倦;感谢demo,其实demo才是真正的元老;感谢肉块,肉块专门给js森林开了一堂js森林的语音交流会,感谢rekey,感谢小志,感谢遥遥,感谢zhenn,感谢甘,感谢芋头,感谢CE,感谢子房,感谢xhlv,感谢斩梦人…感谢所有js森林的所有成员!

不知道写了些什么,反正感谢js森林的所有成员,呵呵!

前端工程师的尴尬处境

今天在《css那些事儿》群(82991297)里看到henry发的一段话,觉得非常有意思,所以转载过来跟大家分享一下:
A: 某小白MM,B: 后端程序员,C: 美工,D: 前端
A: 哎~D,你是做什么的呀?
D: 前端啊。
A: 前端是干什么的?
D: 前端… 前端就是做网站的。
A: 唉?我看网站不是 B 写出来的嘛,也没见你整天写代码呀?
D: 额… 我是做网站外观…
A: 唉?外观不是 C 画出来的吗?也没见你整天开 PS 呀?
D: (汗)我的工作就是把他俩的活儿结合起来…
A: [斜视] 唔,就这么轻松的工作嘛,什么都不用你干。
D: [内牛成河]

【IE6的疯狂之十】父级使用padding后子元素绝对定位的BUG(2010年3月30日更新)

在前端开发中,经常会用到css的position:absolute来使层浮动,前通过left,top,right等属性来对层进行定位,但ie6对left,top,right等属性的解释和ie7,ie8及firefox、chrome等不一致。

在父层使用position:relative;和padding(当然0值除外)后,ie6中层的定位起始坐标是从padding后的位置算起,而其他则从层的真实位置算起,而非被padding改变后的那个位置。这点造成使用position:absolute进行层定位时ie6与其他浏览器的表现不一样。

未标题-1

目前解决办法,使用csshack,_left针对ie6进行重设。

另:IE6 BUG大全: http://www.css88.com/archives/579

===========================以下内容2010年3月30日更新=============================

今天收到robertsky123的留言(见留言区):

一些样例请测试好再传,会误导读者的,还有ie与其他主流浏览器的盒模式是一样的,不是ie定了width在加padding就不会改变宽度也是改变的, 网上有些东西很容易误导读者,请博主对读者负责啊!

非常感谢robertsky123的留言和建议!由于robertsky123当头棒喝使我重新对该问题进行了测试。

确实该问题还有其他的解决:不过这些方案很和实际项目有关,比如这个父级容器是否顶宽定高等其他原因。

首先看问题的产生,HTML和CSS如下:


<div style="position:relative; padding:20px; border:2px solid #F00;">

<div style="position:absolute; top:0; left:0; border:1px solid #690;">test box</div>

</div>

显示如图:

Read More »

删除了一批友情链接,如有误删请联系我

删除了一批友情链接,主要是由于这些站点删除了我的链接或者站点打不开了,或者网站换了性质!

您可以通过该页查找链接是否被我删除:http://www.css88.com/links

如有误删请联系我!feiwen8772[a]gmail.com或者给我留言,我会尽快恢复链接。

重申一下本博客友情链接要求:

1.前端开发相关的网站和博客;

2.必须放在首页上;

3.如果删除本站链接请告知本人(谢谢配合);

前端开发博客搜索

这是一个搜索前端博客的插件,目前全手工收录了150个国内外的前端 开发者博客及相关站点!是方便查找前端资料的好帮手!你可以看到:当你访问这个页面时,你的IE7+或者Firefox2+右 上角的搜索工具栏中多了个前端博客搜索,而在Google chrome4.0+你 可以以chrome自己的方式方便的使用它.是的,通过它你可以直接在浏览器的搜索栏里搜索我已收录的前端博客的文章资料,一切就是这么简单!

地址:http://s.princeb4d.com/

被恶搞的帅哥时钟

周一早会被恶搞了,模仿美女时钟照片中的姿势。

2009年我要感谢的人和群

2009年我终于结婚了,感谢老婆,父母,朋友!

2009年我在搜道一年,感谢我那几个辛勤付出的同事,还有关心我的领导!

2009年我要感谢css森林,感谢鬼哥,龙哥!感谢css森林的所有人!

2009年我要感谢JS森林,感谢js森林的管理员,感谢丸子,感谢肉饼,感谢大白,感谢demo,感谢六哥,感谢肉块,感谢小志,感谢所有的js森林成员(太多了感谢js森林的所有成员)!

2009年我要感谢内参,感谢内参的所有成员!感谢国王,感谢主席!感谢内参!

2009年感谢关注css88.com的朋友,我曾经迷茫多,曾经迷失过!谢谢你们的支持,只要我觉得有值得分享的东西我一定跟大家分享交流。

2009年感谢所有认识我关心我的人!谢谢!

美女桌面报时

我们公司的美女时钟(http://www.sodao.com/)出桌面报时版了,效果不错。

如果要查看美女的基本信息可以点击大图右下角的小屋子图标,

工具是基于windows侧边栏工具(Windows Sidebar)的,vista,win7系统可以直接安装,XP和win2003等系统需要首先安装windows侧边栏工具(Windows Sidebar),再安装桌面美女报时。

桌面美女报时下载地址:http://www.css88.com/wp-content/uploads/2009/12/XBeauty Clock v1.0.1.2.rar

做技术的朋友如果想了解该技术可以查看:http://www.oovista.com/vista/Gadgetkaifa/index.html或者谷歌百度一下:Gadget开发