xiasohuai的博客

使用Object.hasOwnProperty()代替。hasOwn是es2022新语法，旧浏览器不支持。

在我们的JavaScript中，可以给元素添加一个点击监听事件，当用户点击的时候，点击事件怎会被执行，这也是一种事件总线的思想在里面，就好比元素订阅了点击事件，用户发布或出触发点击事件。所谓事件总线模式，其实就和发布订阅模式非常类似，比如我们订阅了一个公众号，公众号发布文章之后我们就能收到信息，这就是一种订阅发布的关系。再比如在Vue2项目中，我们可以使用$on、$emit来实现事件的监听和触发，这其实就是一种事件总线的思想在里面，只不过Vue帮我们实现好了。使用$emit发布事件。实现$off取消订阅。

export {default as xxx} from xxxxx写法

添加实例 property你可能会在很多组件里用到数据/实用工具，但是不想污染全局作用域。这种情况下，你可以通过在原型上定义它们使其在每个 Vue 的实例中可用。Vue.prototype.$appName = 'My App'这样$appName就在所有的 Vue 实例中可用了，甚至在实例被创建之前就可以。如果我们运行：new Vue({ beforeCreate: function () { console.log(this.$appName) }})则控制..

相同点这三个方法都可以对字符串进行截取，并且返回一个新的字符串，也就是不会对原字符串进行修改不同点这三个方法的不同之处在于参数不同。substringsubstring() 方法用于提取字符串中介于两个指定下标之间的字符。语法string.substring(start,stop)参数参数 描述 start 必需。一个非负的整数，规定要提取的子串的第一个字符在string中的位置。 stop 可选。一个非负的整数，比要提取的子串的最后一个字..

什么是跨域？跨域是指一个域下的文档或脚本试图去请求另一个域下的资源，这里跨域是广义的。广义的跨域：1、资源跳转：A链接、重定向、表单提交2、资源嵌入：<link>、<script>、<img>、<frame>等dom标签，还有样式中background:url()、@font-face()等文件外链3、脚本请求： js发起的aj...

上传图片尺寸大小限制，UI组件库为例iview中<Upload ref="upload" :max-size="10240" :on-exceeded-size="handleMaxSize" :before-upload="handleBeforeUpload" :on-success="successUpload" :on-error="failureUpload" :show-uplo

CMYK和RGB的区别:两者在性质上不同:RGB是显示器显示的颜色，而且CMYK是印刷用的颜色js中我们在做图片上传时候，会出现CMYC的上传回显失败问题。所以要注意一下。要上传rgb格式图片。...

全网站变灰，我们可以使用css的filter属性。<style type="text/css"> html { filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter...

//定义一些常量var x_PI = 3.14159265358979324 * 3000.0 / 180.0;var PI = 3.1415926535897932384626;var a = 6378245.0;var ee = 0.00669342162296594323;/** * 百度坐标系 (BD-09) 与 火星坐标系 (GCJ-02)的转换 * 即 百度 转 ...

let curDate = new Date();var preDate = new Date(curDate.getTime() - 24*60*60*1000); //前一天var nextDate = new Date(curDate.getTime() + 24*60*60*1000); //后一天

所有的DOM节点中都包含addEventListener()与removeEventListener()这两种方法，用于追加事件和删除追加。接受参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。 (3个)最后这个布尔值参数是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。默认为false;事件传递有两种方式：冒泡与捕获。事件传递定...

https://blog.youkuaiyun.com/xiasohuai/article/details/85003225https://blog.youkuaiyun.com/xiasohuai/article/details/85691741

includes   [ɪnk'lu:dz]  包含，包括includes() 方法用来判断一个数组是否包含一个指定的值，如果是返回 true，否则false。举个例子：// 条件语句function test(fruit) { if (fruit == 'apple' || fruit == 'strawberry') { console.log('red'); }}...

createElement，createTextNode，appendChild，insertBefore，removeChild，replaceChildcreateElement以下代码是用于创建 &lt;p&gt; 元素:var para = document.createElement("p");createTextNode为 &lt;p&gt; 元素添加文本节点：...

delete只是被删除的元素变成了 empty/undefined 其他的元素的键值还是不变。splice直接删除了数组 改变了数组的键值。Vue.delete直接删除了数组 改变了数组的键值。&lt;script type="text/javascript"&gt; var a=[1,2,3,4] var b=[1,2,3,4] delete a[1] console.lo...

ES2017 标准引入了 async 函数，使得异步操作变得更加方便。1.async/await场景这是一个用同步的思维来解决异步问题的方案，当前端接口调用需要等到接口返回值以后渲染页面时。2.名词解释asyncasync的用法，它作为一个关键字放到函数前面，用于表示函数是一个异步函数，因为async就是异步的意思， 异步函数也就意味着该函数的执行不会阻塞后面代码的执行，asy...

1.indexOf方法indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置，如果没有找到返回-1。语法：stringObject.indexOf(searchvalue,fromindex)该方法将从头到尾地检索字符串stringObject，看它是否含有子串searchvalue。开始检索的位置在字符串的fromindex处。如果没有fromindex参数则...

微信授权的整个流程：引导用户进入授权页面同意授权，获取code 通过code换取网页授权access_token（与基础支持中的access_token不同） 如果需要，开发者可以刷新网页授权access_token，避免过期 通过网页授权access_token和openid获取用户基本信息（支持UnionID机制）其实说白了，前端只需要干一件事儿，引导用户发起微信授权页面,然后得到...

在平时项目中，如果遇到需要阻止浏览器默认行为，大家经常会用return false;和event.preventDefault()来阻止，但对它俩的区别还是模糊，这里顺便带上event.stopPropagation()一起区分下。事件处理程序的返回值只对通过属性注册的处理程序才有意义，如果我们未通过addEventListener()函数来绑定事件的话，若要禁止默认事件，用的就是return ...

get方式（3种写法）：1、window.open("**")是用新窗口打开URL页面2、location.href="**"是用当前页面显示URLwindow.open(this.GLOBAL.API_Spm_result+ "completionday/batchId/postId/export?batchId="+this.batchId+"&amp;postId="+this....

想了解更多方法请参考阮一峰老师的教程：http://es6.ruanyifeng.com/#docs/promise1.Promise的含义Promise是异步编程的一种解决方案，比传统的解决方案（回调函数和事件）更合理更强大。所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件 (通常是一个异步操作)的结果。从语法上说，Promise是一个对象，从它可以获取异步操...

elementNode.attributes：属性返回包含被选节点属性的 NamedNodeMap。elementNode.getAttribute(name)：方法通过名称获取属性的值。elementNode.setAttribute(name, value)：方法创建或改变某个新属性。elementNode.removeAttribute(name)：方法通过名称删除属性的值。 ...

面向对象编程（Object Oriented Programming，缩写为 OOP）是目前主流的编程范式。它将真实世界各种复杂的关系，抽象为一个个对象，然后由对象之间的分工与合作，完成对真实世界的模拟。每一个对象都是功能中心，具有明确分工，可以完成接受信息、处理数据、发出信息等任务。对象可以复用，通过继承机制还可以定制。因此，面向对象编程具有灵活、代码可复用、高度模块化等特点，容易维护和开发，比...

Javascript是一种基于对象（object-based）的语言，你遇到的所有东西几乎都是对象。但是，它又不是一种真正的面向对象编程（OOP）语言，因为它的语法中没有class（类）。那么，如果我们要把"属性"（property）和"方法"（method），封装成一个对象，甚至要从原型对象生成一个实例对象，我们应该怎么做呢？封装一、 生成实例对象的原始模式假定我们把猫看成一个对...

方式一：普通的数组var arr1=[1,2,3,4,1,5,3,4]var arr2 = [];for (var i = 0; i &lt; arr1.length; i++) { if (arr2.indexOf(arr1[ i ])==-1) { arr2.push(arr1[ i ]) }}   方式二：i...

移动端页面中有一个input框，点击时弹出软键盘，关闭时页面底部空白出一部分，然后滑动一下又恢复原状了。解决方案： 绑定一个blur事件，当其触发时，使scrollTo为0<input type="text" v-model="teamCodeValue" @blur="inputBlur"> //对应的methods中添加js inputBlur () ...

Jsonp(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。为什么我们从不同的域（网站）访问数据需要一个特殊的技术(JSONP )呢？这是因为同源策略。所谓同源是指，域名，协议，端口相同。所谓“同源策略“，简单的说就是基于安全考虑，当前域不能访问其他域的东西。但&lt;img&gt;的src（获取图片），&lt;l...

Restful API 从字面就可以知道，他是rest式的接口，所以就要先了解什么是restrest 不是一个技术，也不是一个协议rest 指的是一组架构约束条件和原则，提供了一个新的架构设计思路，满足这些约束条件和原则的应用程序或设计就是 RESTful。RESTful 是目前最流行的 API 设计规范，用于 Web 数据接口的设计。为什么用Restful API例如常用的M...

本文转载自掘金中我的小伙伴的一篇文章：https://juejin.im/post/5bf7ad096fb9a049ed308353什么是事件冒泡？当事件发生后，这个事件就要开始传播（从里到外，或者从外向里）。为什么要传播呢？因为事件源本身（可能）并没有处理事件的能力，或处理事件的函数并未绑定在该事件源上。如下图：      我们经常利用事件冒泡机制去减少给DOM添加过多的绑定事件...

我们编写js代码时经常遇到复杂逻辑判断的情况，通常大家可以用if/else或者switch来实现多个条件判断，但这样会有个问题，随着逻辑复杂度的增加，代码中的if/else/switch会变得越来越臃肿，越来越看不懂，那么如何更优雅的写判断逻辑,我们可以以对象的key和value实现。if..else...写法function fun1(status){ if (status == 1...

ECMAScript 对象类型在 ECMAScript 中，所有对象并非同等创建的。一般来说，可以创建并使用的对象有三种：本地对象、内置对象和宿主对象。 本地对象ECMA-262 把本地对象（native object）定义为“独立于宿主环境的 ECMAScript 实现提供的对象”。简单来说，本地对象就是 ECMA-262 定义的类（引用类型）。它们包括：Object ...

JS是一种基于对象的语言，要实现面向对象，写法跟传统的面向对象有很大的差异。ES6引入了Class语法糖，使得JS的继承更像面向对象语言的写法。此篇博客，分为：基本介绍、Vue使用案例基本介绍Class可以通过extends关键字实现继承，这比ES5的通过修改原型链实现继承，要清晰和方便很多；class Father { }class Son extends Father {...

原始的面向过程代码：&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;style&gt; #box { width: 100px; height: 10...

Tab选项卡案例下面是一个简单面向过程的Tab选项卡。&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;style&gt; #tabBox input { background: #F6F3F3; border: 1px solid #FF0000; ...

构造函数的继承上一篇博客，主要介绍了如何"封装"数据和方法，以及如何从原型对象生成实例。今天要介绍的是，对象之间的"继承"的五种方法。比如，现在有一个"动物"对象的构造函数。function Animal(){　this.species = "动物";    this.action="吃"}还有一个"猫"对象的构造函数。function Cat(name

历史上，JavaScript 一直没有模块（module）体系，无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。其他语言都有这项功能，比如 Ruby 的require、Python 的import，甚至就连 CSS 都有@import，但是 JavaScript 任何这方面的支持都没有，这对开发大型的、复杂的项目形成了巨大障碍。在 ES6 之前，社区制定了一些模块加载方案，最主...

SetES6提供了新的数据结构Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。Set函数可以接受一个数组（或类似数组的对象）作为参数，用来初始化。// 例一var set = new Set([1, 2, 3, 4, 4]);[...set]// [1, 2, 3, 4]var s = new Set();[2, 3, 5, 4, 5, 2, 2].map(...

var a = [1,2,3];var b=[4,5]a = a.concat(b);console.log(a);//此处输出为 [1, 2, 3 ,4 ,5]

XSS(Cross Site Scripting跨站脚本)。XSS定义的主语是“脚本”，是一种跨站执行的脚本，也就是javascript脚本，指的是在网站上注入我们的javascript脚本，执行非法操作。 CSRF（Cross-site request forgery跨站请求伪造，也被称为“One Click Attack”或者Session Riding，通常缩写为CSRF或者XSRF，是...