- 浏览: 391952 次
- 性别:
- 来自: 长沙
文章分类
最新评论
-
hylandtecliulei:
现在JSF在国外很火的,我们公司的开发平台就是基于JSF
JSF的各种框架实现(对目前JSF群雄一个了解)(转) -
bcabchappy:
在哪呢?压力挺大的,诶。
flex 三大数据传输格式 json,xml,object相互转换的api -
simple8888:
JSF现在还有吗?
JSF的各种框架实现(对目前JSF群雄一个了解)(转) -
游其是你:
请问channelset写在哪儿啊?最后写个小项目“hello ...
用as实现RemoteObject -
hans.org:
mark it
自定义组件中的元数据标签
当你完成了项目后,非常可能马上就忘记了你的项目布局结构。为了在多年后仍然能够理解自己的代码你必须保证良好的代码组织结构。良好的结构降低复杂性,易于管理和维护。然而,怎么样才使良好的结构呢?下面介绍一些技巧供使用。
很多开发者创造性的使用注释和文本格式提高css代码的可读性。这些方式结合css基本语法,更具有可读性的结构,并含有更多的隐含提示信息。
本文介绍了5个技巧提高代码可管理性和可维护性。你可以把它们用到css中,也可以用到其它任何样式语言或者编程语言中。
1. 分离你的样式
按照标准把代码分成多个文件模块进行管理。所谓“标准”应该是从名字你能够一眼就看出此文件中代码的功能和作用范围。另外工程很大导致模块文件代码也很大,那么你可以进行再细分,把公共代码分离出来作为主样式表进行重用,虽然可能导致没有必要的服务请求,但是我们获得重用的好处。
看下例:第一句注明是“核心样式”。接下来是版本信息,接下来是按功能分离出来的样式文件。
/*------------------------------------------------------------------
[核心样式]
Project: Smashing Magazine
Version: 1.1
Last change: 05/02/08 [fixed Float bug, vf]
Assigned to: Vitaly Friedman (vf), Sven Lennartz (sl)
Primary use: Magazine
-------------------------------------------------------------------*/
@import "reset.css";
@import "layout.css";
@import "colors.css";
@import "typography.css";
@import "flash.css";
/* @import "debugging.css"; */
2.定义页面结构的注释。
为了便于他人和团队的浏览,理解,我们可以使用一些关键字,一些符号,定义一个页面整体结构视图。看下面的例子:通过注释结构我们就能了解布局结构。
/*------------------------------------------------------------------
[布局设计]
* body
+ Header / #header
+ Content / #content
- Left column / #leftcolumn
- Right column / #rightcolumn
- Sidebar / #sidebar
- RSS / #rss
- Search / #search
- Boxes / .box
- Sideblog / #sideblog
+ Footer / #footer
Navigation #navbar
Advertisements .ads
Content header h2
——————————————————————-*/
…或者这样:
/*------------------------------------------------------------------
[此样式的描述]
1. Body
2. Header / #header
2.1. Navigation / #navbar
3. Content / #content
3.1. Left column / #leftcolumn
3.2. Right column / #rightcolumn
3.3. Sidebar / #sidebar
3.3.1. RSS / #rss
3.3.2. Search / #search
3.3.3. Boxes / .box
3.3.4. Sideblog / #sideblog
3.3.5. Advertisements / .ads
4. Footer / #footer
-------------------------------------------------------------------*/
3.定义颜色和类型
定义了不易发生变化的样式之后接下来的任务就是可变或可选部分。如颜色,我们可以为颜色定义自己的颜色词典,以便快速的选择,替换。
如下面按颜色风格定义颜色字典:
/*------------------------------------------------------------------
# [关于此颜色样式风格的描述]
# Dark grey (text): #333333
# Dark Blue (headings, links) #000066
# Mid Blue (header) #333399
# Light blue (top navigation) #CCCCFF
# Mid grey: #666666
# */
和上面例子稍有不同,我们可以按内容来定义颜色字典:
/*------------------------------------------------------------------
[关于此颜色样式风格的描述]
Background: #ffffff (white)
Content: #1e1e1e (light black)
Header h1: #9caa3b (green)
Header h2: #ee4117 (red)
Footer: #b5cede (dark black)
a (standard): #0040b6 (dark blue)
a (visited): #5999de (light blue)
a (active): #cc0000 (pink)
-------------------------------------------------------------------*/
类型可以使用同样的方法。如你要定义系统的字体使用。
/*------------------------------------------------------------------
[此类型的描述]
Body copy: 1.2em/1.6em Verdana, Helvetica, Arial, Geneva, sans-serif;
Headers: 2.7em/1.3em Helvetica, Arial, "Lucida Sans Unicode", Verdana, sans-serif;
Input, textarea: 1.1em Helvetica, Verdana, Geneva, Arial, sans-serif;
Sidebar heading: 1.5em Helvetica, Trebuchet MS, Arial, sans-serif;
Notes: decreasing heading by 0.4em with every subsequent heading level
-------------------------------------------------------------------*/
4. 组织css属性:按统一的组织方式写属性,易于团队之间相互交流。
按类型组织:
body,
h1, h2, h3,
p, ul, li,
form {
border: 0;
margin: 0;
padding: 0;
}
有些人按字母顺序组织:
body {
background: #fdfdfd;
color: #333;
font-size: 1em;
line-height: 1.4;
margin: 0;
padding: 0;
}
5.使用友好的缩进风格
下面的缩进能表达“结构关系”:
#main-column { display: inline; float: left; width: 30em; }
#main-column h1 { font-family: Georgia, "Times New Roman", Times, serif; margin-bottom: 20px; }
#main-column p { color: #333; }
下面的缩进加注释表达了“修改更新”的意思:
#sidebar ul li a {
display: block;
background-color: #ccc;
border-bottom: 1px solid #999; /* @new */
margin: 3px 0 3px 0;
padding: 3px; /* @new */
}
注意:过多的注释和空白会导致加载速度变慢,因此我们可以使用两个版本,一个是开发版本,一个是商业版本。商业版本使用工具进行压缩。另外我们可以根据这些注释更新需求文档。
很多开发者创造性的使用注释和文本格式提高css代码的可读性。这些方式结合css基本语法,更具有可读性的结构,并含有更多的隐含提示信息。
本文介绍了5个技巧提高代码可管理性和可维护性。你可以把它们用到css中,也可以用到其它任何样式语言或者编程语言中。
1. 分离你的样式
按照标准把代码分成多个文件模块进行管理。所谓“标准”应该是从名字你能够一眼就看出此文件中代码的功能和作用范围。另外工程很大导致模块文件代码也很大,那么你可以进行再细分,把公共代码分离出来作为主样式表进行重用,虽然可能导致没有必要的服务请求,但是我们获得重用的好处。
看下例:第一句注明是“核心样式”。接下来是版本信息,接下来是按功能分离出来的样式文件。
/*------------------------------------------------------------------
[核心样式]
Project: Smashing Magazine
Version: 1.1
Last change: 05/02/08 [fixed Float bug, vf]
Assigned to: Vitaly Friedman (vf), Sven Lennartz (sl)
Primary use: Magazine
-------------------------------------------------------------------*/
@import "reset.css";
@import "layout.css";
@import "colors.css";
@import "typography.css";
@import "flash.css";
/* @import "debugging.css"; */
2.定义页面结构的注释。
为了便于他人和团队的浏览,理解,我们可以使用一些关键字,一些符号,定义一个页面整体结构视图。看下面的例子:通过注释结构我们就能了解布局结构。
/*------------------------------------------------------------------
[布局设计]
* body
+ Header / #header
+ Content / #content
- Left column / #leftcolumn
- Right column / #rightcolumn
- Sidebar / #sidebar
- RSS / #rss
- Search / #search
- Boxes / .box
- Sideblog / #sideblog
+ Footer / #footer
Navigation #navbar
Advertisements .ads
Content header h2
——————————————————————-*/
…或者这样:
/*------------------------------------------------------------------
[此样式的描述]
1. Body
2. Header / #header
2.1. Navigation / #navbar
3. Content / #content
3.1. Left column / #leftcolumn
3.2. Right column / #rightcolumn
3.3. Sidebar / #sidebar
3.3.1. RSS / #rss
3.3.2. Search / #search
3.3.3. Boxes / .box
3.3.4. Sideblog / #sideblog
3.3.5. Advertisements / .ads
4. Footer / #footer
-------------------------------------------------------------------*/
3.定义颜色和类型
定义了不易发生变化的样式之后接下来的任务就是可变或可选部分。如颜色,我们可以为颜色定义自己的颜色词典,以便快速的选择,替换。
如下面按颜色风格定义颜色字典:
/*------------------------------------------------------------------
# [关于此颜色样式风格的描述]
# Dark grey (text): #333333
# Dark Blue (headings, links) #000066
# Mid Blue (header) #333399
# Light blue (top navigation) #CCCCFF
# Mid grey: #666666
# */
和上面例子稍有不同,我们可以按内容来定义颜色字典:
/*------------------------------------------------------------------
[关于此颜色样式风格的描述]
Background: #ffffff (white)
Content: #1e1e1e (light black)
Header h1: #9caa3b (green)
Header h2: #ee4117 (red)
Footer: #b5cede (dark black)
a (standard): #0040b6 (dark blue)
a (visited): #5999de (light blue)
a (active): #cc0000 (pink)
-------------------------------------------------------------------*/
类型可以使用同样的方法。如你要定义系统的字体使用。
/*------------------------------------------------------------------
[此类型的描述]
Body copy: 1.2em/1.6em Verdana, Helvetica, Arial, Geneva, sans-serif;
Headers: 2.7em/1.3em Helvetica, Arial, "Lucida Sans Unicode", Verdana, sans-serif;
Input, textarea: 1.1em Helvetica, Verdana, Geneva, Arial, sans-serif;
Sidebar heading: 1.5em Helvetica, Trebuchet MS, Arial, sans-serif;
Notes: decreasing heading by 0.4em with every subsequent heading level
-------------------------------------------------------------------*/
4. 组织css属性:按统一的组织方式写属性,易于团队之间相互交流。
按类型组织:
body,
h1, h2, h3,
p, ul, li,
form {
border: 0;
margin: 0;
padding: 0;
}
有些人按字母顺序组织:
body {
background: #fdfdfd;
color: #333;
font-size: 1em;
line-height: 1.4;
margin: 0;
padding: 0;
}
5.使用友好的缩进风格
下面的缩进能表达“结构关系”:
#main-column { display: inline; float: left; width: 30em; }
#main-column h1 { font-family: Georgia, "Times New Roman", Times, serif; margin-bottom: 20px; }
#main-column p { color: #333; }
下面的缩进加注释表达了“修改更新”的意思:
#sidebar ul li a {
display: block;
background-color: #ccc;
border-bottom: 1px solid #999; /* @new */
margin: 3px 0 3px 0;
padding: 3px; /* @new */
}
注意:过多的注释和空白会导致加载速度变慢,因此我们可以使用两个版本,一个是开发版本,一个是商业版本。商业版本使用工具进行压缩。另外我们可以根据这些注释更新需求文档。
发表评论
-
近日js使用
2009-09-18 11:39 9851、最强的js日期校验:校验了闰年闰月的日期、时、分、秒的大小 ... -
JavaScript函数this调用规则
2009-06-01 15:06 3531不是我翻译的,但是觉 ... -
spring中使用json问题
2009-04-14 16:40 53461)添加包: json解析用到的包:核心包json-lib- ... -
jquery插件:SimpleModal
2009-04-02 20:50 7081跨浏览器的对话框插件。插件结构比较清晰!操作很方便!1)使用方 ... -
js的对象特性
2009-03-10 18:05 1125Javascript中的对象是无处不在的,function,b ... -
js 的 delete
2009-03-10 15:39 3860虽然是一个小小的delete操作符,其行为却异常复杂。 ... -
js的闭包和return理解
2009-03-09 18:14 1284闭包的两个特点: 1、作为一个函数变量的一个引用 - 当函数 ... -
js的日期格式化
2009-03-04 16:44 1648function checkDate(txtObject ... -
jquery精华
2009-02-10 11:50 12051、关于页面元素的引用 ... -
SITEMESH-总结自俺们论坛
2008-11-27 10:23 15331、问题:被修饰页面的body区被“干掉”了。。。取而代之的是 ... -
offsetLeft,Left,clientLeft的区别
2008-09-16 14:50 3397js开发富客户端必须要 ... -
js小技巧
2008-09-02 10:21 15311)改变<input type="text ... -
attachEvent绑定函数添加参数
2008-08-28 11:01 1961满世界跑了一圈,最简单的 如下: <html> ... -
onload问题解决
2008-08-14 10:55 1233问题:默认onload会等待文件加载完毕才执行,如果你的页面有 ... -
解除js循环引用带来的内存泄漏危机
2008-08-05 11:58 2365原文:http://javascript.crockford. ... -
携带值小技巧,简化js2
2008-08-04 12:33 1140上次发了个小技巧解决数据分散的导致需要计算时获取数据很麻烦的问 ... -
JS中公共/私有变量和方法 (翻译总结)
2008-07-29 09:22 4460公共/私有变量和方法 通过一个简单的的例子,来展示如何使用Ja ... -
无污染的 JavaScript 对象设计
2008-07-17 09:05 1199论坛里 achun发的贴 : http://www.itey ... -
携带值小技巧,简化js
2008-07-11 10:42 1359问题:在页面上一个循环打印出来的表,点击某一行时取得本行某些列 ... -
js 操作XML,一次性解决(转贴自网络)
2008-06-16 11:43 2620精确掌握相关知识的学习网址 :http://www.w3sc ...
相关推荐
总结来说,Google在线翻译作为一个便捷的CSS命名工具,能够帮助开发者将中文概念转化为英文,从而创建更符合语义化和标准化的CSS代码。在团队开发项目中,尤其是使用CSS5标准和命名约定时,这个工具能够提高代码的...
正确的命名不仅能够提高代码的可读性和可维护性,还能帮助开发者更快地理解样式结构,减少后期调试的时间。本文将详细介绍几种常见的CSS命名策略及其应用场景。 #### 一、CSS命名规则的重要性 1. **提高代码可读性...
- **语义化标签**:HTML5引入了许多新的语义化标签,如`<header>`、`<nav>`、`<section>`、`<article>`等,这些标签不仅增强了网页的可读性和结构化,也便于搜索引擎理解和抓取信息,提高网站SEO效果。 - **多媒体...
总结而言,HTML负责内容结构,CSS负责视觉表现,JavaScript负责交互功能,三者相辅相成,共同构建出动态且美观的网页。这个压缩包中的资源,对希望提高网页开发技术的开发者来说,无疑是一份宝贵的学习材料。尽管是...
- 在毕业设计过程中,翻译外文资料不仅可以帮助学生理解和掌握最新的技术动态,还能提高学生的英语阅读和翻译能力。 - 选择合适的外文资料非常重要,应挑选那些具有权威性和实用性的书籍或文章,比如 Horstmann 的...
- JSP生命周期:包括翻译阶段、初始化阶段、服务阶段和销毁阶段。 - JSP与Servlet关系:JSP最终会被转换为Servlet,通过Servlet来处理请求和响应。 2. **JSP指令** - `page`指令:用于设置整个页面的属性,如...
EL是用于简化JSP页面中的表达式,而JSTL提供了一系列标准标签,如fmt(格式化),sql(数据库操作),c(条件和循环),fn(函数库)等,它们极大地提高了代码的可读性和可维护性。 8. **MVC模式与JSP** 在传统的...
1. Java:作为基础编程语言,Java提供了丰富的类库和API,支持面向对象编程,确保代码的可读性和可维护性。 2. Spring Framework:提供依赖注入(DI)和面向切面编程(AOP),简化了应用程序的开发和管理。 3. ...
在本项目中,ASP.NET作为后端开发的主要工具,其强大的MVC(Model-View-Controller)模式被用来实现清晰的代码结构,提高代码的可读性和可维护性。MVC模式将业务逻辑、数据模型和用户界面分离,使得开发者可以独立地...
JSTL是一套标准的标签库,用于处理常见的任务,如迭代、条件语句、XML处理等,替代脚本语言,提高代码可读性。 7. **Servlet和JSP的关系** JSP最终会被转换成Servlet,Servlet负责处理请求和响应。JSP更适合视图...
总结起来,HTML 和 CSS 的基础注意点包括:合理减少无意义标签使用,遵循命名规范,掌握特殊字符的使用技巧,处理行内块元素间距问题,以及理解数值连写的规则。这些都是前端开发中的基本功,熟练掌握这些要点能提升...
JSP作为视图层,与Servlet(控制器)和JavaBean(模型)共同构建系统架构,实现了业务逻辑与表现层的分离,提高了代码的可读性和可维护性。 三、核心功能模块 1. 用户登录:系统首先需要验证用户身份,通常使用...
开发者可能采用了面向对象编程或函数式编程的思想,以提高代码的可读性和可维护性。 开题报告通常包含研究背景、意义、国内外研究现状、目标和任务、技术路线等内容,为整个项目的开展奠定了基础。在毕业生信息管理...
JSP的核心优势在于其与Java的紧密集成,可以充分利用Java的强大功能,同时保持Web页面的可读性和维护性。JSP页面通过JSP指令、脚本元素和表达式语言来实现动态内容的生成。 二、系统架构与设计 该系统的架构可能...
Model负责数据处理,View负责展示,Controller处理用户交互,这种分离提高了代码的可读性和可维护性。 2. **Servlet与JSP**:作为Java Web开发的一部分,Servlet用于处理HTTP请求,而JSP则用于生成动态网页内容。...
EL简化了在JSP中访问JavaBean属性的过程,而JSTL是一组标准标签库,提供了更高级的控制结构和功能,如循环、条件判断、XML处理等,提高了代码的可读性和可维护性。 ### 实战应用 通过JSP,开发者可以轻松创建动态...
- **定义局部变量**: 在模板内部定义局部变量,提高模板的可读性和可维护性。 #### 十一、属性优先级 - **属性覆盖**: 当多个 `th:` 属性冲突时,后出现的属性具有更高的优先级。 #### 十二、注释 - **标准 ...
- **使用JSTL标签库:** JSTL(JavaServer Pages Standard Tag Library)提供了丰富的标签库,可以替代很多Scriptlet代码,提高代码可读性。 - **优化页面结构:** 采用模块化设计,合理利用JSP的`include`指令和`...
这些标签使得JSP页面更加整洁,减少了嵌入的Java代码,提高了代码的可读性。 总结来说,JSP是一种强大而灵活的Web开发技术,它结合了HTML和Java的优势,使得开发者能快速创建动态、数据驱动的Web应用。通过与...