javascript

最新文章

JavaScript undefined与ReferenceError: xxx is not defined

在JavaScript里,为了简便,判断语句常常这样写:if(abc) {   //do something } 变量未声明假如abc变量没有被声明,但此处会报错:ReferenceError: abc is not defined 变量已声明,为初始化示例修改下变为var abc; if(abc)&nbs

JavaScript使用for...in迭代数组分析

for...in与其说是迭代,更恰当的说法应该是枚举。其目的是用来枚举object对象的属性,包括对象所继承的属性。有部分人会使用for...in来迭代数组,这是一种误用。以下对使用for...in迭代数组分析。问题一var a = ['a','b']; a[5] = 'e'; for (var x in a

JavaScript检测浏览器支持的视频格式以及音频格式

不同的浏览器支持的视频/音频格式有所不同,为了在多个浏览器上兼容视频/音频的播放,需要使用JavaScript检测浏览器所支持的视频/音频格式。HTMLVideoElement和HTMLAudioElement继承于HTMLMediaElement,HTMLMediaElement的canPlayType()方法可以用来判断浏览器是否支持指定的多媒体格式。语法str = aud

JavaScript(ES6)判断字符串是否包含子字符串的方法

ES6 includesES6的字符串新增了includes方法,我们可以用它来判断是否包含子字符串。str.includes(searchString[, position])searchString:查询的子字符串position:可选,开始搜索的位置,默认为0'Blue Whale'.includes('Blue'); // returns&

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

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

JavaScript转换xml为json的函数

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

JavaScript使用CryptoJS加解密

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

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

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事件系统(基础使用)

最近在学习CK5,一种最大的感受就是CK5的架构不是很大,但是内容特别多。笔者在学习中,总结出一个浅显的道理,那就是掌握基础知识,对框架宏观把握,学习起来会事半功倍。 今天开始初步研究一下CK5的事件系统:在CK5的事件系统中,关键的一个对象被称作Emitter(发射器),Emitter是一个可以发送事件的对象。如何创建一个Emitter,下面的代码创建了一个混合了事件发送的AnyCla

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

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

CKEditor5事件系统(代理事件)

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

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

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

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

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

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

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

CKEditor5 Observables

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

CKEditor5 模板绑定

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

CKEditor5 Observable——属性绑定

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

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

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

CKEditor5 Observable——装饰方法

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

Angular装饰器——Decorators

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

CKEditor5——视图添加

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

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

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

初步理解RxJs

         学习是一个由浅入深的过程,如果能够理解并掌握二八原则(帕累托法则),那么我们对知识的学习定会事半功倍,甚至事半多倍。对基础知识的理解决定了对知识理解的深度。RxJs定义        RxJS是ReactiveX在JavaScript上的一个派生。ReactiveX是一个应用比较广泛的响应式

RxJs——创建型操作

我们在使用RxJs中,知道RxJs的操作分为两类,一类是创建型,比如of(),fromEvent(),from()等,还有一类是操作型,比如map(),filter()。而这两类操作的基础和心是一个叫做Observable的对象,如果对Observable不甚理解,需要快速理解的可以查看这一篇今天我们来学习第一类,尝试着自己实现一次。of()这个操作接收数组参数,返回一个Observable,一旦

RxJs——操作型

我们在使用Observable的时候,常常会涉及到一些操作,比如map(),filter()等,为了理解原理,今天我们在前几节(初步理解RxJs , RxJs——创建型操作 )的基础上,用两种不同的方式实现以上两个函数,希望能给大家提供借鉴。map代码实现废话不说,先来实现mapmap(fn) { return new MyObservable(observer => {

RxJs——map,filter第二种实现

上一节我们实现了map和filter函数,我们将这些函数都挂载在MyObservable对象上,这里存在一个问题,类似map和filter这样的操作型函数很多,所以不可能将他们都挂载在MyObservable对象上,因此,这里出现了第二种实现。 这些操作函数能串联起来的本质就是能够形成嵌套调用,因此我想到了使用pipe,pipe的本质是接收一个 RxJS 操作符的运行结果作为参数,并返回

RxJs——subject理解一

什么是subject首先我们来理解什么是subject,按照官方的定义:A Subject is a special type of Observable that allows values to be multicasted to many Observers.Subjects are like EventEmitters.从定义我们看出subject就是一种允许发送值到多个观察者的特殊类型的

RxJs——Subject理解二

上一节我们对subject有了初步理解,今天我们继续学习subjectReplaySubject介绍这个ReplaySubject之前,我们说下一种使用场景1、我们创建一个subject2、在应用的某个地方,我们向subject推送值,但此时没有订阅3、在某个时点,有第一个观察者开始订阅4、我们期望观察者能接收之前主题推送的值(可能是全部值或者时其中一个)5、实际上啥都没发生,因为主题不能存储记忆

RxJs——错误处理(二)

从前文我们知道,错误处理有两种方式,一种是重新抛出一个错误,另一个是提供一个默认的回调值。今天我们介绍错误处理的另一种方式,先来看看重试。重试策略有一点需要记住,一旦流出现了错误,我们不能恢复它。但是没有什么能阻碍我们订阅其派生类对应的Observable,并且创建一个新的流。这种策略的工作原理是:1、我们将获取输入Observable并且订阅它,这将创建一个新的流。2、如果流没有出错,我们将在输

新建章节(4)1111

111111111111111111111111111111111111111132e23e23e32e 3e32e32e3e3e    ss     e32e333eeeeeeeeeeeeeeeeeeeeeeeeee

CKEditor5——模型理解(五:Position, Range, Selection)

今天我们继续学习CK5中模型的一些知识,主要包括:Position, Range, Selection首先,我们需要知道:position表示模型树中的一个位置。模型的位置有两部分组成:root,path。即位置由其根和该根中的路径表示。位置基于偏移量,而不是索引。这意味着两个文本节点 foo 和 bar 之间的位置偏移为 3,而不是 1。由于模型中的位置由位置根和位置路径表示,因此可以创建不存在

理解JavaScript的var, let和const使用与作用域

在JavaScript里,var,let和const都可以用来声明变量的。var username= '张三'; let gender = 'Male'; const age = 20;let,var和const的使用let和var可以在声明后更改它们的值,并且在声明时不赋值,JavaScript会自动以默认值对它们做初始化。const声明的变量不能改变,也即是常量,声明变量时必须赋值。var u

CKEditor5——模型理解(六:Range)

上一节我们主要介绍了模型中的Position这个关键的类,今天我们开始学习Range这个类。简单来说的话,如果Position表示一个点的话,那么Range是不是可以理解为一条线段呢?这个线段有一个startPostion,endPosition以及线段的长度等属性,我们暂且这么认为,那么我们可以看看Range官方的文档。从文档中看到,Range类有五个属性:Range属性start:Positi

getBoundingClientRect(学习)

最近在学习CK5的时候,学习到了一个Rect的类,这个类主要提供盒子元素定位时候用到的一些值,比如top、left、right、bottom、width、height。而它的实现主要用到了两个方法,其中一个就是:Element.getBoundingClientRect()Element.getBoundingClientRect() 方法返回一个 DOMRect 对象,该对象提供有关元素大小及其

MutationObserver初步理解

最近在学习怎么样给网站埋点,举个例子来说,我在文章中有了一些评论的信息,我需要知道这些评论信息是否被点击和查看,一种常用的做法就是在这些标签上绑定点击事件,然后在事件回调函数中向后台发送信息,从而判断这个文章中的评论是否有被点击和查看。今天我将尝试采用另外一种做法,来判断文章中的评论有没有被点击查看过。首先,我们需要知道的是用户在点击评论标签的时候,文章对应的dom是否发生变化?其次,我会用Mut