前端
文章平均质量分 64
weixin_40455124
这个作者很懒,什么都没留下…
展开
-
nginx cache 总结
总结nginx 可以通过regex 对指定类型或者path的文件进行cache可以根据upstream http code进行不同时间cachenginx plus 支持通过curl 进行purge可以通过开源module 实现plus的purge测试dockerfileFROM centos:centos7.4.1708 RUN yum install -y make zlib zlib-devel gcc pcre-devel openssl-原创 2022-04-23 18:35:53 · 3415 阅读 · 0 评论 -
删除预先安装的node及npm 避免冲突等问题
记录一下,当使用类似以下的maven安装node及npm的时候,建议删除预先安装的node及npm(或者从path中删除)。这样可以避免版本冲突等各种问题。<plugin> <groupId>com.github.eirslett</groupId> <artifactId>frontend-maven-plugin</artifactId> <原创 2021-06-13 19:49:04 · 200 阅读 · 0 评论 -
http跳转https的几种方法
Nginx Rewriterewrite ^(.*)$ https://fandong.studio$1 permanent;Nginx return 301、302return 301 https://domain.com$request_uri;Nginx error_page 497server { listen 80; server_name www.domain.com domain.com; return 301 https://domain.com$requ原创 2021-05-15 01:07:31 · 1314 阅读 · 0 评论 -
HTTP Strict Transport Security 导致的307 http自动跳转https
今天遇到一个 由于nginx设置了header:Strict-Transport-Security导致url自动跳转为https的问题。记录如下:开发者模式下可以看到307及hsts类提示信息可以通过chrome://net-internals/#hsts查看域名是否强制要求使用https以下是官方说明:One of the several new features in Chrome is the addition of HTTP Strict Transport Security. HST原创 2021-05-15 01:01:54 · 1184 阅读 · 0 评论 -
打包工具yarn 1.XX版本简单记录
注意目前有1.XX版本及2.xx版本,这篇文章都是关于1.xx版本基础使用安装yum install -y npm bzip2## 升级node到最新版npm install -g nn latest ## 安装yarncurl --silent --location https://dl.yarnpkg.com/rpm/yarn.repo | sudo tee /etc/yum.repos.d/yarn.repoyum install -y yarn基本用法初始化:yarn原创 2021-05-03 20:13:18 · 441 阅读 · 0 评论 -
React Router
定义Routing is the process of defining endpoints for your client’s requestsreact 本身不带router,但一般都使用https://reactrouter.com/基本使用安装package.json的dependencies 增加 “react-router-dom”: “^5.2.0”,npm install:npm install --save react-routernpm install react-原创 2021-05-03 17:41:01 · 154 阅读 · 0 评论 -
React 代码质量及测试
代码质量代码规则:Eslint 及Eslint Plug-ins基础:初始化:执行npx eslint --initeslint-plugin-react is installed locally to the ./node_modules folder.These dependencies are automatically added to the package.json file.A configuration file, .eslintrc.json, is created and原创 2021-05-02 22:24:25 · 341 阅读 · 0 评论 -
react error boundaries 和suspense 特性
Error boundaries用途:防止render过程中错误扩散、导致整个应用崩溃,有以下限制1、不能捕获的错误:Event handlers ,事件错误Asynchronous code (e.g. setTimeout or requestAnimationFrame callbacks),异步代码Server side rendering,服务端渲染Errors thrown in the error boundary itself (rather than its children原创 2021-04-28 08:10:29 · 261 阅读 · 0 评论 -
React 数据读取-协同
使用Fetch取数据可以等同curl+串行结果处理、错误处理,示意代码如下fetch(`https://api.github.com/users/${login}`) .then(data => data.json()) .then(setData) .then(() => setLoading(false)) .catch(setError);主要用法使用catch处理错误使用then逐步处理数据指定method:POST使用h原创 2021-04-24 23:24:51 · 289 阅读 · 2 评论 -
React Hook:missing dependency及has unnecessary dependencies
React missing dependency及has unnecessary dependencies是两组相反的提示,missing dependency指Array中缺少对应对象,has unnecessary dependencies为Array包括不使用的对象。在处理上useCallback和useEffect稍有不同。如:Line 27:6: React Hook useEffect has a missing dependency: 'loadReadme'. Either inclu原创 2021-04-24 23:09:44 · 2403 阅读 · 1 评论 -
React Hook:useState、Context、useRef、useEffect、Context、useMemo
useStateuseState返回一个 state,以及更新 state 的函数。 const [titleProps, resetTitle] = useInput(""); const [colorProps, resetColor] = useInput("#000000");resetTitile及resetColor就会使用useInput对应值进行更新state可以对返回state增加Onchange 等html 对象event,如下代码:export const useInpu原创 2021-04-23 23:31:39 · 297 阅读 · 0 评论 -
javascript compose函数
记录下来自Learning React Modern Patterns for Developing React Apps一书的compose函数,这个函数和clojure的->/->>函数一样用于串行执行所有子函数。和reduce函数的差异是使用一个入参,同时前面函数的出参作为后一个函数的入参。请注意compose本身其实返回的是一个函数,不是直接执行。测试代码如下:const compose = (...fns) => (arg) => fn原创 2021-04-11 09:37:26 · 169 阅读 · 0 评论 -
javascript async try catch 函数三种写法
javascriptasync try catch 函数写法,采用=>、返回函数、直接使用函数的三种写法记录如下,这三种写法中的第一、第三其实是一样的,第二总适合reduce或者compose使用。代码以使用fetch为例。const format1= ( async (url) => { try{ console.log("json"); const res = await fetch(url); const json = await res.json()原创 2021-04-11 09:32:30 · 1103 阅读 · 0 评论 -
ES2015 promise学习笔记
then串行执行,除非中间有触发reject下游then使用上游then的输出作为参数catch捕获错误不会串行,只有第一个catch生效resolve, rejectpromise执行应该返回resolve或者reject返回reject触发catch函数测试代码'use strict';var promiseCount = 0;function testPromise() { let thisPromiseCount = ++promiseCount;原创 2021-04-06 23:14:42 · 126 阅读 · 0 评论 -
ES2015 CLASS学习笔记
与object关系类似申明中( 属性、方法)无需,属性都可以随意增加语法属性方法内,this.property=就可以增加直接使用property=value 申明无需特殊申明实例化:使用new 实例化构造函数:constructor只能有一个constructor静态方法和property :使用static声明必须使用类定义调用,不能使用instance调用可以override,规则和普通方法/属性一致继承:extends/super没有public、pr原创 2021-04-06 23:12:25 · 86 阅读 · 0 评论 -
ES2015-SET&MAP 笔记
set值总是唯一的使用数组创建set可以实现过滤 keys()返回值和values()一致迭代-类lambda操作foreachfor … ofset、array 转换let myArr = Array.from(mySet);let mySet = new Set(myArray);reverse不能直接reverse,可以借助array.reverse实现主要方法addcleardelete-直接delete valueentries -和map一样返回keys和val原创 2021-04-06 23:07:59 · 120 阅读 · 0 评论 -
ES2015 模块管理
export使用export default时,对应的import语句不需要使用大括号命名导出(每个模块包含任意数量)默认导出(每个模块包含一个可以在目录下的index.js 设置输出所有文件的内容以方便importexport * from './js1.js'export {}/* formimport导入次序带.js 直接导入对应文件无后缀先导入对应.js文件作为目录,导入目录下index.jsimport ’filename‘: 不带{}或者default原创 2021-04-04 22:37:52 · 105 阅读 · 0 评论 -
ES2015 函数与参数
rest与spreadrest用于函数定义,必须是最后一个参数spread,rest反方向操作,用于调用函数或者解构数组,包括concat数组function sum(x, y, z, ...r) { let firstThree = x + y + z; let total = x + y + z + r.reduce((left, right) => left + right); console.log('前三个值为: ' + firstThree); console.l原创 2021-04-04 22:34:05 · 131 阅读 · 0 评论 -
ES2015 对象和数组
数组方法构造方法from:比如将arguments转为数组oflet a=Array.of(1,2,3);console.log(a);let b=new Array(10,20,30);let c=Array.from("abcd");let d=[4,6,7];let e=new Array(3).fill("e");console.log(c,b);查找和判断includesfind:注意参数为函数findindex:注意参数为函数filter:过滤l原创 2021-04-04 20:45:50 · 275 阅读 · 0 评论 -
ES2015 var及string学习
let及varvar作用域为函数let为块但for循环包括了for内部不能在申明前使用常量-const注意数据和集合类const的子项目是可以变化的string 对象判断函数:startsWith/endsWith/includes填充函数:repeat:字符串自身填充padStart/padEnd:给字符串填充指定内容, 如‘abcd’.padStart(10,‘zzdw’);template 变量使用``+$进行变量替换注意``中的空格和换行符号会被保留转义符号原创 2021-04-04 20:33:49 · 148 阅读 · 0 评论