js
关注
分享
扫一扫
最帅扫地僧
年少轻狂
展开
-
FE使用art-template
使用 template 时，第一个参数为模板的 id。第二个参数为传递到模板的数据，没有数据传递{}，但是不要不传，否则会出现意外，文档地址最基础的使用<body> <div id="box"></div> <script type="text/html" id="boxTmp"> 姓名：{{name}} </script> <script src="./template-web.js"><..原创 2021-01-04 08:48:49 · 242 阅读 · 0 评论 -
浏览器事件环和node事件环
浏览器事件环node事件环什么是事件环node中处理非阻塞I/O的操作机制node启动后，就会初始化事件环执行流程先进行主栈代码的执行，注意主栈代码也属于宏任务，微任务是语言提供的主栈代码执行后，会清空一次微任务队列，在清空微任务之前会先执行process.nextTick(优先级高于微任务，不属于事件环的一部分)，然后会进入事件环执行node中的事件环包含以下几个阶段，timers、pending callbacks、idle，prepare、poll、close callbacks原创 2020-12-02 17:44:56 · 357 阅读 · 0 评论 -
npm的使用
文件模块的解析流程不同的版本对文件模块的解析流程往往不一样会先找同级别是否存在该文件，文件找不到，会找文件夹如果文件夹下面存在package.json，查看package.json中的main字段对应的文件，会执行此文件如果没有package.json文件，执行此文件夹下面的index.js文件，备注：对于有些版本，即使存在package.json中，即使存在main，也仍然会去执行index.js文件模块分类分为第三方模块、核心模块、自定义模块核心模块不需要安装，第三个模块需要安装，自原创 2020-12-01 21:12:59 · 459 阅读 · 0 评论 -
generator+co+async+await
浏览器解决异步的发展史回调promisegeneratorasync+awaitgeneratorfunction * demo() { // generator函数可以使用try...catch... try { let a = yield 1; let b = yield 2; }catch{ throw() }}let it = demo(); // generator函数返回一个Generator对象// 常用的Generator对象上的方法，next，th原创 2020-12-01 14:18:59 · 190 阅读 · 0 评论 -
括号生成
准备阶段1–判断括号字符串是否正确闭合<script> function isRight(arr) { let result = []; for (let i = 0; i < arr.length; i++) { let stack = []; let str = arr[i]; for (let k = 0; k < str.length; k++) { if (stack.le原创 2020-10-21 15:06:57 · 98 阅读 · 0 评论 -
react使用@tweenjs/tween.js实现数字动态增长
安装npm install @tweenjs/tween.js --save使用在componentDidMount钩子函数中引入tween函数传参调用即可import TWEEN from '@tweenjs/tween.js'const animate = () => { if (TWEEN.update()) { requestAnimationFrame(animate); }}/** * @param {*} context 上下文 * @param {*}原创 2020-09-25 16:23:10 · 1547 阅读 · 0 评论 -
利用canvas给图片打马赛克
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>图片打码</title> <style> canvas { border: 1px solid原创 2020-08-05 20:22:35 · 801 阅读 · 0 评论 -
获取画布上的任意一个坐标对应的像素点的颜色值
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>像素操作</title> <style> canvas { border: 1px solid原创 2020-08-05 20:20:32 · 1858 阅读 · 0 评论 -
通过操作像素点改变画布颜色
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>像素操作</title> <style> canvas { border: 1px solid原创 2020-08-05 20:19:45 · 655 阅读 · 0 评论 -
canvas之伸缩变换
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>缩放案例</title> <style> canvas { border: 1px solid原创 2020-08-03 21:36:09 · 360 阅读 · 0 评论 -
canvas生成刮刮乐~~~
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { ma原创 2020-06-18 13:28:42 · 191 阅读 · 0 评论 -
Vscode 项目文件快速生成注释
安装插件：koroFileHeader安装成功之后，使用 Ctrl+Alt+i 即可快速生成注释使用 Ctrl + shift + p 之后输入 codeDesign 可以选择生成自己喜欢的注释主题自定义文件header部分注释内容，打开settings.json文件（File>Preference>Settings>Extensions>File header Configuration>Edit in settings.json）"fileheader.cust.原创 2020-06-18 12:54:16 · 1018 阅读 · 0 评论 -
Echarts 配置主副标题【转载】
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <!-- jquery cdn引入 --> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <!-- echar转载 2020-05-21 13:17:56 · 2381 阅读 · 0 评论 -
从一道题(a==1&&a==2&&a==3)JavaScript隐式类型转换
先看两个方法toString() // 返回对象的字符串表示valueOf() // 返回对象的数值、字符串、布尔值表示注意：在数值运算里，会优先调用valueOf()，在字符串运算里，会优先调用toString()。undefined和null没有toString()和valueOf()细看valueOf()数组、函数、和正则表达式简单的继承了这个默认方法，调用这些类型的...原创 2020-03-26 22:25:22 · 95 阅读 · 0 评论 -
通过构造函数添加成员方法和通过原型添加成员方法的区别
通过原型法添加函数(方法)、属性的好处是所有对象都共享这个函数，节约内存通过构造函数添加成员方法会存在一个浪费内存的问题假如有一个方法或者属性是不变的，如果通过构造函数添加，在每一次new 构造函数生成的实例对象时，每一个实例都会包含这个方法或者属性，多占用内存，这样做既不环保也缺乏效率我们可以通过Prototype模式来解决JavaScript规定，每一个构造函数都有一个protot...原创 2019-06-26 13:32:34 · 448 阅读 · 0 评论 -
跨文档通信postMessage
跨文档通信 postMessagewindow.postMessage(message, origin, [transfer])message: 最好是传递字符串origin：域信息，指定框架中文档来源的域，如果域匹配才会传递消息transfer：不常使用，是一串课message同时传递的Transferable对象，这些对象的所有权将被转移给消息的接收方，而发送一方不在保留所有权d...原创 2020-03-14 14:56:24 · 152 阅读 · 0 评论 -
js实现复制粘贴
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>copy</title></head><body><div id="box">hello world</div>&l...原创 2020-02-23 11:44:05 · 281 阅读 · 0 评论 -
对Google V8的一点理解
背景哪里需要JavaScript，哪里就有v8解析JavaScript的工具函数调用产生闭包任何一个函数都有一个属性prototype，唯一，系统的Object也有每一个函数的实例对象有一个属性__proto__，指向其函数的prototype，然后这个对象有个constructor在指回去函数优先级比var高HTML文档加载顺序创建内存结构V8读取文档（从上到下、从左到下...原创 2019-12-01 21:53:58 · 302 阅读 · 0 评论 -
es6之Promise
Promise是es6的新特性Promise是一个构造函数new Promise的返回值是一个Promise实例对象Promise可以看作是一个容器，里面存放的是异步任务，该任务的初始状态为Pending，且只能变为以下两种状态的任意一种，即resolved和rejected容器一旦创建就会立即执行callback中的代码.then方法中的第一个回调函数作为前一个返回的promise...原创 2019-08-22 10:57:12 · 143 阅读 · 0 评论 -
valueOf知多少
由一个demo介入var r = { valueOf: function() { return -1 }}r = +r // r = -1// valueOf和toString方法一样，都是在后台隐式调用，在执行 +r时，就会隐式调用valueOftoString()&valueOf()优先级普通对象valueOf优先于toStringDate对象toString...原创 2019-06-18 10:14:48 · 671 阅读 · 0 评论 -
toString知多少
一个被自动调用的方法在执行某些操作时，由js脚本解析器自动执行可以被重写JS中十分常见，因为是object原型上的方法，null，undefined没有此方法(因为没有对应的基本包装类型)最常用的功能是把表达式的值转为字符串每一个字符串都有一个该方法，用于返回当前字符串的副本基于对象的JavaScript2.toString() // 会报错, Uncaught SyntaxE...原创 2019-06-13 23:53:01 · 591 阅读 · 0 评论 -
简谈var、let与const
常见区别var与let声明的是变量const声明的是只读常量var声明的变量不存在块级作用域let声明的变量存在块级作用域，即有暂时性死区，它所声明的变量就绑定了这个代码块，不再受外部的影响，只在代码块内有效var声明的变量存在变量提升let声明的变量不存在变量提升const声明的变量也不存在变量提升var定义变量可以先使用再去声明let与const定义的变量(常量)只能先声明...原创 2019-06-11 09:56:43 · 484 阅读 · 0 评论 -
JS简单实用技巧
向数组插入元素arr[arr.length] = newValue比使用arr.push(newValue)速度要快(据说是快43%)[value].concat(arr)比arr.unshift(value)速度快(据说快98%)可以用switch或者是对象来优化if else 语句sort排序，当我们需要对含有音节字母的字符串进行排序时，需要给sort加一个参数(Intl.Co...原创 2019-06-03 10:12:21 · 165 阅读 · 0 评论 -
JS判断数据类型的几种方式
JS中常见的几种数据类型基本类型：string、boolean、number特殊类型：undefined和null3、引用类型：Array、Date、RegExp…typeoftypeof检测基本数据类型时没有问题，但是当其对引用类型进行检测时，会返回object，这样就无法进行精准的判断，这样也不足为奇，因为所有的对象其原型链最终都指向了object比如 typeof null...原创 2019-05-09 12:21:41 · 5733 阅读 · 0 评论 -
判断JS对象是否拥有某属性
in 运算符即使一个属性不在当前的对象上，但是属于其原型链上的一个属性，其结果也是返回truevar obj = {name:‘robin’};console.log(‘name’ in obj); // --> trueconsole.log(‘toString’ in obj); // --> truehasOwnPropertyvar obj = {name:‘...原创 2019-05-08 15:08:14 · 685 阅读 · 0 评论 -
谈谈JS中的隐式转换
在什么条件下会触发隐式转换机制？在进行比较运算，或者进行四则运算时，常常会触发JS中的隐式转换机制。首先要记住JS设计者的初衷是美好的，他希望 == 是美好的操作选择，但是在美好的希望也是希望。小案例为什么 [] == false ?类型不同比较时，需要先做类型转换，==比较时有布尔值参与时，需要比较双方均转为数字，[ ]是非原值，需要转换为原值二者才能进行比较，大部分对象转换为...原创 2019-04-26 17:07:06 · 2760 阅读 · 1 评论 -
老生常谈JS中的this
谁调用指向谁在默认情况下，前提是不在一个严格模式下，在没有调用者的情况下，this指向window在严格模式下，没有直接调用者的情况下，this指向undefined使用apply，call，bind绑定，this指向绑定的对象匿名函数、定时器中的函数thiszi箭头函数中的this指向定义它的对象，也就是继承父级的this...原创 2019-04-22 21:29:47 · 226 阅读 · 1 评论 -
谈谈JS中的节流和防抖
防抖出现原因在一些频繁的事件处理中，需要频繁的操作DOM，但是让浏览器频繁的对DOM进行操作是及其消耗浏览器性能的，我们不建议这样做。我们可以在事件结束之后再去进行相应的操作，这样就会把频繁的操作转为只有当事件结束之后才会最终触发一次。原理对处理函数进行延时，如果在设定的延时到来之前，再次触发事件处理函数，则会清除上一次的延时，重新定时。应用场景做网页的回到顶部按钮，需要实时监听滚动...原创 2019-04-18 12:19:53 · 710 阅读 · 0 评论 -
学习闭包
闭包难，但是闭包也是JavaScript语言的一个特色，很多高级应用都需要闭包实现变量的作用域js 变量的作用域分为全局作用域和局部作用域js语言的特殊之处就是在于函数内部可以直接访问全局声明的变量但是在函数外部是无法访问函数内部的变量的在函数内部声明一个变量的时候，一定要加上var，否则相当于声明一个全局变量如何从外部获取函数内部的局部变量正常情况下，如果我们想要在函数...原创 2019-04-15 17:56:47 · 177 阅读 · 0 评论 -
我自己常用的几个JS深浅拷贝的方法
案例代码let obj = [ { name: 'robin', age: 24, num: [ { sleep: '8', eat: 'chicked', happy: [1,2,3] } ] } ]深拷贝JSONlet newObj = JSON.parse(JSON.stringify(obj))jQue...原创 2019-04-14 13:21:19 · 387 阅读 · 0 评论 -
谈谈对JavaScript的认知
特点直译式脚本语言动态、弱类型、基于原型它的解释器被称为JavaScript引擎，作为浏览器的一部分而存在JavaScript兼容与ECMA标准，所以也被称为ECMAScript跨平台js三大对象本地对象内置对象宿主对象1. 与宿主无关，独立于宿主环境的ecma实现提供的宿主对象 2.简单通俗的说，本地对象就是ECMA-262定义的类（引用类型） 3.常...原创 2019-04-14 11:22:55 · 2419 阅读 · 0 评论 -
localStorage、sessionStorage、cookie、application cache
localStorageHTML5提供了两种在客户端存储数据的方法localstorage—没有时间限制sessionstorage—针对一个session的存储注意，在HTML5之前，存储数据都是通cookie来完成的常用方法window.localStorage.setItem(key, value)window.localStorage.getItem(key)win...原创 2019-04-14 00:09:43 · 227 阅读 · 0 评论 -
关于对web Worker的学习
前因JavaScript是单线程的，也就意味着一次只能做一件事情，但是现在的计算机的CPU已经趋于多核化，这就使得浏览器在展示页面时往往不能发挥出计算机的最高性能。但是web Worker的出现很大程度上可以改变这个难题，它可以为js主线程创建多个子Worker线程，主线程可以分配一些任务给Worker线程执行，而后者又可以在后台执行，与主线程的执行互不干扰，当主线程遇到一些高密集性计算或者...原创 2019-04-13 21:24:48 · 194 阅读 · 0 评论 -
js长列表渲染的三种方式
原始方法每一次都重新触发一次重排，性能很差，不建议使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...原创 2020-03-21 18:23:26 · 2655 阅读 · 3 评论 -
get and post
服务器的交互方式都是属于与服务器交互的一种方式还有put，delete，依次是获取、修改、更新、删除get请求参数放在url上url的长度是有限制的，理论上长度是没有限制的，但是浏览器和服务器都做了限制get请求会被浏览器主动cache浏览器回退时无害get请求会产生一个TCP包，会把http的header和data一起传过去，服务端响应200post请求参数存放在r...原创 2019-10-10 11:07:10 · 189 阅读 · 0 评论 -
你真的了解JSON.stringify() 吗？？？
<html lang="en"><head> <meta charset="UTF-8"> <title>JSON.stringify()</title></head><body> <!-- --> <script> // 传一个对象，生成JSON字符串 var ob...原创 2019-06-24 23:57:08 · 2056 阅读 · 0 评论 -
常用正则表达式
至少包含一个字母和数字：/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{2,230}$/验证邮箱：/^\w*([\u4e00-\u9fa5!#$%&'+-\./=\^_'\{\?\w]*\w*)?@([\u4e00-\u9fa5._\w]+[\u4e00-\u9fa5-._\w]*)?[\u4e00-\u9fa5._\w]+([\u4e00-\u9fa5-._\w...原创 2019-07-23 14:22:12 · 786 阅读 · 0 评论 -
H5之FileReader
单个文件上传<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...原创 2019-08-24 14:28:28 · 266 阅读 · 0 评论 -
请求之Fetch
交互用的ie不支持，主流浏览器都支持，针对不支持的，使用Fetch Polyfill用到了Promise语法，本身也是异步的fetch是一个函数 fetch(url, { method: 'get', headers: { 'content-type': 'application/json;charset=utf-8' }, body: '...原创 2019-08-29 11:47:07 · 195 阅读 · 0 评论 -
JavaScript设计模式系列之工厂模式
简单工厂模式<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script> // 简单工厂模式 function makeCoffee(d...原创 2019-09-24 11:24:24 · 154 阅读 · 0 评论