- 博客(43)
- 收藏
- 关注
RSS订阅原创 相机-threejs
相机类型three.js中提供了两种基本的照相机，分别是正投影相机OrthographicCamera和透视投影相机PerspectiveCamera。透视投影照相机对应投影到的物体的大小是随着距离逐渐变小的，而正投影照相机投影到的物体大小是不受距离影响的透视投影相机PerspectiveCamera透视投影照相机对应投影到的物体的大小是随着距离逐渐变小的，它是3D场景的渲染中使用得最普遍的投影模式，创建一个简单透视投影相机的代码如下var camera = new THREE.Perspe
2020-08-21 11:18:57
519
原创 防抖，节流手写
节流 :在超过设置时间执行function fn(){ console.log('执行了')}//节流window.addEventListener('scroll',throttle(fn,1000))function throttle(fn,delay){ let old = 0 let context=null return function (){ let now = new Date().valueOf() context
2020-08-05 09:15:44
147
原创 es5继承手写
es5继承最优组合function Parent(name,age){ this.name = name this.age = age}function Child(){ Parent.apply(this) }Child.prototype = Object.create(Parent.prototype)Child.prototype.constructor = Child let p =new Parent()let c = new Child()
2020-08-05 09:12:07
282
原创 vueRouter相关问题
vueRouter的整体流程引用router>注册router>new router>导出且放在vue实例上1.hash监听hashchange方法通过设置Location 对象 的 location.hash 或 location.href 属性修改锚部分;使用不同history操作方法到带hash的页面;点击链接跳转到锚点。history监听方法 popstate 当调用history.go()、history.back()、history.forward()时
2020-08-05 09:09:07
170
原创 vuex相关理解
刷新数据不丢失1.vue持久化 vue-presits插件2.放在缓存中vuex流程引用vuex=>注册vuex(Vue.use(vuex))=>new vuex=>导出放在vue实例上vuex 相关属性1.state,mutation,action,modules,getter2.mutation触发commit action触发是dispatchmodules中nameSpace用法以及传参相关方法nameSpace:true 调用dispatch()
2020-08-05 09:05:29
91
原创 理解vue及相关方法
1.如何检测数据对象： 首先会对data进行遍历然后会递归使用object.defineprotorype重新定义 里面数据,getter 会使用dep.depend set会使用 dep.nitify()更新渲染watcher数组 ：拿到数组里面的原型，然后从新定义数组里面 push pop shift unshift splice reverse sort，然后观测数组里面对象最后dep.notify()重新渲染数据2.为何采用异步渲染当批量更新数据时是批量更新而不是一个一个跟新
2020-08-05 09:04:13
102
原创 正则基本概念
先了解一下正则语法量词元字符量词元字符解释*0到多次+1到多次？0到1次{ n}n次{n,}n到多次{n,m}n到m次特殊元字符特殊元字符解释\d0到9的 任意一个\D不是0到9\w任意字母数字下划线\s空白符\n[ ]表示其中内字符任意一个[ ^]表示不...
2020-07-17 16:25:29
307
原创 js手册之基本类型及判断方法
js数据类型基本数据类型Numberstringbooleannullundefinedbigintsymbol引用类型objectfunction (Function.prototype = function.proto)判断类型方法typeof 缺点：不能判断object属于哪个类instaceofObject.prototype.toStri...
2020-04-22 09:56:23
101
原创 js手册之reduce和isArray解析和使用
先看源码Array.prototype.myReduce = function(callback,initValue){//设置长度 var len = this.length //初始化pre var pre = initValue var i=0; //判断initValue有没有，没有的话就从第一个开始 if(initValue==nul...
2019-12-30 13:15:18
213
原创 手写一个深拷贝
我们最常用的是json.parse(json.stringfy(data))来进行深拷贝，但是这有一些问题对于undefined，函数，Symbol会直接忽略new Date()转换后结果不正确对于正则转换为{}对于循环引用，会报错如果obj里有NaN、Infinity和-Infinity，则序列化的结果会变成nullunction isObject(val){//判断是否是对象...
2019-12-23 10:15:46
250
原创 bind原理
bind一般是面试必问的问题，更有甚者会让你当他面把原理写出来，连百度机会都不给你注意先要懂call,apply的原理，然后你就懂我下面写的代码了，若看不懂的可以看我之前call,apply的原理的文章，再看就懂了Function.prototype.textBind= function (context){ let target = this return function...
2019-12-20 15:47:44
104
原创 apply原理
他其实和call差不多只不过是参数变了，话不多说直接看代码unction.prototype.textApply= function(context){ //context有值得话就是a.call(foo)//代表context==foo context = context || window //这个是this没有改变函数作用域的 a.call(foo)这个this代表...
2019-12-20 15:41:28
262
原创 探究call到底是怎么回事来的
这个其实用处不大，大家都知道怎么用，但是一般面试有可能问，并且现在前端越来越多，但是公司现在也是越来越挑了，那一般他感觉是不是你是中高级的怎么看，只能考察vue,react，promsise，bind()相关原理或者源码，当然这也是你自我提升的好办法Function.prototype.textCall=function(context){ //context有值得话就是a.call(f...
2019-12-20 15:09:18
170
原创 async await 是如何实现的
注意：如果promise不是太懂请看我之前文章有关于promise原理实现首先大家都知道async await 是解决异步的，在网上搜的说它就是promise的语法糖，那么他究竟是如何用promise实现的呢，我举个列子大家就懂了先看asyncasync function getConstant() { return 1}//原理function getConstant() ...
2019-12-20 14:42:04
803
原创 promise原理手写
Promse基本配置class Promise { constructor(exector){ this.initValue() this.bindThis() try{ exector(this.resolve,this.reject) }catch(e){ this.rej...
2019-12-16 17:00:17
104
原创 React手册之ReactDOM.render创建及更新流程
ReactDOM.render(, document.getElementById(‘root’))renderrender( element: React$Element<any>,//相关类 container: DOMContainer,//挂载的实例 callback: ?Function,//应用渲染之后会调用这个callback ) {...
2019-11-27 16:21:37
1339
原创 react手册之context
当我们使用父组件向子组件传值的时候我们可以用context1.props-type 这是16之前的版本他的缺点是：当父组件context发生改变，子组件必须全部改变,无论你有没有使用，所以性能方面比较差使用方法parent.jsimport React,{Component,createContext} from 'react';import { Button } from 'an...
2019-11-25 17:08:00
203
原创 React手册之ref革命
到目前为止react中ref有三种方式字符串回调函数createRef()1.字符串dom节点上使用，通过this.refs[refName]来引用真实的dom节点<input ref="ref" />2.回调函数React 支持给任意组件添加特殊属性。ref 属性接受一个回调函数，它在组件被加载或卸载时会立即执行。当给 HTML 元素添加 ref 属性时，r...
2019-11-22 11:22:17
119
原创 React手册之Link和NaviLink区别
Link:点击是url会直接更新，组件会重新渲染而不是重新加载它可以是对象也可以是字符串但是最后都会转为location对象的点击Link后，路由系统发生了什么？Link 组件最终会渲染为 HTML 标签 <a>虽然 Link 被渲染为超链接，但在内部实现上使用脚本拦截 浏览器的默认行为，然后调用了history.pushState 方法（注意，文中出现的 history ...
2019-11-21 15:18:15
1267
原创 react手册之Route中render和component区别
官网手册1.警告： component优先级高，render因此请不要在同一个中使用两者Route **component是只有在位置匹配时才呈现的react组件，他和router props一起渲染 底层是调用React.createElement组件的type是匿名函数这导致type每次都不一样如果是 component={()=>{}} 调用组件是卸载旧的，安装新的...
2019-11-21 14:56:29
1055
原创 兼容IE8常见问题
由于自己接受了一个兼容IE8的系统，在一些问题上做一个总结1. 不能够使用css32. 不能够使用flex布局3. 使用float两栏布局Ie8和谷歌浏览器方向相反4. 在js中consle在上线前一定要全部去掉，因为Ie8中如果有console.log会报错5. 上传文件时不能够使用formdata6. css中calc不能够使用...
2019-11-21 09:41:07
163
原创 js手册—事件循环、宏任务、微任务
先了解什么是宏、微任务宏任务： 包括整体代码script、setTimeout，setInterval微任务队列：promise，process.nexttick,Object.observe(已经不用了),Mutation.observe话不多说直接撸代码吧//js执行顺序从上往下执行console.log('1')//第一次首先执行宏任务setTimeout(function(...
2019-08-01 11:01:13
113
转载 JS手册—常用正则表达式
1、 手机号：mobile/^1((3[\d])|(4[5,6,9])|(5[0-3,5-9])|(6[5-7])|(7[0-8])|(8[1-3,5-8])|(9[1,8,9]))\d{8}$/2、国内座机电话（如: 010-12345678）：telephone/\d{3}-\d{8}|\d{4}-\d{7}/3、电话或手机：phoneNo/(^ 1 ([ 3 | 4 | 5 |...
2019-07-22 09:36:03
477
原创 深层解读Vue—Vue双向绑定
首先我们要知道Vue双向绑定的几个概念1.comple(解析器)：主要是用来解析你的节点、子节点、属性（w-on: ，w-html，w-model）2.observe(观察者)：主要是来对data中的属性进行监听（ Object.defineProperty）3.watcher(订阅者)：主要是用来接受数据变化，进而实现视图更新好了直接撸代码吧<!DOCTYPE html>...
2019-07-12 16:16:34
235
原创 jest基础—1
语法jest('',()=>{ expect().toBe();})第一个参数是你的描述相当于console.log,第二个是箭头函数是你的测试1.toBe匹配器2.toEqual和toBe一样，但是toEqual可以测对象3.测试匹配器的反面 expect(1+1).not.toBe(0);//1+1不等于04.测试undefined,null,false...
2019-07-03 09:22:34
422
原创 前端导出excel和图片
介绍Blob一直以来，JS都没有比较好的可以直接处理二进制的方法。而Blob的存在，允许我们可以通过JS直接操作二进制数据。一个Blob对象就是一个包含有只读原始数据的类文件对象。Blob对象中的数据并不一定得是JavaScript中的原生形式。File接口基于Blob，继承了Blob的功能,并且扩展支持了用户计算机上的本地文件。示例this.$api.downloadFile(url, ...
2019-07-02 14:50:58
2247
原创 react相关知识
reactHooksimport {useState} from react eg: const fn =()=>{ const [name,setName]=useState(0) name(名字随便起):他就是0 ...
2019-06-16 01:04:09
82
原创 html相关知识
html5 1.meta标签作用 有name和http-equiv http-equiv请求头 告诉其编码方式<meta charset="utf-8"> <meta http-equiv="Expires/Pragma/Refresh" content="Fri, ...
2019-06-15 09:34:12
126
原创 git相关知识
git git log 查看日志 git status查看状态 git stash储藏 git stash drop 删除stash一个 git stash clean 删除stash所有 git add . git commit -m git push git pu...
2019-06-15 09:32:32
71
原创 js相关知识点
数组push,pop, unshift shift slice splice concat join subString sort reserve indexOf lastIndexOf map f...
2019-06-15 09:31:23
85
原创 ES6
集合set/map set优化数组去重一维数组 .size .has .add .delete .clear .key .values .forEach(function(key,value)...
2019-06-15 09:20:45
64
原创 快速排序，冒泡排序
**快速排序**let arr = [1,4,3,7,9,5,7,2,10,8]; fn(arr,0,arr.length-1); function fn(arr,low,height){ if(low>=height){ return; } let i = low; le...
2019-06-05 16:00:55
273
原创 http相关总结
http过程 1.redirect 2.app cache 3.dns解析 4.tcp链接 5三次握手过程 6发起Http请求 7响应Http请求并得到HTML代码 8浏览器解析HTML代码 9浏览器对页面进行渲染呈现给用户网络协议分层五层模型 应用层:为应用软件提供很多服务，构建于tcp协议之上，屏蔽了传输相关...
2019-06-05 15:40:20
101
原创 微信小程序版本更新
if (wx.canIUse('getUpdateManager')) {//**判断小程序的API，回调，参数，组件等是否在当前版本可用**。 const updateManager = wx.getUpdateManager()//获取全局唯一的版本更新管理器，用于管理小程序更新。关于小程序的更新机制，可以查看运行机制文档 updateManager.onCheckF...
2019-06-04 17:06:12
424
转载 在浏览器中输入URL后，执行的全部过程
域名解析为了将消息从你的PC上传到服务器上.需要用到1P协议、ARP协议和0SPF协议发起TCP的3次握手建立TCP连接后发起http请求服务器响应htp请求浏览器解析htm代码,并请求html代码中的资源(如js、css、图片等）断开TCP连接原文链接：https://blog.csdn.net/qq_21993785/article/details/81188253...
2019-06-01 13:35:07
173
原创 webpack解析
一。资产管理Asset Management 1.加载css,style-loader(把css放到head中),css-loader(分析css的依赖关系) 2.加载图片，file-loader,url-loader(小图片也就是base64) 3.加载字体 file-loader 4.加载数据csv-loader和xml-loader二。发展Development 1.找...
2019-05-29 00:39:16
277
原创 webpack之如何自己去做一个loader
3.0如何自己创建一个loader就是一个函数(不能使用箭头函数因为loader的配置中有this若用箭头函数指向window)格式：module.exports=function(source){ this.query//是options中的内容可以用loader-untils 还有就是this.callback(err,content,sourceMap,meta)把你的l...
2019-05-27 15:04:49
168
原创 webpack打包优化
1.使用npm ,node,webpack的新版本2文件用loader是要把exclude:/node_modules/去除是js 或使用include:path.resoleve(_dirname,'../src')只会打包src目录下的文件3尽量不要使用一些打包插件这样会降低他们的打包速度4尽量使用官方社区的插件，其他插件可以实现功能，但是可能忽略他们的性能5.合理优化resolv...
2019-05-27 15:02:25
97
原创 webpack中SplitChunksPlugin代码分割
SplitChunksPlugin相关配置解读·````module.exports = { optimization: { splitChunks: { chunks: 'async', minSize: 30000, maxSize: 0, minChunks: 1, maxAsyncRequests: 5, ...
2019-05-20 22:27:54
478
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人