分类目录归档:前端开发规范和经验

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

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

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

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

  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开发规范

  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前端开发规范一例

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

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

(X)HTML Strict 下的嵌套规则

  下面是一份在 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, 前端开发, 前端开发规范和经验 | 标签为 , , , , , , , , , , , , , , | 留下评论

网页设计规范

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

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

浏览器如何渲染文本

浏览器是我们最常用的软件之一,文本又是网页中最主要的元素,在浏览器显示文本的过程中有许多有趣的细节,值得展开来讲讲,或许能减少一些误解。这是一个比较粗略的,概括性的介绍,尽可能不涉及过多的技术细节和具体实现,而立足于给 Web 开发者和设计师提供一些正确的概念。   下面的介绍主要根据我对 WebKit 和 Gecko (Firefox) 的印象来谈,其他的浏览器也大致相同,如有阙漏之处欢迎指出。 当浏览器收到来自 Web 服务器的网页数据之后,第一步是要把它解码成可以阅读的文本,因为历史原因,不同区域和语言的网页可能会使用不同的编码方式,而浏览器判断编码主要是依据以下方法:   1.Web 服务器返回的 HTTP 头中的 Content-Type: text/html; charset= 信息,这一般有最高的优先级; 2.网页本身 meta header 中的 Content-Type 信息的 charset 部分,对于 HTTP 头未指定编码或者本地文件,一般是这么判断; 3.假如前两条都没有找到,浏览器菜......查看更多>>

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

关于提高浏览器渲染页面速度的建议

怎样尽可能的缩短浏览器上页面渲染的时间,文章从以下几方面着手: 写出高效的css代码 避免使用css表达式 把css文件放在页面顶部 指定页面图片的尺寸 页面头部标明文档编码 一,写出高效的css代码 首先弄清浏览器解析html代码的过程:构建一个dom树,页面要显示的各元素都会创建到这个dom树当中。每当一个新元素加入到这个dom树当中,浏览器便会通过css引擎查遍css样式表,找到符合该元素的样式规则应用到这个元素上。css引擎查找样式表,对每条规则都按从右到左的顺序去匹配。 了解过程后,我们可以看出可以从两方面优化我们的css代码:1,定义的css样式规则条数越少越好,所以赶紧删除css文件中不必要的样式定义;2,优化每条规则的选择符书写方式,尽量让css引擎一看就知道这个规则是否需要应用到当前这个元素上,让引擎少走不必要的弯路。 如以下几种效率不高的css书写方式: a, 用通配符作为关键选择符(关键选择符指的是每条规则最右侧的选择符) ......查看更多>>

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

雅虎网站页面性能优化的34条黄金守则

雅虎团队经验:网站页面性能优化的34条黄金守则 1、尽量减少HTTP请求次数 终端用户响应的时间中,有80%用于下载各项内容。这部分时间包括下载页面中的图像、样式表、脚本、Flash等。通过减少页面中的元素可以减少HTTP请求的次数。这是提高网页速度的关键步骤。 减少页面组件的方法其实就是简化页面设计。那么有没有一种方法既能保持页面内容的丰富性又能达到加快响应时间的目的呢?这里有几条减少HTTP请求次数同时又可能保持页面内容丰富的技术。 合并文件是通过把所有的脚本放到一个文件中来减少HTTP请求的方法,如可以简单地把所有的CSS文件都放入一个样式表中。当脚本或者样式表在不同页面中使用时需要做不同的修改,这可能会相对麻烦点,但即便如此也要把这个方法作为改善页面性能的重要一步。 CSS Sprites是减少图像请求的有效方法。把所有的背景图像都放到一个图片文件中,然后通过CSS的background-image和background-position属性来显示图片的不同部分......查看更多>>

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

Web开发ABC

  Web开发经常会是非常复杂的事情。今天,针对初学者,我希望向你介绍26个概念和技术,每个都对应英文字母的一个字母。听起来很奇怪吧,那让我们开始吧。 A——AJAX AJAX是异步JavaScript和XML的意思,它是近些年你使用的所有流畅的Web应用背后的主要驱动力。 AJAX作为一项技术来说,使用已经很普遍了。Gmail,Flickr等,你甚至还可以在WordPress的管理员面板里找到它。那么它到底是什么以及它如何实现的呢? 说到底它的核心是XMLHttpRequest,这允许在页面完全渲染之后发送请求并接收返回,而无需关联页面其它部分。这意味着web程序不需要为每一个操作而刷新整个页面。这提供了非常流畅,动感的类似桌面应用的用户体验。 相关阅读 How to Make AJAX Requests With Raw Javascript 24 Best Practices for AJAX Implementations Submit A Form Without Page Refresh using jQuery   B——Browser(浏览器) 浏览器是能......查看更多>>

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

HTML解析原理

标准的web前端工程师需要知道 ◎浏览器(或者相应播放器)的渲染/重绘原理 这我得加把劲了。我还真的说的不是很清楚,我就G下,结果不是很多,找到了有一个,就记下来了。。。 以下部分来自handawei-javaeye的blog: Web页面运行在各种各样的浏览器当中,浏览器载入、渲染页面的速度直接影响着用户体验 简单地说,页面渲染就是浏览器将html代码根据CSS定义的规则显示在浏览器窗口中的这个过程。先来大致了解一下浏览器都是怎么干活的: 1. 用户输入网址(假设是个html页面,并且是第一次访问),浏览器向服务器发出请求,服务器返回html文件; 2. 浏览器开始载入html代码,发现<head>标签内有一个<link>标签引用外部CSS文件; 3. 浏览器又发出CSS文件的请求,服务器返回这个CSS文件; 4. 浏览器继续载入html中<body>部分的代码,并且CSS文件已经拿到手了,可以开始渲染页面了; 5. 浏览器在代码中发现一个<img>标签引用了一......查看更多>>

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