2022前端技术规范总结.docx

《2022前端技术规范总结.docx》由会员分享，可在线阅读，更多相关《2022前端技术规范总结.docx（7页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、2022前端技术规范总结 前端技术规范总结第一部分：书目、文件、CSS命名方式文件夹与文件名称、CSS样式命名、程序中的一些控件等等：名称全部用小写英文字母、数字、下划线的组合，其中不得包含汉字、空格和特别字符；书目名应以英文、拼音为主（不到万不得已不要以拼音作为书目名称，阅历证明，用拼音命名的书目往往连一个月后的自己都看不懂）。尽量用一些大家都能看懂的词汇。使得你自己和工作组的每一个成员能够便利的理解每一个文件的意义。而且当我们在文件夹中运用“按名称排例”的吩咐时，同一种大类的文件能够排列在一起，以便我们查找、修改、替换、计算负载量等等操作。例如：images(图形文件)，flash（Fla

2、sh文件）等。命名方式：（性质_描素_位置_分类_数量）项相结合，采纳简写、组合的方式形成通用规则。例如：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(配置)Scri

3、pt(脚本)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开发规201*-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）描述场景中各个元素的本文来源：网络收集与整理，如有侵权，请联系作者删除，谢谢！第7页 共7页第 7 页 共 7 页第 7 页 共 7 页第 7 页 共 7 页第 7 页 共 7 页第 7 页 共 7 页第 7 页 共 7 页第 7 页 共 7 页第 7 页 共 7 页第 7 页 共 7 页第 7 页 共 7 页