jiao512的专栏

原创 JS 数组对象的 34 种官方用法

lastIndexOf() 方法可返回一个指定的元素在数组中最后出现的位置，从该字符串的后面向前查找，如果要检索的元素没有出现，则该方法返回 -1，该方法将从尾到头地检索数组中指定元素 item，开始检索的位置在数组的 start 处或数组的结尾（没有指定 start 参数时），如果找到一个 item，则返回 item 从尾向前检索第一个次出现在数组的位置，数组的索引开始位置是从 0 开始的，如果在数组中没找到指定元素则返回 -1。（注: findIndex() 对于空数组，函数是不会执行的;

原创 掌握Taro多端框架 快速上手小程序/H5开发-截图笔记整理

【代码】掌握Taro多端框架 快速上手小程序/H5开发-截图笔记整理。

原创 webpack中的代理配置proxy五种常用场景

请求到 /api/xxx 现在会被代理到请求 http://localhost:3000/api/xxx, 例如 /api/user 现在会被代理到请求 http://localhost:3000/api/user。请求到 /api/xxx 现在会被代理到请求 http://localhost:3000/xxx, 例如 /api/user 现在会被代理到请求 http://localhost:3000/user。例如：对于浏览器请求，你想要提供一个 HTML 页面，但是对于 API 请求则保持代理。

原创 技术管理知识树-管理层技能

原创 前端常看学习文档

文章目录vue全家桶相关学习文档链接vue全家桶相关学习文档链接vue.js 官网 参考：https://cn.vuejs.org/Vue Router 官网 参考：https://router.vuejs.org/zh/Vuex 官网 参考：https://vuex.vuejs.org/zh/ECMAScript 6 入门 参考：http://es6.ruanyifeng.com/es6 精简篇 https://www.jianshu.com/p/287e0bb867ae

原创 技术周报：2021.08.13

微前端究竟是什么，可以带来什么收益EMP for Vue&React 互相远程调用对比多种微前端方案

原创 项目中用到的base.css

@font-face { font-family: "PingFangSCRegular"; src: url('../fonts/PingFangSCRegular.ttf') format('truetype');}@font-face { font-family: 'iconfont'; src: url('../fonts/iconfont.eot'); src: url('../fonts/iconfont.eot?#iefix') format('em

原创 返回顶部按钮及js代码实现

<!-- 返回顶部按钮 --> <a href="javascript:;" class="backtotop" id="backtotop"> 返回<br>顶部 </a> <script src="js/backtotop.js"></script>// backtotop.js(function() { var backtotop = document.getElementB

原创 金额校验，保留小数点后两位

//金额校验export const moneyTest = (str) => { if (str < 0) { return false } return /^[1-9]\d*\.?\d{0,2}$|^0\.[1-9]\d$|^0\.\d[1-9]$/g.test(str)}

原创 http状态码大全整理

文章目录HTTP状态码简介HTTP状态码分类HTTP 100 状态码HTTP 101 状态码HTTP 200 状态码HTTP 201 状态码HTTP 202 状态码HTTP 203 状态码HTTP 204 状态码HTTP 205 状态码HTTP 206 状态码HTTP 300 状态码HTTP 301 状态码HTTP 302 状态码HTTP 303 状态码HTTP 304 状态码HTTP 305 状态码HTTP 306 状态码HTTP 307 状态码HTTP 400 状态码HTTP 401 状态码HTTP 4

原创 create-react-app创建项目时的初始化配置

npx create-react-app jira --template typescript//问题一：项目中目录的引用，避免多个…/…/在tsconfig.json文件中加入baseUrl: “./src”,//问题二：团队统一的格式化规则，项目中安装格式化插件prettier// https://prettier.io/docs/en/install.html//第一步：yarn add --dev --exact prettier//第二步：echo {}> .prettie

原创 学习Javascript的9张思维导图【转】

收藏9张图片：javascript变量javascript运算符javascript数组javascript流程语句javascript字符串函数javascript函数基础javascript基础DOM操作文档对象模型DOMjavascript正则表达式javascript变量javascript运算符javascript数组javascript流程语句javascript字符串函数javascript函数基础javascript基础DOM操作文档对象模

原创 VS Code插件收集

VS Code插件收集收藏名称简述Auto Close Tag自动闭合HTML标签Auto Importimport提示Auto Rename Tag修改HTML标签时,自动修改匹配的标签Airbnb react snippetsreact编码规范AutoFileName自动补全文字名Babel JavaScriptbabel插件,语法高亮Babelrc.babelrc文件高亮提示Beautify css/sass/scss/l

原创 前端首屏性能优化

网络请求过程以及浏览器的工作原理（主要是渲染原理），搞清楚这两个点，我们才有了优化的理论基础。前端首屏性能优化的知识点很多，很杂。我分成了两个大的方向：资源加载优化 和 页面渲染优化。资源加载优化减小资源大小减少Http请求次数提高Http响应速度优化资源加载时机优化加载方式资源加载优化主要是从大小、数量、速度、时机这几个基本方面进行优化，每一项优化最终都是对这四个基本面中一个或多个方面的优化页面渲染优化优化html代码，优化js和css代码，优化动画效果优化方向主要在以下几个方面

原创 es6相关知识点

Let 和const命令变量的解构赋值字符串的扩展字符串的新增方法正则的扩展数值的扩展函数的扩展数组的扩展对象的扩展对象的新增方法symbolset和Map数据结构ProxyReflectPromise对象Iterator和for…of循环Generator函数的语法Generator函数的异步应用async函数class的基本语法class的继承module的语法Module的加载实现编辑风格读懂规格异步遍历器ArrayBuffer最新提案Deco.

原创 create-react-app 自定义主题craco

create-react-app 自定义主题cracoyarn create react-app antd-democd antd-demoyarn startyarn add antd修改 src/App.js，引入 antd 的按钮组件。import React from 'react';import { Button } from 'antd';import './App.less';const App = () => ( <div className="App

原创 web安全总结

0308-03

原创 JS模块化总结

0308-02

原创 使用 Prettier 修复格式错误

ESLint 包含了一些代码格式的检查，比如空格、分号等。但前端社区中有一个更先进的工具可以用来格式化代码，那就是 Prettier。Prettier 聚焦于代码的格式化，通过语法分析，重新整理代码的格式，让所有人的代码都保持同样的风格。首先需要安装 Prettier：npm install --save-dev prettier然后创建一个 prettier.config.js 文件，里面包含 Prettier 的配置项。Prettier 的配置项很少，这里我推荐大家一个配置规则，作为参考：/

原创 0305-03 架构设计

0305-03

原创 如何写《技术方案设计》文档

0305-02

原创 解决ajax跨域问题【5种解决方案】

0305-01

转载 Webpack HMR 原理解析

Hot Module Replacement（以下简称 HMR）是 webpack 发展至今引入的最令人兴奋的特性之一 ，当你对代码进行修改并保存后，webpack 将对代码重新打包，并将新的模块发送到浏览器端，浏览器通过新的模块替换老的模块，这样在不刷新浏览器的前提下就能够对应用进行更新。例如，在开发 Web 页面过程中，当你点击按钮，出现一个弹窗的时候，发现弹窗标题没有对齐，这时候你修改 CSS 样式，然后保存，在浏览器没有刷新的前提下，标题样式发生了改变。感觉就像在 Chrome 的开发者工具中直接修

原创 手把手教你使用 VuePress 搭建个人博客

手把手教你使用 VuePress 搭建个人博客https://www.cnblogs.com/softidea/p/10084946.html

原创 使用vuePress开发个人网站

VuePressVuePress 由两部分组成：第一部分是一个极简静态网站生成器，它包含由 Vue 驱动的主题系统和插件 API，另一个部分是为书写技术文档而优化的默认主题，它的诞生初衷是为了支持 Vue 及其子项目的文档需求。每一个由 VuePress 生成的页面都带有预渲染好的 HTML，也因此具有非常好的加载性能和搜索引擎优化（SEO）。同时，一旦页面被加载，Vue 将接管这些静态内容，并将其转换成一个完整的单页应用（SPA），其他的页面则会只在用户浏览到的时候才按需加载。快速上手# 安装

原创 0304-01如何搭建自己的前端脚手架cli

如何搭建自己的脚手架cli准备工作：先准备好模板，方便下载使用边看边试一下吧为了整合前端团队代码规范， 以及统一整体架构，可以搭建属于自己小团队的脚手架本文借鉴vue-cli思路，用到的库有：commander.js，可以自动的解析命令和参数，用于处理用户输入的命令download-git-repo，下载并提取 git 仓库，用于下载项目模板。inquirer.js，通用的命令行用户界面集合，用于和用户进行交互。handlebars.js，模板引擎，将用户提交的

原创 ssh: Could not resolve hostname -: nodename nor servname provided, or not known

$ssh - [email protected]: Could not resolve hostname -: nodename nor servname provided, or not known

原创 for in 和 for of的区别详解

for in 和 for of 相对于大家肯定都不陌生,都是用来遍历属性的没错。那么先看下面的一个例子:例1const obj = { a: 1, b: 2, c: 3}for (let i in obj) { console.log(i) // a // b // c}for (let i of obj) { console.log(i) // Uncaught TypeError: obj is not iterable 报错了}以上代码通过 for

原创 如何在 Vue.js 中使用第三方库

在诸多 Vue.js 应用中, Lodash, Moment, Axios, Async等都是一些非常有用的 JavaScript 库. 但随着项目越来越复杂, 可能会采取组件化和模块化的方式来组织代码, 还可能要使应用支持不同环境下的服务端渲染. 除非你找到了一个简单而又健壮的方式来引入这些库供不同的组件和模块使用, 不然, 这些第三方库的管理会给你带来一些麻烦.本文将介绍一些在 Vue.js 中使用第三方库的方式.全局变量在项目中添加第三方库的最简单方式是讲其作为一个全局变量, 挂载到 windo

原创 http2&http3学习笔记小结

http2&http3总结HTTP2的主要特性H2是一个二进制协议,H1是超文本协议.传输的内容都不是一样的。H2遵循多路复用即,代替同一host下的内容,只建立一次连接. H1不是。H2可以使用HPACK进行头部的压缩,H1则不论什么请求都会发送。H2允许服务器,预先将网页所需要的资源PUSH到浏览器的内存当中。HTTP2的多路复用在HTTP1.1的协议中，我们传输的request和response都是基本于文本的，这样就会引发一个问题：所有的数据必须按顺序传输，比如需要传输：h

原创 学习笔记-前端脚手架cli实现

学习笔记-前端脚手架(cli)实现commander.js，可以自动的解析命令和参数，用于处理用户输入的命令。download-git-repo，下载并提取 git 仓库，用于下载项目模板。inquirer.js，通用的命令行用户界面集合，用于和用户进行交互。handlebars.js，模板引擎，将用户提交的信息动态填充到文件中。ora，下载过程久的话，可以用于显示下载中的动画效果。chalk，可以给终端的字体加上颜色。log-symbols，可以在终端上显示出 √ 或 × 等的图标。——

原创 0303-03Taro笔记

微信小程序原生基础知识：https://www.w3cschool.cn/weixinapp/9wou1q8j.htmlreact中文学习文档：https://react.docschina.org/docs/hello-world.htmlredux中文学习文档：http://www.redux.org.cn/Taro框架中文文档：https://nervjs.github.io/taro/安装-启动#全局安装taronpm i -g @tarojs/cli#安装完成后，查看taro.

原创 0303-02前端资源整合

前端资源整合目录面试资源项目资源知识锦集前端早读课文章Vue 相关React 相关Javascript 函数式编程TypeSctiptwebpackParcelGulpes系列Babelhttp 请求库PromiseNodeJSMongoDBGit移动端可视化工具提高生产力工具PythonPWAFlutterGraphQL机器学习Chrmoe其他博客/社区业界技术交流会Github资源vue文档Vue 官方文档Vuex 文档vu

原创 0303-01分享知名前端团队

分享知名前端团队一、腾讯1.腾讯IMWEB2.腾讯AlloyTeam3.腾讯CDC二、阿里1.淘宝前端团队FED三、京东1.凹凸实验室2.京东设计中心JDC四、百度1.百度Fex2.百度efe3.百度eux五、360奇舞团1.奇虎360六、去哪儿1.去哪大前端YMFE携程1.携程UED美团1.美团前端有赞1.有赞技术团队滴滴出行1.滴滴开源平台人人网1.人人Fed字节跳动1.字节跳动技术博客其他1.印记中文2.deepOcean3.优优设计网

原创 整理web前端架构师应会必会的技术栈

“Web前端架构师”所有的应会必会技术栈脚手架-创建项目包管理：lerna环境变量：dotenv命令行：commanderlog定制：npmlog版本检查：semverNpm apiNpm 包安装：npm install通用 Package类封装命令行交互：inquirer命令行loading: spinnerejs模板渲染文件匹配器： globegg.js脚手架-发布项目云构建 CloudBuild封装Githug & Gitee API接入git操作：s

原创 前端技术点整理-面试/复习知识点

前端技术点整理-面试/复习知识点$nextTick原理，事件循环原理，移动端布局方案，移动端穿透问题方案，ES6新特性，es5，es6，async/await的使用和实现，异步方案，promise问题，promise原理，vue数据流逻辑算法题，移动端布局方案，移动端穿透问题方案，vue高阶问题，浏览器工作原理浏览器相关知识es6\vue、pc端的兼容、移动端、svg、html5\css3

原创 从0到1的移动端项目create-react-app初始化-react17

从0到1的移动端项目create-react-app初始化-react171、create-react-app 初始化项目：npm install -g create-react-appcreate-react-app my-mobile-appcd my-mobile-appnpm start安装antd-mobilenpm install antd-mobile --save2、入口页面 (html 或 模板) 相关设置：<!DOCTYPE html><ht

原创 下载excel文件

下载excel文件openDownloadDialog = (url) => { // window.location.href = url; let elemIF = document.createElement('iframe'); elemIF.src = url; elemIF.style.display = 'none'; document.body.appendChild(elemIF); } &lt

原创 react实现页面后退按钮

react实现页面后退按钮import React from 'react';import PropTypes from "prop-types";static contextTypes = { router: PropTypes.object.isRequired};backNav = () => { this.context.router.history.goBack();}render () { return ( <Button className

原创 前端性能统计与优化

前端性能统计与优化1 为什么做这件事情2 前端性能指标3 如何统计与优化为什么做这件事情原因：页面速度影响用户体验，我们要不断加强用户体验。亚马逊：加载时间每增加100MS，就会减少1%销售。谷歌：加载10个结果0.4S，变成加载30个结果0.9S，降低20%的广告收入时间就是金钱效率就是生命前端性能监控目的目的：页面加载速度更快前端性能指标不就是页面加载完毕时间吗？ 图片页面加载顺序1，用户点击链接或者输入URL2，下载完header3，下载完html4，下载完成所有的