![](https://img-blog.csdnimg.cn/20190903173832485.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
前端开发基础概念
文章平均质量分 53
记录工作、搜索中遇到的貌似显而易见,但其实理解不深刻的基础点,偏原生、基础概念梳理。
Huijie Xu
不管做什么,做到好,这个过程本身就很有趣
展开
-
手写Bind+箭头函数this指向理解
本来只是遇见了一个面试题准备手写一下,但最后发现通过手写bind最主要的是深刻理解了箭头函数this指向问题。为什么这么说?上代码直接看// 正确手写Bind结果Function.prototype.mybind = function (...args) { return () => { this.apply(args[0], args.slice(1)) }}乍一眼看上去,感觉没啥,但其实我一开始写的是这样的:Function.prototype.mybind = (...arg原创 2021-12-27 12:05:09 · 508 阅读 · 0 评论 -
es6类语法extends继承原理
总结继承主要做了三件事:调用父类构造函数产生父类实例,创建this,并在后续添加上子类相关属性利用Object.create()方法基于父类原型对象创建一个新对象,且设置该对象的constructor属性指向子类构造函数。并将该对象赋值为子类的原型对象将子类构造函数的__proto__属性赋值为父类的构造函数// babel编译后重点函数_inheritsfunction _inherits(sub,parent){ // 类型检查报错 if(typeOf parent!=="fu原创 2021-12-26 11:52:57 · 1521 阅读 · 0 评论 -
webpack-dev-server启动本地服务报错Cannot find module ‘webpack-cli/bin/config-yargs‘
webpack-de-server issue链接:https://github.com/webpack/webpack-dev-server/issues/2759原因:webpack-dev-server更新版本,命令行由原来的webpack dev serve改为了webpack serve故,package.json中需改为:"scripts": { "dev": "webpack serve --mode development" }详见github Readme:h原创 2020-12-10 14:43:06 · 222 阅读 · 0 评论 -
js 作用域中的变量==this中的变量??
以全局作用域为例在console中定义:const a= 1;window.a //undefined但是,反过来:window.a=1;a //1也就是说,通过向上下文对象this中添加属性,该属性就会被加入到全局作用域中;而在全局作用域中定义的变量,不会被自动添加进上下文对象中。反观,this和作用域是两个不同的概念...原创 2020-04-21 11:07:31 · 163 阅读 · 0 评论 -
Localstorage和Sessionstorage比较
Localstorage的生命周期是永久性的,也就是说不手动删除的话,同源的网站可以一直共享这些数据。Sessionstorage的生命周期为当前会话,用户关闭页面或浏览器后,Sessionstorage就失效了,且不支持同源网站数据共享。会话:指用户从访问开始到关闭网页的这段时间同源:协议、域名、端口一致的网站...原创 2020-02-14 21:40:42 · 154 阅读 · 0 评论 -
Promise.all()和Promise.race() 并行调用异步操作
两个函数均用于并行调用多个异步操作使用All:两个异步操作同时resolve之后调用then()var p1 = new Promise(function (resolve, reject) { setTimeout(resolve, 500, 'P1'); }); var p2 = new Promise(function (resolve, reject) { setT...原创 2020-01-31 19:33:58 · 513 阅读 · 0 评论 -
关于Promise .then()
var log = function(res) { console.log(res); }var p1=new Promise(function (resolve,reject){ var p1 = 1; if(p1==1) resolve("p1 resolve"); else reject("p1 failed");});var p2=new Promise(function...原创 2020-01-31 14:07:07 · 764 阅读 · 0 评论 -
回调函数实现异步操作
例子:function callback() { console.log("callback");}console.log("before");setTimeout(callback,0); //调用回调函数实现异步操作console.log("after");结果:beforeaftercallback方法:把想异步运行的操作封装成回调函数,再通过异步调用的方式调用这个封...原创 2020-01-31 13:48:55 · 1839 阅读 · 0 评论 -
Session与Cookie
两者均用于会话跟踪Cookie通过在客户端记录信息确定用户身份,Session通过在服务器端记录信息确定用户身份会话跟踪用于长时间跟踪记录用户的身份和行为,解决http协议无状态的问题,帮助服务器“记住”用户的身份或行为。Cookie分为会话Cookie和持久Cookie,大小限制最大为4k每个用户在服务器上都有一个唯一的Session与之对应,SessionId在服务器端创建,并通过Co...原创 2020-01-29 20:33:26 · 128 阅读 · 0 评论 -
css 兼容性控制min-width与js宽度对应
记一个坑···当用css控制显示,运用到min-width等控制时,若js也想在相同的宽度值时进行一些相应的操作,那么,必须要使用window.innerWidth这一属性值!!!其他值的大小都和min-width的值不一样,会导致样式不匹配...原创 2019-12-20 17:39:34 · 453 阅读 · 0 评论 -
自定义右键上下文列表
Event:contextmenu: The right button of the mouse is clicked (before the context menu is displayed).Reference: https://developer.mozilla.org/en-US/docs/Web/API/Element/contextmenu_event<!DOCTYPE ...原创 2019-12-17 11:15:28 · 153 阅读 · 0 评论 -
translate实现CSS 垂直或水平方向居中
<div> <p>Sub Section</p></div>CSS:div {position: relative; /*请为父级设定position为relative*/height: 100px; /*请为父级设定高度*/width: 100px; /*请为父级设定宽度*/}//水平垂直居中p {position: abs...原创 2019-11-29 15:15:43 · 380 阅读 · 0 评论 -
IE 10+ CSS兼容
CSS文件里添加@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { /*兼容代码*/}原创 2019-11-26 18:20:41 · 318 阅读 · 0 评论 -
Vue中运用ajax this指向问题
在vue component中的methods域里定义一个方法,这个方法中会调用某一个ajax call,在ajax中的this会指向ajax本身,而不再是vue实例本身。methods: {typeAhead: function (searchType) { **var self = this;** //获取vue实例本身,捕获指针指向 var searchURL = ""; ...原创 2019-11-01 15:47:34 · 1826 阅读 · 0 评论 -
事件冒泡及阻止事件冒泡
事件冒泡:冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点击事件阻止事件冒泡方法:https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation事件冒泡小例子(完整html):三个<div>层层嵌套关系,由外向里层级关系为A包含B,B包含C效果:只点击C部分,console会打印出C B A,说...原创 2019-09-07 16:02:58 · 209 阅读 · 0 评论 -
前端小考点--(1)
CSStransition是 transition-property,transition-duration,transition-timing-function 和 transition-delay 的一个简写属性transition-property:要修改的属性值,如height,width等transition-duration:以秒或毫秒为单位指定过渡动画所需的时间,默认为0,即...原创 2019-09-10 23:05:41 · 138 阅读 · 0 评论 -
js控制运行时间的原生window和jquery写法
共有三种控制运行时间的函数:window.onload (js原生)$(document).ready() (jquery提供的时间节点一)$(window).load()(jquery提供的时间节点二)三者关系:window.onload 和 $(window).load()指的是同一个时间节点,及页面中图片或其他外部文件都加载完毕之后,进行操作。而$(document).ready...原创 2019-09-18 18:35:39 · 539 阅读 · 0 评论 -
defer js文件 & $(document).ready() & $(window).load()运行顺序
工作中遇到需要基于某一defer文件的class动态插入值判断进行下一步操作,发现使用$(window).load()定义的函数可以实现需求,即判断发生在defer文件运行之后,而用$(document).ready()则过早执行判断,即判断发生在defer文件运行之前,导致结果永远为false。故,三者运行事件为:$(document).ready()最早 然后是defer文件 最后是$(w...原创 2019-09-18 18:40:26 · 224 阅读 · 0 评论 -
利用Math.random()随机获取数组中的项
Math.random()方法随机返回大于等于0到1之间的一个数获取某一范围内某一整数的式子:值 = Math.floor(Math.random() * 可能的数的个数 + 第一个可能的数);基于以上两点,逻辑上,随机得到0到数组长度之间的任意一个数,就算是随机获取数组中的某一个数了。代码如下:var values = [1,2,3,4,5];var num=pickUp(valu...原创 2019-10-09 22:56:12 · 2141 阅读 · 0 评论 -
CSS-利用border属性画三角形和梯形
首先,看一下border的延申效果:定义一个正常显示的div.triangle {height: 200px;width: 300px;border-top: 50px solid red;border-right: 50px solid green;border-bottom: 50px solid black;border-left: 50px solid yellow;}...原创 2019-10-09 23:06:16 · 997 阅读 · 0 评论 -
事件与事件属性
“事件” 与 “事件属性”,很容易混淆的两个概念常见并行一起出现的场景:百度一下“js绑定click事件”,随便点进去,都会有几种绑定方法,几乎每一篇,都会涉及到‘click’和‘onclick’这两个关键词之前一直理解不清,只能死记硬背下绑定的方法,今天意外通过解决 ‘Vue中限制input标签输入内容’ 这一问题,深入理解了一下“事件”和“事件属性”概念,瞬间清晰很多。回到click与...原创 2019-09-03 18:25:11 · 1379 阅读 · 0 评论