![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
JavaScript点滴知识
弹琴弹琴
这个作者很懒,什么都没留下…
展开
-
关于ES6的Babel,Promise,async和await---简单理解
一:Babel : 用来把 ES6 的代码转化为浏览器或者其它环境支持的代码。兼容 { 构建bable的工程: (1)构建 npm包 npm init -y , 并新建 src 目录 和 一个 index.js 文件。 (2)安装依赖包npm install --save-dev babel-loader @babel/core babel-loader:只是和webpack之间的桥梁,并不会把es6语法进行转换 同时在webpack.co...转载 2022-04-06 09:36:24 · 1004 阅读 · 0 评论 -
动手写 js 沙箱
前言 在日益复杂和多元的Web业务背景下,前端工程化这个概念经常被提及。“说说你对Web工程化的理解?” 相信很多初学者在面试时会经常遇到,而大多数人脑子会直接浮现出 Webpack,认为工程化就是 Webpack 做的那些事情儿,当然也不能说不对,准确说 Webpack 只是工程化背景下产生的工具。 工程化的目的是高性能、是稳定性...转载 2021-09-22 09:24:15 · 384 阅读 · 0 评论 -
正则表达式全集
表达式全集 字符 描述 \ 将下一个字符标记为一个特殊字符、或一个原义字符、或一个向后引用、或一个八进制转义符。例如,“n”匹配字符“n”。“\n”匹配一个换行符。串行“\\”匹配“\”而“\(”则匹配“(”。 ^ 匹配输入字符串的开始位置。如果设置了RegExp对象的Multiline属性,^也匹配“\n”或“\r”之后的位置。 $ .转载 2021-07-27 17:48:51 · 90 阅读 · 0 评论 -
js 发布订阅模式应用场景 自己手写一个简易的发布订阅模块
我们先写一个简单的发布订阅: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" c...转载 2021-07-12 09:22:07 · 549 阅读 · 0 评论 -
JS实现二叉树的创建和遍历
1、先说二叉树的遍历,遍历方式: 前序遍历:先遍历根结点,然后左子树,再右子树 中序遍历:先遍历左子树,然后根结点,再右子树 后续遍历:先遍历左子树,然后右子树,再根结点上代码:主要还是利用递归function TreeCode() { let BiTree = function (ele) { this.data = ele; this.lChild = null; this.rChild = null;..转载 2020-07-09 10:36:54 · 274 阅读 · 0 评论 -
js拦截用户复制、剪切、另存为、禁止鼠标右键及破解方法
经常会遇到这样的需求,拦截用户复制、剪切、另存为、禁止鼠标右键的操作等,正所谓道高一尺魔高一丈啊能禁止也能破解1. 禁止用户选择 达到无法复制的目的<body onselectstart = "return false" ></body>或者document.onselectstart = function(){ return false;}或者阻止默认事件document.onselectstart=function(event){event.pre...转载 2020-06-24 09:53:15 · 409 阅读 · 0 评论 -
js 树形结构数据遍历条件判断删除对应数据
代码: 1 2 3 4 5 6 7 8 9 /** * 树结构数据条件过滤 * js 指定删除数组(树结构数据) */ functionfilter (data, id) { varnewData = data.filter(x => x.id...转载 2020-01-03 12:22:54 · 4864 阅读 · 0 评论 -
Javascript用递归的方式遍历树形json数组(根据id返回对应值和修改对应值)
前言Javscript语言有很多值得探究和注意的地方,下面我们来看一下用递归的方式遍历JSON对象数组。正文假设我们的要遍历的数组是这样的:var array = [ { id: 1, children:[{ id:2, ...转载 2020-01-03 12:17:16 · 3617 阅读 · 0 评论 -
js获取鼠标选中的文字
定义需要获取的内容的节点:<span onClick="SelectText()">河中鱼类离奇死亡,下游居民频染怪病,沿岸植物不断变异,是残留农药?还是生化攻击?》</span>获取选中的文字,我们使用window.getSelection().toString()方法。代码如下:function SelectText(){ try{...转载 2020-01-02 10:49:26 · 5556 阅读 · 0 评论 -
js 监听文字鼠标选中
如果你在浏览器中安装了翻译插件的话,控制台可能会输出你选中的文本内容,那么这是如何做到的呢?直接查看他的源码,主要是使用了window.getSelection 这个属性所以我们也可以仿照着写一个函数,用来监听鼠标双击,或者鼠标抬起事件:// 监听双击事件document.addEventListener("dblclick", doubleClick, true);// 监听释...转载 2020-01-02 10:45:13 · 7568 阅读 · 2 评论 -
JS最简单的IPv4转换成IPv6 方法
输入一个IPv4地址返回一个IPv6地址PS:此处省略入参IPv4校验,不再赘述function IPv4ToIPv6(IP){var result = IP.split('\.');result[0]= (Array(8).join(0) + parseInt(result[0]).toString(2)).slice(-8);resu...转载 2019-12-31 11:09:55 · 1070 阅读 · 0 评论 -
javascript ipv6十六进制转二进制
1.ipv6十六进制补 0,还原完整ipv6地址。function ipv6_to_hex(address){ var ipv6_to_16=''; var ipv6_1=[]; var number_1=0; ...原创 2019-12-31 11:08:08 · 1301 阅读 · 0 评论 -
推荐几个JavaScript精度计算库,解决精度丢失
Math.js。Math.js 是一个用于 JavaScript 和 Node.js 的扩展数学库。它具有支持符号计算的灵活表达式解析器,大量内置函数和常量,并提供了集成的解决方案来处理不同的数据类型,例如数字,大数,复数,分数,单位和矩阵。强大且易于使用。decimal.jsJavaScript 的任意精度的十进制类型。big.js一个小型,快速,易于使用的库,用于任...原创 2019-11-28 09:17:28 · 14388 阅读 · 0 评论 -
获取指定日期n个月后日期
// 获取指定日期n个月后日期export const getNextMonthDay = (date, monthNum)=>{ let dateArr = date.split('-'); let year = dateArr[0]; //获取当前日期的年份 let month = dateArr[1]; //获取当前日期的月份 let day = d...原创 2019-11-11 10:01:10 · 435 阅读 · 0 评论 -
[译]axios 是如何封装 HTTP 请求的
前端开发中,经常会遇到发送异步请求的场景。一个功能齐全的 HTTP 请求库可以大大降低我们的开发成本,提高开发效率。axios 就是这样一个 HTTP 请求库,近年来非常热门。目前,它在 GitHub 上拥有超过 40,000 的 Star,许多权威人士都推荐使用它。因此,我们有必要了解下 axios 是如何设计,以及如何实现 HTTP 请求库封装的。撰写本文时,axios 当前版本为 0...转载 2019-11-01 09:19:45 · 609 阅读 · 0 评论 -
重温一下 JS 进阶需要掌握的 13 个概念
1.变量赋值 (值 vs 引用)理解 JS 如何给变量赋值可以帮助我们减少一些不必要的 bug。相反,如果,不理解这一点,可能很容易地编写被无意中更改值的代码。JS 总是按照值来给变量赋值。 这一部分非常重要:当指定的值是 JavaScript 的五种基本类型之一(即 Boolean,null,undefined,String 和 Number)时,分配是实际值。 但是,当指定的值是 Ar...转载 2019-10-30 09:29:10 · 137 阅读 · 0 评论 -
js验证身份证号,超准确
看程序前先来了解下身份证号的构成:身份证号分为两种,旧的为15位,新的为18位。身份证15位编码规则:dddddd yymmdd xx p其中 dddddd:地区码 yymmdd: 出生年月日 xx: 顺序类编码,无法确定 p: 性别,奇数为男,偶数为女;身份证18位编码规则:dddddd yyyymmdd xxx y其中 dddddd:地区码 yyyym...转载 2019-10-23 14:51:10 · 488 阅读 · 0 评论 -
12种不宜使用的Javascript语法
这几天,我在读《Javascript语言精粹》。这本书很薄,100多页,正好假日里翻翻。该书的作者是Douglas Crockford,他是目前世界上最精通Javascript的人之一,也是Json格式的创造者。他认为Javascript有很多糟粕。因为1995年Brendan Eich设计这种语言的时候,只用了三个月,很多语言特性没有经过深思熟虑,就推向了市场。结果等到人们意识到...转载 2018-11-15 17:35:16 · 176 阅读 · 0 评论 -
尾调用优化
尾调用(Tail Call)是函数式编程的一个重要概念,本文介绍它的含义和用法。一、什么是尾调用?尾调用的概念非常简单,一句话就能说清楚,就是指某个函数的最后一步是调用另一个函数。function f(x){ return g(x);}上面代码中,函数f的最后一步是调用函数g,这就叫尾调用。以下两种情况,都不属于尾调用。// 情况一functio...转载 2018-11-15 16:49:05 · 170 阅读 · 1 评论 -
Javascript模块化编程(一):模块的写法
随着网站逐渐变成"互联网应用程序",嵌入网页的Javascript代码越来越庞大,越来越复杂。网页越来越像桌面程序,需要一个团队分工协作、进度管理、单元测试等等......开发者不得不使用软件工程的方法,管理网页的业务逻辑。Javascript模块化编程,已经成为一个迫切的需求。理想情况下,开发者只需要实现核心的业务逻辑,其他都可以加载别人已经写好的模块。但是,Javascript...转载 2018-11-15 14:44:26 · 104 阅读 · 0 评论 -
Javascript函数节流
最近在做网页的时候有个需求,就是浏览器窗口改变的时候需要改一些页面元素大小,于是乎很自然的想到了window的resize事件,于是乎我是这么写的<!DOCTYPE html><html><head> <title>Throttle</title></head><body> &am转载 2018-11-13 16:49:13 · 95 阅读 · 0 评论 -
纯JS实现左右滑动布局和滑动
<!DOCTYPE html><html><head> <meta charset=utf-8> <meta name=keywords content=首页> <meta name=description content=首页> <meta name=author content=...原创 2018-11-08 14:58:15 · 18778 阅读 · 1 评论 -
JavaScript设计模式之观察者模式(学习笔记)
设计模式(Design Pattern)对于软件开发来说其重要性不言而喻,代码可复用、可维护、可扩展一直都是软件工程中的追求!对于我一个学javascript的人来说,理解设计模式似乎有些困难,对仅切图、做少量交互效果的FE甚至可能不会用到,但是当你开始使用Angular/Backbone等框架的时候,就无法避免设计模式、MVC/MVVM这些东西了(反正我是伤脑筋)。我学设计模式是刚开始接触编...转载 2018-10-20 12:24:49 · 134 阅读 · 0 评论 -
三种常用的排序算法
<script type="text/javascript">//冒泡排序function bubbleSort(arr){ var i = j = 0; for(i=1;i<arr.length;i++){ for(j=0;j<=arr.length-i;j++){ var temp = 0; ...原创 2018-10-09 12:22:59 · 217 阅读 · 0 评论 -
自己实现数据双向绑定
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &转载 2018-09-14 09:10:48 · 1186 阅读 · 0 评论 -
DSBridge for Android/IOS 桥
推荐一个javascript、Android、IOS三端通信库。https://github.com/wendux/DSBridge-Androidhttps://github.com/wendux/DSBridge-IOS原创 2018-08-14 11:31:42 · 1210 阅读 · 0 评论 -
原生JS编写,移动设备上让任意元素在屏幕内浮动与拖动
原生JS编写,移动设备上让任意元素在屏幕内浮动与拖动https://github.com/gisonyeung/float-drag转载:https://github.com/gisonyeung/float-drag转载 2018-08-07 18:58:40 · 740 阅读 · 0 评论 -
js常用函数
var tools = { //【一、字符串相关】 //去除空格:默认去除前后空格 /*type,默认为2(1~4) 1:所有空格 2:前后空格 3:前空格 4:后空格 * */ trim: function (str, type) { type = type || 2; switc...原创 2018-07-04 15:15:03 · 452 阅读 · 0 评论 -
js倒计时
//倒计时的插件$.fn.extend({ oaoTime: function (nowTime) { this.each(function () { var dateStr = $(this).attr("end-date"); var endDate = new Date(dateStr.replace(/...原创 2018-06-26 19:32:08 · 738 阅读 · 0 评论 -
javascript bridge android/ios webview
https://github.com/cmp-cc/vue-bridge-webview #vue-bridge-webviewjavascript bridge android/ios webviewInstallationnpm install vue-bridge-webview --saveordownload vue-bridge-webview...原创 2018-06-12 09:56:00 · 618 阅读 · 2 评论 -
js导出Excel
import XLSX from 'xlsx'import XLSX_SAVE from 'file-saver' // xlsx 文件输出操作方法function s2ab(s) { const buf = new ArrayBuffer(s.length); const view = new Uint8Array(buf); for (let i = 0;...原创 2018-05-15 12:11:28 · 252 阅读 · 0 评论 -
zxing for javascript 扫描二维码和生成二维码
实测可用:https://github.com/aleris/zxing-typescript原创 2018-03-29 15:55:04 · 6872 阅读 · 1 评论 -
js 二维码扫描
应用在h5浏览器的扫一扫二维码,用到getUserMedia qrcode.js库(解析二维码的库) _aa={};_aa._ab=function(f,e){var d=qrcode.width;var b=qrcode.height;var c=true;for(var g=0;g<e.length&&c;g+=2){var a=Math.floor...原创 2018-03-27 19:04:29 · 12445 阅读 · 4 评论 -
我知道的前端算法
前端算法大致可以分为几类排序 堆栈,队列,链表 递归,动态规划,贪心算法 二分查找 以上内容面试官一般都会结合数组,字符串来考察你对以上知识的掌握程度 这些排序里边主要掌握四个就可以:冒泡、选择、插入、快速冒泡排序算法function bubbleSort(arr) { for(let i = 0,l=arr.length;i<l-1;i++...转载 2018-03-24 00:01:23 · 241 阅读 · 0 评论 -
HTML5利用WebRTC的getUserMedia获取摄像头信息模拟拍照及视频(完整示例)
HTML5可以通过调用navigator.getUserMedia来获取手机设备摄像头,兼容性写法如下window.navigator.getUserMedia = navigator.getUserMedia || navigator.webKitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;...转载 2018-03-23 17:56:40 · 9360 阅读 · 1 评论 -
移动端H5页面截图【含 domtoimage、html2canvas 】
起因:由于云栖大会项目需要支持 名片保存到本地功能【如下图红框】,所以,需要单独截取页面中的名片信息,并且保存到本地。推荐给:需要获取页面内容,给页面截图的小伙伴 介绍两个工具:html2canvas官方地址:https://github.com/niklasvh/html2canvas 优点:1.使用人数多,资料更全 缺点:1...转载 2018-03-16 11:43:44 · 3034 阅读 · 0 评论 -
JS打开摄像头并截图上传
直入正题,JS打开摄像头并截图上传至后端的一个完整步骤 1. 打开摄像头主要用到getUserMedia方法,然后将获取到的媒体流置入video标签2. 截取图片主要用到canvas绘图,使用drawImage方法将video的内容绘至canvas中3. 将截取的内容上传至服务器,将canvas中的内容转为base64格式上传,后端(PHP)通过file_put_conte...转载 2018-03-15 17:22:05 · 398 阅读 · 0 评论 -
js代码书写规范
1.注释:变量、方法、复杂逻辑、调用2.代码抽象:公共方法进行封装、各个方法只干一件事3.数组和对象:属于一类的归纳方便管理4.使用基本库:jquery、zepto(即使是用了vue、angularJs还是建议使用)...原创 2018-02-28 15:02:10 · 556 阅读 · 0 评论 -
scrollIntoView()的用法
STARTscrollIntoView是一个与页面(容器)滚动相关的API(官方解释),该API只有boolean类型的参数能得到良好的支持(firefox 36+都支持),所以在这里只讨论参数Boolean类型的情况。EXPLAIN调用方法为 element.scrollIntoView() 参数默认为true。参数为true时调用该函数,页面(或容器)发生滚动,使elem...转载 2018-02-28 12:01:34 · 13922 阅读 · 0 评论 -
可参考建议js仿模块写法(有利结构清晰,不真是模块)
html <!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <meta content=&quo原创 2017-12-08 16:55:30 · 441 阅读 · 0 评论