javascript

JavaScript正则表达式使用小手册

以下是JavaScript使用正则表达式的一个备忘录。测试正则表达式test()方法：用来测试字符串是否满足表达式。let testString = "My test string";let testRegex = /string/;testRegex.test(testString);测试多个pattern可以使用或操作符（|）来连接多个表达式const regex = /yes|no|mayb

Angular集成moment.js使用

moment.js是一个专门用于处理时间的包。可以通过下面的方法把moment.js集成到Angular中使用。一、使用npm安装moment.jsnpm install --save moment二、在使用moment.js的.ts文件中导入import * as moment from 'moment';三、使用moment.jsmyDate = moment(someDate).format

JavaScript使用CryptoJS加解密

CryptoJS只一个JavaScript的加解密的工具包。它支持多种的算法：MD5、SHA1、SHA2、SHA3、RIPEMD-160 哈希散列，进行 AES、DES、Rabbit、RC4、Triple DES 加解密。CryptoJS的安装使用npm安装npm install crypto-js使用Bower安装bower install crypto-jsCryptoJS的使用CryptoJ

JavaScript随机打乱数组元素的算法

Fisher–Yates算法随机打乱数组元素有一种算法：Fisher–Yates，JavaScript实现如下：function shuffle(array) { var currentIndex = array.length, temporaryValue, randomIndex; // 循环打乱剩下的元素 while (0 !== currentIndex) { // 抽取剩下的

axios捕获错误的两种方式：async/await以及promis

以下为axios捕获错误异常的两种方式：基于async/await机制基于promis机制axios基于async/await捕获错误异常下面的脚本必须写在async函数里try { const response = await axios.get('https://your.site/api/v1/bla/ble/bli'); console.log(response);} catc

Mac OS X完整卸载Node.js，并重新安装的方法

Mac OS X完整卸载Node.js，根据使用的工具不同，分为两种情况：对于使用brew的用户, OSX:卸载Node.jsbrew uninstall node; # 或者 `brew uninstall --force node`  这个会删除所有的版本brew cleanup;rm -f /usr/local/bin/npm /usr/local/lib/dtrace/node.

JavaScript简单的Async/Await示例

Node 7.6 新增了async/await! 下面以一个简单可运行的示例来说明async /await的使用。const axios = require('axios'); //基于promise的http请求框架function getCoffee() { return new Promise(resolve => { setTimeout(() => resolve('

JavaScript转换xml为json的函数

javascript转换xml为json的函数如下：function xmlToJson(xml) { // 新建返回的对象 var obj = {}; if (xml.nodeType == 1) { // 处理属性 if (xml.attributes.length > 0) { obj["@attributes"] = {}; for (v

React Router 5.1.0使用useHistory做页面跳转导航

从React Router v5.1.0开始，新增了useHistory钩子（hook），如果是使用React >16.8.0，编写以下函数组件，使用useHistory即可实现编程时页面跳转导航。示例：import { useHistory } from "react-router-dom";function HomeButton() { const history = useHisto

JavaScript使用FileReader读取文件

FileReader是前端进行文件处理的一个重要的web api，特别是在对图片的处理上。FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。其中File对象可以是来自用户在一个<input>元素上选择文件后返回的FileList对象,也可以来自拖放操作生成的 DataTran

Angular文件上传示例

以下为Angular的文件上传示例，分为三个步骤。步骤一、创建HTML模板 (file-upload.component.html)简单的创建一个类型为file的input标签，input上添加change事件，用来监控文件的选择。<div class="form-group"> <label for="file">Choose File</label>

JavaScript 使用CryptoJS实现AES-256-CBC加密/解密函数

AES-256-CBC的加解密函数使用的是crypto-js.js来实现，crypto-js.js下载地址是https://github.com/brix/crypto-js/releases crypto-js.js。实现AES-256-CBC加解密代码/** * Encryption class for encrypt/decrypt that works between programmin

升级到Ionic 5报错Error: Angular JIT compilation failed: '@angular/compiler' not loaded!

一个app使用的是Ionic以及angular开发的，升级到Ionic 5，angular 9。升级如下：npm install @ionic/angular@latest @ionic/angular-toolkit@latest --save-exact --saveng update @angular/core @angular/cli运行时报错：Error: Angular JIT com

NodeJs的path模块

以下为NodeJS path模块相关的函数： path.normalize(路径) 规范化路径 path.join(path1,path2,path3,path4....) 用于连接路径,该方法会正确使用系统路径分隔符 path.reslove([from...],to) 将to参数解析为绝对路径,给定的路径的序列是从右向左被处理的,后面的path依次解析,直到构建出一个完成的path路径

thenjs 学习

thenjs 是一个js的异步控制流程库 特点 可以像标准的Promise那样，把N多异步回调函数写成一个长长的then链，并且比Promise更简洁自然。因为使用标准Promise的then链，其中的异步函数都必须转换成Promise，Thenjs则无需转换，像使用CallBack一样执行异步函数即可。 强大的Error机制，可以捕捉任何同步和异步的异步错误。 开启debug模式

for循环 很重要的

<tr v-for="c in tableData"> <td> <input :id="c.id" v-model="checkitemIds" type="checkbo

JavaScript定义使用类和对象Object的方法

在JavaScript里定义Object有三种方式：对象常量，使用object的构造器定义，以及使用class定义。方式一、对象常量使用对象常量的方式是很直接的，直接在定义对象的属性及方法即可，如下：const bird = { name: 'Joe', numWings: 2, numLegs: 2, numHeads: 1, fly(){}, chirp(){}, eat(){}

JavaScript 点击事件只执行一次的方法

JavaScript要实现只允许Button被点击执行一次的办法有几种：方法一、在添加事件监听器时，设置选项once为true示例：<div id="btn0"> My button</div><script> function doSomething(v) { console.log(v); } document.getE

ES6使用展开运算符（spread operator）向JavaScript的数组头部添加元素

ES6之前，如果我们想向一个JavaScript的数组的头部添加元素，可以按以下方法：unshiftvar a = [123, 35, 12, 67];a.unshift(10);console.log(a); // [10, 123, 35, 12, 67]concatvar arr = [1, 2, 3, 4, 5, 6, 7];console.log([0].concat(arr));ES6

java

用bootstrap代码做棋牌游戏网站

思路用bootstrap做棋牌游戏网站首先要引进文件<script src="http://code.jquery.com/jquery.js"></script> <script src="js/bootstrap.min.js"></script><link href="css/bootstrap.min.css" rel="styl

nodejs写入json文件--引入fs，是实体写入的

book.json:[{"name":"book1","category":"1","quantity":"27","allowlend":"1"},{"name":"book2","category":"2","quantity":"27","allowlend":"1"},{"name":"book3","category":"3","quantity":"27","allowlend":"1

务必要解决效率的问题

1

地方

阿斯顿发放

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;其中，方法一和方法四是相对另两种方法要快。

JavaScript查找第一个内容为空的html元素

使用jQuery的:empty选择器很简单就实现：$("p:empty:first").text("hello world");也可以写成：$("p:empty").first().text('hello world');

Vue 2属性插值： Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead.

Vue 2在组件模板上使用双大括号{{}}对属性赋值：<div id="{{ item.id }}"></div>报语法错误：Vue template syntax error:id="{{ item.id }}": Interpolation inside attributes has been removed. Use v-bind or the colon short

动态加载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,

JavaScript检测页面是否为当前的窗口（兼容多浏览器）

可以使用Page Visibility API来检测页面是否为当前的窗口。当浏览器不兼容page visibility api时，可以监听window的blur/focus事件.Page Visibility API兼容的浏览器：Chrome 13+Internet Explorer 10+Firefox&n

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