前端工程化之规范化

news2024/11/17 2:37:58

规范化是我们践行前端工程化中重要的一部分。

为什么要有规范化标准

俗话说，无规矩不成方圆，尤其是在开发行业中，更是要有严谨的工作态度，我们都知道大多数软件开发都不是一个人的工作，都是需要多人协同的，而不同的开发者有不同的编码习惯和喜好，这些个人的喜好并没有什么不好的地方，只是说同一个项目中，每一个人的喜好都不相同，那么就会导致项目的维护成本大大增加，所以说我们需要为每个项目或者团队需要明确统一的标准，让项目或团队中的成员按照统一的标准去完成工作，从而避免各种不统一而带来的麻烦。那么知道了为什么规范化标准之后，那么看一下在开发过程中，哪些地方用到规范化标准的。

  • 代码、文档、甚至是提交的日志
  • 开发过程中人为编写的内容
  • 其中代码的标准化规范最为重要，因为代码的规范很大程度上决定着代码的质量以及可维护性，为了便于后期维护以及其他成员的阅读，一般情况下我们都对代码的风格进行统一的要求。

实现规范化的方法

我们在落实规范化的标准的时候也很简单，只需要提前约定好一个执行的标准，然后按照标准各自执行各自的开发工作。最后在Code Review环节按照之前约定的标准去检查各自相应的代码，但是按照人为约定的方式执行规范化会有很多的问题，一来人为约束不可靠，二来开发者也很难记住规则。所以我们就需要相对应的工具做保障，相比人为的检查，工具的检查更为可靠，同时配合自动化的工具进行自动化检查，这样就能得到质量化的保证。将工具检查代码规范的过程称为lint，例如前端常见的eslint、stylelint等。

常见的规范化实现方式

  • ESLint工具使用
  • 定制ESLint校验规则
  • ESLint对TypeScript的支持
  • ESLint结合自动化工具或者Webpack进行项目自动化校验
  • 基于ESLint的衍生工具
  • Stylelint工具的使用

ESLint介绍

EsLint是目前最为主流的JavaScript Lint工具，专门用于检测JS代码质量，通过ESLint很容易统一开发者的编码风格，例如：缩进、换行、分号以及空格之类的使用。不仅如此，EsLint还能帮助我们找到代码中不合理的地方，例如我们定义了一个从未使用的变量，或者在变量使用之后才去做声明等等，而这些不合理的操作就是代码中潜在的问题，通过EsLint能有效避免这些问题，从而提高代码的质量。

对于 JavaScript 这种动态、宽松类型的语言来说，开发者更容易犯错。由于 JavaScript 不具备先天编译流程，往往会在运行时暴露错误，而 Linter，尤其最具代表性的 ESLint 的出现，允许开发者在执行前发现代码错误或不合理的写法。

ESLint 最重要的几点哲学思想：

  • 所有规则都插件化
  • 所有规则都可插拔（随时开关）
  • 所有设计都透明化
  • 使用 Espree 进行 JavaScript 解析
  • 使用 AST 分析语法
  • 想要顺利执行 ESLint，还需要安装应用规则插件。

那么如何声明并应用规则呢？在根目录中打开 .eslintrc 配置文件，我们在该文件中加入：

{
    "rules": {
        "semi": ["error", "always"],
        "quote": ["error", "double"]
    }
}

semi、quote 就是 ESLint 规则的名称，其值对应的数组第一项可以为：off/0、warn/1、error/2，分别表示关闭规则、以 warning 形式打开规则、以 error 形式打开规则。

  • off/0：关闭规则
  • warn/1：以 warning 形式打开规则
  • error/2：以 error 形式打开规则

同样我们还会在 .eslintrc 文件中发现：

{
  "extends": "eslint:recommended"
}

这行表示 ESLint 默认的规则都将会被打开。当然，我们也可以选取其他规则集合，比较出名的有：

  • Google JavaScript Style Guide
  • Airbnb JavaScript Style Guide

注意，上文中 .eslintrc 文件我们采用了 .eslintrc.js 的 JavaScript 文件格式，此外还可以采用 .yaml、.json、yml 等格式。如果项目中含有多种配置文件格式，优先级顺序为：

  • .eslintrc.js
  • .eslintrc.yaml
  • .eslintrc.yml
  • .eslintrc.json
  • .eslintrc
  • package.json

最终，我们在 package.json 中可以添加 script：

"scripts": {
    "lint": "eslint --debug src/",
    "lint:write": "eslint --debug src/ --fix"
 },

我们对上述 npm script 进行分析，如下：

  • lint 这个命令将遍历所有文件，并在每个找到错误的文件中提供详细日志，但需要开发者手动打开这些文件并更正错误。
  • lint:write 与 lint 命令类似，但这个命令可以自动纠正错误。

ESLint安装

首先我们需要创建一个项目，并在项目中安装ESLint模块为开发依赖，然后初始化配置文件。

mkdir test-eslint && cd test-eslint
npm init
npm install eslint -D //安装
npm init @eslint/config //初始化配置文件

然后提示，给出了三个选项

39.png

  • To check syntax only：只检查语法的错误
  • To check syntax and find problems：检查语法错误并发现问题代码
  • To check syntax, find problems, and enforce code style：第三个在前两个基础上校验代码风格

其中语法错误比较好理解，问题代码指的是代码不合理的地方，例如未被使用的变量或者不存在的函数。代码风格指的是在代码风格上存在的问题，例如缩进不统一。在实际开发中建议选择第三种。

然后再选择项目的模块化，根据项目的实际情况选择即可。

40.png

等等一些基础配置，包括项目用的什么框架，React、Vue还是啥也没用，是否用TypeScript，你的项目运行在什么环境是浏览器还是Node，你想要在你的项目中怎样定义代码风格，使用市面上主流的风格、通过询问问题形成风格、根据JS代码文件推断出风格？

41.png
那么我们选择市面上主流的风格后，又提示让你选择具体市面上哪个风格。

42.png
最后提示配置文件以何种方式存放，这里选择JS的方式即可，方便后续做条件判断。

43.png
之后会提示安装项目需要的插件，确定安装即可，在项目根目录下会看到.eslintrc.js文件。

然后再执行npx eslint xxx.js可以看出校验了很多的问题。

44.png

总结来讲eslint有两个作用：一是可以找出代码的问题，包括语法错误、代码不合理、风格不统一。二是可以修复代码风格上的大多数的问题。例如npx eslint xxx.js --fix命令来修复，例如添加如下命令：

"scripts": {
    "lint": "eslint ./src/**/*.{js,jsx,vue,ts,tsx} --fix"
},

ESLint配置文件解析

项目生成的.eslintrc.js文件内容如下：

module.exports = {
  env: {
    browser: true,
    es2021: true
  },
  extends: 'standard',
  overrides: [
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  rules: {
  }
}

该配置项默认有四个配置选项

  1. env：JS在不同的环境中有不同的api可以调用，例如在浏览器中可以直接使用widow、document全局成员，这个env就是表明当前代码的运行环境，它会根据环境信息判断全局成员是否可用，为了避免代码中使用不存在的成员。比如browser为true表示代码运行在浏览器中，这里定义的每一个环境对应了一组全局变量，一旦开启了某个环境，这个环境的全局变量则都能被使用。env运行环境配置如下：
  • browser：浏览器环境中的全局变量
  • node：Node.js全局变量和Node.js作用域
  • commonjs：CommonJS全局变量和CommonJS作用域(用于Browserify/Webpack打包的只在浏览器中运行的代码)
  • shared-node-browser：Node.js和Browser通用全局变量
  • es6：启用除了modules以外的所有ECMAScript6特性(该选项会自动设置ecmaVerison解析器选项为6)
  • worker：Web Workers全局变量
  • amd：将require()和define()定义为像amd一样的全局变量
  • mocha：添加所有的Mocha测试全局变量
  • jasmine：添加所有的Jasmine版本1.3和2.0的测试全局变量
  • jest：Jest全局变量
  • phantomjs：PhantomJS全局变量
  • protractor：Protractor全局变量
  • qunit：QUnit全局变量
  • jquery：jQuery全局变量
  • prototypejs：Prototype.js全局变量
  • shelljs：ShellJS全局变量
  • meteor：Meteor全局变量
  • mongo：MongoDB全局变量
  • applescript：AppleScript全局变量
  • nashorn：Java 8 Nashorn全局变量
  • atomtest：Atom测试全局变量
  • embertest：Ember测试全局变量
  • webextensions：WebExtensions全局变量
  • greasemonkey：GreaseMonkey全局变量
  1. extends：用于继承一些共享的配置，例如我们使用的standard规范。
  2. parserOptions：该选项用于设置语法解析器的配置，它只检测语法，而不是检测哪个全局成员是否可用。
  3. rules：用于配置校验规则的开启和关闭。
  4. plugins：设置规则插件。
  5. parser：默认情况下 ESLint 使用 Espree 进行解析。

如果想校验vue规范，可以安装vue-eslint-plugin，添加如下配置即可

{
  extends: [
    // add more generic rulesets here, such as:
    // 'eslint:recommended',
    'plugin:vue/vue3-recommended',
    // 'plugin:vue/recommended' // Use this if you are using Vue.js 2.x.
  ],
}

ESLint配置注释

ESLint配置注释指的是将配置以注释的方式写在脚本文件中，然后再去执行代码的校验。在实际开发的过程中，难免会遇到一两个违反配置规则的情况，不能因为这一两个点去推翻校验规则的配置，这个时候可以使用ESLint配置注释来解决这样的问题。

const str1 = '${name} is a coder'; //eslint-disable-line no-template-curly-in-string
console.log(str1);

例如使用eslint-disable-line选择性忽略这行代码，但是如果一行代码中有多个问题，通过这个注释都不会被检测到了，因此后面加上具体禁用的规则名称，这样就不影响其他的规则。
::: tip 相关文档
http://eslint.cn/docs/user-guide/configuring#configuring-rules
:::

编辑器集成

编辑器集成主要是如何看到不符合规范的错误提示，如何按照项目中的ESLint规则要求进行格式化。

首先先去卸载或者禁用Vetur插件，然后安装vscode的eslint插件，以及volar插件。

eslint插件是安装并启用了这个插件，它就会自动查找项目中的eslint配置规范，并且给出验证提示。那如何格式化呢？ESLint提供了格式化工具，但是需要手动配置才可以。

72.png

onType是在写代码过程中实时去验证，onSave是保存的时候去验证。

73.png

ESLint结合gulp

如果我们的项目中采用自动化构建工作流，那么我们就把ESLint集成到工作流中。在gulp使用babel编译之前，通过glup-eslint插件来检查代码。使用的时候先调用eslint插件检测，然后调用eslint.format()方法在控制台打印错误信息，然后再使用eslint.failAfterError()方法，在检查到错误之后终止任务管道。

ESLint结合Webpack

在webpack中使用ESLint需要安装eslint-loader在babel-loader之前调用。

rules:[
    {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader'
    },
    {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'eslint-loader',
        enfore: 'pre'
    }
]

这里使用一个 enforce 属性配置pre优先处理。它的值如下：

  1. pre 优先处理
  2. normal 正常处理（默认）
  3. inline 其次处理
  4. post 最后处理

针对React特殊语法需要安装eslint-plugin-react插件，然后在.eslintrc.js文件中配置插件，编写rules规则即可。

module.exports = {
  env: {
    browser: true,
    es2021: true
  },
  extends: 'standard',
  overrides: [
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  rules: {
    'react/jsx-uses-react': 2,
    'react/jsx-uses-vars': 2
  },
  plugins:[
    'react'
  ]
}

我们也可以直接继承eslint-plugin-react中编写的规则，就可以共享配置中的内容。

module.exports = {
  env: {
    browser: true,
    es2021: true
  },
  extends: [
    'standard',
    'plugin:react/recommended'
  ],
  overrides: [
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  rules: {
  }
}

ESLint检查TypeScript

之前我们检查TypeScript是采用tslint工具，后来tslint官方放弃维护，推荐使用eslint配合typescript插件来做代码校验。注意这里在.eslintrc.js中配置ts的语法解析器。

module.exports = {
  env: {
    browser: true,
    es2021: true
  },
  extends: [
    'standard',
  ],
  parser: '@typescript-eslint/parser',
  overrides: [
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  rules: {
  }
  plugins:[
    '@typescript-eslint'
  ]
}

StyleLint介绍

在前端项目中除了JavaScript代码需要lint之外，css代码也需要lint，css代码的lint一般使用StyleLint来帮助完成。StyleLint默认提供了代码检查规则供开发者使用，我们也可以在配置文件中选择性的开启和关闭规则。StyleLint也同样提供了CLI工具，供开发者在命令行中调用，从而检查css代码。StyleLint也支持通过插件来实现对Sass、Less、PostCSS等衍生语法的检查。最后StyleLint也支持Gulp和Webpack工具的集成。

安装stylelint

npm install stylelint -D

安装stylelint共享配置模块

npm install stylelint-config-standard

创建.stylelintrc.js配置文件

module.exports = {
  extends: [
    'stylelint-config-standard',
  ]
}

再通过命令校验css文件

npx stylelint ./index.css

如果你需要使用stylelint校验sass代码，那么就需要安装相对应的模块。

npm install stylelint-config-sass-guidelines

然后再添加配置文件

module.exports = {
  extends: [
    'stylelint-config-standard',
    'stylelint-config-sass-guidelines'
  ]
}

Prettier的使用

Prettier是一款通用的前端代码格式化工具，它很强大，几乎能完成所有前端代码的格式化工作。它一般不会检查我们代码具体的写法，而是在“可读性”上做文章。目前支持包括 JavaScript、JSX、Angular、Vue、Flow、TypeScript、CSS（Less、SCSS）、JSON 等多种语言、数据交换格式、语法规范扩展。在日常工作中，我们可以使用它来完成日常代码的自动格式化，通过使用它可以落实前端项目的规范化标准。

总的来说，它能够将原始代码风格移除，并替换为团队统一配置的代码风格。虽然几乎所有团队都在使用这款工具，这里我们还是简单分析一下使用它的原因：

  • 构建并统一代码风格
  • 帮助团队新成员快速融入团队
  • 开发者可以完全聚焦业务开发，不必在代码整理上花费过多心思
  • 方便，低成本灵活接入，并快速发挥作用
  • 清理并规范已有代码
  • 减少潜在 Bug
  • 丰富强大的社区支持

当然，Prettier 也可以与编辑器结合，在开发者保存后立即进行美化，也可以集成到 CI 环境中，或者 Git pre-commit 的 hook 阶段。比如使用 pretty-quick：

yarn add prettier pretty-quick husky -D

格式化文件

npx prettier style.css --write

使用通配符的方式格式化所有的文件

npx prettier . --write

并在 package.json 中配置：

{
    "husky": {
        "hooks": {
            "pre-commit": "pretty-quick --staged"
        }
    }
}

在 husky 中，定义 pre-commit 阶段，对变化的文件运行 Prettier，–staged 参数表示 pre-commit 模式：只对 staged 的文件进行格式化。

这里我们使用了官方推荐的 pretty-quick 来实现 pre-commit 阶段的美化。这只是实现方式之一，还可以通过 lint-staged 来实现。

Git Hooks介绍

Git Hook也称之为Git钩子，每个钩子都连着一个具体的Git操作，比如commit、push等等，我们可以通过shell脚本来编写钩子任务触发时要具体执行的操作。例如我们可以通过Git Hooks的方式在提交代码之前强制做lint检查，以便后续CI的时候lint失败。

https://github.com/okonet/lint-staged

我们打开git项目，在根目录下找到.git隐藏文件夹

45.png
打开hooks目录，可以看到sample钩子文件。我们可以去自定义这些文件。

46.png

由于很多前端开发者并不擅长shell，所以有开发者开发了一个npm模块Husky帮助实现Git Hooks的使用需求。使用Husky就可以在不编写shell脚本的情况下实现Git钩子的需求。

安装，使用以下命令会在项目中安装husky和lint-staged

npx mrm@2 lint-staged

安装Husky

npm install husky -D

然后再package.json中配置husky，husky下有hooks对象，里面可以配置钩子和对应的命令。

{
    "husky":{
        "hooks":{
            "pre-commit": "npm run test"
        }
    }
}

如果我们想在代码格式化后提交到暂存区，那么仅使用husky是满足不了需求的，这时候就需要使用lint-staged模块帮助协作。我们先安装lint-staged模块。

npm install lint-staged -D

然后配置package.json

{
    "scripts":{
        "precommit": "lint-staged"
    }
    "husky":{
        "hooks":{
            "pre-commit": "npm run precommit"
        }
    },
    "lint-staged":{
        "*.js":[
            "eslint",
            "git add"
        ]
    }
}

这样就能在提交代码前先使用eslint校验，然后执行git add命令。

git commit规范

推荐参考

  • Commit message和Change log编写指南

统一团队Git commit日志标准，便于后续代码review，版本发布以及日志自动化等。

那么就考虑使用commitlint

安装

npm install --save-dev @commitlint/config-conventional @commitlint/cli

创建commitlint.config.js

module.exports = {
  extends: ['@commitlint/config-conventional']
}

如果想自动生成changelog可以使用conventional-changelog

技术原理和设计

ESLint 是基于静态语法分析（AST）进行工作的，AST 已经不是一个新鲜话题。ESLint 使用 Espree 来解析 JavaScript 语句，生成 AST。

有了完整的解析树，我们就可以基于解析树，对代码进行检测和修改。ESLint 的灵魂是每一条 rule，每条规则都是独立且插件化的，我们挑一个比较简单的“禁止块级注释规则”源码来分析：

module.exports = {
  meta: {
    docs: {
      description: '禁止块级注释',
      category: 'Stylistic Issues',
      recommended: true    
    }
  },

  create (context) {
    const sourceCode = context.getSourceCode()
    return {
      Program () {
        const comments = sourceCode.getAllComments()
        const blockComments = comments.filter(({ type }) => type === 'Block')
        blockComments.length && context.report({
          message: 'No block comments'
        })
      }
    }
  }

}

从中我们看出，一条规则就是一个 node 模块，它由 meta 和 create 组成。meta 包含了该条规则的文档描述，相对简单。而 create 接受一个 context 参数，返回一个对象，如下代码：

{
    meta: {
        docs: {
            description: '禁止块级注释',
            category: 'Stylistic Issues',
            recommended: true 
        }
    },

    create (context) {
        // ...
        return {
        }
    }
}

从 context 对象上我们可以取得当前执行扫描到的代码，并通过选择器获取当前需要的内容。如上代码，我们获取代码的所有 comments（sourceCode.getAllComments()），如果 blockComments 长度大于 0，则 report No block comments 信息。了解了这些，相信你也能写出 no-alert、no-debugger 的规则内容。

虽然 ESLint 背后的技术内容比较复杂，但是基于 AST 技术，它已经给开发者提供了较为成熟的 APIs。写一条自己的规则并不是很难，只需要开发者找到相关的 AST 选择器。更多的选择器可以参考：Selectors - ESLint - Pluggable JavaScript linter，熟练掌握选择器，将是我们开发插件扩展的关键。

大厂代码规范

  • Airbnb
  • standard
  • 腾讯
  • 百度
  • 阿里

** 看完觉得对您有所帮助别忘记关注呦 **
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

C++内存模型

C++内存模型

目录 内存模型分类 堆和栈的区别 C中new的工作过程 堆和栈的区别 为什么堆区要比栈区大 内存模型分类 文本段（ELF）（数据区）：主要用于存放我们编写的代码，但是不是按照代码文本的形式存放，而…
阅读更多...
MySQL的日志undolog、binlog、redolog

MySQL的日志undolog、binlog、redolog

1. 日志层次 binlog是Server层，undolog和redolog是innodb引擎层特有的。 2. 记录了什么 & 作用 binlog 记录了所有数据库结构变更和表数据修改的SQL日志。 主要用于数据备份和主从复制，比如误删数据了可以用binlog找回。 undolog 如下图&#…
阅读更多...
测试一下阿里通义千问-7B-Chat的性能

测试一下阿里通义千问-7B-Chat的性能

测试一下阿里通义千问-7B-Chat的性能 0. 背景1. 实际测试结果(截图) 0. 背景 为了了解一下阿里通义千问-7B-Chat的性能，出了几个问题测试一下。 1. 实际测试结果(截图) 示例代码， import os import openaifrom dotenv import load_dotenv, find_dote…
阅读更多...
gma 2 教程（二）数据操作：6.NumPy数组交互

gma 2 教程（二）数据操作：6.NumPy数组交互

gma 栅格数据集可以通过 ToArray 方法将栅格数据转为NumPy数组，也提供将NumPy数据转换为栅格数据（集）的方法。 读取NumPy数组到数据集 （一）函数简介  　（二）示例 保存NumPy数组到文件 &…
阅读更多...
基于热交换算法优化的BP神经网络（预测应用） - 附代码

基于热交换算法优化的BP神经网络（预测应用） - 附代码

基于热交换算法优化的BP神经网络（预测应用） - 附代码 文章目录 基于热交换算法优化的BP神经网络（预测应用） - 附代码1.数据介绍2.热交换优化BP神经网络2.1 BP神经网络参数设置2.2 热交换算法应用 4.测试结果：5.Matlab代…
阅读更多...
leetcode496. 下一个更大元素 I 【单调栈】

leetcode496. 下一个更大元素 I 【单调栈】

【简单题】&#xff08;暴力遍历法很简单&#xff09;但是时间复杂度很高&#xff0c;n的立方级别了。。。 代码&#xff1a; class Solution { public:vector<int> nextGreaterElement(vector<int>& nums1, vector<int>& nums2) {vector<int&g…
阅读更多...
Vue2向Vue3过度核心技术computed计算属性

Vue2向Vue3过度核心技术computed计算属性

目录 1 computed计算属性1.1 概念1.2 语法1.3 注意1.4.案例1.5.代码准备 2 computed计算属性 VS methods方法2.1 computed计算属性2.2 methods计算属性2.3 计算属性的优势2.4 总结 3 计算属性的完整写法 1 computed计算属性 1.1 概念 基于现有的数据&#xff0c;计算出来的新属…
阅读更多...
抓包相关,抓包学习

抓包相关,抓包学习

检查网络流量 - 提琴手经典 (telerik.com) Headers Reference - Fiddler Classic (telerik.com) 以上是fiddler官方文档 F12要勾选保留日志 不勾选的话跳转到新页面之前页面的日志不会在下方显示 会保留所有抓到的包 如果重定向到别的页面 F12抓包可能看不到响应信息,但是…
阅读更多...
在Jupyter Notebook中添加Anaconda环境(内核)

在Jupyter Notebook中添加Anaconda环境(内核)

在使用前我们先要搞清楚一些事&#xff1a; 我们在安装anaconda的时候它就内置了Jupyter Notebook&#xff0c;这个jupyter初始只有base一个内核&#xff08;显示为Python3&#xff09; 此后其实我们就不需要重复安装完整的jupyter notebook了&#xff0c;只要按需为其添加新的…
阅读更多...
Nexus 如何配置匿名用户访问一个仓库

Nexus 如何配置匿名用户访问一个仓库

现在有这样一个需求&#xff0c;我们需要匿名用户访问 Nexus 的一个公共仓库。 设置 Roles 在满足这个需求之前&#xff0c;我们需要设置一个 Roles。 Role 的名字是可以随填写的。 这里关键的问题在你需要访问的仓库的 View 的权限需要设置 Read 和 Browse 这 2 个权限。 如…
阅读更多...
conda 常用命令手册

conda 常用命令手册

参考conda-cheatsheet
阅读更多...
保姆级使用vmware安装Ubuntu-server版

保姆级使用vmware安装Ubuntu-server版

保姆级VMware安装Ubuntu20服务器版 文章目录 保姆级VMware安装Ubuntu20服务器版前期准备一、安装vmware二、下载Ubuntu镜像 VMware安装Ubuntu201. 启动Workstation Pro或者Workstation Player,进入软件后新建一个虚拟机2. 进入引导界面选择默认的即可3. 点击下一步即可4. 选择操…
阅读更多...
【HSPCIE仿真】HSPICE仿真基础

【HSPCIE仿真】HSPICE仿真基础

HSPICE概述 1. HSPICE简介3. 标准输入文件4. 标准输出文件3. HSPCIE仿真过程 1. HSPICE简介 SPICE &#xff08;Simulation Program with IC Emphasis&#xff09;是1972 年美国加利福尼亚大学柏克莱分校电机工程和计算机科学系开发 的用于集成电路性能分析的电路模拟程序。 …
阅读更多...
4.1011

4.1011

目录 四次挥手中收到乱序的FIN包会如何处理&#xff1f; 在 TIME_WAIT 状态的 TCP 连接&#xff0c;收到 SYN 后会发生什么&#xff1f; 四次挥手中收到乱序的FIN包会如何处理&#xff1f; 如果FIN报文比数据包先道道客户端&#xff0c;此时FIN是一个乱序报文&#xff0c;此时…
阅读更多...
双向交错CCM图腾柱无桥单相PFC学习仿真与实现（3）硬件功能实现

双向交错CCM图腾柱无桥单相PFC学习仿真与实现（3）硬件功能实现

前言 前面介绍了双向交错CCM图腾柱的系统设计仿真实现&#xff0c;仿真很理想 双向交错CCM图腾柱无桥单相PFC学习仿真与实现&#xff08;1&#xff09;系统问题分解_卡洛斯伊的博客-CSDN博客 然后又介绍了SOG锁相环仿真实现的原理 双向交错CCM图腾柱无桥单相PFC学习仿真与实…
阅读更多...
Python项目开发案例————学生信息管理系统（附源码）

Python项目开发案例————学生信息管理系统（附源码）

一、学生信息管理系统 本文使用Python语言开发了一个学生信息管理系统&#xff0c;该系统可以帮助教师快速录入学生的信息&#xff0c;并且对学生的信息进行基本的增、删、改、查操作&#xff1b;还可以实时地将学生的信息保存到磁盘文件中。 1.1 需求分析 为了顺应互联网时代…
阅读更多...
ELK + Kibana + Logstash实现可视化日志

ELK + Kibana + Logstash实现可视化日志

&#x1f61c;作 者&#xff1a;是江迪呀✒️本文关键词&#xff1a;elasticsearch、kibana、logstash、日志收集、日志可视化☀️每日 一言&#xff1a;坚持就是胜利啊&#xff0c;哥~ 一、前言 面试官&#xff1a;在日常开发工作中你们是如何查看日志的呢&#x…
阅读更多...
9.2 互补功率放大电路

9.2 互补功率放大电路

目前使用最广泛的是无输出变压器的功率放大电路&#xff08;OTL 电路&#xff09;和无输出电容的功率放大电路&#xff08;OCL 电路&#xff09;。 一、OCL 电路的组成及工作原理 为了消除图9.1.5所示的基本 OCL 电路所产生的交越失真&#xff0c;应当设置合适的静态工作点&a…
阅读更多...
SpringBoot入门篇1 - 简介和工程创建

SpringBoot入门篇1 - 简介和工程创建

目录 SpringBoot是由Pivotal团队提供的全新框架&#xff0c; 其设计目的是用来简化Spring应用的初始搭建以及开发过程。 1.创建入门工程案例 ①创建新模块&#xff0c;选择Spring初始化&#xff0c;并配置模块相关基础信息 ②开发控制器类 controller/BookController.jav…
阅读更多...
改进YOLO系列：9.添加S2Attention注意力机制

改进YOLO系列：9.添加S2Attention注意力机制

添加S2Attention注意力机制 1. S2Attention注意力机制论文２. S2Attention注意力机制原理３. S2Attention注意力机制的配置３.１common.py配置３.２yolo.py配置３.３yaml文件配置1. S2Attention注意力机制论文 论文题目：S 2 -MLPV2: IMPROVED SPATIAL-SHIFT MLP ARCHITECTURE…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023