- 博客(79)
- 收藏
- 关注
RSS订阅原创 前端面试范围考点
几乎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
248
原创 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
864
原创 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
159
原创 浏览器渲染页面的原理以及流程
浏览器将域名通过网络通信从服务器拿到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
140
原创 vue常见问题
mvvm原理model ： 数据源view ： 带有特殊属性的html模版viewModel：依靠指令修改数据和渲染模版mvvm的设计设点 模版编译（compile） 数据劫持(observe) 发布订阅(Dep) 观察者(watcher)响应式数据的原理Vue 的响应式，核心机制是观察者模式。数据是被观察的一方，当数据反正变化的时候，会通知所有的观察者，这样观察者能立马作出反应，重新渲染视图vue检测数据的变化push pop shift unshif...
2020-06-05 18:04:39
128
原创 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
395
原创 web前端面试的模糊问题
Ajax 的原理是什么？有什么优缺点？Promise 的原理是什么？请你手写一个 Promise 出来Http 2.0 做了哪些升级？TCP 与 UDP 的区别？MVC 与 MVVM 的区别？实现对象深度拷贝的方式？html5的新特性...
2020-05-07 15:42:17
138
原创 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
674
原创 简单的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
207
原创 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
363
原创 前端面试点收集
bind call apply 三个函数的认识 是否能自己实现web前端的requestAnimationFrame了解么 有使用过么 说一下使用场景web前端优化前后端跨域可以说一下么 有碰到过跨域问题么，怎么去解决跨域nodeJs的异步IO原理react的Dom的diff算法描述浏览器cookie和session的认识跨域分为哪几种类型 如何解决...
2019-08-16 09:45:17
132
原创 javascript 箭头函数
箭头函数的特点1:箭头函数只有一个参数的时候，可以省略参数的圆括号2:当箭头函数的语句只有一个return语句的话，可以同时省略return和外面的大括号3:箭头函数不能被当作构造函数来使用，不能使用new4:箭头函数不绑定this。他的this就是当前的上下文环境，使用call/apply的时候会忽略第一个参数，直接去时候后面的参数！5:箭头函数没有prototype属性...
2019-07-29 20:20:41
177
原创 Vue 自定义组件
Vue实现的无限极菜单注意点1：点击的展开或隐藏的时候 会有事件捕获 所以需要@click.stop 来阻止事件捕获2: 在获取的数据里面设置一个标志 值为boolean 来做展示或者隐藏的功能3: 无限极涉及到递归调用，这里就是组件自己调用自己 所以给组件一个名字 与文件名相应4: props默认的是没有数据的，只有在第二次调用自己的时候 才会有值...
2019-03-27 18:12:22
219
原创 浅谈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
7073
原创 移动端常见的兼容性问题
一般上传的视频都没法占满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
4315
原创 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
269
原创 promise fetch
promisepromise是一个对象，从它可以获取异步操作的消息，promise提供了统一的API，各种异步操作都可以用同样的方法进行处理。promise对象的特点（1）对象的状态不受外界影响，promise对象代表一个异步操作，有三种状态，pending（进行中）、fulfilled（已成功）、rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法...
2019-03-19 14:47:13
514
原创 复习点
一，硬核 1.常见算法 https://blog.csdn.net/suilz/article/details/80013241 2.数据结构 http://php.net/manual/zh/spl.datastructures.php https://www.cnblogs.com/leedaily...
2019-03-15 09:39:26
115
原创 HTML5 新特性API汇总
1、document.querySelector()和document.querySelectorAll()方法document.querySelector()：根据css选择器返回第一个匹配的元素，如果没有匹配返回null；document.querySelectorAll("selector")：querySelectorAll和querySelector作用一样的，只是querySe...
2019-03-07 12:04:01
750
原创 react state 生命周期详解 props-type Children
不能直接修改state//错误this.state.title='React';正确修改方式是使用setState（）；//正确this.setState({title:'React'});也可以使用另一个函数作为参数的setState，这个函数有两个参数，第一个参数是当前的最新状态（本次组件状态更新后的状态）的前一个状态preState（本次组件状态修改前的状态），第二个参数是...
2019-03-06 20:05:57
490
原创 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
155
原创 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
1514
原创 react 小记
React 绑定属性的特殊注意： class 要变成 className for 要变成 htmlFor style属性和以前的写法有些不一样 <div style={{'color':'blue'}}>{this.state.title}</div> <div s...
2019-01-03 18:50:49
122
原创 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
276
原创 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
286
原创 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
334
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
2781
原创 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
459
原创 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
354
原创 JavaScript 前端面试题集锦
1栈和队列的区别? 栈的插入和删除操作都是在一端进行的，而队列的操作却是在两端进行的。 队列先进先出，栈先进后出。 栈只允许在表尾一端进行插入和删除，而队列只允许在表尾一端进行插入，在表头一端进行删除2栈和堆的区别？ 栈区（stack）— 由编译器自动分配释放 ，存放函数的参数值，局部变量的值等。 堆区（heap） — 一般由程序员分配...
2018-12-10 10:45:38
198
原创 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
103
原创 Js异步
如果有多个异步操作，就存在一个流程控制的问题：如何确定异步操作执行的顺序，以及如何保证遵守这种顺序。function async(arg, callback) { console.log('参数为 ' + arg +' , 1秒后返回结果'); setTimeout(function () { callback(arg * 2); }, 1000);}如果有六个这样的异步任务，...
2018-12-06 14:56:07
92
原创 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
249
原创 centos 部署node的express项目 以及node的安装
部署1.确认安装了nginx ，安装了之后 在nginx.conf的配置文件中加一层上游服务器 如下图中的第一个框2:在nginx配置文件中添加一个虚拟服务server 如上图的第二个框框 监听的还是80端口 设置一个代理到上游服务器中3:上传express的项目并且启动3000端口的服务 4：然后就可以直接访问express的项目了5:我是在虚拟机里面做的调...
2018-12-01 17:49:12
1277
原创 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
3678
翻译 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
251
原创 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
286
原创 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
666
原创 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
158
原创 VUE基本用法和生命周期介绍
双向数据绑定{{msg}} 数据发生变化的时候 模板也会变化{{*msg}} 数据只会绑定一次 之后不会跟着数据发生变化了{{{msg}}} 三个大括号的 是会去解析数据里面的html标签的 （v-html） 过滤器过滤模板数据 {{msg|uppercase|lowercase}} 可以使用多个过滤器来同时处理数据v-on:click 简写就是@click v-bin...
2018-11-07 10:48:31
9802
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人