幻尘の屋

MVC模式、MVP模式与MVVM模式在学习编程的过程中，我们或多或少都听说过这几种模式：MVC、MVP与MVVM，今天用一个篇幅来总结一下我认知中的三种模式 MVCMVC模式的意义是软件可以分为三个部分： 视图（View）：用户界面 控制器（Controller）：业务逻辑 模型（Model）：数据模型 MVC模式的基础通讯逻辑是这样的： View传送指令到Controller Controller完成业务逻辑后，会要求Model改变状态 Model数据更新后将数据发送给View，用户得到反馈 互动模式MVC有两种互动模式，一种是通过View接收指令，另一种是通过Controller接收指令 我们使用View接收指令时，View会将指令发给Controller进行逻辑处理，Controller处理以后会通知Model进行修改，随后Model通知View进行更新 当我们使用Controller接受指令时，Controller接收到指令，然后通知Model进行数据修改，Model负责通知View进行视图更新。 MVPMVP模式中Controller变成了Presenter，同 ...

心情驿站怎么说呢在写这篇博客对的时候真的很纠结，虽然知道可能看到的人并不多，而且应该都是我身边的朋友们，但是一样很纠结。 今天是10.29，可能这一天我会一直记得吧，网易的面试真的打击了我的自信心，这真的第一次快要把我击垮了，虽然只是刚刚面试结束，但是我基本已经知道了凉凉的结果。 我现在的心情算是很烦躁吧，我突然间不知道我学习了这么久有什么意义，我甚至不知道接下来我该怎么做，第一次感觉很委屈也很无奈，上午面试官那句“我没看到你有什么亮点”真的很打击人，可能真的存在差距吧，但是我真的是不服气，都是同龄人凭什么别人能做到的我做不到，我不信，但也没有什么办法，选择的这条路真的非常艰辛，可能他们考研的、考公的看到的是竞争者的压力，是十几比一的录取率，但是我真的发自内心的觉得没有比就业更难的选择了，可能我还会继续努力吧，这一篇博客就当是减轻一下心中的压力吧，真的会很累，心累，这两个月的实习每天心态都在转变，可能真的从内心已经准备辞职了，最后一个月满三个月来 纪念我的第一次实习经历，开心难过这段时间都经历了，技术上感觉在这里已经没有办法更加精深了，所以也没有继续的必要了。。。 这一个月来经历了感情 ...

网易互娱前端面试记录怎么说呢，很开心能走到三面吧，但是最后结果应该不会很理想，就先写一篇博客记录一下我的面试中遇到的问题以及难点吧（对我来说的难点）。 一面（27min） Vue中nextTick()的内部实现方式 Vue的数据传输方式 js的继承方式（构造函数继承，es6的extends继承，原型链的继承方式） 什么是事件冒泡与默认事件 事件冒泡的阻止方式 window.event.cancelBuddle = true，IE特有，Google支持，火狐不支持 e.stopPropagation()，Google和火狐都支持 编程题：大驼峰转换小驼峰（HelloWorld => hello_world） 一面结束本来觉得凉了，因为自我感觉不是很好，但是过了三天收到了二面的邀请 二面（40min） cookie设置http-only的作用 Vue的响应式原理（Object.defineProperty() + 订阅者-发布者） Vue-Router的两种模式与区别（hash方式、history方式） Vuex的基础作用、用法和使用场景（State、Mutation ...

CSS盒模型盒模型CSS盒模型又被称为框模型，包含元素内容(Content)、内边距(padding)、边框(border)、外边距(margin) CSS外边距叠加时会发生合并，使用BFC可以有效解决没必要的边距重合 box-sizing: content | border-box | inherit content-box： box-sizing的默认值，可以使设置的宽度与高度应用到元素的内容框，盒子的width仅包含内容(content) 盒子总宽度 = margin + padding + border + width; border-box： 怪异盒模型计算方式，设置的width包含除margin外的边框、内边距、内容框的总宽度，即width = content + padding + border 盒子总宽度 = margin + width inherit： 规定从父元素继承box-sizing的属性值 标准盒模型与IE盒模型标准盒模型也就是我们上文中提到的默认值方式content-box，而IE盒模型，也就是我们常说的怪异盒模型，它的 ...

HTTPS协议伴随用户的安全意识增强，网络协议也开始向Https过度，目前大多数的网站与APP都是使用的Https协议 HTTP协议在我之前的博客中由写过http的几种协议的比较，这里就简单介绍一下 HTTP协议的缺点： 通信使用明文 不会对通信方的身份进行验证 无法验证报文的完整性 通信使用明文也就是说在HTTP协议中所有的数据传输都是在明文情况下进行的，也就导致了如果通信被窃听，窃听者根本无需花费任何成本就能直接查看到我们传输的数据详细内容 不验证通信方身份不验证通信方的身份会导致通信过程被窃听后，可能遭遇伪装，并且攻击者可以使用伪装身份与己方机型通信 法验证报文的完整性无法验证报文的完整性，也就意味着数据在传输过程中可能被修改，也就造成了数据的不真实 解决方法对于明文传输的问题，我们可以使用密文进行传输，这样即使数据被窃听，攻击者依旧需要耗费大量的时间与精力来进行破解，间接提升了数据的安全性 要想对通信方的身份进行验证，我们可以使用与后端相同的方式，在网络数据参数中生成一个token，请求与应答时都通过token来进行身份的验证 验证报文完整性的方法就是使用MD5/ ...

Vue学习笔记 — 整体流程Vue的整体流程对一些业务实现很有帮助，当出现一些bug时我们可以根据所使用功能的内部实现，快速、精确地定位问题所在，当我们理解了Vue.js能提供的能力边界在哪里的时候，我们就可以最大限度地发挥它的价值 目录结构 script # 与构建相关的脚本和配置文件 dist # 构建后的文件 flow # Flow的类型声明 package # vue-server-randerer和vue-template-compiler，他们可以作为单独的npm包发布 test # 所有的测试代码 src # 源代码 compiler # 模板编译相关的代码（解析器、、优化器、代码生成器） core # 通用的、与平台无关的运行时代码 observer # 变化侦测相关代码 vdom # 虚拟dom相关代码 instance # Vue.js 实例的构造函数与原型方法 global-api # 全局的API代码 components # 通用的抽象组件 server # 服务端渲染相关代码 platforms # 特定平台相关代码 sfc # 单文件组件（ ...

TypeScript学习笔记TypeScript是javaScript的超集，有一部分的语法与ES6相似，且更加趋近于面向对象编程，是现如今前端语言发展的主流方向 安装使用npm installl -g typescript进行安装 安装之后可以使用tsc -v查看解析器的版本号同时验证安装 tsc的作用就是将ts转换为浏览器、nodejs可识别的js代码 运行首先编写ts文件，编写后在终端运行tsc ***.ts的命令，可以将ts文件编译为一个node或浏览器可识别的js文件，然后运行即可 在node中运行ts会明显感觉到过于复杂，因此可以使用ts-node工具 安装方式： npm install -g ts-node 使用方式： ts-node ts文件名 生成配置： tsc --init 自动编译： 配置之后修改tsconfig文件实现自动编译 在vscode中点击终端=>点击运行任务 =>点击tsc监视器 数据类型TypeScript规定： 在声明变量时必须指定变量类型 声明方式： let 变量名 : 变量类型; let age: numbe ...

数据结构–线性表⚠️ 本文中代码均使用 C++ 进行编码 线性表是线性数据结构的典型代表，线性表是一种最基本、最简单的数据结构，数据元素之间仅具有单一的前驱和后继关系。线性表不仅有着广泛应用，同时它也是其他数据结构的基础。 线性表简称表，是n(n>=0)个具有相同数据类型的数据元素的有限序列，线性表中数据元素的个数称为线性表的长度，长度等于零时称为空表 我们通常使用ai表示线性表中的第i个元素，而a1也就是线性表的第一个元素，他没有前驱，而an则是线性表的最后一个元素，他没有后继，其他每个元素仅有一个前驱和一个后继 线性表中一般都包含一下的方法或操作，以供我们对线性表进行各种操作： Data(用于存储数据) InitList（创建一个新的空的线性表） DestoryList（销毁线性表并释放空间） Length（获取线性表长度，记线性表中元素的个数） Get（获取线性表中第i个位置的元素） Locate（按值查找，返回该值所对应的位置序号） Insert（向位置i插入元素x） Delete（删除线性表中位置i所对应的元素） Empty（判空操作，返回一个bool值 ...

Vue学习笔记 — 模板编译原理Vue.js提供了模板语法，允许我们声明式地描述状态和DOM之间地绑定关系，然后通过模板来生成真实DOM并将其呈现在用户界面上 渲染步骤将模板编译成渲染函数可以分为两个步骤，先将模板解析成**AST(Abstract Syntax Tree，抽象语法树)**，然后再使用AST生成渲染函数 由于静态节点不需要总是重新渲染，因此在生成AST之后与生成渲染函数之前会需要一个操作->遍历一遍AST，给所有静态节点做一个标记，这样在虚拟DOM更新节点时就会发现这个标记，也就不会重新渲染它 模板编译答题分为三个部分： 将模板解析为AST 遍历AST标记静态节点 使用AST生成渲染函数 这三个部分在模板编译中分别抽象出三个模块来实现功能： 解析器 优化器 代码生成器 解析器解析器地功能就是将模板解析为AST 在解析器内部，分成了很多小的解析器->过滤器解析器，文本解析器、HTML解析器，通过主线将这些解析器组装在一起 文本解析器主要用于解析带有变量的文本Hello，不带有变量的文本是不需要使用文本解析器进行解析的 解析器的内部其实页分为了好几种解析 ...

Vue学习笔记 —- 虚拟DOM什么是虚拟DOM随着时代的发展，页面上的功能越来越多，程序中需要维护的状态越来越多，DOM操作也越来越频繁 我们发现像之前那样使用jQuery或原生js来开发页面，那么操作DOM的代码占据大多数，程序中的状态也难以进行管理，这被称为命令式操作DOM，虽然简单实用，但是却难以进行维护。 当我们开始使用三大主流框架Vue.js、Angular和React时，他们都是声明式地操作DOM，我们通过描述状态与DOM之间的映射关系，就可以将状态转换为视图，甚至我们根本不需要手动操作DOM 我们的关注点应该聚焦在状态维护上，而DOM操作其实是可以省略的 当某个状态发生改变时，只更新与它相关的DOM节点，为了解决这个问题，主流框架都有着自己的一套解决方案，Angular中使用脏检查的流程，React中使用的是虚拟DOM，Vue1.0使用细粒度的绑定 虚拟DOM的解决方式是通过状态生成一个虚拟节点树，然后使用虚拟节点树进行渲染，渲染之间会将新旧虚拟节点树进行对比，只渲染不一样的地方 使用虚拟节点进行DOM操作有效提高了性能 虚拟DOM在Vue.js中只做了两件事： 提供 ...