虾米大哈-CSDN博客

原创虾米带你轻松搞定Vuejs 系列

（十八）揭秘数据更新的diff和patch机制数据更新视图之前笔记中简单提过，在对 model 进行操作对时候，会触发对应 Dep 中的 Watcher 对象。Watcher 对象会调用对应的 update 来修改视图。最终是将新产生的 VNode 节点与老 VNode 进行一个 patch 的过程，比对得出「差异」，最终将这些「差异」更新到视图上。今天就来仔细探讨一下这个 patch 的...

2019-05-13 17:27:22 196

（十七）揭秘Vue模板编译技术连续2周多的下雨天终于过去了，今天挤出来一点时间，探讨一下Vue模板的编译技术，我们常见的模板很多，编译技术也不一样，今天详细着重探讨一下模板编译这块所用的技术。Compilecompile 编译可以分成 parse、optimize 与 generate 三个阶段，最终需要得到 render function。这部分内容不算 Vue.js 的响应式核心，只是用...

2019-05-09 14:46:13 221

原创虾米带你轻松搞定Vuejs 系列

（十六）Virtual DOM(如何实现Virtual DOM的VNode节点)哈喽~，将近有4个月没有写点东西了，今天终于挤出来一点时间，继续整体之前预计完成的vue进阶的笔记。今天主要探索虚拟DOM；首先我们需要知道什么是VNode。什么是VNode我们知道，render function 会被转化成VNode节点。Virtual DOM其实就是一颗以javascript对象（VNod...

2019-05-06 15:27:04 140

原创虾米带你轻松搞定Vuejs 系列

（十五）Vue.js 依赖收集原理一周没有整理笔记了，今天继续。前边一节笔记记录了vue.js的响应式系统的内部机制原理，今天我们整理一下响应式系统的依赖收集。什么是依赖收集直接描述术语可能有点唐突。我们在这里写2个小例子，来加深一下代码理解，再来解释依赖收集。示例一：初始化的html结构和初始化的data现在已经有了，这个时候发现address这个属性并没有在...

2019-01-09 11:44:55 1347 1

原创虾米带你轻松搞定Vuejs 系列

（十四）Vue.js响应式系统揭秘响应式系统Vue.js十一矿MVVM框架，数据模型仅仅是普通的javascript对象，但是对于这些对象进行操作时，却能影响对应的视图，它是怎么实现的呢？我怀着好奇的态度查阅了很多资料，原来它的核心实现就是响应式系统，尽管在使用Vue.js进行开发时不会直接修改响应式系统，但是理解它的实现可以很好的使用它，避开一些弯路。Object.defineP...

2019-01-02 14:01:51 179

原创虾米带你轻松搞定Vuejs 系列

（十三）Vue.js 运行机制整体概览今天成都雨夹雪，早上骑车还是很冷的，忙里偷闲整理一下Vue的笔记，从今天开始开始整理深入Vue内部的运行机制的笔记。整体预览结合前十二篇笔记介绍的Vue项目入门的构建等等。使自己有个整体的知识体系，今天主要先从整体上了解整个Vue内部整体上的一个认知，就算是热热身吧。首先：先把vue框架的内部流程图抽象化一下（个人梳理，可能有不同见解，往谅解）...

2018-12-28 11:32:49 169

原创虾米带你轻松搞定Vuejs 系列

（十二）调试补充-调试和性能在开发中，我们难免会涉及到调试和检测性能等等。今天我们就来整理一下vue的几个调试和性能检测工具。移动端调试由于在移动端无法打开控制台，所以想办法打印调试console的数据一直苦恼。之前用的是chrome的inspect调试，但是只能使用移动版的chrome查看数据，兼容不好。怎么办呢？其实Vue也帮我们提供了移动端调试的工具 - vConsle。...

2018-12-26 11:35:38 214

原创虾米带你轻松搞定Vuejs 系列

（十一）技术指引2-数据驱动的秘密说到数据驱动，可谓是是Vue的一大特点，其实也不是Vue自己的特色，在这之前Angular从1.x版本就又有了，到底什么是数据驱动呢？我个人理解的数据驱动就是数据的变化来改变某个逻辑或某种状态。那Vue的数据驱动又是什么呢？我个人的理解就是通过数据变化来改变Vue的视图。好像我说的还是很模糊，那么下边我就来个图文并茂。还是不懂，没关系。下边为了让大...

2018-12-24 17:02:30 199

原创虾米带你轻松搞定Vuejs 系列

（十）技术指引1-组件职能划分今天在整理笔记的时候，我思考了很久要不要写这篇笔记，最后决定把他写出来，因为里边有些东西我是查阅了一些资料才搞明白的。记下来，2点好处，一是加强记忆；二是做个备忘。说起组件，在当先流行的一些前端框架都是极为推崇的，是主流框架中模块化、组建化开发模式中不可缺少一种形式。是不是组件就可以随便写呢？带着这个问题，我们探讨一下组件的职能，我个人认为不同的组件可能实...

2018-12-20 15:17:05 159

原创虾米带你轻松搞定Vuejs 系列

（九）热身指南2-编写高复用的模块在生活中，重复的机械劳动会消耗我们的时间和精力，提高生产成本，降低工作效率。同样，在代码世界中，编写重复的代码会导致代码的冗余，页面性能的下降以及后期维护成本的增加。由此可见将重复的事情复用起来是提高生产效率、降低维护成本的不二之选。在 Vue 项目中，每一个页面都可以看作是由大大小小的模块构成的，即便是一行代码、一个函数、一个组件都可以看作是一个个...

2018-12-17 19:19:31 151

原创虾米带你轻松搞定Vuejs 系列

（八）热身指南1-编码技巧与规范前面几章笔记完成了项目的构建，进入开发阶段之前，除了了解了Vue框架本身的一些知识点外，我决定好事提前掌握一些项目的编码技巧及规范；这样的好处是可以从一开始就考虑到项目的维护、扩展及性能等常见问题。俗话说，只看不练假把式；我们在看一些编码技巧的时候最好还是敲一下，并结合代码反复推敲增强理解和认识，但是呢，我们发现一些代码不仅仅适用于Vue，其他前端的项目也适...

2018-12-16 12:43:47 401

原创虾米带你轻松搞定Vuejs 系列

今天周四成都依然很冷，最近发烧感冒个人状态也不好。好了，还是继续今天的笔记吧。前年的几章笔记记录了Vue项目的构建的整体流程，从无到有的实现了单页面应用和多页面应用的配置，环境等等。今天我们回头看一下针对之前的配置是否可以有优化方案，同时也是我自己摸索的过程。使用alias简化路径使用webpack构建过Vue或者React的朋友们可能都知道alias的作用，其实就是把复杂的文件路径定义成一个...

2018-12-13 16:26:23 277

原创移动端适配 - 小结

在前端的世界里，移动终端和 PC 的响应式适配是我们常见的适配，在适配的过程中有些都可以起作用，有些有不同，经过不断地实践总结，我想总结一下。1. 视口 viewport1.1 viewport 基础viewport 解释为中文就是‘视口’的意思，也就是浏览器中用于显示网页的区域。在 PC 端，其大小也就是浏览器可视区域的大小，所以我们也不会太关注此概念；而在移动端，绝大多数情况下 v...

2018-12-12 17:41:01 731 2

原创虾米带你轻松搞定Vuejs 系列

（六）构建实战2-多页面应用的配置今天是周日，成都降了温，太冷，闲来无聊，继续整理一下笔记。上次的笔记主要是说构建单页面应用的一些相关知识点，今天突发奇想看待官网上说可以配置多页面程序，马上试一下。首先，说一下很多时候我们使用SPA就足够了，什么情况下使用多页面程序呢？当你的项目复杂度很高或者模块之间的差异变化非常大，完全无法复用，这个时候是不是思考一下多页面应用。下边记录一下探索多页面应用过...

2018-12-10 11:33:46 162

原创虾米带你轻松搞定Vuejs 系列

（五）构建实战1-单页面应用的基本配置今天开始从Vue的内部入手，探索一下内部配置的基本构成，在了解这个之前，一定要去了解一下Vue项目的配置是如何划分的。配置1、路由配置我们想一下，由于Vue的框架是一个或者多个单页面构成的,在单页面内部跳转根本不会重新渲染html文件，所以要引入路由机制对它进行控制，因此我们在项目内部要编写相应的路由机制，借助它实现页面被的跳转。我们先看一下vue...

2018-12-10 11:19:09 180

原创虾米带你轻松搞定Vuejs 系列

（四）构建基础进阶-env文件与环境设置我们在实际开发中，我们一般会经历项目的开发阶段，测试阶段，和最终上线阶段，每个阶段对于项目代码的需要可能都有所不同，那我们怎么让它在不同阶段呈现不同的效果呢？我们下面看一下环境是不是可以解决这个问题呢？介绍1、配置文件正确的配置环境首先我们要认识一下不同配置之间的关系。随便画个图表示一下：这里说的是最全的的可能，我们可以看到不同的环境有着不同的配...

2018-12-10 11:06:28 153

原创虾米带你轻松搞定Vuejs 系列

（三）构建基础进阶-Webpack使用cli 3.xwebpack作为目前最火爆的项目打包工具，被广泛的适用于项目的构建和开发过程中，其实说他是打包工具，有点狭隘了，我个人认为扎实一个集前端，自动化、模块化、组件化域一体的系统，可以根据自己的配置和安装，最终实现你需要的功能进行打包输出。在Vue中，webpack有着举足轻重的作用，比如说打包压缩、异步加载、模块化管理等等，如果你还对webpa...

2018-12-10 10:43:32 220

原创虾米带你轻松搞定Vuejs 系列

（二）包管理工具与配置项任何一个使用自动构建工具的项目都离不开工具和统一的管理机制，一样的在项目开发和维护的过程中我们需要了解和掌握安装包的相应工具和配置文件，以此来有效的进行项目迭代和版本管理，为项目提供稳定的运行环境。接下来我们介绍一下Vue的相关依赖安装工具和配置文件。概述1、npm和package.jsonnpm 是Node Package Manager的简称。看了全程，知道他是...

2018-12-10 10:34:59 130

原创虾米带你轻松搞定Vuejs 系列

（一）开篇：Vue 脚手架3.X项目创建基础概述Vue.js 作为一门轻量级、易上手的前端框架，从入门难度和学习曲线上相对其他框架来说算是占据优势的，越来越多的人开始投入 Vue.js 的怀抱，走进 Vue.js 的世界。那么接下来屏幕前的你不妨一起来和我从零开始构建一个 Vue 项目，体会一下 Vue.js 的精彩绝伦。依赖工具在创建一个Vue项目前，我们先要确保你本地安装了Node环境...

2018-12-06 15:48:39 487

原创剖析Typescript接口（Interface）

接口（Interface）Typescript最核心的原则之一，就是对值所具有的结构进行类型检查，就是我们常说的 “鸭式辩型法”或者是“结构性子类型机构”；Typescript中的interface的作用就是为这些类型命名，为编码者或者第三方代码提供一个定义好的契约；接口的使用我们假设一个场景，在编写js的函数时，又一个getUserId的方法，我们要通过这个方法直接回去userId这个属性；可以这么写：const geyUserId = (user) => user.userId; //参

2020-09-27 11:52:08 858

原创剖析Typescript枚举(enum)类型

枚举类型枚举类型在很多语言中都有，一般用于一组命名的场数，当一个变量会出现几种可能的取值是，可以用到枚举类型；数字枚举当我们声明一个枚举时，虽然看上去好像煤油给它赋值，但是他们的值其实就是默认的数字类型，并且默认从0开始依次累加：enum Direction { Up, Down, Left, Right}console.log(Direction.Up === 0); // trueconsole.log(Direction.Down === 1); //

2020-09-25 14:26:18 1341

原创 Typescript常见的其他类型

Typescript 中其他常见类型之前了解了TypeScript 中的原始类型,其实还有一些常见的类型没有涉及；比如计算机类型系统理论中的顶级类型Top Type:anyunknown比如类型系统中的底部类型Bottom TypeIn TypeScript, the bottom type is never.[5][6]never再比如非原始类型(non-primitive type):object当然还有比较常见的数组、元组等等。any有时候，我们会想要为那些在

2020-08-21 10:33:05 1752

原创 Typescript 的原始类型

Typescript 的原始类型如果你了解 JavaScript 的基础类型，那么这一节你会很好理解。TypeScript的原始类型包括: boolean、number、string、void、undefined、null、symbol、bigint。布尔类型我们用 boolean 来表示布尔类型，注意开头是小写的，如果你在Typescript文件中写成 Boolean 那代表是 JavaScript 中的布尔对象，这是新手常犯的错误。/* Boolean */const isLoading:

2020-08-21 09:43:33 782

原创第一个Typescript程序

Typescript入门在开始使用 TypeScript 前你最好有以下准备：Node.js > 8.0，最好是最新的稳定版（目前是V10.16.3 ）一个包管理工具 npm 或者 yarn一个文本编辑器或者 IDE (笔者的是 vscode)相关的 shell 命令仅适用于 linux系统，windows 系统不适用安装 TypeScriptTypeScript 的安装很简单，你可以通过npm直接在全局安装 TypeScript。npm install -g typescr

2020-08-20 16:40:22 161

原创 30分钟React Hooks

带你30分钟把React Hooks玩出花这里先做一个知识共识，在笔记中出现的部分技术名称描述：函数式组件 => Function Component类组件 => Class Component工具函数 => Util Function钩子 => React Hook初始值 => initialValue产生背景Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性;Rea

2020-08-20 15:58:32 162

原创探索ES6数据结构的世界 -「高级前端」

什么是数据结构数据结构实在计算机中组织和存储数据的一种特殊方式，是的数据可以高效的的别访问或者修改。准确的说，数据结构是数据的集合，表示数据之间的关系，包括作用在数据上的函数或者操作。为什么我们需要数据结构数据是计算机科学当中最关键的实体，而数据结构则可以将数据以某种组织形式存储，因此，数据结构的价值不言而喻。无论你以何种方式解决何种问题，你都需要处理数据——无论是涉及员工薪水、股票价格...

2020-08-13 14:03:14 133

原创 Git常见问题解决方法总结

前言git工具常用的项目管理工具，我在使用的过程中，发现我的兄弟们有时候会遇到这样那样的问,通常解决这些问题也需要花费一些时间，我思来想去干脆总结一下，以便于在遇到问题的时候查阅。merge冲突假如你merge的时候产生了很大的冲突，想先放弃某次merge，你可以：git merge --abort 或git reset HEAD 或git checkout HEAD分支修改切换在非目的分支上做了修改，想切换回目的分支还未添加到暂存区/已添加到暂存区还未提交1、新建临时分支，

2020-07-04 11:02:02 730

原创您必须了解这JavaScript函数

您必须了解这14个JavaScript函数在进行任何JavaScript研究之前，您应该应该能够手动理解和编写这些功能。1、确定任何对象的特定类型众所周知，JavaScript中有六种原始数据类型（布尔，数字，字符串，空值，未定义，符号）和对象数据类型。但是您知道对象数据类型可以细分为许多种子类型吗？对象可以是数组，函数，映射等。如果要获取对象的特定类型，该怎么办？ECMAScript 规定了以下的规则:对于不同的对象，调用Object.prototype.toString（）时将返回不同的结果

2020-05-29 18:43:52 195

原创前端开发必备的15个JavaScript数组方法

前端开发必备的15个JavaScript数组方法数组是所有用于存储不同元素的语言中的特殊变量。JavaScript数组包含一些内置属性，每个JavaScript开发人员都应该知道如何使用它们以及何时何地使用它们。我们可以根据需要使用它们来添加，删除，迭代或操作数据。每个开发人员都应该了解一些基本的JavaScript数组方法。1、some（）方法此方法检查数组至少有一个元素是否满足参数函数检查的条件。 console.log([2, 5, 8, 1, 4].some(val=>val&

2020-05-29 15:57:37 358

原创在单击按钮上创建波纹效果

在单击按钮上创建波纹效果波纹效过是现代设计趋势的一部分。你一定在许多网站上见到过，它提供了按钮按下的波纹动画效果。我们可以通过向按钮添加子元素并设置动画效果来产生涟漪效果。我们也可以使用Javascript根据光标在按钮上的位置进行定位。1、基本样式使用position:relative属性向按钮添加基本样式，以放置内部span标签并overflow:hidden防止span超出按钮。<!DOCTYPE html><html><head> <

2020-05-29 15:07:29 242

原创 JS工具方法大全

前端常用JS工具方法大全邮箱/** * 邮箱 * @param {*} val */export const isEmail = (val) => { return /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(val)}手机号码/** * 手机号码 * @param {*} val */export const isMobile = (val) => {

2020-05-29 10:53:21 525

原创如何合理使用px | em | rem | % 等单位

在 CSS 中有许多距离单位，比如 px | em | rem | %，还有 CSS3 中的 vh | vw 等单位。那么我们在项目中应该如何使用呢？我们在 pc 端不需要考虑的这么复杂，所以这里我们主要讲讲这些单位在移动端中的使用。基础单位 pxpx 是我们最早接触到的单位了，不过我们在移动端自适应的要求下，使用的频率不是很高；我总结了以下使用的情况：比较小的图案比如需要我们画一个 r...

2019-05-08 17:40:31 252

翻译 es6中的数组方法到底简便了什么操作？

什么是es6?在这里不过多阐述，我也是跟着阮一峰大佬的《es6入门》来学习的，es6新增了很多的方法、属性，让我们在编码中得到了很高的提升，在这里只对array这块进行阐述，其他的就过不多介绍了。言归正传，在项目中，经常会遇到处理数据，筛选数据的要求，我们更多的会借助于for循环来完成，比如：数组去重，传统方法如下（以下所有实例只列举一种）let a = [1,2,2,3,3,4,5];l...

2019-05-08 17:25:50 152

原创 React实战企业管理项目系列

（三）React系列-实战02：脚手架搭建脚手架的搭建代码参考项目点击获取本项目的脚手架经过了刀耕火种的插件时代，伴随着npm越来越繁荣的生态圈，近几年来前端开发的三大件HTML、CSS、Javascript都发生了很多的变化，这也让很多开发在选型上的难度增加了很多，也是一个项目开端的第一个难点。在react的生态圈中，虽然已经有 create-react-app这样的官方制定脚手架...

2019-02-15 15:01:03 831

原创 React实战企业管理项目系列

（二）React系列-实战01：开发热身准备背景企业管理系统作为供企业内部人员使用的应用，在浏览器适配性方面的要求并没有供普通用户使用的应用那么严格，这为我们选择现代的 JavaScript 框架提供了一定的便利。于是接下来的问题就变为了在 React、Angular、Vue 这三大 JavaScript 框架中应当选择哪一个？这里不做三种框架的对比，互相也没有可比性，各有所长；我认为我是想...

2019-01-23 10:50:00 1284

转载你配置 Webpack 4 的方式可能是错的！

作者：Margarita Obraztsova翻译：无明话题：前端语言 & 开发最佳实践 & 前端构建 &webpack一千个观众就有一千个哈姆雷特。你在网络上可以找到上百万个有关如何配置 Webpack 的教程，所以，你可能已经看到了一千种不同的配置方法。Webpack 本身在快速演化，除此之外，还有很多加载器和插件紧随其后。这就是为什么这些配置文件会各有不同：组...

2019-01-19 09:43:03 896

转载 [译] 2019 年值得学习的顶级 JavaScript 框架与主题

原文地址：Top JavaScript Frameworks and Topics to Learn in 2019 原文作者：Eric Elliott 译文出自：掘金翻译计划译者：ElizurHz 校对者：KarthusLorin, wuzhengyan2015 图：Jon Glittenberg Happy New Year 2019 (CC BY 2.0)又到了...

2019-01-15 15:06:59 370

翻译闲话前端存储技术

前言后端常用数据库做数据存储，譬如MySql、MongoDB，缓存技术存储数据，如Redis、Memcached；前端存储数据目前常用的是Cookie、Storage、IndexedDBCookieHTTP Cookie（也叫Web Cookie或浏览器Cookie）是服务器发送到用户浏览器并保存在本地的一小块数据，它会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上。通常，它用...

2019-01-15 14:57:33 194

原创 Taro多终端开发实战系列

Taro多终端开发实战系列（二）多终端统一开发框架的安装和使用Node 环境Taro 是一个基于 NodeJS 的多端统一开发框架，在安装使用 Taro 之前需要确保已安装好 Node 环境。你可以直接从 NodeJS 官网下载 NodeJS 安装包来安装 Node 环境，但我们更推荐使用 Node 版本管理工具 nvm 来安装管理 Node，这样不仅可以在不同版本的 Nod...

2019-01-09 14:24:36 1572

原创 React实战企业管理项目系列

（一）React系列 - 从前端发展历程认识企业管理系统前端时代在前端整体进入组件化开发时代后，手写各种 UI 组件成为了许多前端工程师入门后的第一课。而对于工作了几年的资深工程师来说，手写组件已经不再是问题，但对于如何帮助团队提升整体开发效率以及个人接下来的技术成长方向却开始变得非常迷茫。想要摆脱对未来的迷茫，最好的方法就是向后看，看一路走来前端开发是如何从服务端主导的静态网站一步步...

2018-12-29 15:58:16 939