系统平台前端设计编码规范解析.docx
- 文档编号：8814012
- 上传时间：2023-05-15
- 格式：DOCX
- 页数：47
- 大小：341.23KB
系统平台前端设计编码规范解析.docx
《系统平台前端设计编码规范解析.docx》由会员分享，可在线阅读，更多相关《系统平台前端设计编码规范解析.docx（47页珍藏版）》请在冰点文库上搜索。
系统平台前端设计编码规范解析
系统平台前端设计编码规范
HTML,CSS,JavaScript
对系统平台中涉及到前端设计及编码部分的约定和建议
weiran
2010-2-5
【内部资料注意保密】
版本：
v1.0
武汉市精建工程科技有限公司
信息部
二〇一〇年二月
系统平台前端设计编码规范
1.概述
1.1.目的
为了使前端设计及编码标准化和模块化，从而提高工作效率和资源利用率，增加代码的可阅读性、重用性和继承性而编写。
1.2.范围
适用于本部门所有研发项目的前台设计规范和指导，重点倾向于标准和表现。
1.3.适用角色
页面前台工程师/网页设计师
1.4.强制性
前台工程师在前台界面设计中推荐按照此规范实施。
前台涉及技术主要分为html、CSS和JavaScript。
1.5.文档样式说明
斜体+粗体字：
表示需要重点关注的内容。
必须：
表示在设计编码时一定要进行的事项。
禁止：
表示在设计编码时一定不能进行的事项。
建议：
表示在设计编码时可以进行的事项，但根据实际情况可以进行调整。
开发人员：
默认为jsp开发人员，非专注前端的前端开发人员。
2.公司系统平台前端常用规范
2.1.结构
作为内部管理的BS系统，常见浏览界面如下：
作为jsp开发人员，仅需关心右侧红框中的界面内容，以上界面为标准浏览页面，主要分为：
●题头区域；
即上图
部分，该部分为装饰器自动装饰，无需开发人员关注。
●搜索区域；
⏹即上图
部分；
⏹需标识为【查询条件】；
⏹查询条件及输入框需保证在一行，否则需另起一行；
为保证以上效果在不同分辨率下都能正常显示，需使用span标签包裹查询语句，代码如下：
注：
以上代码仅展示span标签包裹代码，确保其不会换行的css代码如下，且应写入公共css文件中，与开发人员无关：
span{display:
inline-block}
●操作按钮区域；
按钮可能涉及到大量js代码，可抽为一个jsp页面，再include。
<%@includefile="btnoper.jsp"%>
●分页区域；
ex控件自带
●内容区域（以table为主）。
⏹文本默认靠左，为统一，可设置td的class为text；
⏹数字、日期靠右，可设置td的class为num和date；
⏹金额格式化，逢3位逗号，建议默认保留两位小数，，可设置td的class为sum。
常见编辑页面如下：
●可根据编辑内容情况，将其分解，例如：
基本信息和施工计量信息，以便用户方便的填写。
●对于必填项，必须使用红色星号标识。
●对于自动生成或单位，需进行文本框后标识，例如，
●增加页面，下拉框默认值为—请选择—。
●readonly全部用css设置无边框。
●文本框长度设置默认2个。
3.JavaScript设计编码规范
3.1.JavaScript的实现组成
●ECMAScript（核心）
描述了该语言的语法和基本对象。
●DOM（文档对象模型）
描述了处理网页内容的方法和接口，比如大家常用到的getElementById，getElementsByTagName。
●BOM（浏览器对象模型）
BOM描述了与浏览器进行交互的方法和接口，比如常用的document，frames，history。
3.2.JavaScript必须遵循的规则
JavaScript编码注意
●变量、函数名、运算符以及其他一切东西都是区分大小写的。
比如：
变量test与变量TEST是不同的。
●变量是弱类型的，定义变量时只用var运算符，可以将它初始化为任意值。
●每行结尾的分行可有可无，但良好的习惯是加上分号。
●变量名定义：
第一个字符必须是字母,下划线（_）或者美元符号（$），余下的字符可以是下划线，美元符号或任何字母或数字字符。
JavaScript兼容性
通常所说的兼容性，就是所编写的JavaScript代码必须在IE6+，Firefox等主流浏览器上能正常运行。
●为保证其兼容性，尽可能的使用JavaScript类库——jQuery，为保证其稳定性，应使用jQuery1.2.6版本；
●在jQuery无法实现的情况下，使用JavaScript原生代码；
●在特殊情况下，例如需要用到JavaScript插件，但需要其他类库支持时，再引入其他JavaScript类库。
JavaScript与HTML代码分离
即不要把任何JavaScript代码写入HTML页面中。
采取以下步骤：
●把通用的JavaScript函数定义在一个分离的.js文件中，让所需的HTML页面去连接它。
●必须删除所有的事件处理句柄（注：
即行内的那些诸如onclick）并归入同一.js文件中去。
●对页面中需要非通用JavaScript函数实现的，在页面中加入JavaScript代码。
例如，未分离代码：
分离后的代码：
$（function（）{
init（）;
}）;
JavaScript目录文件规则
●总目录名称为js，与app应用程序目录平级，js目录下放置系统通用js库类和插件；
●对于需要相应的图片和样式表支持的js插件，创建该插件名称的目录文件夹；
●images和css目录下创建不同js插件名称的目录，用来放置该插件对应的图片和样式表。
如下图所示：
3.3.常用jQuery函数
jQuery，顾名思义，也就是JavaScript和查询（Query），即是辅助JavaScript开发的库。
而JavaScript开发基本可以分为：
●查找DOM元素进行取值和赋值的操作、在特定DOM节点位置进行内容的取值和赋值操作（innerHTML）；
●针对元素进行事件监听；
●通过操作DOM节点结合改变元素的CSS样式，达到绚丽的动画效果；
●对DOM元素进行AJAX操作。
DOM相关
基本选择器
选择器
描述
返回
示例
#id
根据给定的ID匹配一个元素
单个元素
$（"#test"）选取id为test的元素.
.class
根据给定的类名匹配元素
集合元素
$（".test"）选取所有class为test的元素
element
根据给定的元素名匹配元素
集合元素
$（"p"）选取所有的
元素
*
匹配所有元素
集合元素
$（"*"）选取所有的元素
selector1，selector2，
……，selectorN
将每一个选择器匹配到的元素合并后一起返回
集合元素
$（"div,span,p.myClass"）选取所有
标签的一组元素
层次选择器
选择器
描述
返回
示例
$（"ancestordescendant"）
选取ancestor元素里的所有descendant（后代）元素
集合元素
$（"divspan"）选取
$（"parent>child"）
选取parent元素下的child（子）元素，跟
$（"ancestordescendant"）有区别，$（"ancestordescendant"）是选择的是后代元素
集合元素
$（"div>span"）选取
$（'prev+next'）
选取紧接在prev元素后的next元素
集合元素
$（'.one+div'）是选取class为one的下一个
$（'prev~siblings'）
选取prev元素之后的所有siblings元素
集合元素
$（'#two~div'）是选取id为two的元素后面的所有
基本过滤选择器
选择器
描述
返回
示例
:
first
选取第一个元素
单个元素
$（"div:
first"）选取所有
:
last
选取最后一个元素
单个元素
$（"div:
last"）选取所有
:
not（selector）
去除所有与给定选择器匹配的元素
集合元素
$（"input:
not（.myClass）"）选取class不是myClass的元素
:
even
选取索引是偶数的所有元素，索引从0开始
集合元素
$（"input:
even"）选取索引是偶数的元素
:
odd
选取索引是奇数的所有元素，索引从0开始
集合元素
$（"input:
odd"）选取索引是奇数的元素.
:
eq（index）
选取索引等于index的元素（index从0开始）
单个元素
$（"input:
eq
（1）"）选取索引等于1的元素
:
gt（index）
选取索引大于index的元素（index从0开始）
集合元素
$（"input:
gt
（1）"）选取索引大于1的元素（注：
大于1，而不包括1）
:
lt（index）
选取索引小于index的元素（index从0开始）
集合元素
$（"input:
lt
（1）"）选取索引小于1的元素（注：
小于1，而不包括1）
:
header
选取所有的标题元素：
比如h1，h2，h3等等
集合元素
$（":
header"）选取网页中所有的
，，……
……
:
animated
选取当前正在执行动画的所有元素
集合元素
$（"div:
animated"）选取正在执行动画的
属性过滤选择器
选择器
描述
返回
示例
[attribute]
选取拥有此属性的元素
集合元素
$（"div[id]"）选取拥有属性id的元素
[attribute=value]
选取属性的值为value的元素
集合元素
$（"div[title=test]"）选取属性title为“test”的
[attribute!
=value]
选取属性的值不等于value的元素
集合元素
$（"div[title!
=test]"）选取属性title不等于“test”的
没有属性title的
[attribute^=value]
选取属性的值以value开始的元素
集合元素
$（"div[title^=test]"）选取属性title以“test”开始的
[attribute$=value]
选取属性的值以value结束的元素
集合元素
$（"div[title$=test]"）选取属性title以“test”结束的
[attribute*=value]
选取属性的值含有value的元素
集合元素
$（"div[title*=test]"）选取属性title含有“test”的
[selector1][selector2]
[selectorN]
用属性选择器合并成一个复合属性选择器，满足多个条件。
每选择一次，缩小一次范围。
集合元素
$（"div[id][title$='test']"）选取拥有属性id，并且属性title以“test”结束的
表单对象属性过滤
选择器
描述
返回
示例
:
enabled
选取所有可用元素
集合元素
$（"#form1:
enabled"）;选取id为“form1”的表单内的所有可用元素
:
disabled
选取所有不可用元素
集合元素
$（"#form2:
disabled"）选取id为“form2”的表单内的所有不可用元素
:
checked
选取所有被选中的元素（单选框，复选框）
集合元素
$（"input:
checked"）;选取所有被选中的元素
:
selected
选取所有被选中的选项元素（下拉列表）
集合元素
$（"select:
selected"）;选取所有被选中的选项元素
在jQuery中，提供了attr（）方法来获取和设置元素属性，用removeAttr（）方法来删除元素属性。
1.获取属性和设置属性
例如要获取
元素的属性title，那么只需要给attr（）方法传递一个参数——你要获取的属性名称即可：
jQuery代码：
var$para=$（"p"）;//获取
节点
varp_txt=$para.attr（"title"）;//获取
元素节点属性title
如果想设置
元素的属性title的值，也可以使用同一个方法，不同的是，需要传递两个参数——属性名称和对应的值：
jQuery代码：
$（"p"）.attr（"title","yourtitle"）;//设置单个的属性值
如果需要一次性为同一个元素设置多个属性，可以使用下面的代码来实现：
$（"p"）.attr（{"title":
"yourtitle","name":
"test"}）;//将一个“名/值”形式的对象设置为匹配元素的属性。
注：
jQuery中的很多方法都是同一函数实现获取（getter）和设置（setter），比如上面的attr（）方法，它既能设置元素的属性的值，也能获取元素的属性的值。
另外，类似的方法还有html（）、text（）、height（）、width（）、val（）和css（）等方法。
2.删除属性
在某些情况下，需要删除文档中某个元素的特定属性，那么可以使用removeAttr（）方法来完成这一任务。
例子中，如果需要删除
元素的title属性，可以使用下面的代码实现：
$（"p"）.removeAttr（"title"）;//删除
元素的属性title
运行代码后，
元素的title属性被删除。
此时，
元素的HTML结构由：
变为：
你最喜欢的水果是?
1.html（）
此方法类似JavaScript中的innerHTML属性，它可以用来读取或设置某个元素里的HTML内容。
为了能更加清楚的展示例子的效果，我们把
元素的HTML代码改成：
然后用html（）方法对
元素进行操作：
varp_html=$（"p"）.html（）;//获取
元素的HTML代码
alert（p_html）;//打印出
元素的HTML代码
运行代码后，如图3-26所示：
图3-26获取
元素的HTML代码
如果需要设置某元素的HTML代码，那么也可以使用这个方法，不过需要为它传递一个参数。
比如，要设置
元素的HTML代码，可以使用如下代码来完成：
$（"p"）.html（"你最喜欢的水果是?
"）;//设置
元素的HTML代码
注：
html（）方法可以用于XHTML文档，但不能用于XML文档。
2.text（）
此方法类似JavaScript中的innerText属性，它可以用来读取或设置某个元素里的文本内容。
继续使用刚才的HTML代码：
用text（）方法对
元素进行操作：
varp_text=$（"p"）.text（）;//获取
元素的文本内容
alert（p_text）;//打印出
元素的文本内容
运行代码后，如图3-27所示：
图3-27获取
元素的文本内容
同html（）方法一样，如果需要为某元素设置文本内容，那么也要传递一个参数。
给
元素设置文本内容：
$（"p"）.text（"你最喜欢的水果是?
"）;//设置
元素的文本内容
注：
（1）JavaScript中的innerText属性并不能在Firefox下运行，而jQuery的text（）方法支持所有浏览器。
（2）text（）方法对HTML和XML文档都有效。
3.val（）
此方法类似JavaScript中的value属性，它可以用来设置和获取元素的值。
不管元素是文本框，下拉列表还是单选框，它都可以返回元素的值。
如果元素为多选，则返回一个包含所有选择的值的数组。
事件监听
执行时机
$（document）.ready（）和window.onload有类似的功能
在DOM加载完成时运行的代码，可以这样写：
jQuery代码:
$（document）.ready（function（）{
//在这里写你的代码...
}）;
在文档装载完成后，如果打算为元素绑定事件来完成某些事情，则可以使用bind（）方法来对匹配元素进行特定事件的绑定，bind（）方法的调用格式为：
bind（type[,data],fn）;
它有三个参数，第一个参数是事件类型，类型有：
“blur”、“focus”、“load”、“resize”、“scroll”、“unload”、“click”、“dblclick”、“mousedown”、“mouseup”、“mousemove”、“mouseover”、“mouseout”、“mouseenter”、“mouseleave”、“change”、“select”、“submit”、“keydown”、“keypress”、“keyup”和“error”等，当然也可以是自定义名称。
第二个参数是可选，作为event.data属性值传递给事件对象的额外数据对象。
第三个参数是绑定的处理函数。
注：
可以发现，jQuery中的事件绑定类型比普通的JavaScript事件绑定类型少了“on”。
例如：
鼠标单击事件jQuery对应的是“click”，而JavaScript中是onclick（）函数。
简写绑定事件
像click、mouseover和mouseout这类事件，在程序中经常会使用到，jQuery为此也提供了一套简写的方法。
简写方法和bind（）的使用类似，实现的效果也相同，唯一的区别是能够减少代码量。
例如，把上面的例子改成使用简写绑定事件的方式，代码如下：
$（function（）{
$（"#f_id"）.click（function（）{
$（this）.hide（）;
varte=$（“[name=’test’]:
check”）.val（）;
}）;
$（"#panelh5.head"）.mouseover（function（）{
$（this）.next（"div.content"）.show（）;
}）;
$（"#panelh5.head"）.mouseout（function（）{
$（this）.next（"div.content"）.hide（）;
}）
}）;
注：
使用简写事件要注意，jQuery只对常用的事件进行了简化，有些事件并未做处理。
读者会发现有的事件用bind（）可以绑定事件，而用简写方式就不可以。
例如mouseenter和mouseleave。
合成事件
jQuery有两个合成事件——hover（）和toggle（），它们类似前面说过的ready（）方法，都属于jQuery自定义的方法。
hover（）方法
hover（）方法的语法结构为：
hover（over,out）;
它用于模仿鼠标悬停事件，当鼠标移动到元素上时，会触发指定的第一个函数（over）；当鼠标移出这个元素时，会触发指定的第二个函数（out）。
将上面的例子改成用hover（）方法，jQuery代码为：
$（function（）{
$（"#panelh5.head"）.hover（function（）{
$（this）.next（"div.content"）.show（）;
},function（）{
$（this）.next（"div.content"）.hide（）;
}）
}）;
代码运行后的效果跟下面代码的效果是一样的。
当鼠标滑过新闻标题后，它下面的新闻内容将被显示；当鼠标滑出新闻标题后，相应的新闻内容则被隐藏。
$（function（）{
$（"#panelh5.head"）.mouseover（function（）{
$（this）.next（"div.content"）.show（）;
}）;
$（"#panelh5.head"）.mouseout（function（）{
$（this）.next（"div.content"）.hide（）;
}）
}）;
toggle（）方法
toggle（）方法的语法结构为：
toggle（fn1,fn2,......fnN）;
它用于模仿鼠标连续点击事件，当第一次点击元素，则触发指定的第一个函数（fn1），当再次点击同一元素时，则触发指定的第二个函数（fn2），如果有更多函数，则依次触发，直到最后一个。
随后的每次点击都重复对这几个函数的轮番调用。
$（新闻标题）.toggle（function（）{
//新闻内容显示
},function（）{
//新闻内容隐藏
}）;
动画
show（）和hide（）
show（）和hide（）是jQuery中最基本的动画。
在HTML文档里，为一个元素调用hide（）方法，会将该元素的display样式改为“none”。
比如，使用如下代码隐藏element元素：
$（“element”）.hide（）;//通过.hide（）,隐藏元素
这段代码的功能跟用css（）方法设置display属性效果相同：
element.css（“display”,”none”）;//通过.css（）,隐藏元素
当把元素隐藏后，可以使用show（）方法将元素的display样式设置为先前的显示状态（“block”或“inline”）：
jQuery代码：
$（“element”）.show（）;
fadeIn（）和fadeOut（）
同show（）方法不一样的是，fadeIn（）和fadeOut（）方法只改变元素的不透明度。
fadeOut（）方法会在指定的一段时间内降低元素的不透明度，直到元素完全消失（“display:
none”）。
fadeIn（）方法则相反。
在上个例子中，如果只想改变“新闻内容”的不透明度，而不想改变高度和宽度，就可以使用fad
- 配套讲稿：
如PPT文件的首页显示word图标，表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制：
部分文档作品中含有的国旗、国徽等图片，仅作为作品整体效果示例展示，禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词：
- 系统 平台 前端 设计 编码 规范 解析
冰点文库所有资源均是用户自行上传分享，仅供网友学习交流，未经上传用户书面授权，请勿作他用。
《财经法规》新大纲试题doc.docx
-
《古代汉语专题》练习题库参考答案.docx
-
《好玩的球》大班教案.docx
-
《道德宣传标语》.docx
-
《多媒体技术与应用》教学大纲完整版.docx
-
《红楼梦》名著导读.docx
-
《家政服务母婴生活护理服务质量规范》中华人民共和国国家标准之欧阳总创编.docx
-
《跨越百年的美丽》初中生读后感10篇.docx
-
《旅游学》课后习题答案.docx
-
《商务谈判第二版》章后习题答案.docx
-
《公共基础知识》考点巩固经济考点最新版46.docx
-
《好的故事》原文和教学设计.docx
-
《dsp原理及应用修订版》邹彦主编课后答案个人终极修订版.docx
-
《计算机图形学》答案第四章.docx
-
《《药品经营许可证》零售核准程序》.docx
-
#基于WEB的停车场管理系统设计和实现.docx
-
《包身工》知识讲解.docx
-
《匆匆》读书笔记15篇.docx
-
《歌剧魅影》的观后感范文600字.docx
-
《树》美术教案.docx
-
《微报告》.docx
-
《财经法规与会计职业道德》测试题及答案.docx
-
《古诗两首》教学设计之三《池上》《小儿垂钓》.docx
-
《快乐数学》大班教案.docx
-
《青蓝工程工作总结》.docx
-
《为了和平》第二集《殊死较量》观后感作文最新5篇.docx
-
《信息的传递》单元测试题一.docx
-
《用比例解决问题》教学设计.docx
-
《中国石拱桥》教学设计15篇.docx
-
4可行性分析与需求分析.docx
-
7系统集成技术要求.docx
-
12星座运势.docx
-
小学语文考试题卷型分析与答题策略文档格式.docx
-
小学语文五年级上册第二单元试题文档格式.docx
-
学习教育学原理名词解释Word文档格式.docx
-
校园食品安全演讲稿Word文档格式.docx
-
校园招聘策划方案Word文件下载.docx
-
写敬佩清洁工的作文Word格式文档下载.docx
-
学校交通安全责任书Word文件下载.docx
-
新《民事诉讼法》学习检测试题试题参考答案Word下载.docx
-
新版典范英语7全文118文档格式.docx
-
压疮的定义及护理Word文档下载推荐.docx
-
牙科诊所员工手册范例文档格式.docx
-
新编人教版七年级生物下册第五章检测卷及答案Word格式文档下载.docx
-
“美丽中国我的中国梦”演讲比赛活动实施方案Word文档格式.docx
-
研究生党建工作总结多篇范文与研究生党支部工作总结和计划汇编docWord格式文档下载.docx
-
演讲稿的提纲范本Word下载.docx
-
新建铁路测量规则试用Word格式文档下载.docx
-
《白雪公主》读书笔记范文Word文档下载推荐.docx
-
遥感影像分类enviWord下载.docx
-
《不输在家庭教育上》读书心得Word文档格式.docx
