Web前端工程师需要注意的开发规范有哪些

Web前端工程师需要注意的开发规范有:1、CSS书写规范;2、Java书写规范。CSS书写规范是指,编码统一为utf-8;协作开发及分工: i会根据各个模块, 同时根据页面相似程序, 事先写好大体框架文件, 分配给前端人员实现内部结构&表现&行为。

一、CSS是什么CSS是什么范

1. 编码统一为utf-8;

2. 协作开发及分工: i会根据各个模块, 同时根据页面相似程序, 事先写好大体框架文件, 分配给前端人员实现内部结构&表现&行为; 共用css文件base.css由i书写, 协作开发过程中, 每个页面请务必都要引入, 此文件包含reset及头部底部样式, 此文件不可随意修改;

3. class与id的使用: id是唯一的并是父级的, class是可以重复的并是子级的, 所以id仅使用在大的模块上, class可用在重复使用率高及子级中; id原则上都是由我分发框架文件时命名的, 为Java预留钩子的除外;

4. 为Java预留钩子的命名, 请以 js_ 起始, 比如: js_hide, js_show;

5. class与id命名: 大的框架命名比如header/footer/wrapper/left/right之类的在2中由i统一命名,其他样式名称由小写英文 & 数字 & _ 来组合命名, 如i_comment, fontred, width200; 避免使用中文拼音, 尽量使用简易的单词组合; 总之, 命名要语义化, 简明化。

6. 规避class与id命名(此条重要, 若有不明白请及时与i沟通):

a) 通过从属写法规避;

b)取父级元素id/class命名部分命名;

c)重复使用率高的命名, 请以自己代号加下划线起始, 比如i_clear;

d)a,b两条, 适用于在2中已建好框架的页面, 如, 要在2中已建好框架的页面代码中加入新的div元素。

7. css属性书写顺序, 建议遵循: 布局定位属性–>自身属性–>文本属性–>其他属性. 此条可根据自身习惯书写, 但尽量保证同类属性写在一起;

8. 书写代码前, 考虑并提高样式重复使用率;

9. 充分利用html自身属性及样式继承原理减少代码量

10. 样式表中中文字体名, 请务必转码成unicode码, 以避免编码错误时乱码;

11. 背景图片请尽可能使用sprite技术, 减小http请求, 考虑到多人协作开发, sprite按模块制作;

12. 使用table标签时(尽量避免使用table标签), 请不要用width/ height/cellspacing/cellpadding等table属性直接定义表现, 应尽可能的利用table自身私有属性分离结构与表现 , 如thead,tr,th,td,tbody,tfoot,colgroup,scope; (cellspaing及cellpadding的css控制方法:table{border:0;margin:0;border-collapse:collapse;} table th, table td{padding:0;}, base.css文件中我会初始化表格样式);

13. 如果可以请少使用兼容;

14. 用png图片做图片时, 要求图片格式为png-8格式,若png-8实在影响图片质量或其中有半透明效果, 请为ie6单独定义背景;

15. 避免兼容性属性的使用, 比如text-shadow || css3的相关属性;

16. 减少使用影响性能的属性, 比如position:absolute || float ;

17. 必须为大区块样式添加注释, 小区块适量注释;

18. 代码缩进与格式: 建议单行书写, 可根据自身习惯, 后期优化会统一处理;

二、Java书写规范

1. 文件编码统一为utf-8, 书写过程, 每行代码结束必须有分号; 原则上所有功能均根据XXX项目需求原生开发, 以避免网上down下来的代码造成的代码污染(沉冗代码 || 与现有代码冲突 || …);

2. 库引入: 原则上仅引入jQuery库, 若需引入第三方库, 须与团队其他人员讨论决定;

3. 变量命名: 驼峰式命名. 原生Java变量要求是纯英文字母, 首字母须小写;

4. 类命名: 首字母大写, 驼峰式命名. 如 ITaoLun;

5. 函数命名: 首字母小写驼峰式命名. 如iTaoLun();

6. 命名语义化, 尽可能利用英文单词或其缩写;

7. 尽量避免使用存在兼容性及消耗资源的方法或属性;

8. 后期优化中, Java非注释类中文字符须转换成unicode编码使用, 以避免编码错误时乱码显示;

9. 代码结构明了, 加适量注释. 提高函数重用率;

10. 注重与html分离, 减小reflow, 注重性能.

延伸阅读

CSS是什么

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。

文章标题:Web前端工程师需要注意的开发规范有哪些,发布者:E.Z,转载请注明出处:https://worktile.com/kb/p/51885

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
E.ZE.Z认证作者
上一篇 2023年5月10日
下一篇 2023年5月12日

相关推荐

  • 编程开发属于什么岗位类型

    编程开发属于技术岗位中的一类,其重点在于软件的设计、编写和测试。编程开发人员主要负责将软件需求转化为可操作的代码,他们通过编写源代码来实现软件产品或系统的功能,这包括新应用程序的开发和现有系统的维护与升级。在深入研究软件开发生命周期的过程中,我们可以看到,编程不仅仅是单纯的代码敲击。它还涉及对项目需…

    2024年4月27日
    700
  • 编程鼠标是什么

    编程鼠标通常指的是具备自定义按钮功能、可编程宏命令及高精度传感器的鼠标类型。这类鼠标为使用者提供了个性化配置选项,使其能针对不同的应用程序或游戏进行快速操作。编程鼠标中最核心的一个功能是其能够通过软件进行宏编程,用户可以设定一串操作命令并赋予某个按钮,一键即可完成多项任务,极大提升工作效率和游戏体验…

    2024年4月26日
    1000
  • 镜头编程什么意思

    镜头编程是指在电影、电视和视频游戏制作中,通过编程来控制摄像机视角、角度、移动和其他视觉效果的过程。这项技术类似于电影制作中摄影师对摄像机进行操作的方式,但在此场景下,操作是通过软件和代码执行的。例如,在一个视频游戏内,当玩家控制角色移动至一个新的环境时,镜头编程可以决定摄像机应如何移动来展示环境、…

    2024年4月26日
    1400
  • project是什么软件

    project是指Microsoft Project是一款项目管理软件,不仅可以快速、准确地创建项目计划,而且可以帮助项目经理实现项目进度、成本的控制、分析和预测,使项目工期大大缩短,资源得到有效利用,提高经济效益。 project是什么软件 Microsoft Project (或 MSPROJ)…

    2022年10月14日
    2.2K00
  • 工时填报软件有什么

    工时填报软件有:1、Excel;2、PingCode;3、Worktile;4、诺明软件;5、aceteamwork;6、zoho project。在人数少的时候,Excel其实是很OK的,但其缺点也明显,比如手工收集汇总工时,可能存在数据覆盖、丢失、数据准确性差、太耗精力、无法做到数据实时共享,统…

    2023年4月21日
    53000
  • python深浅拷贝的区别是什么

    python深浅拷贝的区别是:1、拷贝对象不同;2、对拷贝对象的处理方式不同;3、应用场景不同。当原始对象有子对象时,浅拷贝会使用子对象的引用,而深拷贝会复制子对象。深拷贝一般用于复杂数据结构的拷贝,浅拷贝用于一些简单数据结构的拷贝。 一、拷贝对象不同 当原始对象有子对象时,浅拷贝会使用子对象的引用…

    2023年5月22日
    4.8K00
  • 儿童编程家长做什么

    儿童学习编程,家长能够做的事情主要包括1、提供资源支持,2、鼓励和心理支持,3、参与和引导。在这些方面中,特别值得深入探讨的是提供资源支持。家长可以通过多种方式来为孩子学习编程提供必要的资源,包括为孩子选择合适的学习平台或者课程、购买或租赁编程所需的硬件设备,以及确保孩子有一个适合学习的环境。此外,…

    2024年4月26日
    900
  • 园林项目如何管理

    园林项目的管理涉及多个方面,包括:项目规划与设计、施工过程管理、园艺植物保养、经费与材料管理、质量与安全控制、后期维护与管理。其中,项目规划与设计是园林项目管理最为关键的环节,它涉及到整个项目的可行性分析、环境影响评估、创意与美学实现,以及植物与材料的选择等。良好的项目规划为整个园林项目的顺利实施奠…

    2024年4月10日
    5400
  • 英语学编程有什么方法吗

    学习编程对于英语用户有多种方式,可以通过1、参加在线课程或教程、2、阅读编程书籍、3、实践编程项目、4、参与开源社区、5、使用编程相关的英语学习资源。在线课程是一个不错的选择,它们提供了结构化的学习路径,经常包含视频讲座、交互式编码练习和学生论坛,例如Codecademy和Udemy上的课程。这些平…

    2024年4月27日
    500
  • 什么场景下使用devops

    ### 摘要 在面临企业快速迭代与市场需求变化时,DevOps成为关键解决策略。其应用场景包括1、快速迭代需求、2、跨团队协作、3、自动化流程优化、4、实时监控与反馈。尤其在快速迭代需求中,它通过持续集成(CI)与持续交付(CD)实现软件的快速开发与部署,极大地缩短了开发周期,提高了软件交付的效率。…

    2024年3月26日
    6000

发表回复

登录后才能评论
注册PingCode 在线客服
站长微信
站长微信
电话联系

400-800-1024

工作日9:30-21:00在线

分享本页
返回顶部