上市公司前端开发规范参考

上市公司前端开发规范参考

  • 命名规则
    • 通用约定
    • 文件与目录命名
    • HTML命名
    • CSS命名
    • JS命名
  • 代码格式
    • 通用约定
    • HTML格式
    • CSS格式
    • JS格式
    • 注释
  • 组件
    • 组件大小
    • 单文件组件
    • 容器组件
    • 组件使用说明
    • Prop
    • 指令缩写
    • 组件通讯
    • 组件的挂载和销毁
    • 按需加载
    • 第三方组件库的规定
  • 脚手架使用规范
    • 移动端脚手架
    • PC端脚手架
  • 代码管理
    • 代码更新
    • 代码提交
  • 页面性能指标
    • 延时情况
    • 加载时间
    • 页面大小
    • 图片大小
    • 图片优化
    • 弱网最低支持
  • 其他
    • 版本要求
    • 部署注意事项
    • IDE的选择

命名规则

通用约定

  1. 驼峰(camel)命名法:以小写单词开头,后续单词首字母大写

    myProjectName

  2. 帕斯卡(pascal)命名法:每个单词首字母大写

    MyProjectName

  3. 中划线命名法:单词小写,以中划线连接

    my-project-name

  4. 下划线命名法:单词小写,以下划线连接

    my_project_name

  5. 命名遵循语义化

文件与目录命名

小写,采用中划线命名。

HTML命名

  1. 标签:小写
    <html><head></head><body></body></html>
    
  2. 属性:中划线命名
    <img alt="logo" data-src="/image/logo.png" />
    
  3. ID:下划线命名
    <a id="link_home"></a>
    

CSS命名

  1. Class:中划线命名
    .my-class-name {font-size: 20px;
    }
    
  2. ID:下划线命名
    #my_class_id {color: #f00;
    }
    
  3. 组件块和子组件块:推荐继承命名
    /* */
    .content {padding: 10px;
    }
    /* */
    .content-title {display: block;
    }
    

JS命名

  1. 变量:驼峰命名

    //
    let maxCount = 10;
    let tableTitle = 'LoginTable';
    //
    let setCount = 10;
    let getTitle = 'LoginTable';
    
  2. 常量:下划线命名,单词全部大写

    const MAX_COUNT = 100;
    
  3. 函数/方法:驼峰命名,前缀修饰
    前缀 含义 返回值
is 判断是否为某个值 布尔值
    在这里插入图片描述

    //
    function canRead() {return true;
    }
    //
    function getName() {return this.name;
    }
    
  4. 类、构造函数:帕斯卡命名

    class Person {public name: string;constructor(name) {this.name = name;}
    }
    const person = new Person('Tom');
    
  5. 私有变量:驼峰命名,以下划线开头

  6. 枚举:枚举名称使用驼峰命名,属性用大写下划线命名

代码格式

通用约定

  1. 编码:UTF-8
  2. 缩进:统一使用Tab缩进,并善用IDE的格式化代码快捷键

HTML格式

  1. 标签必须闭合,自闭合标签使用“/”闭合
<a href="index.html"></a>
<img src="logo.png" />
  1. 属性值必须使用双引号包围
  2. 属性顺序,按照以下顺序保证易读性
id
class
name
data-xxx
src, for, type, href
title, alt
aria-xxx, role

CSS格式

  1. 以组件为单位组织代码段
  2. 代码段之间使用空行分隔
  3. 语句必须以分号 ; 结尾
  4. url() 、属性选择符、属性值使用双引号
  5. 声明顺序
Positioning
Box model
Typographic
Visual

JS格式

  1. 语句:必须以分号 ; 结尾
  2. 引号:使用单引号,特殊情况使用双引号(如json文件)
  3. import、const、var 等引用和声明语句需放在文件或代码块的上方
  4. 尽可能使用let代替var

注释

  1. 注释需新开一行,避免在语句后面写注释
  2. 注释规则
/*
*
* @constructor
* @param {string} title -
* @param {string} author -
* @param {number} pageNum -
* @return {object} -
*/

更多参考 http://usejsdoc.org/

组件

组件大小

每个组件的代码建议不要超出 500 行,如果超出建议拆分组件。

组件一般分为基础(UI)组件和业务组件。基础组件一般是承载呈现,基础功能,不和业务耦合;业务组件一般包含业务逻辑和数据交互等。

单文件组件

基础功能组件,建议定义成单文件组件,并给

容器组件

基础功能组件,建议定义成单文件组件,并给

组件使用说明

参考 ,如果组件结构比较复杂,建议新建一个 文件进行详细描述。

注释规则JS readme.md组件及模块的引入应使用相对路径,避免使用路径别名,路径别名对编译器不友好,无法完成代码追踪和自动提示等功能

//
import Header from '@/components/common/Header';
//
import Header from '../../components/common/Header';

ChunkName

const UserInfo = () => import(/* webpackChunkName: "user.info" */
'../views/index/UserInfo.vue');

jsjshttp

Prop

Prop 的定义应该尽量详细的指定其类型、默认值和验证。

指令缩写

为了统一规范始终使用指令缩写,使用 v-bind v-on, 并没有什么不好,这里仅为了统一规范。

组件通讯

避免数据的分发源混乱,不建议使用 eventBus控制数据,应使用 props来和 $emit来数据分发和传送。

同级组件的通讯一般会有一个中间容器组件作为桥梁,容器组件作为数据的接受和分发点。

组件的挂载和销毁

使用v-if指令来控制组件挂载和销毁,组件销毁时请确保终止组件内的定时器和网络请求等异步操作,以免发生意外。

按需加载

使用v-if指令来控制组件挂载和销毁,组件销毁时请确保终止组件内的定时器和网络请求等异步操作,以免发生意外。

第三方组件库的规定

为减少开发人员的学习成本,统一技术栈,提升开发效率,对第三方组件库的选择做如下规定:
在这里插入图片描述

脚手架使用规范

移动端脚手架

新搭建的移动端项目必须使用移动端基础框架模板 ,统一规范化。也可对老项目进行升级。

PC端脚手架

新搭建的PC端项目必须使用PC端基础框架模板 ,统一规范化。也可对老项目进行升级。

代码管理

代码更新

在修改项目之前,必须先拉取一下代码,并确保将分支切换到dev。

代码提交

  1. 提交之前必须做code review和diff对比,确保所有更改都是可靠的。

  2. 代码push之后要通知团队其他成员进行merge。

  3. 控制好代码提交频率,按功能点提交,避免一次性提交过多代码。

  4. 代码提交必须写comment,comment模版参考:JIRA编号+更改内容。

  5. 为避免意外,除正常push外,每天下班之前必须确保所有修改均已push。

页面性能指标

延时情况

出现请求超时的现象。此时需要给予提示,或有其他处理方式。

加载时间

4秒内打开网页, 90%以上的用户都能顺利进入网站。

页面大小

移动端控制在3M以内, PC端可控制在10M以内。

图片大小

控制在300KB 以内,超出大小的图片,需要进行分割。

图片优化

在不影响视觉的情况下压缩图片(推荐压缩工具TinyPNG);将多张小图片或icon合并至一张图片中,以减少请求数,提升显示速度。

弱网最低支持

网速最低在1.25Mbps以上,对于1.25Mbps以下的各种报错不予支持,推荐网速在10Mbps,响应时间为3s;
一般的为10Mbps,5s;

其他

版本要求

为保证项目的可扩展性和性能,对编译环境和库制定最低版本要求:
在这里插入图片描述

如对现有项目进行版本升级,请确保做好全量测试,避免遇到兼容性问题

部署注意事项

  1. 如果采用自动化部署,部署脚本确保加入 npm install 命令,避免因依赖包版本不一致导致的问题

  2. 单页应用的路由如果使用了history模式,需要对服务器做url rewrite设置

IDE的选择

推荐使用WebStorm,有着丰富的插件生态和一系列的人性化设置,能够极大地提高开发效率。

WebStorm统一配置:根据版本下载WebStorm.settings.2019.2.4.zip并导入配置

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/2766.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

前端 Jenkins 自动化部署

由于公司使用自己搭建的 svn 服务器来进行代码管理&#xff0c;因此这里 Jenkins 是针对 svn 服务器来进行的配置&#xff0c;其实跟Git 配置基本一致。 在没有自动化部署前 之前项目每次修改之后都需要本地 ​​npm run build ​​一次手动发布到服务器上方便测试和产品查看…

Jenkins | 获取凭证密码

目录 方法一&#xff1a;查看所有账号及密码 方法二&#xff1a;查看指定账号密码 方法一&#xff1a;查看所有账号及密码 Jenkins > 系统管理 > 脚本命令行 com.cloudbees.plugins.credentials.SystemCredentialsProvider.getInstance().getCredentials().forEach{i…

nginx基础1——工作原理、安装配置、命令参数

文章目录 一、基本了解1.1 特性优点1.2 功能应用1.3 工作模块分类1.4 模块配置方法 二、工作原理三、安装与配置四、常用命令 一、基本了解 nginx简介&#xff1a; nginx是一款轻量级的Web服务器、反向代理服务器及电子邮件&#xff08;IMAP/POP3&#xff09;代理服务器&#x…

前端学习——ajax (Day1)

AJAX 概念和 axios 使用 axios 使用 练习 <!DOCTYPE html> <html lang"zh-CN"><head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" …

SpringBoot 整合 RabbitMQ demo

Rabbit Windows安装教程 本文只做Demo案例的分享&#xff0c;具体只是需自行百度 一、生产者 1.application.properties 配置Rabbit的基本信息 #rabbit 主机IP spring.rabbitmq.host127.0.0.1 #rabbit 端口 spring.rabbitmq.port5672 #rabbit 账号 可自行创建 这里是默认的 …

网络知识整合——Web页面请求的历程

Web页面请求的历程 内部涉及知识&#xff1a;一、准备:DHCP、UDP、IP 和以太网二、仍在准备&#xff1a;DNS和ARP三、仍在准备&#xff1a;域内路由选择到DNS服务器四、Web客户-服务器交互&#xff1a;TCP和HTTP五、HTTP请求响应格式Requests部分Responses 部分 下载一个Web页面…

ES6迭代器、Set、Map集合和async异步函数

目录 迭代器 Iterator 的作用 Iterator 的遍历过程 Set Map集合 map和对象区别? async异步函数 迭代器 迭代器&#xff08;Iterator&#xff09;就是这样一种机制。它是一种接口&#xff0c;为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署Iterator接口&…

介绍性能压力测试的重要性

在当今数字化时代&#xff0c;软件和应用程序的性能对于用户体验和业务成功至关重要。为了确保系统在面临高负载和压力时能够正常运行&#xff0c;性能压力测试成为一项不可或缺的活动。本文将介绍性能压力测试的重要性。 性能压力测试是一种通过模拟实际场景中的负荷和用户访问…

2023-7-19-第二十式迭代器模式

&#x1f37f;*★,*:.☆(&#xffe3;▽&#xffe3;)/$:*.★* &#x1f37f; &#x1f4a5;&#x1f4a5;&#x1f4a5;欢迎来到&#x1f91e;汤姆&#x1f91e;的csdn博文&#x1f4a5;&#x1f4a5;&#x1f4a5; &#x1f49f;&#x1f49f;喜欢的朋友可以关注一下&#xf…

React native 已有项目升级兼容web

基础 概念 | webpack 中文文档 | webpack 中文文档 | webpack 中文网 深入理解Webpack及Babel的使用 - 掘金 Introduction to React Native for Web // React Native for Web Webpack 是一个现代的 JavaScript 应用程序的静态模块打包工具&#xff0c;它将应用程序所依赖的各…

【C++】STL---vector基本用法介绍

个人主页&#xff1a;平行线也会相交&#x1f4aa; 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 平行线也会相交 原创 收录于专栏【C之路】&#x1f48c; 本专栏旨在记录C的学习路线&#xff0c;望对大家有所帮助&#x1f647;‍ 希望我们一起努力、成长&…

五十、Spring

1.Spring概述 1.1 Spring是什么 Spring是分层的 Java SE/EE应用 full-stack(全栈式) 轻量级开源框架。 提供了表现层 SpringMVC和持久层 Spring JDBC Template以及 业务层 事务管理等众多的企业级应用 技术&#xff0c;还能整合开源世界众多著名的第三方框架和类库&#xf…

4个顶级WooCommerce商城多站点库存同步WordPress插件

经营几家网上商店是令人兴奋的。但是&#xff0c;这也是一项艰巨的工作&#xff0c;尤其是当您意识到需要同步这些商店的库存时。好消息是&#xff0c;有 WooCommerce 多站点库存同步插件和选项可以加快速度。 WooCommerce 多站点网络可让您将所有在线商店无缝地安置在一个屋檐…

【Tauri + React 实战】VCluster - 了解技术选型与开发环境配置

VCluster A React Tauri App as visualizer of apps cluster on windows. 背景介绍 VCluster是一个在开发环境下&#xff0c;用以对一系列应用集群&#xff08;如分布式、微服务&#xff09;进行可视化管理的桌面应用程序&#xff0c;目标是实现类似 docker-compose 那样的集…

TabBar和TabBarView实现顶部滑动导航

home.dart子页面主要代码&#xff1a; import package:flutter/material.dart;class HomePage extends StatefulWidget {const HomePage({super.key});overrideState<HomePage> createState() > _HomePageState(); }class _HomePageState extends State<HomePage&…

windows环境hadoop报错‘D:\Program‘ 不是内部或外部命令,也不是可运行的程序 或批处理文件。

Hadoop版本为2.7.3&#xff0c;在环境配置好后&#xff0c;检查hadoop安装版本&#xff0c;报如标题所示错误&#xff0c;尝试网上主流的几种方法均无效。 错误&#xff1a;windows环境hadoop报错’D:\Program’ 不是内部或外部命令,也不是可运行的程序 或批处理文件。 错误方…

【技巧】Maven重复依赖分析查找

【技巧】Maven重复依赖分析查找 遇到奇葩的错误可以考虑是不是依赖冲突了 比如同一段代码 再这个项目中好好的 另一个项目中不能用等 idea安装插件 maven helper 打开pom文件 输入要查找的依赖 将不用的排除掉 右键排除即可

在阿里云平台注册一个域名

我们访问阿里云官网 阿里云 然后 我们右上角点击登录 然后 按正常操作流程登录 登录成功后 我们点击控制台 我们将鼠标 移入 右上角 图片指向的位置 我们点击域名 进入界面后点击注册域名 在输入框中输入域名内容 然后 按回车 然后弹出的列表 我们可以选一个未注册的 点击…

Druid-排查conditionDoubleConstAllow配置问题(double const condition)

Druid-排查conditionDoubleConstAllow配置问题(double const condition) 报错信息 Caused by: java.sql.SQLException: sql injection violation, dbType postgresql, druid-version 1.2.18, double const condition : SELECT * FROM test where 11 AND TRUE AND TRUE关键词&…

正则表达式概念以及语法的使用

目录 1.概念 2. 为什么使用正则表达式&#xff1f; 3. 语法 1.普通字符 非打印字符 2. 特殊字符 3. 限定符 4. 定位符 5. 运算优先级 3.匹配规则 1. 基本模式匹配 2. 字符簇 3. 确定重复出现 1.概念 正则表达式(Regular Expression)是一种文本模式&#xff0c;包…