吴星喜的博客

1.Vue和原生（ios和安卓）的交互（第一种方法）一、原生调用Vue方法1、Vue123456789101112131415mounted() { //将要给原生调用的方法挂载到 window 上面 window.callJsFunction = this.callJsFunction},data() { return { msg: "哈哈" }},methods: { callJsFunction(str) { this.msg = "我通过原生方法改变了文字" + str return "js调用成功" }} 在 methods 中定义一个供 Android 调用的方法 callJsFunction(str) , 并可接收一个参数 str，然后改变页面中的文字。 如果只是在 methods 中定义方法，原生调用会找不到这个方法。所以要在页面加载的时候将方法 ...

先安装svg-sprite-loader 1npm install svg-sprite-loader --save vue.config.js 12345678910111213141516171819202122232425const path = require('path')module.exports = { chainWebpack: config => { const svgRule = config.module.rule('svg') // 清除已有的所有 loader,否则接下来的 loader 会附加在该规则现有的 loader 之后。 svgRule.uses.clear() svgRule .test(/\.svg$/) .include.add(path.resolve(__dirname, './src/assets/icons'))// 配置icons的目录 .end() .use('sv ...

1.普通的for12345var arr = [1, 2, 3]for(let i = 0; i < arr.length; i++) { // 这里的i是代表数组的下标 console.log(i); // 0, 1, 2};最简单的一种，正常用的话也不会出现什么问题，想中断也可以中断，性能上也还可以 2.for…of…遍历(这种遍历支持ES61234567var arr = [1, 2, 3]for(var item of arr) { // item代表数组里面的元素 console.log(item); // 1, 2, 3};　与forEach()不同的是，它可以正确响应break、continue和return语句性能要好于forin，但仍然比不上普通for循环这个方法避开了for-in循环的所有缺陷 3. forEach()1234567var arr = [1, 2, 3];arr.forEach((item, index, arr) => { // item为arr的元素，index为下标 ...

特点ES6 的模块自动开启严格模式，不管你有没有在模块头部加上 **use strict;**。 模块中可以导入和导出各种类型的变量，如函数，对象，字符串，数字，布尔值，类等。 每个模块都有自己的上下文，每一个模块内声明的变量都是局部变量，不会污染全局作用域。 每一个模块只加载一次（是单例的）， 若再去加载同目录下同文件，直接从内存中读取。 export 与 import基本用法模块导入导出各种类型的变量，如字符串，数值，函数，类。 导出的函数声明与类声明必须要有名称（export default 命令另外考虑）。 不仅能导出声明还能导出引用（例如函数）。 export 命令可以出现在模块的任何位置，但必需处于模块顶层。 import 命令会提升到整个模块的头部，首先执行。 12345678910111213141516171819/*-----export [test.js]-----*/ let myName = "Tom"; let myAge = 20; let myfn = function(){ return "My nam ...

对于这个问题，我们应该先来了解提升（hoisting）这个概念 12console.log(a) // undefinedvar a = 1 从上述代码中我们可以发现，虽然变量还没有被声明，但是我们却可以使用这个未被声明的变量，这种情况就叫做提升，并且提升的是声明。 我们已经了解了 var 声明的变量会发生提升的情况，其实不仅变量会提升函数也会被提升。 123console.log(a) // ƒ a() {}function a() {}var a = 1 对于上述代码，打印结果会是 ƒ a() {} ，即使变量声明在函数之后，这也说明了函数会被提升，并且优先于变量提升。说完了这些，想必大家也知道 var 存在的问题了，使用 var 声明的变量会被提升到作用域的顶部，接下来我们再来看 let 和 const 。 我们先来看一个例子： 123456789101112var a = 1let b = 1const c = 1console.log(window.b) // undefinedconsole.log(window. c) // u ...

判断js中的数据类型有一下几种方法：typeof、instanceof、 constructor、 prototype、 $.type()/jquery.type(),接下来主要比较一下这几种方法的异同。 先举几个例子： 123456var a = "helloworld";var b = 222;var c= [1,2,3];var d = new Date();var e = function(){alert(111);};var f = function(){this.name="22";}; 1、最常见的判断方法：typeof1234567891011121314alert(typeof a) ------------> stringalert(typeof b) ------------> numberalert(typeof c) ------------> objectalert(typeof d) ------------> objecta ...

一、JavaScript全部数据类型 内置类型 空值 null 未定义 undefined 布尔值 boolean 数字 number 字符串 string 对象 object 符号 symbol 长整型 bigInt 1.基本数据类型 undefined null number boolean string symbol(ES新增) bigint(ES10新增) 基本数据类型是按值访问的，就是说我们可以操作保存在变量中的实际的值 1.1基本数据类型的值是不可变的 1.2基本数据类型不可以添加属性和方法 1.3基本数据类型的赋值是简单赋值 1.4基本数据类型的比较是值的比较 1.5基本数据类型是存放在栈区的 2.引用类型 JS中除了上面的基本类型之外就是引用类型了，也可以说是object 对象，比如：object array function data等 2.1引用类型的值是可以改变 2.2引用类型可以添加属性和方法 2.3引用类型的赋值是对象引用 2.4引用类型的标胶是引用的比较 2.5引用类型是同时存在栈区和堆区的 二、基本数据类型和引用数据类型的区别 1. ...

闭包定义：函数 和 函数内部能访问到的变量 就是一个闭包常用方式示例： 1234567891011 function foo() { var num = 10; return function () { var age= 20; console.log(++num); console.log(++age); } }var f = foo(); f(); //11 21 f(); //12 21 通过闭包就可以让外部作用域访问函数内部作用域的变量，我们知道当函数执行完以后，会立即销毁，但 foo 函数内的 num 属性被内部的匿名函数引用着，而内部函数又被外部变量 f 引用着，所以函数 foo 在执行完以后虽然会立即销毁，但它内部的匿名函数在创建的时候就会随之创建一个特殊的容器，用于保存 上层作用域 中 变量 的引用，所以foo 函数中的 num 并不会销毁，当执行第一次 f() 时，会创建 f( ...

this 的指向在 ES5 中，其实 this 的指向，始终坚持一个原理：this 永远指向最后调用它的那个对象，记住这句话，this 你已经了解一半了。 下面我们来看一个最简单的例子：例 1： 123456789 var name = "windowsName"; function a() { var name = "Cherry"; console.log(this.name); // windowsName console.log("inner:" + this); // inner: Window } a(); console.log("outer:" + this) // outer: Window12345678 这个相信大家都知道为什么 log 的是 windowsName，因为根据刚刚的那句话“this 永远指向最后调用它的那个对象”，我们看最后调用 a 的地 ...

一、应用场景 input输入框，用户频繁操作输入框内容匹配关键词或者请求接口。 窗口resize或者页面scroll滚动调整后需要回调做的事情，例如图片懒加载、页面组件大小变动等。 socket推送数据，例如股票买卖盘口数据，并不是后台推送啥就完全展示啥，适当的漏掉一部分也是合理的。例如100ms内后台推送了几百条数据，实时操作DOM不仅会带来性能上的浪费，造成页面卡顿、假死，而且对用户感官上来说200ms渲染一次跟实时渲染，区别不是很大。 mousedown、mousemove、keyup、keydown等频繁的鼠标操作。 其他需要限制频率，不需要实时操作的场景。 防抖与节流的共同特点是用于高频次触发的场景，将高频降为低频达到性能优化的目的。 防抖:就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。 节流:就是指连续触发事件但是在 n 秒中只执行一次函数。节流会稀释函数的执行频率 区别是前者用一定手段将最后一次操作落地执行，后者是间隔300ms时间内最多执行一次。 二、什么是防抖以input输入框输入内容并请求http接口为例。用 ...