- 博客(30)
- 收藏
- 关注
RSS订阅转载 Webpack知识点
介绍下 webpack 热更新原理，是如何做到在不刷新浏览器的前提下更新页面当修改了一个或多个文件 文件系统接收更改并通知webpack webpack重新编译构建一个或多个模块，并通知HMR服务器进行更新 HMR Server 使用webSocket通知HMR runtime 需要更新，HMR运行时通过HTTP请求更新jsonp HMR运行时替换更新中的模块，如果确定这些模块无法更新...
2019-12-24 09:52:41
358
转载 service worker的基本知识
Service Worker是什么service worker 是独立于当前页面的一段运行在浏览器后台进程里的脚本。它的特性将包括推送消息,背景后台同步， geofencing（地理围栏定位），拦截和处理网络请求。这个 API 会让人兴奋的原因是，它可以使你的应用先访问本地缓存资源，所以在离线状态时，在没有通过网络接收到更多的数据前，仍可以提供基本的功能（一般称之为 Offline Fir...
2019-12-23 20:51:36
1131
转载 useTypescript-React Hooks和TypeScript完全指南
引言React v16.8 引入了 Hooks，它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。这些功能可以在应用程序中的各个组件之间使用，从而易于共享逻辑。Hook 令人兴奋并迅速被采用，React 团队甚至想象它们最终将替换类组件。以前在 React 中，共享逻辑的方法是通过高阶组件和 props 渲染。Hooks 提供了一种更简单方便的方法来重...
2019-12-23 09:29:00
1843
转载 掘金站内 webpack 优秀文章汇总
本文使用 juejin-spider 生成???? 点赞数，???? 标签(1)[???? 2667][???? JavaScript][腾讯IVWEB团队] webpack详解 (2)[???? 2196][???? CSS][chenhongdong] webpack4-用之初体验，一起敲它十一遍 (3)[???? 1726][???? 前端][尼古拉斯李三] 妈妈再也不用担心我不会webpack了 (4)[???? 1705][????...
2019-12-22 12:56:44
4770
转载 react hooks 的useCallback hell问题总结
很早总结的hooks的问题文章，内部讨论一直没想到啥最优解，发出来看看有没有人有更好的解法最近rxjs作者ben lesh发了条推https://twitter.com/benlesh/status/1195504467707355136?s=21如此推所示，useCallback问题非常严重，社区也讨论了很多做法，但仍然有很多问题。useCallback问题缘由先回顾下hook之...
2019-12-21 11:24:42
2561
转载 20行代码实现redux，50行代码实现react-redux
redux的简陋版实现简单实现了下redux，帮助理解redux的原理：// 维持应用的 state// 提供 getState() 方法获取 state// 提供 dispatch(action) 方法更新 state// 通过 subscribe(listener) 注册监听器// 通过 subscribe(listener) 返回的函数注销监听器// createStor...
2019-12-21 08:36:10
200
转载 从ES6到ES10的新特性
介绍ECMAScript是一种由Ecma国际（前身为欧洲计算机制造商协会）在标准ECMA-262中定义的脚本语言规范。这种语言在万维网上应用广泛，它往往被称为JavaScript或JScript，但实际上后两者是ECMA-262标准的实现和扩展。历史版本至发稿日为止有九个ECMA-262版本发表。其历史版本如下：1997年6月：第一版 1998年6月：修改格式，使其与ISO/IE...
2019-12-20 10:19:49
614
转载 前端测试框架Jest系列教程 -- Expect（验证）
写在前面 在编写测试时，我们通常需要检查值是否满足某些条件，Jest中提供的expect允许你访问很多“Matchers”，这些“匹配器”允许您验证不同的东西。Expect 可以验证什么Jest中提供了如下的验证方法： 1 2 3 4 5 6 7 8 9 10 11 12 1...
2019-12-18 20:03:40
2163
转载 前端测试框架Jest系列教程 -- Matchers（匹配器）
写在前面： 匹配器（Matchers）是Jest中非常重要的一个概念，它可以提供很多种方式来让你去验证你所测试的返回值，本文重点介绍几种常用的Matcher，其他的可以通过官网api文档查看。常用的匹配方式：第一种：相等匹配，这是我们最常用的匹配规则 test('two plus two is four', () => { expect(2 + 2).toBe(4)...
2019-12-18 19:52:29
971
转载 charles使用教程
https://www.cnblogs.com/mawenqiangios/p/8270238.htmlcharles使用教程将 Charles 设置成系统代理 Charles 主界面介绍 过滤网络请求 截取 iPhone 上的网络封包 截取 Https 通讯信息 模拟慢速网络 修改网络请求内容 给服务器做压力测试 修改服务器返回内容 总结 简介 Charle...
2019-12-18 19:45:32
258
原创 学习Jest——语法篇
使用匹配器使用不同匹配器可以测试输入输出的值是否符合预期。下面介绍一些常见的匹配器。普通匹配器最简单的测试值的方法就是看是否精确匹配。首先是toBe()test('two plus two is four', () => { expect(2 + 2).toBe(4);});toBe用的是JavaScript中的Object.is()，属于ES6中的特性，...
2019-12-18 19:11:31
2051
转载 Jest 断言归纳
Jest 实在是很方便，上手简单，几乎零配置。记录一下学习 Jest matchers。附上大部分说明及示例。普通匹配器toBe - toBe 使用 Object.is 来测试是否完全相等 .not - 用来测试相反的用例 .toEqual - 如果你想检查某个对象的值，请改用 toEqual。toBe最简单的测试值的方法是看是否精确匹配。test('two plus tw...
2019-12-18 19:10:59
1380
转载 Jest测试框架入门
近年来，随着前端工程化的发展，前端发生了翻天覆地的变化。jQuery已经慢慢淡出了我们的视野，React、Vue和anglur三驾马车急速驶来。从此，前端进入了数据驱动的时代，也有了清晰的模块化开发的方式。随之而来的就是如何去保证自己的代码的正确性。为什么需要前端自动化测试为什么我自己写的代码我还要去写测试代码去测试它？就这么不信任自己吗？答案：是的。永远不要相信自己写的代码，不然咋还会有...
2019-12-18 11:16:35
397
转载 vue更新路由router-view复用组件内容不刷新
本文知识点比较简单，主要面向vue新人解惑，vue前辈请忽略。实现功能：见上图，这是一个产品列表，当进入不同列表时应该更新内容。代码如下：//router配置{ path: "/products/:category", name: "Products", components: { ... } ...
2019-12-16 09:19:20
603
转载 前端面试必备-40道LeetCode经典面试算法题
2019年马上就要结束了，相信很多童鞋都开始蠢蠢欲动了，寻找新的机会了，但是工作太忙没有时间刷算法题，面试的时候好心虚。这里双手奉上40道LeetCode上经典面试算法题，整理的内容有点长，建议先收藏，慢慢消化，在来年顺利拿到满意的offer。内容较多，整理不易，希望大家关注公众号【前端】，更多优质前端原创好文。[LeetCode] 两数之和给定一个整数数组和一个目标值，找出数组中和为...
2019-12-15 15:26:15
5168
转载 leetcode算法练习 JavaScript实现
leetcode表格内容由spider.js从leetcode-cn.com爬取。已做题目答案也从leetcode-cn.com中爬取并生成文件。解题进度:已解决 140/637 - 简单 94 中等 40 困难 6表格序号 题名 通过率 难度 答案 状态1 两数之和 46.1% 简单 JavaScript √2 两数...
2019-12-15 15:23:56
572
转载 Vue经典开源项目汇总
Vue.js（读音 /vjuː/, 类似于 view）是一套用于构建用户界面的渐进式框架，主要用于快速的构建前端界面，与其它大型的前端框架不同，Vue被设计为可以自底向上逐层应用。相比Angular.js来说，Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合，是初创项目的前端首选框架。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue也完全能够为复杂的单页应...
2019-12-15 15:12:54
754
转载 Koa.js 设计模式-学习笔记
前言之前写过一本《Koa2进阶学习笔记》作为Koa的入门教程。很多知识点都是一笔带过，没有深入的讲解。这一本书是通过Koa.js的常用中间件实现原理，举一反三来讲解一些Node.js在Web开发过程中的原理和设计模式。Koa.js 是一个极其精简的Web框架，只提供一下两种功能：HTTP服务 处理HTTP请求request 处理HTTP响应response 中间件容器...
2019-12-15 14:24:24
200
转载 《Koa2进阶学习笔记》已完结
附加gitbook快速阅读地址https://chenshenhai.github.io/koa2-note/目录1. koa2开始 1.1 快速开始 1.2 async/await使用 1.3 koa2简析结构 1.4 koa中间件开发与使用 2. 路由 2.1 原生koa2实现路由 2.2 koa-router中间件 3. 请求数据获取 3.1 ...
2019-12-15 14:23:28
203
转载 常见的跨域解决方案(全)
什么是跨域？跨域是指一个域下的文档或脚本试图去请求另一个域下的资源，这里跨域是广义的。广义的跨域：资源跳转： A链接、重定向、表单提交 资源嵌入： link、script、img、frame等dom标签，还有样式中background:url()、@font-face()等文件外链 脚本请求： js发起的ajax请求、dom和js对象的跨域操作等其实我们通常所说的跨域是狭义的，是...
2019-12-15 11:41:12
382
转载 React 16 加载性能优化指南
关于 React 应用加载的优化，其实网上类似的文章已经有太多太多了，随便一搜就是一堆，已经成为了一个老生常谈的问题。但随着 React 16 和 Webpack 4.0 的发布，很多过去的优化手段其实都或多或少有些“过时”了，而正好最近一段时间，公司的新项目迁移到了 React 16 和 Webpack 4.0，做了很多这方面的优化，所以就写一篇文章来总结一下。零、基础概念我们先要明...
2019-12-13 19:00:38
282
原创 一起来学点redux-saga
1.概述Redux-saga是一个用于管理 Redux 应用异步操作的中间件（又称异步action）本质都是为了解决异步action的问题Redux Saga可以理解为一个和系统交互的常驻进程，这个线程可以通过正常的Redux Action从主应用程序启动，暂停和取消，它能访问完整的Redux state，也可以dispatch Redux Action。 一个 Saga 就像是应用程序中一...
2019-12-13 11:29:08
307
1
原创 带你了解redux和react-redux
1.为什么要用Redux随着单页应用变得越来越复杂，前端代码需要管理各种各样的状态，它可以是服务器的响应，也可能是前端界面的状态。当这个状态变得任意可变，那么你就可能在某个时间点失去对整个应用状态的控制。Redux 就是为了解决这个问题而诞生的。简短地说，Redux 为整个应用创建并管理一棵状态树，并通过限制更新发生的时间和方式，而使得整个应用状态的变化变得可以被预测。除此之外，Red...
2019-12-13 11:27:19
616
1
转载 利用webpack4搭建vue服务器端渲染SSR
阅读前为什么使用服务器渲染? ?官方解释 应该对VueSSR指南简单了解?官方文档 应该对webpack简单了解?官方文档 Node.js框架Koa简单了解?官方文档正文构建服务器端渲染(SSR)我们可以利用vue-server-renderer 插件更简单的构建SSR。官方的一段代码：// 第 1 步：创建一个 Vue 实例const Vue = require('vue...
2019-12-13 11:25:07
3842
转载 React Hook watch功能
react 生命周期函数变更react v16.3 版本的发布，生命周期函数的变动去掉了以下三个componentWillMount componentWillReceiveProps componentWillUpdate同时为了弥补失去上面三个周期的不足又加了两个static getDerivedStateFromProps getSnapshotBeforeUpdate...
2019-12-13 09:14:26
2271
转载 webpack的面试题总结
为什么要总结webpack相关的面试题随着现代前端开发的复杂度和规模越来越庞大，已经不能抛开工程化来独立开发了，如react的jsx代码必须编译后才能在浏览器中使用；又如sass和less的代码浏览器也是不支持的。 而如果摒弃了这些开发框架，那么开发的效率将大幅下降。在众多前端工程化工具中，webpack脱颖而出成为了当今最流行的前端构建工具。 然而大多数的使用者都只是单纯的会使用，而并不知道...
2019-12-12 10:22:43
394
转载 通过试题理解JavaScript
题目分析 day1函数作用域 day2值类型和引用类型 day3如何将字符串转成驼峰命名 day4中的冒泡排序 day5数组的反转 day6数组去重 day71px物理像素的实现 day8多种方式让元素水平垂直居中 day9利用css实现三角形 day10如何做rem适配 day11js综合题 day12函数节流和防抖 da...
2019-12-10 19:34:09
376
原创 react 设置代理(proxy) 实现跨域请求
一，对于使用creat-react-app构建的项目，可以直接在package.json下配置，具体如下 1 "proxy":"http://api.xxxx.com" 或者如果创建多个域，该如何设置proxy,能满足可以调用不同域下的API的需求？代码如下 1 2 3 4 5 6 7 ...
2019-12-09 14:02:26
1504
转载 webpack4 中的 React 全家桶配置指南，实战！
最新React全家桶实战使用配置指南这篇文档 是我在听吕小明老师的课程，吕老师结合以往的项目经验 加上自己本身对react webpack redux理解写下的总结文档，总共耗时一周总结下来的，希望能对读者能够有收获， 我是在这基础多些加工，希望对你们有所收藏目录1.版本说明2.目录结构3.初始化项目4.webpack5.react6.配置loader(sas...
2019-12-06 10:03:47
625
转载 Taro原理总结
来自掘金小册笔记一、Taro 的安装与使用1.1 安装 $ npm install -g @tarojs/cli taro -V 1.2 使用使用命令创建模板项目 $ taro init myApp 1.2.1 微信小程序选择微信小程序模式，需要自行下载并打开微信开发者工具，然后选择项目根目录进行...
2019-12-04 17:51:04
6446
3
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人