web还不是-优快云博客

原创前端面试范围考点

几乎100%必考题：1. JS eventloop机制2. 回流/重绘/合成3. vue/react原理，virtual dom结构4. https原理高频面试题：1. CSS：BFC容器、居中方式、flex布局2. JS：原型链、函数执行栈、闭包、this3. 手写JS代码：防抖/节流、Promise.all、快排/归并排序4. vue：computed原理、数组绑定原理、nextTick原理、keep-alive原理、vue3新特性5. react：fiber原理、hooks原理、

2020-11-12 15:42:34 288

原创 webpack打包js之babel全局垫片和局部垫片

全局垫片polyfill,这个库将会模拟一个完全的 ES2015+ 的环境。这意味着你可以使用新的内置语法比如 promise 或者 WeakMap，静态方法比如Array.from 或 Object.assign, 实例方法比如 Array.prototype.includes 和 generator 函数。使用的时候按照webpack官网去下载相应的babel包npm install --save-dev bable-loader @babel/core @babel/prese

2020-11-01 16:16:25 963

原创 CSS BFC

BFC布局规则1:内部的BOX会在垂直方向一个接一个的放置2:BOX垂直方向的距离是由Margin决定属于同一个BFC的两个相邻的BOX的margin会发生重叠3:每个盒子（块盒与行盒）的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。4:BFC的区域不会于float box重叠5:BFC就是页面上的一个隔离的独立容器容器里面的子元素不会影响到外面的元素反之也是如此6:计算BFC的高度时 ...

2020-07-27 21:46:38 213

原创浏览器渲染页面的原理以及流程

浏览器将域名通过网络通信从服务器拿到html之后会进行一下几个步骤1:根据html文件构建DOM树和CSSOM树,构建DOM树期间如果遇到JS 则会阻塞DOM树和CSSOM树的构建，优先加载js文件，加载完毕之后在继续构建DOM和CSSOM树2:构建渲染树(Render Tree)3:页面的重绘(repaint)和重排(reflow)一：构建dom树1.1构建DOM树HTML 文档中的所有内容皆是节点，各节点之间拥有层级关系，如父子关系、兄弟关系等，彼此相连，...

2020-07-27 21:29:13 198

原创 vue常见问题

mvvm原理model ：数据源view ：带有特殊属性的html模版viewModel：依靠指令修改数据和渲染模版mvvm的设计设点模版编译（compile）数据劫持(observe) 发布订阅(Dep) 观察者(watcher)响应式数据的原理Vue 的响应式，核心机制是观察者模式。数据是被观察的一方，当数据反正变化的时候，会通知所有的观察者，这样观察者能立马作出反应，重新渲染视图vue检测数据的变化push pop shift unshif...

2020-06-05 18:04:39 184

原创 VUE组件中data属性双向绑定的原理源码部分解读

// src/core/instance/state.js// 初始化组件的stateexport function initState (vm: Component) { vm._watchers = [] const opts = vm.$options if (opts.props) initProps(vm, opts.props) if (opts.methods) initMethods(vm, opts.methods) // 当组件存在data属性 if (op.

2020-05-15 20:32:13 452

原创 web前端面试的模糊问题

Ajax 的原理是什么？有什么优缺点？Promise 的原理是什么？请你手写一个 Promise 出来Http 2.0 做了哪些升级？TCP 与 UDP 的区别？MVC 与 MVVM 的区别？实现对象深度拷贝的方式？html5的新特性...

2020-05-07 15:42:17 175

原创 vue 父子组件传递数据的几种方式 props，$emit, eventbus, provide/inject

1：常用的是props和$emit的方式来处理，也是最常用的方式 a:父组件传值到子组件父组件<parent> <child :message="msg"></child></parent>data(){ return { msg: "this is parent message" }...

2020-04-29 15:49:54 746

原创简单的websocket服务

socket_service.js (node版本)let ws = require('ws');let socketServer = ws.Server;let uuid = require('uuid');let wss = new socketServer({port:8090})let User = require('./user.js');let clients =...

2019-12-01 17:14:41 250

原创 css小技巧

一、meta基础知识01、H5页面窗口自动调整到设备宽度，并禁止用户缩放页面<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />02、忽略将页面中的数字识别为电话号码&l...

2019-09-10 16:11:31 505

原创前端面试点收集

bind call apply 三个函数的认识是否能自己实现web前端的requestAnimationFrame了解么有使用过么说一下使用场景web前端优化前后端跨域可以说一下么有碰到过跨域问题么，怎么去解决跨域nodeJs的异步IO原理react的Dom的diff算法描述浏览器cookie和session的认识跨域分为哪几种类型如何解决...

2019-08-16 09:45:17 192

原创 javascript 箭头函数

箭头函数的特点1:箭头函数只有一个参数的时候，可以省略参数的圆括号2:当箭头函数的语句只有一个return语句的话，可以同时省略return和外面的大括号3:箭头函数不能被当作构造函数来使用，不能使用new4:箭头函数不绑定this。他的this就是当前的上下文环境，使用call/apply的时候会忽略第一个参数，直接去时候后面的参数！5:箭头函数没有prototype属性...

2019-07-29 20:20:41 228

原创 Vue 自定义组件

Vue实现的无限极菜单注意点1：点击的展开或隐藏的时候会有事件捕获所以需要@click.stop 来阻止事件捕获2: 在获取的数据里面设置一个标志值为boolean 来做展示或者隐藏的功能3: 无限极涉及到递归调用，这里就是组件自己调用自己所以给组件一个名字与文件名相应4: props默认的是没有数据的，只有在第二次调用自己的时候才会有值...

2019-03-27 18:12:22 279

原创浅谈WebPack打包流程，原理

shell 与 config 解析每次在命令行输入 webpack 后，操作系统都会去调用./node_modules/.bin/webpack这个 shell 脚本。这个脚本会去调用./node_modules/webpack/bin/webpack.js并追加输入的参数，如 -p , -w 。(图中 webpack.js 是 webpack 的启动文件，而 $@ 是后缀参数)在...

2019-03-24 14:15:55 7229

原创移动端常见的兼容性问题

一般上传的视频都没法占满video，看起来很不美观，解决办法很简单video{ object-fit:fill; }上传图片，支持预览html<input type="file" name="" class="upload-pic"><div class="pics-area-wrap img-div"></div>js//page对象g...

2019-03-22 17:06:34 4434

原创 react refs event

有一些场景很适合使用refs： 1.管理焦点，文本选择，或者媒体播放 2.触发命令性动画 3.和第三方DOM库集成创建和访问refs的几种方法class Login extends Component{ constructor(){ super(); this.odiv = React.createRef(); this.funcDiv =...

2019-03-21 09:53:51 305

原创 promise fetch

promisepromise是一个对象，从它可以获取异步操作的消息，promise提供了统一的API，各种异步操作都可以用同样的方法进行处理。promise对象的特点（1）对象的状态不受外界影响，promise对象代表一个异步操作，有三种状态，pending（进行中）、fulfilled（已成功）、rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法...

2019-03-19 14:47:13 601

原创复习点

一，硬核 1.常见算法 https://blog.youkuaiyun.com/suilz/article/details/80013241 2.数据结构 http://php.net/manual/zh/spl.datastructures.php https://www.cnblogs.com/leedaily...

2019-03-15 09:39:26 169

原创 HTML5 新特性API汇总

1、document.querySelector()和document.querySelectorAll()方法document.querySelector()：根据css选择器返回第一个匹配的元素，如果没有匹配返回null；document.querySelectorAll("selector")：querySelectorAll和querySelector作用一样的，只是querySe...

2019-03-07 12:04:01 917

原创 react state 生命周期详解 props-type Children

不能直接修改state//错误this.state.title='React';正确修改方式是使用setState（）；//正确this.setState({title:'React'});也可以使用另一个函数作为参数的setState，这个函数有两个参数，第一个参数是当前的最新状态（本次组件状态更新后的状态）的前一个状态preState（本次组件状态修改前的状态），第二个参数是...

2019-03-06 20:05:57 572

原创 css 查漏补缺

css强制换行多出来的文字用...来代替word-break: break-all; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; word-break: break-all;box-sizing、transition...

2019-02-24 13:47:21 209

原创 vue axios 实现文件下载

download(index,data){ //php下载界面访问该地址可以直接下载文件 let downloadUrl = 'http://www.kuang.com/admin_api/app_update/download'; //获取要下载的文件名的接口地址 let getFilename = 'http://www.kuang.com/admin_api/a...

2019-01-25 11:13:37 1564

原创 react 小记

React 绑定属性的特殊注意： class 要变成 className for 要变成 htmlFor style属性和以前的写法有些不一样 <div style={{'color':'blue'}}>{this.state.title}</div> <div s...

2019-01-03 18:50:49 152

原创 ES6 一些新定义的API

ES6 新定义的字符串函数repeat includes startsWith endsWith padStart padEnd//repeat'x'.repeat(3) //'xxx'//参数如果是小数的话会先被取证就是向下取整 Math.floor//如果repeat的参数是负数或者Infinity，会报错。//如果参数是 0 到-1 之间的小...

2019-01-01 20:26:59 307

原创 nodeJs框架express基础知识

1:学习node的第一个框架一般都是express 学习express之前只是要简单的安装一下express,2条命令即可安装成功第一:npm init -y 生成package.json文件这个相当于是node包管理的配置文件第二:cnpm install express --save-dev 将express下载安装到本地2:在根目录下面新建app.js 内...

2018-12-29 21:47:45 350

原创 JS 冷知识

//重复定义的变量是无效的除非重新定义的时候也赋值了// var aa = 'aa';// var aa;// console.log(aa); //aa判断变量为undefined 可以用 if(var_name === void 0){}null 转成数字为0 undefined转为数字的时候是NaN//在作为判断条件转化为false的情况//undef...

2018-12-21 16:15:40 410 1

原创 vue watch nextTick 获取参数

在vue中，使用watch来响应数据的变化。1:普通的使用方式<input type="text" v-model="cityName"/>new Vue({ el: '#root', data: { cityName: 'shanghai' }, watch: { cityName(newName, oldName) { // ...

2018-12-15 20:01:42 2953

原创 javascript 常见自定义函数

数组扁平化function flattenDepth(array, depth = 1) { let result = [] array.forEach(item => { let d = depth if (Array.isArray(item) && d > 0) { result.push(...(flattenDepth...

2018-12-12 15:10:55 508

原创 Vuex 编写

1：在src下面新建store目录2：在store目录下面新建index.js文件import Vue from 'vue'import Vuex from 'vuex'import mutations from './mutations'import actions from './action'Vue.use(Vuex) //这里是很重要的额const sta...

2018-12-11 11:21:50 398

原创 JavaScript 前端面试题集锦

1栈和队列的区别? 栈的插入和删除操作都是在一端进行的，而队列的操作却是在两端进行的。队列先进先出，栈先进后出。栈只允许在表尾一端进行插入和删除，而队列只允许在表尾一端进行插入，在表头一端进行删除2栈和堆的区别？栈区（stack）— 由编译器自动分配释放，存放函数的参数值，局部变量的值等。堆区（heap） — 一般由程序员分配...

2018-12-10 10:45:38 232

原创 javascript 快速排序和冒泡排序

快速排序var arr = [2,1,11,12,3];var aa = quit_sort(arr)console.log(aa);function quit_sort(arr){ if(arr.length <= 1 ){return arr}; let left = [], right = [], midKey = Math.floor(arr.length/2...

2018-12-08 17:58:53 130

原创 Js异步

如果有多个异步操作，就存在一个流程控制的问题：如何确定异步操作执行的顺序，以及如何保证遵守这种顺序。function async(arg, callback) { console.log('参数为 ' + arg +' , 1秒后返回结果'); setTimeout(function () { callback(arg * 2); }, 1000);}如果有六个这样的异步任务，...

2018-12-06 14:56:07 129

原创 JavaScript 洗牌算法

var arr = [22,32,56,78]; console.log(shuffle(arr)); //打乱一个数组 function random(min,max){ if(max == null){ max = min; min = 0; } return min+Math.floor(Math.random()*(max-mi...

2018-12-02 15:31:38 292

原创 centos 部署node的express项目以及node的安装

部署1.确认安装了nginx ，安装了之后在nginx.conf的配置文件中加一层上游服务器如下图中的第一个框2:在nginx配置文件中添加一个虚拟服务server 如上图的第二个框框监听的还是80端口设置一个代理到上游服务器中3:上传express的项目并且启动3000端口的服务 4：然后就可以直接访问express的项目了5:我是在虚拟机里面做的调...

2018-12-01 17:49:12 1327

原创 express 读取文件和目录

根据自己项目里面的需求编写的封装node读文件和目录let fs = require('fs');module.exports.getBaseData = (path)=>{ return new Promise((resolve,reject)=>{ fs.readFile(path,'utf-8',(err,res)=>{ if(err){ con...

2018-11-26 20:40:57 3865

翻译 JSONP封装

jsonP插件的服装var url = 'http://localhost:3000/data/swiper';(function(root){ jsonp = function(url,data,jsonpcallback,callback){ var cbName = 'cb'+ jsonp.count; var fnName = jsonpcallback + '=' + ...

2018-11-26 17:07:13 309

原创 CSS 的三个基本动画属性 transform transition animation

//transition transition all 2s ease 2s <p>第一个参数表示的是要变化的css属性名称要是很多就直接设置为all</p> <p>第一个参数表示的是动画执行的时间</p> <p>第一个参数表示的是速度效果的深度曲线</p> <p>

2018-11-07 23:21:21 355

原创 VUE笔记之 keep-alive , slot , $emit , props ,refs , eventbus,router,v-bind:src 路由获取参数,右击，阻止默认行为和冒泡

vue中使用less安装less依赖，npm install less less-loader --save vue项目优化之通过keep-alive数据缓存的方法<keep-alive>是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 &l...

2018-11-07 11:09:07 727

原创 VUE 父子组件之间的通信

获取服务器图片验证码this.$ajax({ method: 'post', url: 'http://test.opensns.com/index/login/getVerify?a='+random, responseType: 'arraybuffer' }) .then(function(res){ that.cap...

2018-11-07 10:51:30 184

原创 VUE基本用法和生命周期介绍

双向数据绑定{{msg}} 数据发生变化的时候模板也会变化{{*msg}} 数据只会绑定一次之后不会跟着数据发生变化了{{{msg}}} 三个大括号的是会去解析数据里面的html标签的（v-html）过滤器过滤模板数据 {{msg|uppercase|lowercase}} 可以使用多个过滤器来同时处理数据v-on:click 简写就是@click v-bin...

2018-11-07 10:48:31 9902 2

空空如也

空空如也