qq_35534823-CSDN博客

原创 Vue源码窥探之依赖收集

派发更新主要是在我们修改响应式数据的时候可以得到通知。当修改响应式对象地数据时，会触发 setter ，里面有两个关键点，一个是 childOb = !shallow && observe(newVal)，如果 shallow 为 false 的情况下，会对新设置的值变成响应式对象；另一个是 dep.notify()，通知所有订阅者。class Dep { // ......

2019-09-24 17:45:25 280 1

我们之前了解到，Vue 的响应式对象过程，是对 props 和 data 依次执行 defineReactive 方法，那我们这里继续重温一下该方法的逻辑实现：defineReactive 方法内我们需要关注两点，一个是在开始先实例化一个 Dep ，另一个是 get 方法内部的一系列逻辑就是依赖收集的过程，最关键的是 dep.depend 。那说明整个依赖收集的过程都是和 Dep 息息相关的，...

2019-09-24 10:53:46 299

原创 Vue源码窥探之响应式对象

在 Vue 初始化阶段的时候，会执行 _init 方法，其中在 _init 方法中会执行 initState 方法。在 initState 方法中，我们会对 props ，methods ，data，computed，watch 进行初始化。在我们这篇文章中，主要分析的是 Vue 的数据的响应式，所以我们着重分析 props 和 data 。首先，我们来看一下 initProps 过程。i...

2019-09-20 15:35:40 294

原创 Vue源码窥探之new Vue之后发生了什么？

为了完整的了解整个机制，我们最好选择客户端 compile 的版本，也即 Runtime + Compiler 。在我们使用 Vue-Cli 初始化一个 Vue 项目的时候，会询问我们使用 Runtime Only 版本还是 Runtime + Compiler 版本。Runtime Only使用该版本时，我们需要借助 webpack 的 vue-loader 工具来把 .vue 文件编译...

2019-09-17 18:09:10 493

原创 jsonp的实现

jsonp的实现jsonp的特点：创建script 通过src来获取数据后台用FunctionName包裹数据调用前台设置的FunctionName方法/** * opts: * - param { String } (callback) * - prefix { String } (__jp) * - name { String } (prefix +...

2019-08-14 16:02:39 114

原创小程序的架构和原理

技术选型小程序在设计之初，首要目标就是快。一般来说，渲染界面的技术有三种：用纯客户端原生技术来渲染用纯 Web 技术来渲染Hybrid 技术而微信不可能用纯客户端技术把小程序放入微信中，这样小程序代码就会和微信一起打包，跟随微信一起发布版本。但是如果用纯 Web 技术来渲染又会造成性能问题，因为 UI 线程和 JS 线程是互斥的。考虑微信需要建立一个生态，所以需要对小程序进行管控，...

2019-08-02 00:28:38 19211

原创 Vue源码窥探之 watch

watch 的初始化是在 stateMixin 中进行的，在 instance/state 中export function initState (vm: Component) { ... if (opts.watch && opts.watch !== nativeWatch) { initWatch(vm, opts.watch) }}然后看一下 i...

2019-03-20 16:42:24 334

原创扶着你玩转webpack4——优化

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

2019-03-19 10:54:16 276

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

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

2019-03-15 13:55:00 340

原创 Vue源码窥探之 computed

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

2019-03-12 15:27:54 678

原创 Vue源码窥探之 nextTick 机制

MicroTask(微任务) 和 MacroTask(宏任务)在说 nextTick 之前，需要对 microTask ， macroTask 和 Event Loop 有一定了解。详见JavaScript的运行机制Event Loop（事件循环）， microTask 是把任务放在主线程的末尾，而 macroTask 是把任务放在 Task Queue 中，所以当我们执行完主线程的代码后，会先...

2019-03-11 15:01:45 460

原创 Nuxt.js 使用教程指北

Nuxt .js 是脱胎与 React 中的 SSR 方案 Next.js 的，基本使用方法都类似。1，破剑式：安装:yarn create nuxt-app <项目名>需要注意的是，这类 SSR 框架推崇约定大于配置，所以生成的项目目录结构是不能修改的，不过其实这个结构和我们平常使用的 Vue-cli 生成的目录结构是差不多的。2，破刀式：配置：Nuxt.js 默认...

2019-03-07 17:32:31 1784 1

原创如何实现 Virtual DOM 算法？

什么是 Virtual DOM ?Virtual DOM 就是对真实DOM的描述，换言之，只要能够正确、准确地对真实DOM的描述都可以称之为Virtual DOM。在 React 中，会把我们的 jsx 写的 HTML 通过 React.createElement 转化为 Virtual tree。形如：&amp;lt;h1 className='main'&amp;gt;Hello React&amp;lt;/h1...

2018-12-19 14:24:25 284

原创手动实现一个Promise

ES6中实现的Promise是 Promise/A+ 规范。首先，有三种状态：pending ，fulfilled， rejected。 const PENDING = 'PENDING' const FULFILLED = 'FULFILLED' const REJECTED = 'REJECTED' const isFunction = x =&gt; typ...

2018-11-26 14:50:46 756

原创扶着你玩转webpack4——Code Splitting

Code Splittingcode splitting 特性是在 webpack3 中实现的，实现的策略方案也有多种，比如我们在 vue 项目中，通过组件按需引用也可以实现代码切割。主要目的：为 Vendor 单独打包（Vendor 指第三方的库或者公共的基础组件，因为 Vendor 的变化比较少，单独打包利于缓存）为 Manifest （Webpack 的 Runtime 代码）单...

2018-07-22 22:13:16 892 1

原创 webpack4系列第四发

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

2018-07-16 16:32:26 1192

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

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

2018-07-15 19:32:14 589

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

代码压缩（HTML，CSS，JS）HTML代码的压缩，我们还是需要借助 htmlWebpackPlugin 。new HtmlWebpackPlugin({ filename: 'index.html', // 配置输出文件名和路径 template: 'src/index.html', // 配置文件模板 title: '陪你渡过漫长岁月', // title变量 mi...

2018-07-15 01:51:14 783

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

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

2018-07-13 17:04:37 632

原创 React——高阶组件(HOC)

What ？什么是HOCHOC（High Order Component）是 react 中对组件逻辑复用部分进行抽离的高级技术，但HOC并不是一个 React API 。它只是一种设计模式，类似于装饰器模式。具体而言，HOC就是一个函数，且该函数接受一个组件作为参数，并返回一个新组件。从结果论来说，HOC相当于 Vue 中的 mixins(混合) 。其实 React 之前的策略也...

2018-06-04 13:23:22 11793

原创 React——react-redux

因为自己是Vue开发者，所以会以Vuex的角度来看React的状态管理实现，这样可以帮助自己理解。毕竟两者都是参照Flux来分别实现的。之前写过一篇Vuex的分享 Vue中状态管理——Vuex说起 react-redux 就不得不先说 redux。Reduxredux 是一个数据设计架构，专注于状态管理，和 react 解耦单一状态，单向数据流redux 中有4个...

2018-04-24 12:25:03 4185

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

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

2018-03-21 20:40:49 980

原创 js中实现深浅拷贝

值类型和引用类型说起深浅拷贝，我觉得需要理清楚值类型和引用类型值类型所谓值类型就是 undefined，null，number， string ，boolean 等五种基本数据类型，应该还有一个Symbol类型。值类型的数据存储在栈内存中在值类型中修改值相当于重新在栈内存中开辟了一个新的存储空间，类似于：用代码来解释就是:var num1 = 5...

2018-03-16 13:52:43 246

原创手写call，apply，bind

call的实现先看下call的实例let person = { name: 'SpwaN'}function getName() { console.log(this.name)}getName.call(person) // SpwaNcall的特点： 1. 改变this指向 2. 直接调用函数 3. 传null的时候，指向window 4...

2018-03-14 15:50:35 294

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

这是小弟第一次翻译，虽自己理解了其精华，但无法精准表达，还望海涵。webpack 4对块图进行了一些重大改进，并增加了对 chunk 拆分的新优化（这是对 CommonsChunkPlugin 的一种改进）。让我们看看之前的块图存在的缺点。之前的块图通过父子关系连接到其他块，chunk 包含模块。当一个块有父母时，可以假定在加载时至少有一个父母已经加载了。这些信息可以被优化...

2018-02-28 23:25:32 19289

原创创天下项目总结

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

2018-02-25 17:12:09 257

原创性能优化——CSS和JS的加载和执行

浏览器的渲染机制HTML渲染过程的一些特点顺序执行，并发加载通过词法分析，通过HTML生成Token对象（当前节点的所有子节点生成后，才会通过next token获取到当前节点的兄弟节点），最终生成Dom Tree浏览器中可以支持并发请求，不同浏览器所支持的并发数量不同（以域名划分），以Chrome为例，并发上限为6个。优化点：把CDN资源分布在多个域名下是...

2018-02-23 18:49:43 4027

原创性能优化——webpack3 新增的Scope Hoisting

Scope Hoisting 可以让 Webpack 打包出来的代码文件更小、运行的更快，它又译作 “作用域提升”，是在 Webpack3 中新推出的功能。对比：util.jsexport default 'Hello,Webpack'main.jsimport str from './util.js';console.log(str);打包后：[...

2018-02-17 00:55:11 828

原创性能优化——Tree-shaking 的使用

Tree-shaking 字面意思就是摇晃树，其实就是去除那些引用的但却没有使用的代码。 Tree-shaking 概念最早由Rollup.js 提出，后来在webpack2中被引入进来，但是这个这一特性能够被支持得益于ES6 modules的静态特性。ES6的模块声明相比于传统CommonJS的同步require有着本质区别。这种modules设计保证了依赖关系是提前确定的，使得静态分析成...

2018-02-16 17:35:18 2552

原创 axios 使用心得

从刚开始接触 Vue 时，官方维护了一个 request 项目是 vue-resource ，后来推荐使用社区的 axios 来作为 request 工具。两者之间的区别：axios支持服务端（Node中自带的 request 包并不支持promise，通常需要使用bluebird来进行promise化），resource不支持服务端axios 功能更加丰富，支持 Intercept ...

2018-02-09 14:13:03 3486 1

原创零配置前端构建工具parcel 初探

前端圈内新工具层出不穷，不断提升各位FEer的开发效率和体验。前端工程构建方案从grunt -> glup ->webpack 不断地在改进。webpack有很多优点，如：code splitting，HRM，css module ， source map都是经常使用的，但功能强大，自由度高，导致代码的工程配置很多，往往超过500行以上，并且并不一定是最优的配置，所以 parcel 应运

2018-01-25 14:50:45 536

原创梦里Babel知多少（二）

Babel-preset-state-x看 vue-cli 生成的 babel 目录可以看到，在我们想使用一些新特性，且这些新特性并未正式发布时，需要安装 babel-preset-state-xTC39（ECMA规范的技术委员会）通常会采用5步来发布正式标准。babel-preset-state-0 刚有这个ideababel-preset-state-1 书面化出了一个提案babel-

2017-09-28 14:41:36 311

原创梦里Babel知多少（一）

平时开发中，经常需要用到ES6/ES7的语法。那么就需要用到Babel来对代码进行转码处理。之前用Vue比较多，所以以Vue-cli作为参考来分析。第一张图是几个月前的Vue-cli生成的第二个图是今天使用Vue-cli生成的Babel-core顾名思义，这是 babel 的核心代码，但是在我们构建的时候不会直接调用 babel-core 。它是一个标准库，通常服务于各种 polyfil

2017-09-27 17:35:28 612

原创 Koa2 学习笔记（第五天）

Koa2的模板引擎使用现在主流的模板引擎为ejs，jade，nunjucks等。这里采用了ejs，因为比较符合前端HTML语法，不破坏结构。另外和express不同的是，Koa2还需要引中间件来支持模板的使用cnpm i ejs koa-views -Sconst Koa = require('koa')const app = new Koa()const path = require('pat

2017-08-26 01:34:58 380

原创 TP5 + Vue.js 分页效果

在后端采用ThinkPHP5框架做数据查询。protected $hidden = [ 'img_id'];public function img(){ return $this->belongsTo('Image', 'img_id', 'id');}public static function getPage($page){ $result = self::with(

2017-08-25 22:35:47 4529 1

原创 Koa2 学习笔记（第四天）

静态资源加载利用中间件 koa-staticconst Koa = require('koa')const app = new Koa()const path = require('path')const static = require('koa-static')// 静态资源目录对于相对入口文件index.js的路径const staticPath = './static'app.use

2017-08-23 01:47:52 518

原创 Koa2 学习笔记（第三天）

请求参数的获取GET首先我们需要知道的是，在Koa2中，提供了一个 content （上下文）对象，里面封装了Koa2的 request 和 response 以及原生Node的 req （Node的request）和 res （Node的response）另外一点是 ctx 可以直接使用 request 和 response 的属性（通过中间件得到的挂在request 和 response

2017-08-22 00:44:45 3798

原创 Koa2 学习笔记（第二天）

因为之前没涉及到后端知识，另外Node.js的资料确实比较少，并且解决方案比较多，express，koa，koa2，think，egg等等。由于公司使用PHP的缘故，所以从PHP切入到后端，学会了ThinkPHP5，所以以此为跳板来学习Koa2。今天主要是学习使用Koa2的路由中间件koa-router，我看阮一峰老师推出的教程用的是koa-route，我比较了下，koa-route的用法简单

2017-08-21 00:41:18 1821

原创 ThinkPHP5的数据库和模型用法

1，TP5的数据库架构Db: 是TP5操作数据库的入口类。它的作用是为连接数据库做准备，我们只需要在database.php里填写相应的配置即可。Connection: 是TP5的连接器类，因为TP5支持四种数据库（Mysql，Pgsql，Sqlite，Sqlsrv），所以TP5封装了一个类来提供统一的调用接口来支持我们连接数据库（这里的连接是惰性连接，只有在执行SQL的时候才会真正连接）。Que

2017-08-09 15:11:15 23094

原创 10分钟学会文件上传

文件上传的核心就是 FileUpload 对象。在HTML文档中 <input type='file'> 每出现一次，一个FileUpload对象就会被创建。该对象包含的 value 属性保存了用户上传的文件名，并且该值是只读的，不可以被前端所修改的，当用户上传一个文件时，会触发 onchange 事件，可以以此当作钩子来操作。在开始的时候，大家写文件上传功能的时候，会采用这种方法:

2017-07-25 15:56:27 696 1

空空如也

空空如也