假面猫的博客

记录前端学习历程

Vue源码窥探之 watch(练习在小程序中实现watch功能)

watch 的初始化是在 stateMixin 中进行的,在 instance/state 中 export function initState (vm: Component) { ... if (opts.watch && opts.watch !== ...

2019-03-20 16:42:24

阅读数 81

评论数 0

扶着你玩转webpack4——优化

本章以 vue-cli 2.x 生成的项目结构为例。 缩小文件搜索范围 Webpack 启动后会从配置的 Entry 出发,解析出文件中的导入语句,再递归的解析。 在遇到导入语句时 Webpack 会做两件事情: 根据导入语句去寻找对应的要导入的文件。例如 require(‘react’) 导...

2019-03-19 10:54:16

阅读数 66

评论数 0

扶着你玩转webpack4——图片等文件的处理

图片等文件的处理 因为 webpack 无法识别图片文件,所以我们需要一个针对于处理图片文件的 loader。 对于这个场景,我们需要使用 file-loader。 (之前说过 css-loader 会处理 url 的哦~) module: { rules: [ { test:...

2019-03-15 13:55:00

阅读数 93

评论数 0

Vue源码窥探之 computed

让我们先从一些面试题来窥探 computed 吧。 computed和 watch 的区别 ? computed 是自动监听依赖值的变化,可以监听多个依赖值,从而动态返回内容。 watch 是监听一个值或一个对象,然后当依赖发生变化的时候,可以执行回调函数或者异步操作等。 通常来说仅仅是需...

2019-03-12 15:27:54

阅读数 56

评论数 0

Vue源码窥探之 nextTick 机制

MicroTask(微任务) 和 MacroTask(宏任务) 在说 nextTick 之前,需要对 microTask , macroTask 和 Event Loop 有一定了解。详见JavaScript的运行机制Event Loop(事件循环), microTask 是把任务放在主线程的末尾...

2019-03-11 15:01:45

阅读数 69

评论数 0

Nuxt.js 使用教程指北

Nuxt .js 是脱胎与 React 中的 SSR 方案 Next.js 的,基本使用方法都类似。 1,破剑式: 安装: yarn create nuxt-app <项目名> 需要注意的是,这类 SSR 框架推崇约定大于配置,所以生成的项目目录结构...

2019-03-07 17:32:31

阅读数 62

评论数 0

如何实现 Virtual DOM 算法?

什么是 Virtual DOM ? Virtual DOM 就是对真实DOM的描述,换言之,只要能够正确、准确地对真实DOM的描述都可以称之为Virtual DOM。在 React 中,会把我们的 jsx 写的 HTML 通过 React.createElement 转化为 Virtual tre...

2018-12-19 14:24:25

阅读数 63

评论数 0

手动实现一个Promise

ES6中实现的Promise是 Promise/A+ 规范。 首先,有三种状态:pending ,fulfilled, rejected。 const PENDING = 'PENDING' const FULFILLED = 'FULFILLED' const REJEC...

2018-11-26 14:50:46

阅读数 124

评论数 0

扶着你玩转webpack4——Code Splitting

Code Splitting code splitting 特性是在 webpack3 中实现的,实现的策略方案也有多种,比如我们在 vue 项目中,通过组件按需引用也可以实现代码切割。主要目的: 为 Vendor 单独打包(Vendor 指第三方的库或者公共的基础组件,因为 Vendor ...

2018-07-22 22:13:16

阅读数 552

评论数 0

webpack4系列第四发

HMR 和 Tree Shaking HMR(热模块替换) 在 webpack4 中的 HMR 配置及其简单,如下所示即可 : const webpack = require('webpack') module.exports = { plugins: [ new web...

2018-07-16 16:32:26

阅读数 825

评论数 0

扶着你玩转webpack4——js的处理

ES6+ 和 图片 在项目中的使用 ES6+的转码 如果想使用ES6+ 语法,那可以使用 babel-loader 和 babel-preset-env 。 如果想进一步了解关于 babel 的信息,请看这两篇文章。 梦里babel知多少(一) 梦里babel知多少(二) w...

2018-07-15 19:32:14

阅读数 428

评论数 0

扶着你玩转webpack4——代码压缩

代码压缩 (HTML,CSS,JS) HTML代码的压缩,我们还是需要借助 htmlWebpackPlugin 。 new HtmlWebpackPlugin({ filename: 'index.html', // 配置输出文件名和路径 template: 'src/index.ht...

2018-07-15 01:51:14

阅读数 201

评论数 0

扶着你玩转webpack4——基础配置

webpack4的改动其实挺大,但破坏性更新不算太多,称得上破坏性更新的恐怕只有 CommonChunkPlugin 的移除了。 和 webpack2 或者 webpack3 一样,你将很容易写出这样的配置。 const path = require('path') const Htm...

2018-07-13 17:04:37

阅读数 366

评论数 0

React——高阶组件(HOC)

What ?什么是HOC HOC(High Order Component) 是 react 中对组件逻辑复用部分进行抽离的高级技术,但HOC并不是一个 React API 。 它只是一种设计模式,类似于装饰器模式。 具体而言,HOC就是一个函数,且该函数接受一个组件作为参数,并返回一个新组件...

2018-06-04 13:23:22

阅读数 1569

评论数 0

React——react-redux

因为自己是Vue开发者,所以会以Vuex的角度来看React的状态管理实现,这样可以帮助自己理解。毕竟两者都是参照Flux来分别实现的。之前写过一篇Vuex的分享 Vue中状态管理——Vuex 说起 react-redux 就不得不先说 redux。 Redux redux 是...

2018-04-24 12:25:03

阅读数 3299

评论数 0

性能优化——浏览器的缓存策略

为什么需要建立缓存策略 缓存对于web应用有着重要作用,通常我们需要对静态资源进行缓存。 缓存通常分为三种: 服务器端缓存,CDN缓存,浏览器端缓存。 其中浏览器端的缓存不会发起HTTP请求,所以耗时最短。在大型应用或者资源比较多的情况下,合理的缓存的策略能大大提高页面的加载速度,和降低带宽成...

2018-03-21 20:40:49

阅读数 386

评论数 0

js中实现深浅拷贝

值类型和引用类型 说起深浅拷贝,我觉得需要理清楚 值类型 和 引用类型 值类型 所谓 值类型 就是 undefined,null,number, string ,boolean 等五种基本数据类型, 应该还有一个Symbol类型。 值类型的数据存储在栈内存中 在 值类型 中修改值相当...

2018-03-16 13:52:43

阅读数 139

评论数 0

call,apply,bind,jsonp的实现

call的实现 先看下call的实例 let person = { name: 'SpwaN' } function getName() { console.log(this.name) } getName.call(person) // SpwaN call的特点: ...

2018-03-14 15:50:35

阅读数 79

评论数 0

webpack4: 代码分割CommonChunkPlugin的寿终正寝

这是小弟第一次翻译,虽自己理解了其精华,但无法精准表达,还望海涵。 webpack 4对块图进行了一些重大改进,并增加了对 chunk 拆分的新优化(这是对 CommonsChunkPlugin 的一种改进)。 让我们看看之前的块图存在的缺点。 之前的块图通过父子关系连接到其他块,c...

2018-02-28 23:25:32

阅读数 15035

评论数 0

创天下项目总结

路由模块 1, router这块只是单纯使用了的框架推荐的异步加载组件,并没有深入研究webpack的懒加载原理。 2, 在 /my 组件的设计上存在瑕疵,之前总是怀疑自己的用法错误,直到接触了React之后,才明白嵌套路由中的子路由是和父路由一起展示的。那说明用法是没有错。只是设计上有待商榷...

2018-02-25 17:12:09

阅读数 163

评论数 0

提示
确定要删除当前文章?
取消 删除
关闭
关闭