javascript

最新文章

JavaScript Async/Await和Promise的对比

从Node 8 LTS开始,Node完全支持Async/Await。这里通过示例的方式对比Async/Await和Promise。简单介绍下Async/Await:Async/Await是一种新的编写异步代码的方式。其他方式是回调或者Promise。Async/Await实质是构建在Promise之上,它不能用于纯的回调或者Node.js的回调中。和Promise一样,Async/Await是非阻

JavaScript转换boolean值为数字的几种方法

方法一:三元运算var i = result ? 1 : 0;方法二:+号操作符+ true; // 1+ false; // 0方法三:Number构造函数Number(true)//1Number(false)//0方法四:或运算result | 0;其中,方法一和方法四是相对另两种方法要快。

动态加载JS文件,避免Error : xxx is undefined

我们可以在页面动态添加<script>标签来动态加载js文件:function loadScript(url){ var head = document.getElementsByTagName('head')[0]; var script = document.createElement('script'); script.type = 'text/javascript'

浏览器页面间通信新接口BroadcastChannel的用法

Broadcast Channel API允许同源(同一站点)的浏览器上下文(包括窗口,标签,框架或iframe)之间的简单通信。通信的方式如图: 用法构建channelvar bc = new BroadcastChannel('test_channel');test_channel参数用来指定channel的名称,连接到相同名称的BroadcastChannel,可

ES6简化版的JavaScript中间件模式的实现

JavaScript中间件模式的目的是分解前端业务逻辑,通过next方法层层传递给下一个业务。比较经典的是express和koa。这是使用ES6实现的一个简版的中间件模式:class Middleware { use(fn) { this.go = (stack => next => stack(fn.bind(this, next.bind(this))))(this.go)

JavaScript检测Chrome浏览器是否在隐身窗口

浏览器在隐身模式下,它的FileSystem API是禁用的,可以通过检测FileSystem API来判断浏览器是否在隐身窗口。function isIncognito() {  var fs = window.RequestFileSystem || window.webkitRequestFileSystem;

JavaScript停止setInterval的执行

setInterval()是会返回一个interval id,可以调用clearInterval()来停止setInterval()的执行:var refreshIntervalId = setInterval(fname, 10000); /* 在不需要执行Interval */ clearInterval(refreshI

JavaScript获取Object类名的几种方法

有以下几种方法可以用来获取Object的类名:typeofinstanceofobj.constructorfunc.prototype, proto.isPrototypeOffunc.name(ES6)使用示例:function Foo() {} var foo = new Foo(); typeof Foo; 

Laravel使用laracasts/utilities转换PHP变量为JavaScript变量

laracasts/utilities是开源的项目,项目地址:https://github.com/laracasts/PHP-Vars-To-Js-Transformer。它提供了将PHP变量转换为JavaScript变量的工具。安装使用composer安装:composer require laracasts/utilities Laravel 4: 安

JavaScript计算点到线的最短距离

点到线的最短距离实际上就是点到线的垂直距离。点坐标为(x,y),取线上的两点(x1,y1)和(x2,y2)来计算它们的距离。/** * 点到线的最短距离实际上就是点到线的垂直距离。 * (x,y)为点的坐标 * (x1,y1)为线段上点的坐标 * (x2,y2)为线段另外一点的坐标 */ function distanceOfPoint2Line(x, y, x1, y1,

IndexDB快速入门

IndexDB是适用于浏览器的文档数据库,它有以下特点:兼容所有现代的浏览器支持事务以及版本控制支持无限数量的数据。很多浏览器会限定localStorage或者sessionStorage的存储空间为2M到10MIndexDB是异步的API,它不会阻塞浏览器UI的渲染下面介绍下它的使用。安装依赖包idb需要把idb的js库添加到依赖。有几种方式添加idb到依赖。yarnyarn add&

JavaScript 图片与Base64数据互相转换脚本

图片转换为Base64数据方法一:非Html 5使用FileReader使用XMLHttpRequest将图像加载为blob,接着使用FileReader API将其转换为dataURL。function toDataURL(url, callback) {   var xhr = new 

React Router 4 表单提交后重定向示例

表单设置fireRedirect为发起从定向的标记,当表单提交后,更新它的值为fireRedirect=true。当fireRedirect为true时,重定向到原来的页面。import React, { Component } from 'react' import { Redirect } from 'react-router' export default class MyForm

html给文本输入框添加自定义的清除按钮

使用HTML 5,如果对清除按钮的样式不介意的话,可以使用search类型的输入框,它会提供一个默认的清除按钮<input type="search" placeholder="搜索" /> 如果想自定义清除按钮,则需要自己实现,这里使用jquery给出一个实现的方案:<!DOCTYPE h

JavaScript(ES6/ES6之前)对函数参数设置默认值

ES6对函数参数设置默认值使用=号对参数设置默认值function myfunc(message, flag = false) {   // Code } myfunc("hello"); 当flag没有传递值时,默认为false也可以使用解构赋值:function myfunc({&n

FastClick用法

为什么要使用FastClick移动设备上的浏览器默认会在用户点击屏幕大约延迟300毫秒后才会触发点击事件,这是为了检查用户是否在做双击。为了能够立即响应用户的点击事件,才有了FastClick。项目地址:https://github.com/ftlabs/fastclickFastClick的使用安装fastclick安装fastclick可以使用npm,Component和Bower。另外也提供

纯JavaScript检测页面是否加载完成(理解JavaScript页面加载事件)

JavaScript与页面加载相关的事件先介绍JavaScript与页面加载相关的几个事件:document.readystatechangereadystatechage事件会监控document.readyState。readyState有三个值:loading:文档正在加载interactive:文档已加载完成且已被解析,但子资源(如image,css,iframe等)仍在加载。comple

JavaScript版身份证验证

这是用于验证身份证的工具函数,支持15位或18位省份证。/** * 身份证号码结构: * * 根据〖中华人民共和国国家标准GB11643-1999〗中有关公民身份号码的规定,公民身份号码是特征组合码,由十七位数字本体码和一位数字校验码组成。 * 排列顺序从左至右依次为:6位数字地址码,8位数字出生日期码,3位数字顺序码和1位数字校验码。 * * 地址码(前6位):表示对

Javascript检测开发者工具Devtools是否打开(Chrome/Firefox/IE)

首先要确定一点:是没有统一标准的方法来检测各个浏览器的devtools是否打开。所以只能针对不同的浏览器使用不同的方案,当然随着浏览器能的升级,有可能目前的方案也是会不适用的。这里列出目前各个浏览器可用的方案。方案一console.log隐式调用元素的idfunction isDevToolsOpened() {  var opened = fal

ES6 函数使用解构赋值(Destructuring )的几点好处

解构赋值(Destructuring )是ES6新增的特性。使用解构赋值有以下几点好处:命名参数设置默认参数多个返回值命名参数在传统的函数定义如下:function findUsersByRole (   role,    withContactInfo,    includeInactive )&

JavaScript里null与undefined的区别与相似点

初次看,null和undefined看似是一样的,但远非如此。 本文将探讨JavaScript中null和undefined的区别和相似之处。null是什么?有两个你应该理解的null特性:null是空的或不存在的值。null必须显式赋值。将null的值赋给a示例:let a = null; console.log(a); // 输出null un

JavaScript ES6扩展运算符(...)用例

ES6新增了扩展运算符,它的语法很简单,使用三个点号表示“...”。它的作用是把数组展开为类似用逗号隔开的参数列表。这里介绍几种用例来理解扩展运算符的使用。用例1:插入数组如果我们要在一个数组插入另外一个数组的元素,可以结合splice和apply使用,如:a1 = [1,2,5,6,7]; a2 = [3,4]; a1.splice.apply(a1,&n

PC端禁止页面缩放(原生JavaScript)

在PC端缩放浏览器的页面主要有三种方式:Ctrl + (+/-)组合Ctrl + 鼠标轮滑浏览器菜单我们是禁止不了用户通过浏览器缩放页面,只能通过对有键盘或鼠标事件的快捷方式做监控,从而实现禁止缩放的快捷方式。禁止Ctrl + (+/-)组合document.addEventListener('keydown', functio

JavaScript删除数组里重复的元素

JavaScript里有多种方法可以用来对数组元素去重。ES6 SetES6提供了一个Set对象,用它可以很简单便可以对数组元素去重。function uniq(arr) {    return Array.from(new Set(arr)); } filter另外也可以通过filter来对数组元素去重。functi

JavaScript检查Date对象是否为Invalid Date

使用Date()构造日期对象,如果传入非日期格式的字符串,仍然能构造出Date对象。在chrome控制台>var date = new Date("hello"); >date Invalid Date >typeof date “object” >date instanceof&nb

JavaScript使用Date.parse()或new Date()解析字符串日期的格式要求

在JavaScript里,Date.parse()会接收一个字符串作为参数,根据字符串格式返回:如果字符串符合日期格式,返回自1970-01-01 00:00:00 UTC时间起的毫秒数。如果字符串不符合格式,返回NaN。new Date(str),构造函数也可以接收一个字符串作为参数,把字符串转换为表示的日期。构造的日期对象为:如果字符串符合日期格式,返回自1970

JavaScript判断两个数组是否相等

首先判断两个数组是否相等时不能直接使用==var array1 = []; var array2 = []; console.log(array1 == array2); //输出false 对于对象来说,==比较的是两个对象是否为同一个对象。数组属于对象类型,尽管数组元素是相同的,但这两个数组属于不同的对象

JavaScript使用window.print()打印页面:样式设置、精确分页以及局部打印

大部分浏览器提供打印页面的功能,直接使用浏览器的打印功能是直接将整个页面打印出来,并且是自动分页。很多时候直接打印整个页面并不能满足我们的需要。有三方面的需求我们可能要考虑:样式设置:打印的样式和页面显示的样式不同,需要对设置打印样式。精确分页:需要根据具体的内容进行精确分页。局部打印:不需要打印整个页面,只需要打印页面的部分。html示例<!doctype html> &l

Vue实例里this的使用

要理解Vue实例里this的使用,首先要理解this在JavaScript里的用法,可以参考理解JavaScript普通函数以及箭头函数里使用的this。这是vue文档里的原话:All lifecycle hooks are called with their 'this' context pointing 

理解JavaScript普通函数以及箭头函数里使用的this

this普通函数的this普通函数的this是由动态作用域决定,它总指向于它的直接调用者。具体可以分为以下四项:this总是指向它的直接调用者, 例如 obj.func() ,那么func()里的this指的是obj。在默认情况(非严格模式,未使用 'use strict'),如果函数没有直接调用者,this为window在严格模式下,如果函数没有