• 分析一套源代码的代码规范和风格并讨论如何改进优化代码


    我做的工程项目为开发提供物联网解决方案参考的网站,而我负责其前端页面的开发,要求使用react框架,因此我找了一个使用react开发的前端项目。

    1.目录结构

    该项目目录结构清晰,做到了统一化,可读性,分模块,方便日后维护和其他人的阅读。

    comonents:存放所有的组件;

    images:存放所使用到的图片;

    lib:存放第三方库文件;

    该目录命名采用了复数命名法,例如components,images。

    2.HTML规范

    缩进使用了tab(2个空格);

    嵌套的节点使用了缩进;

    在属性上,使用了双引号,而不是采用单引号;

    属性名采用了全小写,并且使用了中划线(-)作为分隔符;

    在自动闭合标签结尾处使用了斜线,以适应react

    规定了字符编码:

    通过声明一个明确的字符编码,让浏览器轻松快速地确定适合网页内容的渲染方式,例如本项目指定了字符串编码为‘UTF-8’,如图所示。

    3.CSS规范

    使用了tab缩进;

    每个声明结束都添加了分号;

    url的内容都添加了引号;

    属性选择器中的属性值添加了引号;

    4.JS规范

    标准变量名采用了驼峰式命名,例如imgUrls,paginatinClickable等;

    统一加了分号;

    对象的属性名后,函数调用括号前等都不用加空格;

    代码’{‘前,else、while、if等关键字处都加了空格;

    变量声明后、注释前、文件最后一行都加有空行,以便提高代码可阅读性

    5.不符合规范的地方

    目录文件名为采用大驼峰式命名,例如LeftBar;

    Css,jsx等文件命名为采用下划线,例如otherapp.css应该写为other_app.css等;

    代码注释过少,不便于其他们的阅读于理解;

    没有采用语义化标签,例如<header></header>,<footer></footer>;

    CSS文件中的id没有采用驼峰式命名;

    6.同类编程语言或项目在代码规范和风格的一般要求

    CSS规范有:

    使用4个空格作为一个缩进层级;

    当一个样式规则包含对各selector时,每个选择器必须独占一行;

    属性定义必须另起一行;

    必要的注释等

    HTML规范有:

    注释使用<!--注释内容--!>规范;

    所有标签必须闭合,尽管如今的浏览器也能解析标签不规范的html页面;

    统一用tab缩进;

    属性值必须带引号;

    a标签不能嵌套a;

    对特殊字符进行实体转义;

    文件名统一使用小写字符;

    所有img元素必须加上width,height,alt属性;

    JS规范:

    编码统一使用UTF-8;

    使用tab缩进;

    尽可能使用统一的命名规范,如驼峰命名法;

    不要在同一行声明多个变量;

    使用===/!==来比较true/false或者数值;

    不要使用全局函数;

    switch语句必须带有default分支;

    for-in循环中的变量应该使用var关键字明确限定作用域,从而避免作用域污染等等;

  • 相关阅读:
    netlink(todo)
    【拓展】如何画好架构图
    【JS】527- 关于 JS 中的浮点计算
    【CSS】526- CSS 控制图标颜色
    【拓展】一个故事讲完CPU的工作原理
    【面试题】525- 阿里 P6 的面经
    【生活】你在第几楼?80后、90后扎心图鉴
    【JS】524- 三分钟迁移 Ant Design 4
    【Web技术】522- 设计体系的响应式设计
    【适配】521- 移动端开发各种兼容适配问题(屏幕、图像、字体与布局等)
  • 原文地址:https://www.cnblogs.com/sovegetabable/p/11662803.html
Copyright © 2020-2023  润新知