前端进阶: vue
六月第三周(6.22-6.27)的安排vue源码学习
vue初始化流程
vue响应式原理
vue中的mvvm
vue虚拟Dom
vue生命周期的理解
vue如何检测数组变化
vue中如何实现异步渲染?
vue运行机制
初始化流程
创建Vue实例对象
init过程会初始化生命周期/初始化事件中心/初始化渲染,执行beforeCreate周期函数
初始化调用 $mount 方法对Vue实例进行挂载(核心 模板编译 => 渲染函数 => 更新)
如果没有定义render方法,而是定义了template,需要经历编译阶段,需要将模板字符串编译成 render function,步骤如下
parse正则解析成AST
optimize标记静态节点
编译成render function之后,调用$mount的mountComponent方法,先执行beforeMount钩子函数,然后实例化一个watcher
调用render方法将render function渲染成虚拟的VNode
生成虚拟DOM树后,需要将虚拟DOM树转化成真实的DOM节点,此时需要调用update方法,u ...
前端进阶: promise-1
六月第三周(6.22-6.27)的安排
promise用法1
promise用法2
promise手写
用法promise状态不可逆性1234567891011121314151617181920var p1 = new Promise(function(resolve, reject){ resolve("success1"); resolve("success2");});var p2 = new Promise(function(resolve, reject){ resolve("success"); reject("reject");});p1.then(function(value){ console.log(value);});p2.then(function(value){ console.log(value);});// 输出success1success
promise中的异常处理
first scene12345678910111213141516171819202 ...
基础: 前端重学(6)
六月第二周(6.8-6.14)的安排
观察者模式 vs 发布订阅模式
函数柯里化
prefetch 和 preload区别
实现一个正则表达式(匹配url连接)
内存溢出
观察者模式 vs 发布订阅模式观察者模式观察者模式指的是一个对象(Subject)维持一系列依赖于它的对象(Observer),当有关状态发生变更时 Subject 对象则通知一系列 Observer 对象进行更新。在观察者模式中,Subject 对象拥有添加、删除和通知一系列 Observer 的方法等等,而 Observer 对象拥有更新方法(update)等等。简单说,就是数据发生改变,对应的处理函数自动执行。通过一个实例就能很好的明白观察者模式了
12345678910111213141516171819202122232425262728293031323334353637383940414243// 定义综述主题function Subject() { this.observers = []}Subject.prototype = { // 添加observe a ...
基础: 前端重学(5)
(6.1-6.7)的安排
vuex手写以及原理
mvvm理解(拖延症)
css问题(1px以及清楚浮动原理)
js基础(es5继承和es6继承的区别)
第二版vuex手写mvvm理解css之移动端 1px 问题两个概念,一个是像素(pixel)可以简写为px,另外一个是设备像素比(DPR)devicePixelRadio
12像素 :指在由一个数字序列表示的图像中的一个最小单元,单位是 px,不可再次分割了。设备像素比(DPR): 设备像素比 = 设备像素 / 设备独立像素。
造成边框变粗的原因其实这个原因很简单,因为css中的1px并不等于移动设备的1px,这些由于不同的手机有不同的像素密度。在window对象中有一个devicePixelRatio属性,他可以反应css中的像素与设备的像素比。
设计稿上的是物理像素,css中的像素是逻辑像素如果window.devicePixelRadio是2.0,即设计稿上的1px等于css中的0.5px目前主流屏幕的DPR是2(8P+),拿2倍屏来说,设备的物理像素要实现1像素,而DPR=2,所以css 像素只能是 0 ...
基础: 前端重学(4)
重点js基础/Vue框架/typescript/Css/node/工具/网络基础
Mvvm原理的解读以及模拟实现
Vuex源码以及模拟实现(a week)
Vue计算属性(原理及相关特性)
express完整应用(two week)
前期还是需要在好好学学vue相关的源码知识,特别是mvvm以及vuex的源码阅读,大概领会其思想,目的很简单,就是面试的时候,不能被面试官问倒。后面会尽量往node/webpack/ast靠拢,如果可能有时间的话,算法还是要了解。源码调试不方便,不知道是自己的问题还是没有找到规律,vuex的源码是放在vuex.esm.js中,在2.0版本的时候,源码中还含有src文件夹,里面含有未压缩的各模块代码,现在vuex不是这个样子
Mvvm的模拟实现1234567Observer 数据监听器,能够对数据对象的所有属性进行监听,如有变动可拿到最新值并通知订阅者,内部采用Object.defineProperty的getter和setter来实现。Compile 指令解析器,它的作用对每个元素节点的指令进行扫描和解析,根据指令模板替换数据,以及绑定相应的更新函 ...
基础: 前端重学(3)
五一之后第二周(5.11-5.17)的安排重点js基础/Vue框架/Css/node
Vuex模拟实现
手写一个简单的mvvm
BFC 以及 清除浮动以及原理
闭包
观察者模式
http1.x和http2.x
Vuex源码以及模拟实现vuex的模拟实现手写简单的mvvm使用
12345678910111213141516171819<body> <div id="app"> <h2>{{message}}</h2> <input v-model="c" type="text"> </div> <script src="./MVVM.js"></script> <script> let mvvm = new Mvvm({ el: '#app', data: { a: { b: 1 }, c: 2, mes ...
基础: 前端重学(2)
五一之后第一周(5.6-5.9)的安排
type 和 interface 区别
webpack中的externals配置使用
https和http协议的区别
ts语法强烈建议浏览官网,英语理解力强的,阔推荐英文官网
ts运行,本地tslint提示的各种报错有时真让人抓狂!!!(持续完善当中)
序列
提示
描述
1
Exceeds maximum line length of 150
单行超150字符
2
expected an assignment or function call
expected an assignment or function call
3
comment must start with a space
// 注释应以空格开头
4
for (… in …) statements must be filtered with an if statement
for in 循环体内应有if判断属性是否存在
5
Declaration of instance field not allowed after declaration o ...
基础: 前端重学(1)
五一假期安排
防抖和节流函数
new 构造函数实例
手写apply/bind/call
单例模式以及vue单组件
箭头函数
继承
函数防抖和节流都阔以用于持续触发函数的优化中,防抖是,触发事件后n秒内,函数只能执行一次。如果在N秒内又重新触发,则需要重新计时开始。或者简洁点:连续触发的时候,只会执行一次。在停止N秒之后才能继续执行,典型的案例就是防止多次提交的按钮
而节流呢,是每间隔N秒,只执行一次。就像水龙头里的水,节流只能减缓水流,但事件依然会执行。频率变少了。典型案例是滚动scroll/resize事件
两者最大的区别就是节流是依然执行,可用于滚动事件。而防抖,如果一直在触发中,只有停下来的时候才会执行一次。
1234567891011121314151617181920212223242526272829/** * @description 防抖 * @param fn * @param wait * @param immedate 是否立即执行 true 立即执行 */export const debounce = (fn: any, wait: number = ...
My First blog
感谢Butterfly提供的技术支持,希望自己也能参与到其, Jerryc个人博客有各种关于主题色彩的设置,请移步
从去年五一到今年五一,365天,从最基础的class到后面的ts我感觉自己是在进步,前面三年,基本上是在混日子,业务需求太多,没时间提升自己,进入一种死循环,从去年五月开始,进行改变,开始学习最基本的js常识,练基本功,promise/async/bind手写等,到后面的前端内功也就是算法和数据结构。但仅仅是学习,还不够,很多东西还没有深入,稍微深一点说就完蛋,所以2021五一期间,重点关注vue diff核心算法,有时间就补补ts/http/axios等等
Hello World
Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.
Quick StartCreate a new post1$ hexo new "My New Post"
More info: Writing
Run server1$ hexo server
More info: Server
Generate static files1$ hexo generate
More info: Generating
Deploy to remote sites1$ hexo deploy
More info: Deployment