- 博客(29)
- 收藏
- 关注
RSS订阅原创 vue-router原理与源码分析
单页面应用（SPA）一次性从服务器下载，切换页面不用再发送页面请求，只发送对应页面的图片等请求Vue-router核心$router.go(-1) === history.go(-1) === 浏览器后退操作路由需要实现响应式1.vue-router 实现响应式与vuex一样都是借助vue的响应式原理...
2020-09-08 20:47:58
360
原创 css浮动布局详解
概念浮动布局简介:当元素浮动以后可以向左或向右移动，直到它的外边缘碰到包含它的框或者另外一个浮动元素的边框为止。元素浮动以后会脱离正常的文档流，所以文档的普通流中的框就变现的好像浮动元素不存在一样。优点类似于inline-block区别：第一个：就是关于横向排序的时候，float可以设置方向而inline-block方向是固定的；第二个：就是inline-block在使用时有时会有空白间隙的问题缺点最明显的缺点就是浮动元素一旦脱离了文档流，就无法撑起父元素，会造成父级元素的高度塌陷解决
2020-09-03 11:06:39
405
原创 css块级元素与行内元素与行内块元素
概念块级元素：块状元素排斥其他元素与其位于同一行，可以设定元素的宽（width）和高（height），块级元素一般是其他元素的容器，可容纳块级元素和行内元素。行内元素：行内元素不可以设置宽（width）和高（height），但可以与其他行内元素位于同一行，行内元素内一般不可以包含块级元素。行内元素的高度一般由元素内部的字体大小决定，宽度由内容的长度控制。常见元素常见块级元素有：h1,h2,h3,h4,h5,h6,p,div,dl,dt,hr,ol,ul,li,form,pre,table,
2020-09-03 10:43:50
703
1
原创 css元素水平垂直居中
使用 flex 弹性布局父元素设置为 display:flex；justify-content: center；align-items: center;<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &
2020-09-03 10:22:29
126
原创 vuex原理与源码分析
概念Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。核心思想它集中于MVC模式中的Model层，规定所有的数据操作必须通过 action – mutation – state change 的流程来进行，再结合Vue的数据视图双向绑定特性来实现页面的展示更新。Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。Vue
2020-09-01 17:11:26
174
原创 Vue源码分析(响应式化)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <div id=
2020-08-28 16:34:01
125
原创 Vue源码分析(函数拦截思想)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <script>
2020-08-28 14:36:06
217
原创 Vue源码分析（虚拟DOM与优化）
概念使用步骤1.编写 页面 模板 1.直接在HTML标签中写 2.使用template 3.使用单文件（<template>）2.创建Vue实例 1.在Vue 的构造函数中：data,methods,computer,watcher,props,...3.将Vue挂载到页面中（mount）数据驱动模型Vue执行流程 1.获得模板：模板中有‘坑’ 2.利用Vue构造函数提供的数据来‘填坑’，就可以得到页面显示的'标签'了 3.替
2020-08-26 16:00:09
801
原创 Vue源码分析（流程分析）
流程分析使用步骤1.编写 页面 模板 1.直接在HTML标签中写 2.使用template 3.使用单文件（<template>）2.创建Vue实例 1.在Vue 的构造函数中：data,methods,computer,watcher,props,...3.将Vue挂载到页面中（mount）数据驱动模型Vue执行流程 1.获得模板：模板中有‘坑’ 2.利用Vue构造函数提供的数据来‘填坑’，就可以得到页面显示的'标签'了 3
2020-08-25 14:22:00
290
原创 Vue的MVVM响应式原理(双向数据绑定)源码解析（附面试题）
MVVMMVVM是Model-View-ViewModel的简写，将视图 UI 和业务逻辑分开ViewMode：也就是mvc 的控制器，取出 Model 的数据同时帮忙处理 View 中由于需要展示内容而涉及的业务逻辑源码分析
2020-08-24 11:47:47
720
原创 JS-防抖与节流
概念日常开发过程中，滚动事件做复杂计算频繁调用回调函数很可能会造成页面的卡顿，这时候我们更希望把多次计算合并成一次，只操作一个精确点，JS把这种方式称为debounce（防抖）和throttle（节流）...
2020-08-22 14:58:53
161
原创 js高级特性-深拷贝和浅拷贝
js数据类型聊深浅拷贝之前，我们得先弄清楚js的数据类型，你才能搞懂为什么要用深浅拷贝两大数据类型基本数据类型string, number,boolean,null,undefine,symbol 六大基本类型引用数据类型Object,Array,Date,Function,RegExp基本数据类型使用typeof可以返回其基本数据类型，但是NULL类型会返回object，因此null值表示一个空对象指针；引用数据类型使用typeof会返回object，此时需要使用instanceof来检
2020-08-19 11:28:09
237
原创 js高级特性-对象(原型对象，原型链，继承)
概念对象是JavaScript的基本数据类型对象是一种复合值：它将很多值（原始值或者其他对象）聚合在一起，可通过名字访问这些值。对象也可看做是属性的无序集合，每个属性都是一个名/值对。属性名是字符串，因此我们可以把对象看成是从字符串到值得映射。JavaScript对象还可以从一个称为原型的对象继承属性。对象的方法通常是继承的属性。这种“原型式继承”（prototypal inheritance）是JavaScript的核心特征。除了字符串、数字、true、false、null和undifined之外
2020-08-13 09:43:52
421
原创 js高级特性-作用域
概念作用域（scope）是结构化编程语言中的重要概念，它决定了变量的可见范围和生命周期，正确使用作用域可以使代码更清晰、易懂作用域可以减少命名冲突，而且是垃圾回收的基本单元结构化编程语言：就是适合进行结构化程序设计的语言，比如说面向过程的C语言；简而言之就是运行原理能有效的模拟程序框图的语言，通常面向过程的编程语言都是结构化编程语言；常见编程语言C、C++、Java 等，都以花括号作为块级作用域而js并没有此限制，js只以函数决定作用域，其他if等的花括号不作为独立作用域if (true)
2020-08-09 15:23:52
204
原创 js高级特性-闭包（涉及函数作用域）
闭包的本质概念闭包函数：声明在一个函数中的函数，叫做闭包函数。闭包：内部函数总是能访问到外部函数声明的参数和变量，即使在外部函数返回后（寿命终结）了之后特点1.让外部访问函数内部变量成为可能；2.局部变量会常驻在内存中；3.可以避免使用全局变量，防止全局变量污染；4.会造成内存泄漏（有一块内存空间被长期占用，而不被释放）闭包的创建闭包就是可以创建一个独立的环境，每个闭包里面的环境都是独立的，互不干扰。闭包会发生内存泄漏，**每次外部函数执行的时 候，外部函数的引用地址不同，都会重新创建一
2020-08-08 16:23:08
196
原创 vue虚拟dom原理与实现
真实dom浏览器渲染引擎工作流程：创建DOM树——创建StyleRules——创建Render树——布局Layout——绘制Painting详细点就是：第一步，用HTML分析器，分析HTML元素，构建一颗DOM树(标记化和树构建)。第二步，用CSS分析器，分析CSS文件和元素上的inline样式，生成页面的样式表。第三步，将DOM树和样式表，关联起来，构建一颗Render树(这一过程又称为Attachment)。每个DOM节点都有attach方法，接受样式信息，返回一个render对象(又名re
2020-08-07 17:27:17
713
原创 vue双向数据绑定原理与实现
vue双向数据绑定原理与实现Object.defineProperty语法:Object.defineProperty(obj,prop,descriptor)obj:目标对象prop：需要定义的属性和方法的名称descriptor:目标属性所拥有的特性第三个参数对应为对象，可供定义的属性列表value:属性的值writable:如果为false，属性的值就不能被重写。get: 一旦目标属性被访问就会调回此方法，并将此方法的运算结果返回用户。set:一旦目标属性被赋值，就会调回此方法。
2020-08-05 10:26:03
195
原创 Bind原理与源码分析
Bind原理与源码分析bind实例function loadXMLDoc(){ var fu = fun.bind(a,12,13) fu()}function fun(n,n1){ console.log(this.name+'--'+n+'--'+n1)}let a = {name:'xa'}bind原理fn.bind(obj, args)bind()方法会创建一个函数，该函数的this指向了传入的第一个参数，当bind()的参数为空时，this指向全局对象。如浏览器中的
2020-07-31 17:02:57
639
原创 html、vue、小程序的区别
html、vue、小程序的区别网络模型改变1.以前b/s：服务端代码混在页面中2.现在c/s：前后端分离，通过js，api获取json数据，通过数据绑定渲染在页面上文件类型变化1.以前.html文件，开发运行都是html2.现在是.vue，开发是.vue，经过编译后运行变成js文件文件内代码变化1.以前<!DOCTYPE html> <html> <head> <meta charset="utf-8" />
2020-07-28 14:43:40
2261
原创 call和apply原理与源码分析
call与apply源码分析call与apply都是改变函数内this指向问题call1.第一个参数是this指向的对象。2.使用的单个参数进行传递。实例function loadXMLDoc(){ abc.call(a)}let a = { name : 'bcd'}function abc(){ console.log(this.name)}//(index):17 bcdvar name = '李四'var b = {name:'张三'};functio
2020-07-23 19:56:59
495
原创 promise原理与源码分析
promise原理与源码分析promise1、主要用于异步计算2、可以将异步操作队列化，按照期望的顺序执行，返回符合预期的结果 （解决回调地狱）3、可以在对象之间传递和操作promise，帮助我们处理队列为什么会有promise：异步请求： 则是将耗时很长的A交付的工作交给系统之后，就去继续做B交付的工作，。等到系统完成了前面的工作之后，再通过回调或者事件，继续做A剩下的工作。常见异步操作：1.事件监听document.getElementById('#start').addEventLi
2020-07-22 19:14:04
1078
原创 Ajax原理分析(涉及回调函数及异步请求，跨域)
Ajax原理分析AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下（所谓局部刷新）。核心对象：XMLHttpRequest这个对象为向服务器发送请求和解析服务器响应提供了流畅的接口，使得浏览器可以发出HTTP请求与接收HTTP响应，实现在页面不刷新的情况下和服务端进行数据交互。Ajax工作原理...
2020-07-21 20:47:48
700
原创 webpack（涉及基本配置）
webpackwebpack 是一种前端资源构建工具，一个静态模块打包器(module bundler)。在 webpack 看来, 前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理。它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源(bundle)。五大核心1.Entry：入口(Entry)指示 webpack 以哪个文件为入口起点开始打包2.Output:输出(Output)指示 webpack 打包后的资源 bundles 输出到哪里去3.Loa
2020-07-20 14:06:06
1033
原创 Vue学习记录（1）
VueVue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。Vue 只关注视图层， 采用自底向上增量开发的设计。Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件目录结构主要解释src目录1.assets：资源文件夹，图片等2.components:组件文件夹，通过.vue文件写的组件3.router：路由文件夹，...
2020-07-19 20:34:32
182
原创 TypeScript学习记录（1）
TypeScript学习记录TypeScript 是一种由微软开发的自由和开源的编程语言，它是 JavaScript 的一个超集，扩展了 JavaScript 的语法。类型批注实例function Add(left: number, right: number): number { return left + right;}基本类型的批注是number, bool和string。而弱或动态类型的结构则是any类型。接口实例interface Shape { name: s
2020-07-16 17:19:27
260
原创 React学习记录（1）
这里写自定义目录标题React学习记录React 特点React 项目创建React学习记录React 是一个声明式，高效且灵活的用于构建用户界面的 JavaScript 库。使用 React 可以将一些简短、独立的代码片段组合成复杂的 UI 界面，这些代码片段被称作“组件”。React 特点1.声明式设计 −React采用声明范式，可以轻松描述应用。2.高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。3.灵活 −React可以与已知的库或框架很好地配合。4.JSX − J
2020-07-15 20:25:11
292
原创 :first-child的坑
:first-child的坑:first-child 选择器用于选取属于其父元素的首个子元素的指定选择器错误理解认为E:first-child选中E元素的第一个子元素<style>div:first-child{color: red;}</style><div class="demo"><a>123</a><a>123</a><a>123</a><a>123&l
2020-07-13 16:50:43
336
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人