雪之樱的小站

前言因为和我对接的后台同学的服务器不在状态，所以我突然多了一天的摸鱼时间，突然想起还有这么个知识点，于是我决定花点时间整理下，最后发现这东西的坑比我想象的大，所以就有了这篇博客 本文同步更新于我的掘金博客 ES3因为一些概念已经不通用，所以把文章分成几个部分，先从ES3时代开始说起。 中英名词对照： 执行上下文：Execution Contexts 执行栈：Execution Stack 变量对象：variable object 激活对象：Activation Object 作用域链：Scope Chain 执行上下文和执行栈在JS代码执行前，JS引擎会为这部分代码创建一个执行环境，这个环境叫做**执行上下文(Execution Contexts)**，这个环境中包含了代码运行时需要的数据，执行上下文有两种 全局执行上下文：在所有的JS代码开始执行前，JS引擎会先创建全局执行上下文，全局执行上下文是唯一的，并且始终处于执行栈的底部，一直到程序运行结束才会销毁 函数执行上下文：函数执行上下文会在函数被调用时创建，每一个函数调用都会产生新的执行上下文，即使是重复调用 eval函数执行 ...

前言今天做了网课的期末考试，结果提前半小时做完了，闲着无聊于是在网页上捣鼓起了怎么解除网页的不能复制 & 不能打开右键菜单的限制。捣鼓出来后，发现好久没写（氵）博客了，那就分享一下这个操作。 正文智慧树F12打开控制台，切换到element一栏，随便点一个元素我们可以看到下面的几个事件 然后按remove把这个事件移除掉就完事了。 当然你也可以复制下面的命令到控制台执行一下 1234document.oncopy = null;document.onselectstart = null;document.oncontextmenu = null;document.oncut = null; 这样也是ok的 bilibili顺带一提b站专栏禁止复制的实现不太一样，是用的css禁用 我们也可以把它禁用实现复制 脚本自动化不过每次都要打开控制台粘贴太麻烦了，我们整个自动化脚本我们用个油猴插件，在每个网页打开时都执行这段代码 1234567891011121314151617(function() { let style = document.createElem ...

前言不知道写什么，所以没有前言我们从入口开始讲起 从入口开始123456789// vue/src/core/instance/index.jsfunction Vue(options) { if (process.env.NODE_ENV !== 'production' && !(this instanceof Vue) ) { warn('Vue is a constructor and should be called with the `new` keyword') } this._init(options)} 可以看到，vue调用了一个_init方法，并传入了options，那我们转到_init方法 123456789101112131415161718192021// vue/src/core/instance/init.jsexport function initMixin(Vue: Class<Component>) { Vue.prototype ...

这里是咕了一个月终于开了新坑的雪之樱，上午在b站看了个电影《为美好的世界献上祝福！红传说 》，决定水篇博客（所以有什么关系吗）。好吧，言归正传，这次要学习的是$nextTick的源码，相信小伙伴们对$nextTick一定不会陌生，啥，忘了，好吧，笔者在这里贴心地附上vue文档对它的说明。 看~是不是很简单，它用于在组件完成下次更新时执行一个回调，你可以在这里获取更新过的DOM状态，然后做一些操作。然后我们就从源码角度看看他做了什么吧。 $nextTick的混入在vue/src/core/instance/render下的renderMixin方法中 12345678import {nextTick} from '../util/index'export function renderMixin(Vue: Class) { // ... Vue.prototype.$nextTick = function (fn: Function) { return nextTick(fn, this) }; // ...
...

前言离上一篇博客又过去了差不多10天的样子，然后上次里的flag又完美打脸了，主要是最近项目比较繁忙，所以也莫得时间整理，直到今天似乎闲了一点，于是决定随缘写篇博客。那就是分享在vue项目中使用ts的一些心得，这篇文章会长期不定期更新。 项目起手从头配置ts项目比较困难，在这里我们可以使用vue脚手架自带的ts可选项，只要在新建项目时勾选ts，脚手架就可以自动帮我们完成相关配置，非常方便。 然后一路回车，等待几分钟，项目就好了。 这里会介绍vue中如何简单使用ts，想了解更多关于ts的知识，可以选择看看官方文档，当然，我其实挺觉得这个文档不是那么好懂，所以我推荐看这个入门，学习了更多TS的骚操作，你就可以玩的更Happy了。 下面先来讲讲一些常用功能的TS写法 组件写法 如图，组件的写法不再是导出一个对象，而是导出一个类，注意事项有两个，一个是要在类的上面使用Component装饰器装饰这个类，另一个是这个类要继承于Vue，这样就一个组件的声明就大功告成啦。接着我们来看看我们一些常用功能的写法。 数据声明数据非常简单，你只需要使用下面的方法声明即可 123456export defau ...

前言时隔n天，终于决定继续学下移动端的知识，但当我打开我的webstorm，然后准备进行调试时，我陷入了沉思，我居然发现我没有办法调试我的页面，这就非常难受了，于是我折腾了一晚，终于成功搞定了这个问题，需要的工具是webstorm + 电脑chrome + 手机chrome。下面就是分享环节~ 开启手机的USB调试首先你需要有一个开启了USB调试的手机，因为各个系统开启USB调试的方法不一样，我就不说了，我是MIUI系统，开启USB调试的办法在这里，其他的系统直接百度搜索一下，也很容易找到打开的方法。 如果你成功了，理论上通知栏会看到打开USB调试的通知 给手机安装一个chrome百度一下，选择第一个下载安装~ 连接手机和电脑这一步你需要用一根USB线，连接手机和电脑，然后打开手机的chrome浏览器，然后在PC端的chrome浏览器里进入这个网址 chrome://inspect/#devices ，然后你就会发现，你的手机已经被显示出来了。 然后你需要用webstorm开启一个本地的局域网服务器，这样在你的手机和电脑处于同一个局域网下时（比如同一个WIFI），你可以直接用手 ...

vue-router使用复习在vue脚手架中使用vue-router时，需要在main文件中使用下面的配置 12345678import Vue from 'vue'import App from './App.vue'import router from './router.js'new Vue({ router, render: h => h(App)}).$mount('#app') 这段代码做了两件关键的事情 引入router，在引入时执行了router.js里的文件内容 在创建vue实例时传入了router的配置 然后我们看看router.js里的文件配置 123456789101112131415161718192021222324252627282930313233import Vue from 'vue';import Router from './vue-router';import Home from & ...

Vue中的计算属性，在开发中经常会用到，但是理解它似乎不是那么容易，这篇文章会用尽量简单的代码介绍计算属性的运行过程。 首先讲讲计算属性大概的思路，计算属性其实是一个getter函数，这个getter函数通过Object.defineProperty来定义，当每次试图获取计算属性的值的时候，getter函数就会执行，返回值就是获得的计算属性的值。计算属性的值有可能依赖于data，prop，computed中的其他项，我们要进行一个依赖收集的操作，找出这个计算属性依赖于其他的什么，并订阅依赖项的变化（就是在依赖项的值发生变化时，通知计算属性），在计算属性收到通知后，重新计算值，并缓存，然后触发视图更新。 我做了一个简单的demo，最后的效果是这样的   可以看到，当a和b的值改变的时候，total（a+b）也会改变，随即触发刷新视图的逻辑，我们接下来通过讲解这个demo来理解computed的大致运行过程 依赖收集这里我们使用一个简单的发布-订阅模式，来对依赖进行收集和通知，下面是Dep类的定义。 12345678910111213141516class Dep { co ...

想成为一名前端工程师，却不知道如何入坑？这是一篇零基础入坑指南，也许可以帮助到你。 我要学什么想要知道学什么，看招聘需求是最快的，这是腾讯3-5年经验的社招需求 这是cvte的实习需求 总结一下，如果你想找到一个相对较好的前端岗位，那么你需要学习 前端三剑客的主流版本：HTML5 / CSS3 / ES6 三大主流框架中的任意一个：Vue，react， Angular 打包工具：webpack 移动端 / 微信小程序 一门后端语言：JAVA / NodeJS / PHP 而你如果只是想要找一个普通的前端岗位，那你只要学完 HTML5 / CSS3 / ES6 外加vue或者react任意一个框架就行了，推荐vue，因为中小型公司用着多，而且容易上手。 当然，在学习的过程中，你会接触到UI库，比如elementUI，iview，或者css预处理语言，比如less，sass，还有用起来比较简单的框架，比如bootshrap，JQuery这些学习成本较低，看看文档就会，不作为这里讨论的重点。 PS：我下文说的学习时长预 ...

什么是虚拟DOM和diff算法在前端发展的初期，前端工程师们使用JQ这样的框架对DOM进行命令式的操作，这种方式最大的好处是易学，直白，但在前端页面和业务逻辑不断复杂的今天，命令式的操作dom已经不适合大型项目的开发，随之而来的三大框架，vue，react， angular均使用了声明式的操作DOM，开发者只要描述状态和和DOM的映射关系，框架就会帮我们把状态转化成渲染好的视图，虚拟DOM正是状态和真实DOM之间的一个中间层，为什么要有这个中间层呢，因为操作DOM的代价是非常大的，虚拟DOM可以描述描述真实dom的信息，通过对比前后的虚拟dom找出DOM里真正需要的部分，从而减少DOM操作，提高性能。比较前后虚拟dom的算法就是diff算法，这是整个虚拟dom机制的最核心优化之一。 VNodeVNode本质上是一个JS对象，只是这个对象是用来描述真实DOM而已，Vue的实现如下。( 函数参数里的 ?: 的意思是，这个参数可以没有，但是如果有的话就要是某个指定的类型，这是flow的语法） 12345678910111213141516171819202122232425262728293 ...