vue3+typescript+eslint+prettier 规范代码
Vite项目初始化1pnpm create vite
选择vue3+ts
安装依赖
安装typescript及其插件
1pnpm add -D typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser
typescript : typescript 核心库
@typescript-eslint/eslint-plugin: 这是一个ESLint插件,包含了各类定义好的检测Typescript代码的规范
@typescript-eslint/parser:ESLint的解析器,用于解析typescript,从而检查和规范Typescript代码
安装eslint及其插件
1pnpm add -D eslint eslint-plugin-vue eslint-plugin-prettier eslint-config-prettier eslint-define-config vue-eslint-parser
eslint: elint核心库
eslint-plugin-vue: T ...
typescript_泛型
一、泛型是什么软件工程中,我们不仅要创建一致的定义良好的 API,同时也要考虑可重用性。 组件不仅能够支持当前的数据类型,同时也能支持未来的数据类型,这在创建大型系统时为你提供了十分灵活的功能。
在像 C# 和 Java 这样的语言中,可以使用泛型来创建可重用的组件,一个组件可以支持多种类型的数据。 这样用户就可以以自己的数据类型来使用组件。
设计泛型的关键目的是在成员之间提供有意义的约束,这些成员可以是:类的实例成员、类的方法、函数参数和函数返回值。
为了便于大家更好地理解上述的内容,我们来举个例子,在这个例子中,我们将一步步揭示泛型的作用。首先我们来定义一个通用的 identity 函数,该函数接收一个参数并直接返回它:
12345function identity (value) { return value;}console.log(identity(1)) // 1
现在,我们将 identity 函数做适当的调整,以支持 TypeScript 的 Number 类型的参数:
12345function identity (value: Number) ...
浅谈前端工程化
狭义上的理解:将开发阶段的代码发布到生产环境,包含:构建,分支管理,自动化测试,部署
广义上理解:前端工程化应该包含从编码开始到发布,运行和维护阶段
也有人把 前端工程化 等同于 效率工程
认为一切能提升前端开发效率、提高前端应用质量的方法和工具都是前端工程化,我觉得这么理解也是没有问题的,提升开发效率、提升产品质量、降低开发难度、降低企业成本应该是工程化的意义所在。
另外一个就是前端工程化不是具体的某项技术和方法,公司的组织架构、产品形态、所处的阶段不同可能工程化具体的方法和实践完全不一样,那么从我的角度,简单把工程化划分了5部分:开发、构建、部署、性能、规范化, 对于分类和具体包含的项或许你不一定认同,但是如果所有的知识点你都很熟悉和掌握,那么你的前端工程化水平绝对是中高级的。
nuxt集成axios
nuxt集成axios
添加@nuxt/axios模块
12345// nuxt.config.jsmodules: [ // https://go.nuxtjs.dev/axios '@nuxtjs/axios', ]
创建 plugins/axios.js 文件,并且添加到nuxt.config.js plugins 部分
1234567891011121314151617// plugins/axios.js// 在这个文件扩展axios// 比如拦截器export default function ({ $axios, redirect }) { $axios.onRequest((config) => { console.log('Making request to ' + config.baseURL) }) $axios.onError((error) => { console.log('error', e ...
加密与哈希
区别首先就概念上来说:hash是将目标文本转换成具有相同长度的、不可逆的杂凑字符串,Encrypt是将目标文本转换成不同长度的、可逆的密文。从概念上可以看出两者的区别,下面就不做具体的阐述了。举个例子标明两者的区别:
hash相当于做一份香喷喷的米饭。从将米饭和水放入电饭锅开始,在应用散列函数(混合、煮)之后,在一定时间后会得到一锅米饭。逆转的话是你不能将米饭分解成大米和水,你不能知道放入了多少大米和水,因为这些被三列功能破坏了。理论上,许多不同的输入变量产生相同的米饭,但如果给出其中一个,你就无法确定知道是什么输入产生了它。
而对于加密来说,相对简单些,把加密看作是一个保险箱,不管你用什么方法放进去,只有你拥有这把钥匙,你就会能拿出来,这个是对称的操作,给定一个键和输入,就会得到特点的输出。给定输出和相同的键,就会得到输入,这里的键可以看作是salt。
基本原理从数学角度讲,哈希和加密都是一个映射。下面正式定义两者:
一个哈希算法$$R=H(S)$$是一个多对一映射,给定目标文本S,H可以将其唯一映射为R,并且对于所有S,R具有相同的长度。由于是多对一映射,所以H不存在逆映射使得 ...
防抖和节流
防抖在不断的操作中(键盘输入,点击,窗口resize等)最终只执行一次的一种提高性能的方法 (setTimeout,clearTimeout)
代码实现:
1234567891011function debounce(fun,time){ let timer = null return function(){ clearTimeouot(timer) let args = arguments timer = setTimeout(()=>{ fun.apply(this,args) },time) }}
节流在不断的高频操作中(鼠标滚动加载等),只能在规定的时间内执行一次的一种提高性能的方法
代码实现:
12345678910function throttle(fun,time){ let start = (new Date().getTime())/1000 // 初始时间 return function(){ ...
算法—动态规划求最大子序列和
题目:给定一个整数数组 nums ,找到一个具有最大和的连续子数组(子数组最少包含一个元素),返回其最大和。
思路和算法
假设 nums 数组的长度是 n,下标从 0到 n-1。
我们用 f(i)代表以第 i 个数结尾的「连续子数组的最大和」,那么很显然我们要求的答案就是:
$$\max_{0 \leq i \leq n-1} { f(i) }$$因此我们只需要求出每个位置的 f(i),然后返回 f数组中的最大值即可。那么我们如何求 f(i) 呢?我们可以考虑 nums[i] 单独成为一段还是加入 f(i-1)对应的那一段,这取决于 nums[i] 和 f(i-1)+nums[i] 的大小,我们希望获得一个比较大的,于是可以写出这样的动态规划转移方程:
$$f(i) = \max { f(i-1) + \textit{nums}[i], \textit{nums}[i] }$$不难给出一个时间复杂度 O(n)、空间复杂度 O(n)的实现,即用一个 f数组来保存 f(i) 的值,用一个循环求出所有 f(i)。考虑到 f(i) 只和 f(i-1) 相关,于是我们可以只用一个变量 pre 来 ...
算法—贪心算法求最大子序列和
题目:给定一个整数数组 nums ,找到一个具有最大和的连续子数组(子数组最少包含一个元素),返回其最大和。
思路和算法
从左向右迭代,一个数一个数加过去,如果 sum < 0,则重新开始找子序列
1234567891011121314151617/** * @param {number[]} nums * @return {number} */var maxSubArray = function (nums) { let sum = 0 let ans = nums[0] for (num of nums) { sum += num ans = Math.max(sum, ans) if (sum < 0) { sum = 0 } } return ans};
算法—摩尔投票法
题目:给定一个大小为 n 的整数数组,找出其中所有出现超过 ⌊ n/3 ⌋ 次的元素。
摩尔投票法摩尔投票法:摩尔投票法的核心思想为对拼消耗
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364/** * @param {number[]} nums * @return {number[]} */var majorityElement = function (nums) { // 摩尔投票法 // 找出数组中元素出现过的次数 > 数组长度/3 的元素 // 1/2 至多出现1个 // 1/3 至多出现2个 // 1/m 至多出现 m-1 个 let ele1 = nums[0] let ele2 = nums[0] let vote1 = 0 let vote2 = 0 for (let ...
nuxt项目持续集成部署至阿里云
服务器安装环境(Ubuntu)安装node推荐使用nvm安装,(不推荐apt)
安装nvm
1curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh | bash
或者
1wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh | bash
是nvm命令生效
1source ~/.bashrc
安装node版本
1nvm install --lts // 安装稳定版本中最新的
测试node和npm是是否安装
12node -vnpm -v
nvm的使用
nvm查看node版本
12345678910111213141516nvm ls-> v14.18.1 v16.11.1 v17.0.0default -> v14.18.1iojs -> N/A (default)unstable -> N/A (default)node -> sta ...