前端
楽BB
这个作者很懒,什么都没留下…
展开
-
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 · 166 阅读 · 0 评论 -
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 · 188 阅读 · 0 评论 -
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 · 267 阅读 · 0 评论 -
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 · 189 阅读 · 0 评论 -
异步编程—Promise介绍和应用
PromisePromise是ES6中提出的处理异步的异步编程方法promise能够解决回调顺序的不确定性和回调地狱(回调地狱是指回调代码嵌套程度加深)1. Promise的状态promise是一个容器,容器内部保存了异步事件的状态/结果pending 等待态resolved 执行态rejected 拒绝态当状态发生改变时,状态保持不变2. Promise的状态转移方法创建一个promise对象:默认参数是两个方法,resolve和reject当异步事件成功则调用resolve方原创 2020-07-08 14:55:53 · 145 阅读 · 0 评论 -
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 · 108 阅读 · 0 评论 -
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 · 341 阅读 · 0 评论 -
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 · 129 阅读 · 0 评论 -
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 · 94 阅读 · 0 评论 -
vue模板编译原理—有源码
vue模板编译模板编译的概念在底层实现上,Vue.js会将模板编译成虚拟DOM渲染函数,渲染函数的执行就会产生最新状态下的vnode,然后使用这个vnode进行重新渲染视图模板编译的作用:输入模板,输出渲染函数Vue.js中将模板编译成渲染函数的步骤:将模板解析为AST 解析器完成遍历AST标记静态节点 优化器完成使用AST生成渲染函数 代码生成器完成备注:AST即抽象语法树,是用于描述一个节点信息的JavaScript对象整体pipeline:模板->解析器->原创 2020-07-02 09:38:25 · 207 阅读 · 0 评论 -
css笔记和面试题汇总
css中的细节1. 文档流一个网页中的元素根据HTML文档中的位置和CSS属性,在页面中有着不同的布局。一个盒子(元素)可以根据三种定位方案来布置normal flow(文档流/常规流)float(浮动)absolute positioning(绝对定位)若为常规流则元素按照HTML文档中的位置顺序,自上而下的排列若设置float属性,则该盒子会脱离文档流,其他(后面)的盒子会无视这个元素,但盒子内的文本(内容流)会让出位置若设置绝对定位属性,同样也会脱离文档流,但其他盒子与其内部的内原创 2020-06-30 22:44:57 · 130 阅读 · 0 评论 -
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 · 467 阅读 · 0 评论 -
JavaScript解决跨域常用办法
跨域跨域的产生原因处于对安全方面的考虑,浏览器采取同源策略,即前端不允许跨域调用后端接口所谓同源/同域:协议,域名,端口 三者都相同才是同源/同域1. JSONPJSONP(JSON with padding),解决方案:script标签不受浏览器同源策略的影响(script标签的开放策略)前端设置好回调函数,并将回调函数作为请求url中的参数服务器通过请求url获取回调函数,并将回调函数放在响应中返回浏览器收到响应,由于相应的内容是js脚本,浏览器会执行脚本从而达到了跨域的作用//s原创 2020-06-28 09:57:26 · 270 阅读 · 0 评论 -
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 · 175 阅读 · 0 评论 -
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 · 132 阅读 · 0 评论 -
JavaScript中的垃圾回收站机制(GC)
js中的垃圾回收站机制JavaScript引擎可以进行自动内存管理——垃圾回收站机制垃圾回收站机制是浏览器JS引擎的内存管理机制,该机制会定期对不再使用的变量进行内存的回收JavaScript垃圾回收的机制很简单:找出不再使用的变量,然后释放掉其占用的内存,但是这个过程不是实时的,因为其开销比较大,所以垃圾回收器会按照固定的时间间隔周期性的执行1. 什么是不再使用的对象不再使用的对象即变量的生命周期结束,当然只可能是局部变量因为全局变量的生命周期是当当前页面关闭才会结束也不可能闭包,闭包是由于原创 2020-06-27 15:35:16 · 627 阅读 · 0 评论 -
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 · 516 阅读 · 0 评论 -
计算机网络基础—运输层(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 · 412 阅读 · 0 评论 -
网页元素位置计算
网页元素位置计算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 · 355 阅读 · 0 评论 -
前端适配和响应式布局
前端适配/响应式布局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 · 427 阅读 · 0 评论 -
前端动画效果常见用法/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 · 209 阅读 · 0 评论 -
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 · 114 阅读 · 0 评论 -
JavaScript中的作用域和闭包文档
作用域与闭包1.环境在计算机中,环境就是一块内存区域执行环境:当函数被调用时会产生一个执行环境(内存地址),在执行环境中可以定义数据变量/函数等执行环境有两个特点:有自身作用域,也就是作用范围全局作用域局部作用域块级作用域:在一个代码块(由一对花括号包裹)内部当环境不再被使用时,可以自动销毁或人为销毁在js中,全局环境不会被回收,除非关闭页面或浏览器人为回收2.环境的生命周期function hd(){ let n = 1; function sum() {原创 2020-06-23 09:13:11 · 113 阅读 · 0 评论 -
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 · 559 阅读 · 0 评论 -
JS事件对象大汇总
JS事件对象1.什么是事件对象事件对象是用来记录一些事件发生时的相关信息的对象。事件对象只有事件发生时才会产生,并且只能是事件处理函数内部访问,在所有事件处理函数运行结束后,事件对象就被销毁。2.事件传播机制总体来说,事件传播机制分为三个阶段:(1)capture phase(捕获阶段):就是事件从window开始一层一层向目标传递的阶段。(2)target phase(目标阶段):...原创 2020-07-08 11:55:24 · 264 阅读 · 0 评论