标签归档：前端开发规范

谈CSS模块化【封装-继承-多态】

发表于 2011/05/09 由 前端开发-武方博  1,926 views

第一次听到“CSS模块化”这个词是在WebReBuild的第四届“重构人生”年会上，当时我还想，“哈，CSS也有模块化，我没听错吧？”事实上，我没听错，你也没看错，早就有CSS模块化这个概念了。之所以我把这个拿出来讨论，是因为一个算是比较大的项目出现了一些重构上的危机，因此引发了我们对页面重构中的CSS进行模块化的思考。 首先，什么是CSS模块化？在谈CSS模块化之前我们先看一下百度百科对模块化的解释： “模块化是指解决一个复杂问题时自顶向下逐层把系统划分成若干模块的过程。每个模块完成一个特定的子功能，所有的模块按某种方法组装起来，成为一个整体，完成整个系统所要求的功能。在系统的结构中，模块是可组合、分解和更换的单元。” 我对上面一段话的理解是，模块化就像我们玩乐高积木一样，一个积木就是一个单元，可以通过组合不同的积木来搭建一个玩具模型。对于一个玩具模型，也 可以更换部分积木......查看更多>>

发表在 css, 前端开发规范和经验 | 标签为 , , , , , , , , , , , , , , , | 留下评论

豆瓣网前端开发规范之-javascript开发规范

发表于 2011/04/26 由 前端开发-武方博  1,966 views

  1. Javascript代码应符合Douban-JSLint检验标准   1-1. 语句必须都有分号结尾，除了for, function, if, switch, try, while   1-2. 只有长语句可以考虑断行，如：                                   TEMPL_SONGLIST.replace('{TABLE}', da['results'])                                                .replace('{PREV_NUM}', prev)                                                .replace('{NEXT_NUM}', next)          ......查看更多>>

发表在 前端开发, 前端开发规范和经验 | 标签为 , , , , , , , , , , , , , , , , , | 2 条评论

豆瓣网前端开发规范之-css开发规范

发表于 2011/04/26 由 前端开发-武方博  1,642 views

  1. CSS浏览器支持标准   WinXP Win7 OS X IE9 C C   IE8 A A   IE7 A A   IE6 A A   Chrome7 C C C Chrome6 A A A Chrome3 B B B Firefox4 C C C Firefox3.6 A A A Firefox3.5 C C   Firefox3 C C   Safari B B B Opera C C C （注：根据2010年11月10日数据整理） A级－交互和视觉完全符全设计的要求 B级－视觉上允许有所差异，不破坏页面整体效果 C级－可忽视视觉上的问题，但不防碍使用 2. 尽可能的通过继承和层叠重用已有样式 3. 根据新建样式的适用范围分为三级：全站级、产品级、页面级 3-1. 目前全站级的CSS文件仅有core.css和douban.css(向全站级CSS文件中添加规则参见4和5)。 3-2. 产品级CSS是指作用于某一垂直产品（如音乐、读书、电台等），文件放在css/下相应目录下。 页面级指仅在一个或少量几个页面中用到。如果仅在一个页面中用到的采用内联方式嵌入于页面hea......查看更多>>

发表在 前端开发, 前端开发规范和经验 | 标签为 , , , , , , , , , , , , , , , , , , , , , , , | 留下评论

Web前端开发规范一例

发表于 2011/04/26 由 前端开发-武方博  1,836 views

  规范目的 为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必 须按本文档规范进行前台页面开发. 本文档如有不对或者不合适的地方请及时提出, 经讨论决定后方可更改. 基本准则 符合web标准, 语义化html, 结构表现行为分离, 兼容性优良. 页面性能方面, 代码要求简洁明了有序, 尽可能的减小服务器负载, 保证最快的 解析速度. 文件规范 1. html, css, js, images文件均归档至<系统开发规范>约定的目录中; 2. html文件命名: 英文命名, 后缀.htm. 同时将对应界面稿放于同目录中, 若界面稿命名为中文, 请重命名与html文件同名, 以方便后端添加 功能时查找对应页面; 3. css文件命名: 英文命名, 后缀.css. 共用bas......查看更多>>

发表在 前端开发, 前端开发规范和经验 | 标签为 , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , | 一条评论

(X)HTML Strict 下的嵌套规则

发表于 2011/04/25 由 前端开发-武方博  691 views

  下面是一份在 HTML 4 Strict 和 XHTML 1.0 Strict 下必须遵守的标签嵌套规则，比如你不能在 <a> 里面再嵌入一个 <a> 这样的约定。 说明： 为了方便读者阅读，本文中的标签使用了大写（根据 XHTML 的规则，元素名必须小写，比如 <html> 而不应是 <HTML>） 小写的单词表明一组或一系列 HTML 标签 每一项条目（标签）后都跟随一组标签列表，如果没有这个列表，那么表明该条目（标签）内部不允许包含任何标签。这意味着该条目内部只能包含纯文本内容（#PCDATA，见下文）。如果注明 (empty)，这意味着该条目内部不允许包含任何形式的内容。对于 flow，inline，block，OBJECT 和 BODY，其内部允许包含的内容在文中会单独给出。 #PCDATA 的意思是“parsed character data”，即纯文本内容（不包括任何 HTML 标签，但是转义内容可以存在，比如 &auml;和 &#228......查看更多>>

发表在 xhtml, 前端开发, 前端开发规范和经验 | 标签为 , , , , , , , , , , , , , , | 留下评论

网页设计规范

发表于 2011/04/21 由 前端开发-武方博  1,071 views

  一、为什么要写设计规范？设计规范是为谁服务的？ 谈这个话题之前，我们先了解一下什么是设计规范？设计规范是指对设计的具体技术要求,是设计工作的规则. 一般包括总体目标的技术描述、功能的技术描述、技术指标的技术描述,以及限制条件的技术描述等． 那我们为什么要用设计规范？第一，可以让我们清楚项目的规则，以减少犯错误的机率；第二，加强团队之间的合作，责任明确，提高工作效率．第三，锻炼我们整体全面的思维能力．  规范最终是为项目服务的．我们所做的一切都是为了优化项目，提高我们的工作效率．但是，设计规范也是一种设计团队文化．最终受益的不止是项目，还有我们自己．当我们形成这种文化，我们会配合的更默契；我们不需要在工程师加班的时候，一定留守在那里陪着；我们不需要在调别人设计的源文件时，一遍一遍的询问．当你不再因为别人的事情而加班的时候，心情是否好一些呢？ 设计规范渗透在整个软件工程里．不同的工程模型......查看更多>>

发表在 前端开发规范和经验 | 标签为 , , , , , , , , , , , , , , , , | 留下评论