前端技术规范总结.doc
《前端技术规范总结.doc》由会员分享,可在线阅读,更多相关《前端技术规范总结.doc(23页珍藏版)》请在淘文阁 - 分享文档赚钱的网站上搜索。
1、前端技术规范总结前端技术规范总结第一部分:目录、文件、CSS命名方式文件夹与文件名称、CSS样式命名、程序中的一些控件等等:名称全部用小写英文字母、数字、下划线的组合,其中不得包含汉字、空格和特殊字符;目录名应以英文、拼音为主(不到万不得已不要以拼音作为目录名称,经验证明,用拼音命名的目录往往连一个月后的自己都看不懂)。尽量用一些大家都能看懂的词汇。使得你自己和工作组的每一个成员能够方便的理解每一个文件的意义。而且当我们在文件夹中使用“按名称排例”的命令时,同一种大类的文件能够排列在一起,以便我们查找、修改、替换、计算负载量等等操作。例如:images(图形文件),flash(Flash文件)
2、等。命名方式:(性质_描素_位置_分类_数量)项相结合,采用简写、组合的方式形成通用规则。例如:news(性质)news_title(性质_描素)news_title_top(性质_描素_位置)news_title_top_01(性质_描素_位置_数量)news_title_top_a_01(性质_描素_位置_分类_数量)news_title_top_b_01(性质_描素_位置_分类_数量)常用目录名:data(数据库)images(图片)install(安装)templets(模版)include(包含)admin(后台)rss(定阅)media(媒体)config(配置)Script(脚本
3、)Language(语言)style(样式)等常用CSS名:页面外围控制整体布局宽度:wrapper头:header内容:content/container页面主体:main侧栏:sidebar尾:footer等第二部分:结构(XHTML)网站的前端结构与表现分离,达到95%以上。正式上线后的网页代码结构要清晰、明朗,容易阅读,布局与结构的镶套尽量控制在4-5层以内,严格遵循w3c的xhtml1.0Transtitonal。并遵循以下原则:1.DDT类型:XHTML1.0Transitional2.编码:utf-83.元标记必须项:该页面的关键词概况该页面的简要描述具体内容根据SEO要求设置4
4、.Html代码中的所有标签遵循XHTML1.0的书写规范,包括:5.6.7.8.9.10.11.12.13.a)标签全部使用小写;b)标签全部闭合;c)所有属性必须有值而且用双引号;d)把所有clear:-容器布局每一个属性结尾都必须写分号,其中有的值如果不需要,可以不写,大体上是这样的顺序,也符合思考的顺序。4.有几点注意事项:a)font-family:必须以sans-serif字体做结尾;b)减少样式数量,尽量重复使用;c)必须清除float;d)单位:使用像素(px);e)颜色值:使用#RRGGBB格式第四部分:UE指导原则1.网站LOGO的视觉统一,网站主体的视觉风格、文本颜色、链接
5、颜色、修饰图片风格以及按钮和表单控件的视觉进行统一;2.为每一个页面设定一个最合适的标题,使用户和搜索引擎一目了然知道页面的主题;3.为大部分页面加入元标记,即相关内容,描述页面属性;在最终页加入具有亲和力的版权说明、免责声明、交互设计说明文档的链接地址;4.页面中必须有回到“首页”的链接一般做法是将站点LOGO加上首页的链接,最好还是有回到首页的文字链接;5.如果网站栏目很多,要让用户知道所处的页面属于哪个栏目之下,以及很轻松的可以回到上一级栏目标签是一种不错的方法;6.现在位置。如果上一条原则处理的很好,“现在位置”可以去掉;7.搜索。合理的放置搜索表单,最好在首屏,并且确保搜索结果的准确
6、性;表单设计原则:1.面向菜鸟和专业用户,填写项尽量精简,做简单的填写说明,仅放置与填写表单相关的链接,避免用户通过其他链接转移视线到别的地方,从而放弃填写表单2.清晰的验证告诉用户为什么出现错误,并引导正确的填写;3.如果完成表单任务需要多个步骤,需要用图形或文字表明所需的步骤,以及当前正在进行的步骤使用户知道离成功还有多远;4.如果可能,尽量先放置input、textaera等需要键盘输入的项,再放置下拉、单选、复选等键盘操作的项,紧接着是“提交”按钮就是说,减少键盘操作被鼠标操作打断的次数;5.文本域允许更改内容的文本格式,比如加粗、字体大小、超链接、图片等等,而且,尽量让此内容与用户完
7、成发布以后的内容格式相同;6.提供将表单保存为草稿的功能;7.设计符合习惯的表单。个人总结Web开发的分散性和交互性,决定了Web开发必须遵从一定的开发规范和技术约定,只有每个开发人员都按照一个共同的规范去设计、沟通、开发、测试、部署,才能保证整个开发团队协调一致的工作,从而提高开发工作效率,提升工程项目质量。本规范并不是一个一成不变的必须严格遵守的条文,特殊情况下要灵活运用,做一定的变通,仅供个人参考。扩展阅读:rsp技术开发规范总结终端RSP开发规2022-3-4范目录一、StoryBoard规范.31、场景描述规范.32、ServiceTree规范.3二、命名规范.31、RSP命名规范.
8、32、元素节点命名规范.33、RSP中Java代码命名规范.44、切图图片命名规范.4三、注释规范.41、RSP文件注释.42、RSP节点注释.53、业务条件注释.5四、开发框架规范.51、目录规范.52、RSP框架规范.63、屏幕适配框架使用规范.104、Cache使用规范.135、CacheObject使用规范.14一、StoryBoard规范1、场景描述规范1)描述场景功能,对每个场景编号,该编号和ServiceTree中场景编号对应;2)描述场景中各个元素的来源,动画效果和交互效果;2、ServiceTree规范ServiceTree要对没一个业务场景编号,该编号和StoryBoard
9、的场景编号对应。ServiceTree要反映各个场景的跳转和层次关系,根据此层次关系确定开发框架中的场景级数。二、命名规范1、RSP命名规范RSP命名形式:文件所在位置_所属业务_场景名_类型文件所在位置是指文件是在客户端还是服务器端。在客户端的文件用c表示,在服务器端的文件用s表示;所属业务是指该文件属于哪个业务模块,比如该页面在客户端,且属于新闻模块则写成:c_news.rsp。业务名全部用英文表示;场景名是指该rsp所描述对应场景名,场景名用英文表示。如该页面在客户端是新闻模块,描述的是新闻类型则该rsp名是c_news_type.rsp;类型是指该rsp是View还是Content。比
10、如该页面在客户端,且属于新闻模块且为View则写成:c_news_type_view.rsp;如果该rsp文件既不是View也不是Content则该类型可以不写。文件名一律小写。文件编码必须是UTF-82、元素节点命名规范节点命名形式:节点域_所属业务_场景名_内容描述节点域,本地用“Local”,全局用“Global”禁止使用简写;内容描述,由开发人员定义。只要符合能表述清楚该节点的功能或内容的原则就行。内容描述用英文;节点名称遵循驼峰是命名规则,Global:newsDetail表示新闻明细或者Global:news_detail其他描述同RSP命名规范。3、RSP中Java代码命名规范R
11、SP中Java代码变量全小写,只要符合能表述清楚该变量的意义的原则皆可。代码编写必须遵循java1.5的规范.遵循匈牙利命名规则.4、切图图片命名规范图片命名形式:图片所在位置_所属业务_内容图片所在位置是指图片是在客户端还是服务器端。在客户端的图片用c表示,在服务器端的文件用s表示;所属业务是指该图片属于哪个业务模块,比如该图片在客户端,且属于新闻模块则写成:c_news.png。图片名全部用英文表示;内容是指对该图片意思的表述,如该图片是按钮按下的图片,在客户端属于新闻模块则写成:c_news_button_down.png三、注释规范1、RSP文件注释在每个RSP文件开头要有如下形式的注
12、释:2、RSP节点注释对RSP文件中的每个节点或节点块头标明该节点对应StoryBoard中的场景或动作效果。如:.3、业务条件注释如果由于业务条件的不同,同一个表示区域会有不同的效果或动作则要在条件判断处要标明在什么情况下会进入哪段代码。四、开发框架规范1、目录规范目录规范用于说明项目工作区的文档结构,规范文件放置。具体结构如下:src公用目录业务组1子业务1子业务2业务组2子业务1子业务2.ResDevices设备配置目录Layouts界面布局配置目录Skins皮肤配置目录不同分辨率图片文件夹公用图片夹业务1业务2如图:表示:240x320分辨率下的”无线生活”文件下的”便民查询”查询文件
13、夹整个工作去分src,res,libs文件夹,分别放置源代码,资源文件,外部包和配置文件。src下每个业务分别建立自己的源代码文件夹,文件夹名用能代表该业务的英文说明表示;res下分为devices,layouts,skins三个文件夹,主要放置配置文件.分别放置公共资源,客户端资源,服务器端资源。其中客户端资源和服务器端资源中的各个业务的资源放置到自己所属的业务资源文件夹中;libs下放置扩展包和交互API;2、RSP框架规范RSP框架规范用于说明终端开发中要遵循的各项框架性的准则和要求,定义一个基本的开发结构框架。基本原则:1、View/Content分离,View包含显示框架、显示逻辑和
14、控制逻辑,放置在客户端;Content负责与后台交互并向View填充数据;2、合理运用缓存;服务器端的场景要尽可能多的缓存;对于没有特定关联关系的业务场景(新闻,天气等)要使用一级缓存以减少服务器编译时间;常用的外部资源(美图业务的图片)要使用二级缓存以减少RMS与外部的服务交互;可预知用户操作的业务(读书)要使用CacheObect提前缓存,减少用户等待时间;使用缓存队列维护缓存;建立合理的缓存控制机制。3、定义符合该项目的主体场景树;主体场景树要求包含该项目的所有框架节点,供开发业务时使用;4、开发过程中不要使用无target的Insert节点,主体场景树定义RSP除外;5、除主体场景树所
15、在的RSP外不要有或减少Insert节点,特别是无target的Insert节点;6、一个场景的Action尽量写在一个单独的Action节点中;7、场景加载时按照ServiceTree添加到对应的级别Transform;8、在同一个业务中有本级向下一级跳转时不要删除本级页面代码而是将本级隐藏,当由下级向上级返回时删除本级代码,显示上级节点;9、如果业务存在过多的跨业务的跳转需讨论决定是否使用6,7两点。因为此种情况下维护级别节点是个不小的开销;10、服务器端的RSP要被try/cache包住,并处理异常;11、将一个RSP分成多个单元,将优先显示的内容放在前面,次要的需要大量时间传输的内容放
16、在后面。根据实际场景做具体调整12、关闭超时,最后才渲染的场景放在finally里面.主体框架示例:目录结构示例srcbasec_main.rspc_cache_clean_view.rsps_cache_clean_content.rsps_update_client.rspc_version_check_view.rsps_version_check_content.rspc_dummy.rspcommonhomec_home_view.rspc_home_content.rspnewsc_news_base.rspc_news_type_view.rsps_news_type_conte
17、nt.rspresclientcommonbackground.pngfoot.pngheader.pngnewsservercommonnewslibsclient.jarconf文件说明c_main.rsp项目的主体场景树。其包含了整个项目中要使用的节点。文件内容见附件c_main.rspc_version_check_view.rsp,s_version_check_content.rsp这两个文件负责登录时的版本校验。在c_main.rsp最后会调用c_version_check_view.rsp这个文件,该文件中包含了所有需要校验版本的业务Text节点和Save节点以保存版本号。s_
18、version_check_content.rsp负责从后台取最新的版本号并和已有的版本好比对,并更新版本号。如客户端需更新则调用s_update_client.rsp。stzserver:/c_cache_clean_view.rsp/s_update_client.rsp负责更新客户端。关键代码如下:url=cmd:/cleanRMSData?cached=TRUE saved=TRUEstartTime=NOWc_cache_clean_view.rsp和c_cache_clean_content.rsp这两个文件负责清理需要更新的缓存。用法如下这样把所有以news.rsp开头的缓存就都
19、清除了。场景间的跳转每个场景在业务中都有其场景级别。当要跳转到该场景时要隐藏上一级的场景,需调用c_main.rsp中的对应级别的动作。如第0级到第一级要调用Global:replace_back_from_loading_for_content.L1这个方法隐藏第0级。返回时则调用Global:replace_back_from_loading_for_content.L0显示第0级的内容。返回示例代码:场景的更新每个场景页面要在开头替换掉之前该场景的内容,一个空场景的模板代码如下:以第零级为例:该场景的内容五、实用代码规范1、屏幕适配框架使用规范屏幕适配通过scale或layout组件实现
20、。屏幕适配的好处是开发一套UI能适配其他分辨率的版本,降低了开发工作量。使用scale的好处是适配简单,能快速应用到一个新的分辨率。缺点是无法对场景进行微调,如果发现界面上有部分显示效果不佳只能以硬编码的方式解决,无法通用。Scale的使用已经在开发框架中搭建好。只要配上后台API就能使用。使用layout的好处是它能精细的调节场景上的每一个元素,通过配置文件进行管理,可以在不改变代码的情况下适配各种分辨率。缺点是配置文件过多过复杂,如果layout被放置在服务器端使用则会影响效率,放在客户端则不会。要使用Layout需要adaptaion.jar包。新版本的Developer新建servic
21、e时会自动提供该包,并会产生一个adaptation.xml。以下是个标准的adaptation.xml可以看出layout由Theme,Skin,Layout三部分组成。Theme包含多个Skin,每个Skin负责定义该分辨率下各个元素的显示样式,如高度,颜色等。比如QVGA.xml:其指定了footer_bg这个Image节点读取图片的url是“QVGA/footer_bg.png”,高度是20,名字为footer_txt的Text节点颜色是“#FFFFFF”。LayoutSet是一个Layout集合,其可以包含多个Layout。Layout负责定义每个Transform的大小。如main
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 前端 技术规范 总结
限制150内