javascript

最新文章

Angular装饰器——两种实现方式

装饰器主要作用我们知道装饰器的两个主要作用1、在运行时更改对象的功能而不影响对象的现有功能2、将通用行为包装成简单,可复用的代码片段,减少模板代码的数量装饰器的定义我们首先看看定义:Decorators are functions called on classes, class elements, or other JavaScript syntax forms during definitio

CKEditor5——视图添加

上一节我们介绍了在CK5中UI组件的一些基本使用,今天我们继续UI部分的学习,如何添加一个UI视图到CK5?CK5视图结构首先,我们贴上代码:EditorUIView ├── "top" collection │ └── ToolbarView │ └── "items" collection │ ├── DropdownView

Angular装饰器——Decorators

最近有空学习了一下angular的基础知识,对于angular的装饰器有了一些理解。其实装饰器并非angular特有的,它是Typescript的语言特性。首先我们看看什么是装饰器  我们先看看Typescript官方的说明:装饰器是一种特殊类型的声明,它能够被附加到类声明,方法, 访问符,属性或参数上。 装饰器使用 @expression这种形式,expression求值后必

CKEditor5 Observable——装饰方法

上一节我们学习了在CK5中,如何绑定多个属性以及绑定多个Observable对象,今天我们学习如何装饰方法。 首先,我们提出一个问题,为什么会有装饰方法呢?以及什么叫做装饰?所谓装饰,就是在不改变原来方法功能的前提下,增加方法的功能,众所周知在java的IO流中,就有很多地方用到了装饰。 而在CK5中,装饰是什么意思呢?请看下面这段话:Decorating object met

CKEditor5 Observable——绑定多个对象或属性

上一节我们学习了如何绑定属性,今天我们继续学习绑定多个属性或者多个Observable对象。 绑定多个属性如何绑定多个属性,下面我们用代码来说明:const button = new Button(); const command = editor.commands.get( 'bold' ); button.bind( 'isOn', 'isEnabled' ).to( command

CKEditor5 Observable——属性绑定

前面我们知道了,在CK5中怎么样将一个对象设置成Observable以及Observable在UI中如何使用?属性绑定今天我们来看看如何进行可观测对象的属性绑定和重命名。首先,我们假定有两个Observable对象,所谓绑定就是将一个对象的可观测状态绑定到另一个可观测对象,如下所示:const button = new Button(); const command = editor.comman

CKEditor5 模板绑定

CK5还可以将模板的属性绑定到可观测对象属性,如下代码所示:import {View} from 'ckeditor5/src/ui'; export default class Button extends View { constructor(){ super(); this.type = 'button'; const bind =

CKEditor5 Observables

在CKEditor5中除了事件系统外,还有另一个重要的系统就是可观测对象,俗称Observable对象。此对象的属性是可观测的,一段对象的属性发生改变,将会触发一个事件,监听此事件的代码片段可以做出一些相应的操作。 CK5定义一个可观测对象import ObservableMixin from '@ckeditor/ckeditor5-utils/src/observablemixin'

原生JavaScript检测元素是否获得焦点

要检测元素是否在 JavaScript 中有焦点,可以使用document对象的只读属性 activeElement。const elem = document.activeElement;activeElement 返回document当前获得焦点的元素。示例:使用 activeElement 属性检查class为.user 的 <input> 元素是否有焦点:const elem

CKEditor5事件系统(视图事件冒泡)

CK5的视图(view.document)不仅是一个Observable和emitter,而且还实现了一个BubblingEmitter,它是由BubblingEmitterMixin实现的。它提供了在虚拟dom机制上的冒泡事件。 它与普通的dom树上的冒泡机制不同。它不会在特定的元素上注册监听器,而是在指定的上下文上注册监听器。这里的上下文,要么是一个元素,要么是虚拟上下文之一,要么是

Navigator.sendBeacon:解决页面关闭可靠地上报数据

使用场景为了满足页面统计需要,我们往往需要在页面关闭前(实际时页面卸载前),调用unload方法向服务器上报数据。基于XMLHttpRequest异步方案异步方案时在unload,或者beforeunload使用基于XMLHttpRequest Ajax异步请求,但此异步请求存在不可靠。因为如果请求还没有完成,页面已经卸载了,可能导致数据上传不成功。同步方案因为异步方案上传数据不可靠,所以添加一些

CKEditor5事件系统(代理事件)

emitter接口提供了事件代理机制。也就是说指定选择的事件能够被其他的emitter触发。 1、代理指定的事件到另一个emitterlet anyClass = new AnyClass(); let anotherClass = new AnyClass(); let oneClass = new AnyClass(); anotherClass.on('bar',(evt,data

CKEditor5事件系统(事件优先级)

今天继续学习CK5的事件系统,上一节我们知道了怎么绑定和取消绑定事件的两种方法,知道在一个emitter上对一个同名事件可以绑定多个回调函数,自然问题来了,这些函数的执行顺序是怎么样的呢?CK5的事件监听优先级实际上,对于一个同名事件,CK5提供了事件优先级功能,如下代码所示AnyClass.on( 'eventName', ( eventInfo, ...args ) => { conso

CKEditor5事件系统(基础使用)

最近在学习CK5,一种最大的感受就是CK5的架构不是很大,但是内容特别多。笔者在学习中,总结出一个浅显的薄理,那就是如果掌握了基础知识,再加上宏观上的把握,学习起来会事半功倍。 今天开始研究一下CK5的事件系统:emitters是一个可以发送时间的对象。import EmitterMixin from '@ckeditor/ckeditor5-utils/src/emittermixin

CKEditor 5 Tab键缩进插件

CKEditor 5提供了IndentBlock可以用来做缩进,只需要在创建编辑器的添加IndentBlock即可。import Indent from '@ckeditor/ckeditor5-indent/src/indent'; import IndentBlock from '@ckeditor/ckeditor5-indent/src/indentblock'; ClassicEdit

理解CKEditor5的schema

我们知道,CKEditor5是一个用MVC架构设计的富文本编辑器。如上图所示,三层分别是:Model, Controller, View首先,第一个问题是schema属于那一层?经过官方文档的初步学习,我们可以看到:editor.model.schema; // -> The model's schema.因此,我们可以得出结论:schema属于模型层:其次我们

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).

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"] = {};

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

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

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