- 博客(53)
- 收藏
- 关注
RSS订阅原创 NVM在windows下切换node版本
如果您很忙或者很急 请直接阅读 三、【步骤】一、【问题背景】生活里偶尔穿梭在大街小巷中，工作中时常并行于多项目任务里......当多个项目并行时，由于创建的时间或人为选择等因素，各个项目里有着差异的node版本，这样我们在不同的项目里需要切换不同版本的Node.js，所以nvm应运而生。二、【NVM】NVM (Node Version Manager): Nodejs的版本管理工具...
2020-02-24 20:14:03
1132
1
原创 测试工具Jmeter下载安装（WIN10）
1、前往Jmeter官网下载压缩包其实这一个zip压缩包就足够了，其他的一些tgz后缀的压缩包都不用理会，没有影响。2、解压下载的压缩包（重点知识：解压时千万记好解压路径，后边会涉及到）这个压缩包应该是50MB左右，解压后会出现bin文件夹，并没有出现我们常见的安装模式，不用担心，其实我们下载的就是绿色版本，无需安装。其中并没有可执行的文件，也没有常见的应用程序的类型文件，这是正常的...
2020-02-24 19:19:42
1109
原创 解决 iframe跨域、跨端口报错 Blocked a frame with origin from accessing a cross-origin frame
前言在不同的端口号，甚至是不同的ip进行iframe嵌套的时候，在父页面调用子页面的方法的时候，报错SecurityError: Blocked a frame with origin from accessing a cross-origin frame…问题原因在不同端口号下，不能使用传统的iframe嵌套调用方法。document.getElementById("mainFram...
2020-01-15 18:44:14
42215
1
原创 搭建一个nodejs前端脚手架的方法步骤
前言像我们熟悉的 vue-cli，taro-cli 等脚手架，只需要输入简单的命令 taro init project ，即可快速帮我们生成一个初始项目。在日常开发中，有一个脚手架工具可以用来提高工作效率。搭建前准备第三方工具commander.js ，可以自动的解析命令和参数，用于处理用户输入的命令。download-git-repo ，下载并提取 git 仓库，用于下载项目模板。...
2020-01-04 20:41:14
1282
原创 JS时间格式转换 format函数
时间格式转换 format函数Date.prototype.format = function (fmt) { var o = { "M+": this.getMonth() + 1, //月份 "d+": this.getDate(), //日 "h+": this.getHours(), //小时 "m+": this....
2020-01-01 20:56:44
535
转载 webpack配置react-hot-loader热加载局部更新
csdn的收藏有点鸡肋，只好以博客的形式记录下来。原文地址：https://blog.csdn.net/huangpb123/article/details/78556652 ...
2019-12-26 20:29:18
182
原创 webpack4 之html-webpack-plugin
plugin是什么plugin是用于扩展webpack的功能，各种各样的plugin几乎可以让webpack做任何与构建先关的事情。plugin的配置很简单，plugins配置项接收一个数组，数组里的每一项都是一个要使用的plugin的实例，plugin需要的参数通过构造函数传入。举个栗子const HtmlWebpackPlugin = require('html-webpack-pl...
2019-12-24 16:27:50
1276
转载 React 服务端渲染从入门到精通
前言这篇文章是我自己在搭建个人网站的过程中，用到了服务端渲染，看了一些教程，踩了一些坑。想把这个过程分享出来。我会尽力把每个步骤讲明白，将我理解的全部讲出来。文中的示例代码来自于这个仓库，也是我正在搭建的个人网站，大家可以一起交流一下。示例代码因为简化，与仓库代码有些许出入。另外，自己使用服务端渲染过程中遇到的一些坑我也都记录在README里了。本文中用到的技术React V16 | Re...
2019-12-18 15:26:54
259
原创 个人认为最简单好用的KOA代理转发中间件 koa2-proxy-middleware
配置koa2-proxy-middleware用于代理转的中间件。在使用koa2作为前后端分离的框架，工程当中的静态页面需要请求在其他域名下的java工程接口，由于同源策略的限制，在koa2工程下的静态资源只能通过node后端进行代理请求其他域名下的接口。（ngnix或者php等等都可以）基础使用比网上其他KOA的代理都简单，直接上代码：// 导入koa，和koa 1.x不同，在koa2中，我...
2019-12-14 19:08:00
10300
1
原创 react-router-4、5组件外跳转路由
使用Router自定义history即可import { Router } from 'react-router-dom';import { createBrowserHistory, createHashHistory } from 'history';// 根据需要选择hash还是h5路由, 然后就能在组件外通过history.push进行编程式导航了const history = ...
2019-11-23 17:01:16
1155
原创 react项目中怎么使用http-proxy-middleware反向代理跨域
第一步 安装 http-proxy-middlewarenpm install http-proxy-middleware我们这里面请求用的axios，在将axios安装一下npm install axios第二步 src下创建一个 setupProxy.js文件里面书写一下代码第三步 需...
2019-11-23 13:12:52
782
原创 【持续更新】commonJS和ES6 import目前已解决但说不清原因的问题，搞清楚后贴上来
commonJS引入文件的一些机制出问题的代码import componentsState from "../componentsState/bbt"componentDidMount() { import(`../pages/${componentsState[this.props.componentPath]}`) .then(Component => { ...
2019-11-18 16:57:12
524
原创 React使用公共文件夹public
两者区别其实放在两个文件夹区别就在于是否会被webpack所处理，如果您将文件放入该public文件夹，webpack 将不会处理它，在你打包的时候，会将public文件夹直接复制一份到你构建出来的文件夹中。而src/assets目录的文件（前提你在js中有引入），它会被webpack编译，比如图片，如果你的图片小于你在webpack中的loader下设置的limit大小（可配置），它会被编译成...
2019-11-12 15:22:38
8440
原创 IE11中报Promise未定义
问题：项目开发环境中在IE11正常运行，打包之后发布上线在IE11中报Promise 未定义1.重要：确保webpack是2.6.1的版本，如果不是在package.json将webpack修改为”webpack”: “2.6.1” I had this issue even with adding babel-polyfill, because of a bug with webpa...
2019-10-30 15:24:09
995
原创 react脚手架项目想用https方法
直接在config/webpackDevServer.config.js下面将https设置为true 或者在设置环境变量module.exports = function(proxy, allowedHost) { return { // WebpackDevServer 2.4.3 introduced a security fix that prevents remote...
2019-10-29 16:25:46
4320
原创 TypeScript结合React全家桶的一些类型总结(一些常用自带的类型,持续补充)
如果对Typescript不了解的可以先去官方API,学习一波TypeScript官方API(点击跳转)注意：不用清除的看懂代码，只需要了解类型即可，或者观看我其它博客可以有相应的介绍等1.React类型总览(包括React本身、router、antd的类型)1.1 React本身常用类型无状态组件，函数的类型定义，FunctionComponent<P={}>、简写FC&l...
2019-10-24 16:00:46
4694
原创 利用JS获取用户当前ip地址
新浪的IP地址查询接口：http://int.dpool.sina.com.cn/iplookup/iplookup.p...
2019-10-15 15:29:07
516
原创 Hbuilder We're sorry
当Webview窗口加载错误地址（如本地页面不存在）或者访问网络资源失败（如无法访问网络）时会自动显示默认错误页面： 可以通过以下方法自定义Webview的404等错误页面。 设置应用全局默认错误页面5+App和wap2app在应用的manifest.json文件的"plus"->"error"节点的url属性可配置自定义错误页面替换默认...
2019-10-05 19:45:09
3269
3
原创 iframe的安全问题
今天尝试在iframe中嵌入外部网站, 碰到了一些小问题.如何让自己的网站不被其他网站的iframe引用?我测试的时候发现我把iframe的src指定到github不起作用. 原来是它把X-Frame-Options设置为了DENY, 这样就禁用了别的网站的iframe引用, 避免点击劫持(clickjacking).X-Frame-Options有三个可能值: DENY, SAM...
2019-09-20 18:20:25
1570
原创 webApp添加到iOS桌面启动图以及图标
iOS中的safri浏览器可以将一个网页添加到桌面，当做一个独立的应用运行。当然，这里我们不讨论怎么去做一个webApp，这需要html5的相关知识和开发经验。这里我们只讲webApp添加桌面后到启动的相关细节。全屏显示：<meta name="apple-mobile-web-app-capable" content="yes" />系统顶栏的颜色(黑色和白色)：<meta n...
2019-09-17 21:21:52
1427
1
原创 IOS Safari浏览器添加桌面图标
iOS中Safari浏览器的私有属性。添加图标到主屏幕：<link rel="apple-touch-icon-precomposed" sizes="57x57" href="icon-57.png"><link rel="apple-touch-icon-precomposed" sizes="72x72" href="icon-72.png"><link...
2019-09-07 15:40:27
2257
原创 React新生命周期--getDerivedStateFromProps
React 16是最近一年多React更新最大的版本。除了让大家喜闻乐见的向下兼容的Fiber，防止了客户端react在进行渲染的时候阻塞页面的其他交互行为。Fiber源码速览参考https://juejin.im/post/5bea68a6e51d450cb20fdd70新的生命周期过程先来看看最新版本react的生命周期图：...
2019-09-06 16:56:12
539
转载 JS弹出新窗口被拦截的解决方法
在Web编程中，使用JS在新窗口打开页面的时候，会遇到被浏览器拦截的情况，那么，我们如何才能让JS打开新窗口不被浏览器阻止呢？一、问题一一般情况下，如果直接在js中调用window.open()函数去打开一个新窗口，浏览器会对弹出的窗口进行拦截，因为浏览器会把该窗口认为是弹出广告等用户不想得到的窗体1、解决方法把window.open()函数改为由用户主动点击...
2019-09-04 18:02:12
760
原创 React中key的作用+防抖节流+ Set Map
react 和 vue 为什么要设置key？key的作用主要是为了 虚拟DOM 在执行 diff算法 时更快的找到对应的节点，提高diff速度，高效的更新 Virtual DOM;key值采用index和id的区别？const list 1 = [ { id: 1, name; 'test1' }, { id: 2, name; 'test2' }, { id: 3, nam...
2019-09-03 14:48:00
227
原创 -webkit-overflow-scrolling:touch; ios橡皮筋效果卡屏，滚动穿透
MDN中概述 入下-webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果.值选项1、auto使用普通滚动, 当手指从触摸屏上移开，滚动会立即停止2、touch使用具有回弹效果的滚动, 当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。问题 B...
2019-08-22 10:51:42
347
原创 npm install 安装依赖报错errno: -4048,
作为前端攻城狮，和npm打交道肯定是少不了的，经常利用npm下载各种依赖，题主就经常遇到这个报错F:\demo\webpack_study\webpack4.0>npm install webpack -Dnpm ERR! path F:\demo\webpack_study\webpack4.0\node_modules\fsevents\node_modules\getpass\no...
2019-08-16 16:42:10
1842
原创 webpack 配置全局样式（自定义的，vue-cli2/3）
应用场景当我们在scss样式文件中想使用其他已经声明好的scss变量文件，通常会这么做：// style.scss@import "variables.scss";body { color: $theme-color;}随着项目越来越大，每个样式文件都需要用到全局定义好的变量，这时就变得非常的笨重，弊端就暴露出来了。下面来看看怎么去解决这个问题安装sass-resouces-...
2019-08-16 10:00:21
2107
原创 移动端html font-size动态计算设置
设计稿以750px为宽度，其中有个元素是100px，如何设置font-size，使同一段代码在不同的设备上保持一致？设计稿宽度设备宽度html font-size元素宽度css代码750px320px(iphone5)?100px1rem750px375px(iphone6/7\iphoneX)50px100px1rem750px414px...
2019-08-15 16:10:01
1688
原创 create-react-app /typescrtpt 配置路径别名
alias配置首先在paths.js写好路径，如下module.exports = { dotenv: resolveApp('.env'), appPath: resolveApp('.'), appBuild: resolveApp('build'), appPublic: resolveApp('public'), appHtml: resolveApp('publi...
2019-08-14 15:01:20
1742
原创 webpack 如何优雅的使用tree-shaking
1.什么是tree-shakingwebpack 2 的到来带来的最棒的新特性之一就是tree-shaking 。tree-shaking源自于rollup.js，先如今，webpack 2也有类似的做法。webpack 里的tree-shaking的到来不得不归功于es6规范的模块。为什么这么说，如今的前端模块规范很多，比较出流行的比如commonJS , AMD , es6 ，我简单的说一...
2019-08-14 11:57:51
1033
转载 SignalR的Javascript客户端API使用方式整理
[原创地址](https://www.cnblogs.com/shenba/p/5416328.html) SignalR的Javascript客户端API使用方式整理 SignalR的服务端提供了两种实现方式，分别是PersistentConnection和Hub，这两种方式的侧重点不同：PersistentConnection更接近于底层，编程接...
2019-08-12 15:31:45
264
原创 初识TypeScript学习笔记
原始数据类型布尔值布尔值是最基础的数据类型，在 TypeScript 中，使用 boolean 定义布尔值类型：let isDone: boolean = false;// 编译通过// 后面约定，未强调编译错误的代码片段，默认为编译通过数值let decLiteral: number = 6;let hexLiteral: number = 0xf00d;// ES6 中的...
2019-08-12 14:53:48
548
转载 redux 和 mobX对比
以下内容会严格遵循下面三个观点这部分的每一个小块都是为了吹二者之一要怎么黑另外一个才能更好的达到吹的效果要吹得有理有据，黑得不带痕迹为什么这两个库可以被用来对比目的一致都是状态管理库，用来管理应用的内部状态受众大体一致一般都会被用到react中，虽然说这并不是必须的，你当然也可以用到vue或者angular里，但是，大多数情况下，都不会这么做可相互替代...
2019-08-09 15:10:36
285
原创 Service Worker 从入门到进阶
背景有一个困扰 web 用户多年的难题——丢失网络连接。即使是世界上最好的 web app，如果下载不了它，也是非常糟糕的体验。Service Worker 可以使你的应用先访问本地缓存资源，所以在离线状态时，在没有通过网络接收到更多的数据前，仍可以提供基本的功能（一般称之为 Offline First）。这是原生APP 本来就支持的功能，这也是相比于 web app，原生 app 更受青睐的...
2019-08-08 15:40:02
1120
原创 js中in操作符
in 操作符用来判断属性是否存在与对象中。使用 in 操作符分单独使用和在 for-in 循环中使用。在单独使用时， in 操作符会在通过对象能够访问给定属性时返回 true ，无论该属性存在于实例中还是原型中<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> ...
2019-08-03 18:45:31
885
原创 babel 7 的使用的个人理解
最近看了很多关于babel的使用方法，大部分在一些点上都没有说明白，同时给出的代码也很难再现，为了能够理解和防止以后自己遗忘，特写此文。首先我们要明白babel存在的意义，babel的目的就是为了解决浏览器的自身对于es语言的差异性而带来的一款工具，有了babel就首先不用担心浏览器不支持es语言这件事（当然现在的浏览器尤其是chrome对es6的支持越来越好），其实最重要的不是支持，而是解决差...
2019-07-17 14:15:02
452
原创 nodejs + express或KOA 使用babel 和 nodemon 进行项目开发以及发布
以前node中不管用什么框架，每次修改代码之后，都需要重新npm start 才能看到改动的效果，非常麻烦，所以这里引入nodemon模块，实现了不用重启也能自动更新这样的好处1.全局安装nodemonnpm install -g nodemon或者安装到本地npm install nodemon --save2.在项目目录下创建 nodemon.json 文件{ "res...
2019-07-16 19:52:44
836
原创 总结一下前端优化方案（持续更新）
1、编译到 ES2015+把 ES2015+ 的代码编译成 ES5，体积会增大好几倍，运行速率也会减慢。在当下2018年，大部分现代浏览器已经支持 ES6 语法。我们要做的，就是把代码编译到 ES2015+，然后给少数的老旧浏览器留一份 ES5 的代码即可。具体的做法就是使用 支持这个标签的浏览器必然支持 async/await, Promise, Class, 箭头函数, Map/Set, ...
2019-07-16 14:11:20
327
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人