- 博客(33)
- 收藏
- 关注
RSS订阅原创 今天不学习，明天变垃圾？
写在前面我一直对自己的能力都不抱有太大的认同感，也从未想过说看完一个别人写的源码之类的。但每天工作看看之前写的代码就又会觉得，这是什么沙雕操作？可一提到重构我就又开始不知所措，感觉没有可下手的余地。我记得我是五月底参加了拉勾教育的前端高薪训练营，虽然对于跳不跳槽没什么渴望，纯粹只是为了眼界、思想、能力的提升，但也确实并没有抱有太大的希望仅通过一个课程就可以从一个平庸的CV成为一个Coder。6月27号，我第一次将 Vue 的整个流程理通顺，并且写成了文章——一口气看完Vue源码。之后到现在又开始尝试
2021-09-10 02:18:28
305
1
原创 详解Vue的Diff算法
写在前面看到这个标题是不是有点激动？终于轮到这个哥中哥出场了。众所周知，Vue 的 Diff算法 灵感来源于 snabbdom，snabbdom 这个单词来源于瑞典语，意思为速度。这说明了两个问题，1.作者是个瑞典籍人；2.作者对自己的这个项目很有信心。好，接下来我们即将走入这个算法内部，探索怎么快，和 Vue 做了哪些改进。我们先来想一下，snabbdom 中是运用 patch / h 来进行 虚拟DOM 的比对和生成的，那么 Vue 中怎么做才能使用类似的写法达到效果呢？当然，你可以使用 vm
2021-09-09 18:03:16
405
原创 粗解Vue的模板编译
写在前面Vue 模板编译的入口在哪儿？从创建实例到模板编译前Vue都做了些什么？ 一文中的 步骤 - 5 揭示了答案 —— vm.$mount(vm.$options.el)。如果你不记得 vm 的身上什么时候挂载了 $mount 方法的话，Vue构造函数的创建过程 一文中 platforms/web/runtime/index.js 这一节会给你答案。$mount 方法并不是挂载在 vm 上，其实是在 Vue构造函数 上的。但是通过文件路径可知，这个方法属于平台集成的，因此有两种甚至更多的 $moun
2021-09-09 17:59:12
210
原创 从创建实例到模板编译前Vue都做了些什么？
写在前面Vue构造函数的创建过程 一文中介绍了 Vue构造函数 的创建过程，其中第一个对 Vue构造函数 进行成员添加的就是 initMixin(Vue)，该调用内创建了 _init 方法。可以说，Vue实例 的大门就是 _init 方法，因此，我们从这个方法入手，一步一步剖析 vm 是如何生成的。/*<div id="app"> <div> <h1>{{msg}}</h1> <div id="extendUse"><
2021-09-09 17:56:46
330
原创 详解Vue.component和Vue.extend
写在前面众所周知，Vue 的灵魂在于: 数据驱动视图 + 组件化，本篇将为大家讲解 Vue组件 的创建，还有与其息息相关的 Vue.extend 方法。core/global-api/assets.js在这个文件中定义了 Vue.component 方法，我修改了部分源码便于理解，但准确度不变:Vue.component = function(id, definition) { if (!definition) { return this.options.components[id]
2021-09-09 17:55:13
1808
原创 详解Vue构造函数的创建过程
写在前面上一篇文章 《一口气看完Vue源码》 中对大体流程做了个分析，但由于过程太过冗长导致文件零散，所以可能还不了解 Vue构造函数 中的某些值是哪儿来的。这一章节主要讲的是 Vue构造函数 的创建，会从生成到添加属性完毕的顺序依次介绍每个文件中对 Vue构造函数 的操作。core/instance/index.js创建 Vue 的构造函数Vue = {}core/instance/init.js给 Vue 的原型上添加 _init 方法Vue = { prototype: {
2021-09-09 17:53:48
1419
原创 前端知识点——原型
写在前面之前看到过一个问题，大概意思是“如何创建一个纯净的对象”，看到这道题以后我有点懵，JavaScript 中不是万物皆对象？无论什么类型都可以是继承自 Object，也就是说拥有 Object 构造函数原型上的方法。怎么还有纯净对象一说？后来了解了一下 Object 构造函数原型上的 API 才知道，原来有一个 Object.create(null) 方法可以初始化一个没有原型的对象。之后还有看到一个问题，说“原型的终点是什么？”好家伙，拉夫德鲁？最后了解了以后才终于知道，原来是 null。
2021-09-09 16:36:55
839
原创 EventLoop 事件循环机制
Created with Raphaël 2.3.0消息队列队首任务出队列压栈同步任务执行弹栈主线程任务执行完毕微任务微任务队列定时器任务定时器触发线程HTTP异步任务HTTP异步线程yesnoyesyesnoyesnoyes
2021-09-05 00:26:48
114
原创 二更详解函数式编程
写在前面是不是还在日复一日地面向百度、面向谷歌、面向过程？是不是也曾想过在平常业务中尝试使用各种设计模式？晚上想想千条路，早上起来走原路。我一直都在鄙夷过去写的代码，想着重构却又不敢下手，不少祖传代码写成了连我自己都怕的样子，甚至于牵一发而动全身的片段不在少数。每每看到这些代码我就在想，如何才能优雅一点、再优雅一点。上一篇文章 《一口气看完Vue源码》 中我提到过几次高阶函数，其本质就是在内部又返回了一个函数的函数，我们可以将这种做法看作是函数是一等公民的特征。Vue3 使用 Composition
2021-08-30 06:09:52
110
原创 前端知识点——一口气看完Vue源码
写在前面因为拉勾教育大前端高薪训练营的关系开始接触到 Vue 的源码。回想这三年半的前端生涯中只有最近的几个月代码中才会有让我真的去查看源码的场景。比如使用 uni-app 开发组件时会想到去看看 ElementUI 中是怎么实现的。比如使用 EggJS 做文件上传下载时苦于文档写的不够清晰，会想到去看看 egg-multipart 是怎么实现的。但对于 Vue 的原理认识还一直还停留在 Object.defineProperty 响应式处理 和 document.createDocumentFr
2021-06-27 22:46:12
335
1
原创 前端知识点——Vue的响应式原理
写在前面笔记内容大多出自于拉勾教育大前端高薪训练营的教程，因此也许会和其他文章雷同较多，请担待。new Vue(options)optionsel -> 一般是一个 id，也可以是一段htmldata -> 响应式数据lifecycle -> 生命周期computed -> 计算属性watch -> 监听器data将 data 中的数据绑定到 Vue 实例身上，这样可以通过 this 来进行访问(因为是对象的缘故，所以其后对 data 的响应式操作同样
2021-06-15 16:02:53
131
原创 前端知识点——VueRouter
写在前面笔记内容大多出自于拉勾教育大前端高薪训练营的教程，因此也许会和其他文章雷同较多，请担待。hash <------> historyhash 兼容性好，但是链接有#history 链接美观，没有多余的符号等，但只能 IE10 以后使用，因为其利用了 H5 的 historyAPI。而且需要配置服务器参数，例如 Nginx 需要在 location / {} 中加入 try_files $uri $uri/ /index.html;hash将/#/后的内容作为路径地址，可以
2021-06-13 21:19:56
240
3
原创 前端知识点——手写简单Webpack
写在前面笔记内容大多出自于拉勾教育大前端高薪训练营的教程，因此也许会和其他文章雷同较多，请担待。webpack打包后的文件就是一个自调用函数，当前函数调用时传入一个对象这个对象我们为了方便将之称为是模块定义，他就是一个键值对这个键名就是当前被加载模块的文件名和某个目录的拼接这个键值就是一个函数，和node.js里的模块加载有一些类似，会将被加载模块中的内容包裹于一个函数中这个函数在将来某个时间点上会被调用，同时接收一定的参数，利用这些参数就可以实现模块的加载操作默认commonJS规范两
2021-06-12 17:25:42
193
原创 前端知识点——ES Module
写在前面笔记内容大多出自于拉勾教育大前端高薪训练营的教程，因此也许会和其他文章雷同较多，请担待。ES Module基本特性使用type="module"就可以使用ES Module的标准执行其中的JS代码了自动采用严格模式，忽略use strict每个模块都是一个单独作用域访问的地址必须是配置了CORS会自动延迟执行脚本，当页面渲染完才会去执行脚本，这样就不会阻塞页面的加载了<!-- 使用type="module"就可以使用ES Module的标准执行其中的JS代码了 -----
2021-06-11 00:11:40
462
原创 前端知识点——Gulp
写在前面笔记内容大多出自于拉勾教育大前端高薪训练营的教程，因此也许会和其他文章雷同较多，请担待。认识gulp的任务// gulp入口文件exports.foo = done => { // yarn gulp foo console.log('gulp working foo') done() // 表示任务完成}exports.default = done => { // yarn gulp console.log('gulp working default')
2021-06-11 00:07:35
410
原创 前端知识点——搭建脚手架
写在前面笔记内容大多出自于拉勾教育大前端高薪训练营的教程，因此也许会和其他文章雷同较多，请担待。Yeoman$ npm i yo -g / $ yarn global add yo$ npm i generator-node -g / $ yarn global add generator-node // 基于node的开发脚手架，具体开发脚手架可以去https://yeoman.io/generators/查询$ mkdir my-module$ yo node// tip about Su
2021-06-11 00:02:14
126
原创 前端知识点——ES6(ECMA 2015)
写在前面笔记内容大多出自于拉勾教育大前端高薪训练营的教程，因此也许会和其他文章雷同较多，请担待。let const没有变量提升const常量，readonly，索引不变的前提下可以修改内部值for(let i = 0; i < 3; i++) { for(let i = 0; i < 3; i++) { //这里虽然有两次定义i，但是因为是i，所以作用域不同，不冲突。 console.log(i) // 0 1 2 0 1 2 0 1 2 }}解构
2021-06-11 00:00:36
179
原创 前端知识点——性能优化
写在前面笔记内容大多出自于拉勾教育大前端高薪训练营的教程，因此也许会和其他文章雷同较多，请担待。JS内存管理内存 -> 由可读写单元组成，表示一片可操作空间管理 -> 人为地去操作一片空间的申请、使用、释放内存管理 -> 开发者主动申请空间、使用空间、释放空间// 申请内存空间let obj = {}// 使用内存空间obj.name = 'aeorus'// 释放内存空间obj = null引用计数算法设置引用数，判断当前引用数是否为0引用关系改变时修
2021-06-10 23:59:48
135
原创 前端知识点——理解堆栈执行及闭包
写在前面笔记内容大多出自于拉勾教育大前端高薪训练营的教程，因此也许会和其他文章雷同较多，请担待。哪些平台可以执行JS代码浏览器NodeWebView无论JS代码在哪个平台上执行，最终都需要有一个执行的地方代码最终都是在内存中运行在JS执行过程中，浏览器加载界面时会向计算机的内存申请一片空间，用于执行JS代码这个空间我们称之为执行环境栈(ECS execution context stack)执行环境栈 -> 本质就是一个内存空间执行上下文一段JS代码里有很多内容，比如
2021-06-10 23:59:17
259
原创 前端知识点——TypeScript
写在前面笔记内容大多出自于拉勾教育大前端高薪训练营的教程，因此也许会和其他文章雷同较多，请担待。兼容 tsconfig.json将target设置为需要兼容到的版本，然后在lib中以数组方式添加从兼容版本到目前为止的所有版本，还要添加DOM来引用DOM对象原始数据类型const a: string = 'aeorus'const b: number = 100 // NaN Infinityconst c: boolean = true // false// 在非严格模式（strictN
2021-06-10 23:58:29
242
原创 前端知识点——异步
写在前面笔记内容大多出自于拉勾教育大前端高薪训练营的教程，因此也许会和其他文章雷同较多，请担待。EventLoopjs代码被读取后会进行一次匿名函数的执行，执行的就是js的本身首先一行一行执行完代码中的同步操作，如果遇到了异步操作则将异步操作移到事件队列中其次执行微任务，例如Promise最后执行宏任务，例如定时器，定时器时间短的会先进入执行栈因为微任务宏任务内也有同步操作和微任务宏任务等异步操作，所以任务事件内会再走一次以上步骤，如果宏任务内还有宏任务，需要等该宏任务被执行后，内部的宏任务
2021-06-10 23:30:20
292
原创 前端知识点——手写Promise
写在前面笔记内容大多出自于拉勾教育大前端高薪训练营的教程，因此也许会和其他文章雷同较多，请担待。Promise核心逻辑实现Promise就是一个类，在执行这个类的时候需要传递一个执行器出去，执行器会立即执行Promise有三种状态 -> pending fulfilled rejectedPromise一旦状态改变，则不会再改变then方法内部就是判断状态，根据状态调用不同的回调/* 简单版本-1 不支持异步情况 */const PENDING = 'pending'const
2021-06-10 23:29:21
107
原创 前端知识点——函数式编程
写在前面笔记内容大多出自于拉勾教育大前端高薪训练营的教程，因此也许会和其他文章雷同较多，请担待。函数式编程(Functional Programming, FP)是一种编程范式，POP(面向过程编程)、OOP(面向对象编程)也是编程范式的一种简而言之就是将参数抽象定义到函数体内，并且将过程封装到函数中，达到I/O的映射关系(前提该函数为纯函数)函数是一等公民(First-class Function)函数是一个对象，所以可以存储到变量/数组中，也可以作为另一个函数的返回值以下两种写法其实
2021-06-10 23:13:03
270
原创 小程序换肤——纯色SVG图片
采用的思想就是利用base64转码。先放链接表示尊敬。https://github.com/dankogai/js-base64<!-- 比方说这个SVG图片 --><svg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"> <defs&a
2018-09-30 15:27:20
1669
转载 二维数组去重
let hash = {}, result = [], filterRanges = [[100, 200], [100, 200], [200, 300]];filterRanges.map(filterRange => { if(!hash[filterRange]){ result.push(filterRange); ha...
2018-08-28 17:49:44
874
原创 JavaScript 不重复数组内元素求和
前提：给定一个整数数组和一个目标值，找出数组中和为目标值的两个数。你可以假设每个输入只对应一种答案，且同样的元素不能被重复利用。网上看了挺多方法，但是都不考虑到当一个数组内有重复值的时候，其实还是会有重复利用元素的可能性的。解题思路：递归+做减法。let indexArray = [];var twoSum = function (arr, target) { if(...
2018-07-27 16:05:01
512
原创 循环滚动公告（transform方式）
核心思想：利用transform属性读取文本长度进行判断CSS动画向左移动的长度。<!-- wxml --><view class='srcoll_frame'> <view class="srcollText"></image>{{remindMessage}}</view></view><!
2018-07-12 17:18:46
3265
原创 Vuex+Vue-socket.io+Node.js
简单介绍项目使用的插件： "dependencies": { "express": "^4.16.3", "socket.io": "^2.1.0", "vue": "^2.5.2", "vue-router": "^3.0.1", "vue-socket.io": "^2.1.1-b", "vuex": "^3.0.1" }第一步构建node服
2018-05-07 11:34:48
3360
2
原创 数组排序/根据对象内某字段排序
/* 根据对象内某字段进行排序 *//*** 运用方式** obj.sort(compare(property));*/function compare(property){ return function(a, b){ var value1 = a[property]; var value2 = b[property]; return value2 - value1; }}/* 数组排序 ...
2018-04-17 16:19:17
860
转载 数组查找元素
/*** 运用方式** searchItem(arr, item);** 如果有则返回该元素序列，否则返回null*/const searchItem = ( f => f(f) ) ( f =>(next => (arr, item, i = 0) =>( i >= arr.length) ? null :( arr[i] == item ) ? i :next(a...
2018-04-17 16:18:14
177
原创 图片上传并预览
/*** 运用方式** imgPreview(fileId, previewId);*/function imgPreview(fileId, previewId){ var fileInput = document.querySelector(fileId); var previewImg = document.querySelector(previewId); fileInput.addEve...
2018-04-17 16:17:43
148
原创 Vue——监听元素前后变化值
watch: { item(now, before){ let remove = before.filter(x => now.indexOf(x) == -1); let add = now.filter(x => before.indexOf(x) == -1); /* 显示字符串或数组元素的增加和减少 */ conso...
2018-04-17 15:35:41
7035
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人