JavaScript
文章平均质量分 77
JavaScript知识汇总和使用经验
suwu150
业精于勤,荒于嬉;行成于思,毁于随;磨刀不误砍柴工。
展开
-
有趣工具合集小程序-做你的小树洞小程序
当然,这个小程序还有其他几个比较新颖的功能点,比如夸夸小包包、抛个硬币、手持弹幕、亲戚计算器、来副对联、关键词歇后语等功能点,内容形式确实别出一格,平时既可以用来做一些玩耍的控制,也可以学习一些基本的文化知识,当然,也可以解决逢年过节七大姑八大姨各种亲戚关系的称呼和关系细节计算等,实乃行走江湖一大神器。能够点击刷新,获取到随机的谜语,这个功能挺好玩的,在和朋友一起玩耍的时候,可以使用这个工具来进行玩游戏,进行猜词游戏,也可以在亲子关系中,进行锻炼小孩子的大脑灵活性,相当好玩的一个功能。原创 2023-05-04 22:33:35 · 1089 阅读 · 1 评论 -
React Native中防止滑动过程中误触
解决这次触摸,主要是使用点击事件本身的一个响应机制,在中间通过记录状态值的方式去处理使用到的方法涉及到按下时、抬起时、按下这三个过程通用功能组件需要进行封装,以达到业务功能上的适配。原创 2023-05-04 22:26:56 · 2659 阅读 · 0 评论 -
Nodejs如何在一个文件中获取里边的中文字符
使用了nodejs中文件处理系统fs处理文件的读取使用正则表达式匹配对应的中文使用换行符划分了每一个独立的行,也可以通过fs.createReadStream(filePath);进行按行读取这里只是读取了一个文件的中文字符,但我们项目中包含很多个文件,我们需要遍历整个项目去获取文件名称和对应的行数,这个可以考虑使用fs中readdir进行获取,同时使用递归的方式,有兴趣的小伙伴可以尝试下如何处理。原创 2023-03-25 18:37:54 · 994 阅读 · 0 评论 -
现代浏览器四大进程及渲染线程总结
现代浏览器通常使用多进程架构,其中包括以下四种常见的进程:浏览器进程(Browser Process):浏览器的主进程(负责协调、主控),只有一个该进程是浏览器的核心进程,它控制浏览器的主窗口和各个子进程的创建和销毁。同时,它负责管理用户界面、存储缓存和历史记录等功能。是运行浏览器的主进程。负责管理所有其他进程,并协调他们之间的交互和通信。浏览器窗口和标签页的创建和关闭也由此进程执行。渲染进程(Renderer Process)原创 2023-03-25 16:05:28 · 1907 阅读 · 0 评论 -
微任务和宏任务的区别及具体场景
比较难理解的应该是代码块2,同步执行的按顺序执行就好了,在输出同步任务X1,输出微任务X2后,因为setTimeout又是一个宏任务,所以会被排到所有的宏任务之后,所以就会在7,8的后面出现打印。微任务和宏任务皆为异步任务,它们都属于一个队列,主要区别在于他们的执行顺序,Event Loop的走向和取值。那我们在 宏任务2中的宏任务 X3,X4,X5后面再添加一个宏任务,最终的结果会排列到后面执行。宏任务与微任务之间的执行顺序(同步任务->微任务->宏任务)的执行顺序去检查,会慢慢深入人心的。原创 2023-03-01 22:56:09 · 1168 阅读 · 0 评论 -
Javascript如何截取含有表情的字符串
总结了三种方案,通过遍历和检查都是去判断字符的完整性,但是可能还会有很多其他考虑不到的方案,有想法的小伙伴可以分享分享。原创 2023-03-18 23:04:17 · 1523 阅读 · 0 评论 -
JavaScript事件循环及任务处理
Js 中,有两类任务队列:宏任务队列(macro tasks)和微任务队列(micro tasks)。宏任务队列可以有多个,微任务队列只有一个。的原则进行排队,然后等待事件队列的处理,也就是开头那张图的处理机制,直至所有任务处理完成,处理引擎就会进入到休眠状态等待新的任务到来。它是一个在 JavaScript 引擎等待任务,执行任务和进入休眠状态等待更多任务这几个状态之间转换的无限循环。当然,处理引擎不总是这么空闲能够及时处理这些任务,那有人就会问了,那这个情况该怎么办?微任务始终先于宏任务执行。原创 2023-03-05 00:16:22 · 466 阅读 · 0 评论 -
?? JavaScript 双问号(空值合并运算符)
JavaScript 双问号也称为空值合并运算符。这个运算符只会在左侧表达式是 null 或 undefined 时返回右侧的表达式。不同于逻辑或,空值合并运算符会允许把 0 和空字符串或false作为有效的数值。不要忘记在配合逻辑或/与使用时用上括号。原创 2023-02-26 20:16:33 · 1847 阅读 · 0 评论 -
快捷工具箱小程序-做你的小树洞
当然,这个小程序还有其他几个比较新颖的功能点,比如夸夸小包包、抛个硬币、手持弹幕、亲戚计算器、来副对联、关键词歇后语等功能点,内容形式确实别出一格,平时既可以用来做一些玩耍的控制,也可以学习一些基本的文化知识,当然,也可以解决逢年过节七大姑八大姨各种亲戚关系的称呼和关系细节计算等,实乃行走江湖一大神器。你以为该结束了吧,但是还没有,他还有一个自动定位的功能,能够进行自动弹出定位功能,进行选择,对藏头诗进行位置信息的描述,哈哈哈,界面是这样的。仅仅需要输入关键词语,然后就能够进行创作诗句,他的界面是这样的。原创 2021-12-05 23:09:35 · 1645 阅读 · 0 评论 -
JavaScript将数组拆分成多个长度的区块
对于该方法,我们能够通过文档学习到,也是需要两个参数的,分别是需要处理的数组和需要分割的大小区块,返回一个包含拆分区块的新数组(注:相当于一个二维数组)。此方案中,试用while循环进行遍历整个数组,考虑到遍历,那当然我们也能够使用for循环进行解决。lodash是一个前端常用的工具库,当然这个需求是可以满足的,具体方法为。这里我简单的试用了下,可以看到处理结果还是挺理想的。可以看到,这个写法和第一种方案差不多哈。原创 2021-07-15 19:51:17 · 5533 阅读 · 0 评论 -
h5 Canvas实现圆形时间倒计时进度条
在项目中,我们会遇到需要显示进度条或者倒计时的功能,我们今天就来实现一下。一、效果展示二、准备文件在开发canvas程序时,我们通常需要准备静态html和需要引用的js文件即可,这次我们使用的静态html模板如下:1.html页面<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible原创 2021-03-21 16:44:56 · 2124 阅读 · 2 评论 -
JavaScript中判断数据类型的四种方法
需要注意的是,必须通过Object.prototype.toString.call/apply来获取,而不能直接 new Date().toString(), 从原型链的角度讲,所有对象的原型链最终都指向了Object, 按照JS变量查找规则,其他对象应该也可以直接访问到Object的toString方法,而事实上,大部分的对象都实现了自身的toString方法,这样就可能会导致Object的toString被终止查找,因此要用call来强制执行Object的toString方法。原创 2020-12-30 10:30:48 · 704 阅读 · 0 评论 -
如何构建一个最简单的electron应用
electron的继续学习—-如何构建一个最简单的electron应用下面,我们就来进行构建一个hello World项目1 准备工作一个最基本的 Electron application 需要这些文件: - `package.json` - 处理应用的以来和说明性信息. - `main.js` - 入口页面和渲染html页面. 这个文件是应用的 **main process**.--主进程原创 2017-03-24 10:30:44 · 4213 阅读 · 0 评论 -
map()和forEach()的区别和理解
map()和forEach()的区别和理解如果你已经有使用JavaScript的经验,你可能已经知道这两个看似相同的方法:Array.prototype.map()和Array.prototype.forEach()。那么,它们到底有什么区别呢?1.定义我们首先来看一看MDN上对Map和ForEach的定义:forEach(): 针对每一个元素执行提供的函数(executes a provided function once for each array element)。除了抛出异常以外,没原创 2020-12-23 17:14:41 · 25650 阅读 · 2 评论 -
原生JS事件绑定的三种方式
要想让 JavaScript 对用户的操作作出响应,首先要对 DOM 元素绑定"事件处理函数"。所谓事件处理函数,就是处理用户操作的函数,不同的操作对应不同的名称。html标签事件绑定:属性赋值 ,这个在该元素的properties属性中可以查到, 也可以在事件监听中看到。js事件绑定:属性赋值,这个在该元素的properties属性中可以查到,也可以在事件监听中看到。只可以在该元素的事件监听中看到。原创 2020-12-23 13:53:21 · 6216 阅读 · 1 评论 -
简述ajax和axios、fetch的区别
fetch号称是AJAX的替代品,是在ES6出现的,使用了ES6中的promise对象。PS:防止CSRF:就是让你的每个请求都带一个从cookie中拿到的key, 根据浏览器同源策略,假冒的网站是拿不到你cookie中得key的,这样,后台就可以轻松辨别出这个请求是否是用户在假冒网站上的误导输入,从而采取正确的策略。axios 是一个基于 Promise 的 http请求库,可以用在浏览器和 node.js 中,本质上也是对原生XHR的封装,只不过它是Promise 的实现版本,符合最新的ES规则。原创 2020-12-22 21:36:20 · 498 阅读 · 0 评论 -
call、apply、bind的应用和区别
call、apply、bind的应用和区别首先,要明白这三个函数的存在意义是什么?答案是改变函数执行时的上下文,再具体一点就是改变函数运行时的this指向。有了这个认识,接下来我们使用实例来看一下,怎么使用这三个函数。 let obj1 = {name: 'tom'}; let obj2 = {name: 'jack'}; function Child(name){ this.name = name; } Child.prototype = { constr原创 2020-12-22 20:08:49 · 2855 阅读 · 0 评论 -
JavaScript键盘鼠标监听功能
实际应用中,我们会遇到监听按键输入和鼠标点击事件,在这里我们进行对鼠标和键盘事件的总结.#### KeyboardEventKeyboardEvent 对象描述了键盘的交互方式。 每个事件都描述了一个按键(Each event describes a key);事件类型keydown, keypress 与 keyup 可以确定是哪种事件在活动。 KeyboardEvent 表示刚刚发生在按键上的事情。 当你需要处理文本输入的时候,使用 HTML5 input 事件代替。例如,用户使用手持系统如平板原创 2019-06-11 10:31:20 · 6220 阅读 · 0 评论 -
m3u8格式视频源列表
平时,需要测试m3u8格式视频的播放,会使用一些可用的播放源,整理在这里: const sourceList = [ { name: 'cctv1', src: 'http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8' }, { name: 'cctv2', src: 'http://ivi.bupt.edu.cn/hls/cc...转载 2019-05-19 17:41:15 · 102095 阅读 · 4 评论 -
如何检测页面加载完成
document.readyState1.定义一个document 的 document.readyState 属性描述了文档的加载状态。2.值一个文档的 readyState 可以是以下值之一:loading / 加载document 仍在加载。interactive / 互动文档已经完成加载,文档已被解析,但是诸如图像,样式表和框架之类的子资源仍在加载。compl...原创 2019-04-16 22:19:17 · 1230 阅读 · 0 评论 -
h5 Canvas正多边形绘制
在之前文章中,我们使用线段进行绘制过矩形,使用arc,arcTo绘制过圆弧和圆形,但是Canvas还能够进行绘制其他图形,比如三角形、六边形、八边形等.这篇文章主要就是说明如何绘制多边形.JS效果如下:上述代码,我们进行绘制了一组根据时间进行变化的生成的多边形,通过方法drawHorizontalAxis绘制横向坐标轴,方法drawVerticalAxis绘制纵向坐标轴,通过方法getPolygonPoints进行计算获取多边形中所有的点,进行为后面连线时连接点作准备工作,通过createPo原创 2019-03-23 14:18:16 · 2514 阅读 · 0 评论 -
React中createElement 和 cloneElement 的区别
React.cloneElement()与 React.createElement()相似,不同的是它传入的第一个参数element是一个 React 元素,而不是标签名或组件。如下,使用cloneElement进行创建jsx元素,在这里我们将createElement创建的element对应的 React 元素做为基点,然后进行克隆,在克隆的过程中,进行添加。有了以上知识的认识,我们可以在以后的组件封装中进行更加React化的设计,通过封装公共组件供其他页面迭代使用,进行我们业务功能更加接近的封装。原创 2019-01-21 16:13:18 · 12212 阅读 · 1 评论 -
JavaScript闭包的自我修养
1.概述闭包的定义很简单:如下代码函数 A 返回了一个函数 B,并且函数 B 中使用了函数 A 的变量,函数 B 就被称为闭包。function A() { let a = 1 function B() { console.log(a) } return B}你是否会疑惑,为什么函数 A 已经弹出调用栈了,为什么函数 B 还能引用到函数 A 中的变量。因为函数...原创 2019-01-16 18:33:24 · 723 阅读 · 1 评论 -
JavaScript内存分配及垃圾回收机制
node垃圾回收机制V8 实现了准确式 GC,GC 算法采用了分代式垃圾回收机制。因此,V8 将内存(堆)分为新生代和老生代两部分。1.新生代算法新生代中的对象一般存活时间较短,使用 Scavenge GC 算法(一种清理的执行机制)。在新生代空间中,内存空间分为两部分,分别为 From 空间和 To 空间。在这两个空间中,必定有一个空间是使用的,另一个空间是空闲的。新分配的对象会被放入 ...原创 2019-01-16 15:42:15 · 639 阅读 · 0 评论 -
使用Date对象中toDateString判断日期是否当天
var str = 1478508411000;console.log(new Date(str).toDateString());if (new Date(str).toDateString() === new Date().toDateString()) {//今天console.log(“当天”);} else if (new Date(str) &amp;amp;amp;lt; new Date()){...原创 2018-11-18 17:20:06 · 5248 阅读 · 0 评论 -
JavaScript中Array类型的使用
Array类型 ECMAScript数组和其他语言中的数组都是有序列表,但是有以下特性: a.每一项都可以保存任何类型的数据。 b.数组的大小是可以动态调整。 c.数组的length属性:可读可写,可以通过设置length的值从数组的末尾移除项或向数组中添加新项 1) 创建方法 1. 使用Array构造函数 var arr原创 2017-03-05 23:26:32 · 607 阅读 · 0 评论 -
JavaScript进阶学习
事件分离: 实现事件与标签的分离,通过单独获取标签,然后添加方法进行解决,如下面所示代码: window.onload = function () { // 在这里进行获取标签的事件 var oBtn = document.getElementById('btn'); oBtn.onclick = function () { // 进行其他操作 }}原创 2017-11-20 12:01:30 · 924 阅读 · 0 评论 -
如何使用nodejs创建Web服务器
Web服务器一般指网站服务器,是指驻留于因特网上某种类型计算机的程序,Web服务器的基本功能就是提供Web信息浏览服务。它只需支持HTTP协议、HTML文档格式及URL,与客户端的网络浏览器配合。大多数 web 服务器都支持服务端的脚本语言(php、python、ruby)等,并通过脚本语言从数据库获取数据,将结果返回给客户端浏览器。目前最主流的三个Web服务器是Apache、Nginx、IIS。原创 2017-06-04 17:03:33 · 52566 阅读 · 20 评论 -
如何把多个js函数绑定到事件上面
在给网页加一些特效时,经常要加入“onload”事件,即在网页加载完后执行某事件,例如:<body onload=”alert(‘欢迎光临!’)”,但这样做有个大的缺陷,事件会在网页完全下载完后才会执行,包括网页中的静态资源(图片或Flash等),如果网页中的图片比较大或有很多图,可能还没等网页完全下载完网友已经点击链接到其它网页去了,这样这个事件就没有执行了。 这时我们会想到用“window.o原创 2017-12-29 11:59:37 · 2557 阅读 · 0 评论 -
修改浏览器滚动条样式
CSS设置滚动条样式 因为在现在的大部分项目中很多都用到了滚动条,有时候用到模拟的滚动条,现在说下滚动条的CSS也能解决。 比如网易邮箱的滚动条样子很好看,就是利用的CSS来设置的,而且是webkit浏览器的。 一:webkit的CSS设置滚动条1.1 主要有下面7个属性::-webkit-scrollbar 滚动条整体部分,可以设置宽度啥的::-webkit-scrollbar-butto原创 2017-12-28 16:10:14 · 5032 阅读 · 0 评论 -
百度富文本编辑器的使用
2. 从官网上下载完整源码包,解压到任意目录,解压后的源码目录结构如下所示: dialogs:弹出对话框对应的资源和JS文件 lang:编辑器国际化显示的文件 themes:样式图片和样式文件 php/jsp/.net:涉及到服务器端操作的后台文件,根据你选择的不同后台版本,这里也会不同,这里我们选择jsp third-party:第三方插件(包括代码高亮,源码编辑等组件) index.html:源码文件,用于演示完整的界面 ueditor.all.js:开原创 2016-05-21 13:41:37 · 40676 阅读 · 2 评论 -
scrollWidth,clientWidth,offsetWidth在各浏览器中的兼容性和区别测试
参考链接 为了测试同一代码在不同浏览器中区别,首先统一了环境,设置所有系统分辨率为800×600,试验使用如下面所示:html>head> meta charset="utf-8"> title>Mtitle> style> #input { border: 11px solid blue; width: 100px; height: 100px;原创 2017-11-22 22:08:13 · 5604 阅读 · 0 评论 -
JavaScript中setTimeout()的用法详解
要使用 clearTimeout( ), 我们设定 setTimeout( ) 时, 要给予这 setTimout( ) 一个名称, 这名称就是 timeoutID , 我们叫停时, 就是用这 timeoutID来叫停, 这是一个自定义名称,。这处的 flag 是一个变数, 可任意取名, 我们用 flag来称呼这变数的原因, 是因为这变数好处一支旗, 将旗竖起 (flag is on), 就会产生一个作用, 将旗放下 (flag is off), 就产生另一个作用。原创 2017-01-16 23:55:50 · 125160 阅读 · 4 评论 -
JS特殊值数据测试
一. 0,1,-1的布尔值结果测试|测试数据||:---|:---| ``` console.log(!1); //false console.log(!!1); //true console.log(!!-1); //true console.log(Boolean(-1));//true console.log(Boolean(0)); //false原创 2017-09-07 11:00:03 · 438 阅读 · 0 评论 -
HTML中如何实现更换网页皮肤
在QQ空间中或者其他网站中有很多一键换肤的功能,今天也进行实现一个简答的换肤。1.实现思路 在实现换肤功能时,我们应该注意到,大部分换肤功能页面中的内容是没有发生变化的,变化的只是背景样式的改变,有的页面中组件位置的调整,所以,实现只需要对同一个页面进行不同样式的替换即可,也就是说,我们有多少皮肤,就得有多少样式。2.具体实现首先,我们需要进行准备一个固定的html页面,命名为i原创 2017-10-22 22:02:29 · 7882 阅读 · 1 评论 -
h5 canvas多边形(蜘蛛图)的画法
蜘蛛图的画法: 在开始之前,我们需要知道canvas是如何进行图像的绘制,canvas 元素用于在网页上绘制图形。HTML5 的 canvas 元素使用 JavaScript 在网页上绘制2D图像。 在矩形区域的画布上,控制其每一像素,JavaScript 来绘制 2D图形,逐像素进行渲染。可以通过多种方法使用canvas 元素绘制路径、矩形、圆形、字符以及添加图像。 * 注意!!!canva原创 2017-10-16 15:54:10 · 4462 阅读 · 0 评论 -
JSON中有格式的保存文件-序列化和反序列化
进行json格式文件的保存的时候,我们会要求有格式的保存,而不是保存为一整行的内容,今天我们就进行说明一下: 如以下代码,我们需要对对象myData进行保存,但是实现结果确实不尽人意const fs = require('fs');const myData = {原创 2017-07-25 23:17:48 · 10065 阅读 · 0 评论 -
项目开发中使用过的lodash方法
pick和omit 首先要说的是,关于pick和omit的使用,如下面链接所示: pick和omit原创 2017-09-07 10:53:25 · 1513 阅读 · 0 评论 -
正则表达式介绍与使用
正则表达式:一、概述正则表达式:符合一定规则的表达式。 作用:用于专门操作字符串。 特点:用于一些特定的符号来表示一些代码操作。这样就简化书写。所以学习正则表达式,就是在学习一些特殊符号的使用。 好处:可以简化对字符串的复杂操作。 弊端:符号定义越多,正则越长,阅读性越差。 具体操作功能:1、匹配:String matches方法。用规则匹配整个字符串,只要有一处不符合规则,就匹配结束,返回false。2、切割:String split(); 3、替换:String replac原创 2016-08-21 14:15:48 · 4342 阅读 · 0 评论 -
React学习笔记----如何在html页面中使用react
React学习笔记----如何在html页面中使用react一、ReactJS简介React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站。做出来以后,发现这套东西很好用,就在2013年5月开源了。由于 React 的设计思想极其独特,属于革命性创新,性能出众,原创 2017-05-29 12:01:46 · 22573 阅读 · 1 评论