- 博客(26)
- 收藏
- 关注
RSS订阅
原创 vue模板编译原理—有源码
vue模板编译模板编译的概念在底层实现上，Vue.js会将模板编译成虚拟DOM渲染函数，渲染函数的执行就会产生最新状态下的vnode，然后使用这个vnode进行重新渲染视图模板编译的作用：输入模板，输出渲染函数Vue.js中将模板编译成渲染函数的步骤：将模板解析为AST 解析器完成遍历AST标记静态节点 优化器完成使用AST生成渲染函数 代码生成器完成备注：AST即抽象语法树，是用于描述一个节点信息的JavaScript对象整体pipeline：模板->解析器->
2020-07-02 09:38:25
203
原创 async/await—异步编程方式
async 和 await1.async await含义async是Generator函数的语法糖generator: generator返回一个迭代器，每次使用迭代器的next方法执行,每次执行都是执行到下一次的yieldconst fs = require('fs');const readFile = function (fileName) { return new Promise(function (resolve, reject) { fs.readFile(fileName
2020-07-11 22:10:30
162
原创 Vue优化知识点
Vue优化1. keep-alivekeep-alive缓存组件/页面<template> <div> <keep-alive> <router-view /> </keep-alive> </div></template>其中提供include和exclude属性，两者都支持字符串后正则表达式，include表示只有名称匹配的组件会被缓存，
2020-07-10 21:29:06
183
原创 Vue响应式原理总结
Vue响应式原理1. 什么是变化侦测侦测数据的变化，当数据发生变化时，会通知视图进行相应的更新操作vue实现变化政策的方案是：数据劫持+发布订阅模式2. Object的变化侦测如何追踪变化？答：Object.defineProperty()Object.defineProperty()对data中的各个属性进行getter和setter的定义当读取data中属性的值时将调用getter当修改data中属性的值时将调用setter所以在Vue当中，getter收集依赖，setter触发
2020-07-10 16:31:28
263
原创 css3-flex布局（xf快点记下来吧）
flex布局1.flex布局基础采用flex布局的元素，称为弹性盒子/flex盒子，简称”容器”它的所有子元素自动成为容器成员，称为flex项目（flex item），简称“项目”弹性容器外和弹性子元素内部都是正常渲染，flex布局只定义了弹性子元素在弹性容器中的布局方式在flex盒子中存在两根轴线，通过设置属性，可以控制子项目在主轴或者纵轴上的排列方式主轴，main axis纵轴，cross axis2.容器属性1.flex-directionflex-direction属性决定
2020-07-09 09:05:47
185
原创 异步编程—Promise介绍和应用
PromisePromise是ES6中提出的处理异步的异步编程方法promise能够解决回调顺序的不确定性和回调地狱（回调地狱是指回调代码嵌套程度加深）1. Promise的状态promise是一个容器，容器内部保存了异步事件的状态/结果pending 等待态resolved 执行态rejected 拒绝态当状态发生改变时，状态保持不变2. Promise的状态转移方法创建一个promise对象：默认参数是两个方法，resolve和reject当异步事件成功则调用resolve方
2020-07-08 14:55:53
141
原创 JS事件对象大汇总
JS事件对象1.什么是事件对象事件对象是用来记录一些事件发生时的相关信息的对象。事件对象只有事件发生时才会产生，并且只能是事件处理函数内部访问，在所有事件处理函数运行结束后，事件对象就被销毁。2.事件传播机制总体来说，事件传播机制分为三个阶段：（1）capture phase（捕获阶段）：就是事件从window开始一层一层向目标传递的阶段。（2）target phase（目标阶段）：...
2020-07-08 11:55:24
259
原创 JS面试题汇总—ing
js常见用法1. 判断一个对象是否为数组不能使用typeof关键字let arr = [1, 2, 3];let obj1 = {name: 'xf'};let obj2 = null;//打印出的结果都是 objectconsole.log(typeof arr);console.log(typeof obj1);console.log(typeof obj2);Array.isArray(arr) //true判断原型let arr = [1, 2, 3];console
2020-07-04 22:33:12
104
原创 ajax，axios和fetch的比较和区别
ajax，axios和fetch的区别1. 原生ajax原生ajax需要在每次异步请求时创建一个XMLHttpRequest对象，通过这个对象可以从服务器获取数据let xhr = new XMLHttpRequest();xhr.open('get', 'test.php');xhr.send();xhr.onreadystatechange = function(){ if(xhr.readyState===4 && xhr.status===200){ console
2020-07-04 08:37:05
334
原创 计算机底层知识点汇总
底层知识1.本地存储谈谈他们的区别本地数据存储机制包括：cookie，sessionStorage 和 localStoragecookie：cookie是由服务器端生成发送给客户端，用于存储一些用户和通信之间的数据sessionStorage是用于保存当前页面的会话数据localStorage可以解决cookie大小不足问题，用于存储用户配置和缓存数据等相同点三者都受同源策略的影响，不能跨域三者都是用于存储部分网页数据不同点存储大小有效期与服务器端通信本地存储
2020-07-03 14:57:12
446
原创 vue的父子组件通信传值
vue的父子组件传值1. 使用props进行父传子父组件在使用子组件时进行绑定传值子组件使用props数组接收父组件传来的值let comp = { data(){ return { } }, /*props接收父组件的传值*/ props: [name, g], template: ` <p>name, g</p> `}new Vue({ el: "#id", data { name: "vue", google: "go
2020-07-03 14:20:18
120
原创 ES6中的let和const关键字
let & constES6中新增关键字 let 和 const 用于声明变量1. let和const不存在变量提升var命令会发生“变量提升”现象，即变量可以在声明之前使用，值为undefinedlet命令改变了语法行为，它所声明的变量一定要在声明后使用，否则报错// var 的情况console.log(foo); // 输出undefinedvar foo = 2;// let 的情况console.log(bar); // 报错ReferenceErrorlet bar
2020-07-02 20:01:58
91
原创 css笔记和面试题汇总
css中的细节1. 文档流一个网页中的元素根据HTML文档中的位置和CSS属性，在页面中有着不同的布局。一个盒子（元素）可以根据三种定位方案来布置normal flow（文档流/常规流）float（浮动）absolute positioning（绝对定位）若为常规流则元素按照HTML文档中的位置顺序，自上而下的排列若设置float属性，则该盒子会脱离文档流，其他（后面）的盒子会无视这个元素，但盒子内的文本（内容流）会让出位置若设置绝对定位属性，同样也会脱离文档流，但其他盒子与其内部的内
2020-06-30 22:44:57
127
原创 uni-app跨端开发初体验
uni-appuni-app是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可以发布到ios，安卓，以及各种小程序uni-app非常适合进行跨端开发，正对开发者减少学习成本，对于公司减少开发成本uni-app开发微信小程序注意事项配置微信开发者工具路径，工具选项里设置开启工具的服务端口，微信开发工具中的设置->安全设置->开启端口uni-app项目目录介绍pages：存放uni-app的页面static：存放静态资源unpackage：存放最终打包输出文
2020-06-29 22:34:18
463
原创 JavaScript解决跨域常用办法
跨域跨域的产生原因处于对安全方面的考虑，浏览器采取同源策略，即前端不允许跨域调用后端接口所谓同源/同域：协议，域名，端口 三者都相同才是同源/同域1. JSONPJSONP（JSON with padding），解决方案：script标签不受浏览器同源策略的影响（script标签的开放策略）前端设置好回调函数，并将回调函数作为请求url中的参数服务器通过请求url获取回调函数，并将回调函数放在响应中返回浏览器收到响应，由于相应的内容是js脚本，浏览器会执行脚本从而达到了跨域的作用//s
2020-06-28 09:57:26
268
原创 web性能优化—持续更新
web性能优化1. preload 和 prefetchweb加载原语<link rel="preload" as="script" /><link rel="prefetch" /><link rel="dns-prefetch" href="www.qq.com" /><link rel="preconnect" href="https://cdn.shopify.com" />preload预加载preload是一个声明式fetch
2020-06-28 08:54:14
172
原创 CSS布局：水平垂直居中的方式
CSS布局：水平垂直居中的方式水平垂直居中：元素在水平和垂直方向都居中我们常常margin:auto属性控制水平居中，如果想要水平垂直居中，则有以下三类方法。首先展示html代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>css垂直居中</title> <style> .fathe
2020-06-27 21:51:30
131
原创 JavaScript中的垃圾回收站机制（GC）
js中的垃圾回收站机制JavaScript引擎可以进行自动内存管理——垃圾回收站机制垃圾回收站机制是浏览器JS引擎的内存管理机制，该机制会定期对不再使用的变量进行内存的回收JavaScript垃圾回收的机制很简单：找出不再使用的变量，然后释放掉其占用的内存，但是这个过程不是实时的，因为其开销比较大，所以垃圾回收器会按照固定的时间间隔周期性的执行1. 什么是不再使用的对象不再使用的对象即变量的生命周期结束，当然只可能是局部变量因为全局变量的生命周期是当当前页面关闭才会结束也不可能闭包，闭包是由于
2020-06-27 15:35:16
622
原创 JavaScript中的各种手撕代码（上）
js中的各种手撕代码1. new分析问题：new关键字用于生成一个构造函数的实例手撕步骤：创建一个对象为该对象完善原型链以该对象执行构造函数返回该对象function _new(fn){ /* let obj = {}; obj.__proto__ = fn.prototype */ let obj = Object.create(fn.prototype); fn.apply(obj, arguments); return obj
2020-06-27 13:02:06
510
原创 计算机网络基础—运输层（TCP&UDP）
运输层1.运输层作用通信的真正端点并不是主机而是主机中的 进程运输层为它上面的应用层 提供 端到端（end2end）的通信服务运输层的两个主要协议：UDP & TCP2.端口端口(port)，即通信进程的一个标识符(pid, port ID)，16位端口的分类服务器端使用的端口号知名端口（well-known）：数值为 0~1023这些端口被指派给了TCP/IP中最重要的应用程序FTP(21), DNS(53), HTTP(80), HTTPS(443)登记端口号：
2020-06-27 08:22:24
399
原创 网页元素位置计算
网页元素位置计算1. window对象window.innerHeight 返回窗口的文档显示区的宽高window.innerHeight;window.innerWidth;window.outerHeight 属性获取加上工具条与滚动条窗口的宽度与高度window.outerHeight;window.outerWidth;pageXOffset 和 pageYOffset 属性返回文档在窗口左上角水平和垂直方向滚动的像素window.pageXOffset;wind
2020-06-26 15:21:28
348
原创 前端适配和响应式布局
前端适配/响应式布局1. em和rempx：固定像素，一旦设置了就无法适应页面大小而改变em：em相对于父元素的font-size使用em的注意点：body选择器中声明font-size=62.5%参考：任意浏览器的默认字体高都是16px。未经调整的浏览器都符合: 1em=16px将你的原来的px数值除以10，然后换上em作为单位rem：rem只相对于根元素html的font-sizerem既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合
2020-06-26 14:01:26
424
原创 前端动画效果常见用法/API总结
前端动画效果常见用法总结1. box-shadow（css）box-shadow: h-shadow v-shadow blur spread color inset;h-shadow 必需。水平阴影的位置。允许负值v-shadow 必需。垂直阴影的位置。允许负值blur 可选。模糊距离spread 可选。阴影的尺寸color 可选。阴影的颜色。请参阅 CSS 颜色值inset 可选。将外部阴影 (outset) 改为内部阴影通过将box-shadow设置为inset，可以将外阴影变
2020-06-26 11:33:53
207
原创 JS设计模式—部分总结
JavaScript设计模式1. 单例模式单例模式保证一个类仅有一个实例，并提供一个访问它的全局访问点let singleton = (function(){ let instance; return function(constructor){ if (!instance){ instance = new constructor(); } return instance; }})()2. 策略模式
2020-06-23 11:52:11
108
原创 JavaScript中的作用域和闭包文档
作用域与闭包1.环境在计算机中，环境就是一块内存区域执行环境：当函数被调用时会产生一个执行环境（内存地址），在执行环境中可以定义数据变量/函数等执行环境有两个特点：有自身作用域，也就是作用范围全局作用域局部作用域块级作用域：在一个代码块（由一对花括号包裹）内部当环境不再被使用时，可以自动销毁或人为销毁在js中，全局环境不会被回收，除非关闭页面或浏览器人为回收2.环境的生命周期function hd(){ let n = 1; function sum() {
2020-06-23 09:13:11
107
原创 vue面试题总结-持续总结
Vue面试1. v-if和v-for那个优先级更高<template> <ul v-for="item in items" v-if="condition"> <li></li> </ul></template><script>export default { data(){ return{ items: [],
2020-06-22 18:03:20
558
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人