前端

登录注册

敲碎时间的人

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

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

3小时前更新 14分钟阅读 decotator

敲碎时间的一条鱼

formControlName must be used with a parent formGroup directive. You'll want to add a formGroup

异常情况描述Angular模板出现异常情况，如下所示：异常分析大概的意思就是formControlName没有在formGroup里面，所以猜测应该是模板位置不正确。代码查看<form class="signin-container" [formGroup]="signinForm" #formDir="ngForm" (ngSubmit)="onSubmit()"> <

2天前发布 18分钟阅读 javascript

敲碎时间的一条鱼

CKEditor5——视图添加

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

5天前发布 7分钟阅读 ckeditor5

敲碎时间的人

Angular装饰器——Decorators

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

1天前更新 16分钟阅读 angular

敲碎时间的一条鱼

CKEditor5 Observable——装饰方法

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

8天前更新 12分钟阅读 ckeditor5

敲碎时间的一条鱼

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

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

8天前更新 7分钟阅读 ckeditor5

敲碎时间的一条鱼

CSS三栏布局——flex

flex布局现在越来越流行，很多框架都采用flex布局。今天我们采用flex来实现三栏布局。首先父元素设置flex:display。左右分别设置flex: 0 0 200px。代码如下所示：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>

15天前发布 4分钟阅读 css

敲碎时间的一条鱼

CKEditor5 Observable——属性绑定

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

15天前更新 8分钟阅读 ckeditor5

敲碎时间的一条鱼

CSS三栏布局——双飞燕定位

这种布局方式需要对父容器设置padding，使用padding来给左右两栏空出空间如果左右两边使用绝对定位，那么方法就和上一节的方法差不多，如果使用相对定位，在结合浮动的话，方法代码如下：<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <titl

19天前更新 5分钟阅读 css

敲碎时间的一条鱼

CSS三栏布局——定位

这里首先让中间栏绝对定位，两边栏相对定位；这里需要注意的是，如果中间使用绝对定位，不设置宽度的话将会撑不开容器；因此，中间使用了相对定位后，同时设置margin-left和margin-right给左右两栏一定空间，然后左右两栏不管是相对定位还是绝对定位都可以，这里我们使用绝对定位：<!DOCTYPE HTML> <html lang="en-US"> <head&g

19天前更新 5分钟阅读 css

敲碎时间的一条鱼

CKEditor5 模板绑定

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

19天前更新 7分钟阅读 ckeditor5

敲碎时间的一条鱼

CSS三栏布局——浮动

不使用定位，只使用浮动实现左右固定，中间宽度自适应布局实现关键：自适应部分一定要放在第一个位置，使用浮动，且宽度设置为100%，如果不设置为100%，浮动元素内容不够撑开整个宽度。左右固定部位，使用margin-left :负数，使其左右靠齐。中间自适应部分嵌套一个div，设置margin-left 和 margin-right 使其空出左右固定的宽度。代码如下：<!DOCTYPE HTML

19天前更新 11分钟阅读 css

敲碎时间的一条鱼

CKEditor5 Observables

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

20天前发布 6分钟阅读 ckeditor5

Matt

在Angular Router中使用查询参数QueryParameter

会涉及到的api有：Angular Router ，RouterLink 和 ActivatedRoute。在Router.navigate中使用查询参数单参数如果使用 Router.navigate 路由，navigate提供了queryParams 用作查询参数传递。toProducts() { this.router.navigate( ['/products'], {

21天前发布 9分钟阅读 angular

p==q

CSS去除和修改input[type=search]后面的小x样式

默认情况下input[type=search]，当有输入时，在输入框后会有一个”x“，用于快速清除输入的内容。但有时样式和页面不搭配，需要删除或者修改样式。删除webkit-search-cancel-buttoninput[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }修改webkit-

22天前发布 1分钟阅读 css

p==q

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

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

22天前发布 1分钟阅读 javascript

敲碎时间的一条鱼

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

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

22天前发布 4分钟阅读 ckeditor5

Matt

Angular指令ngIf用法详解

HTML是没有条件控制的语言，如果要根据某变量的值显示或隐藏某个DOM元素，往往需要结合JavaScript的if-else表达式来控制。Angular ngIf就可以增强Html这方面的能力。ngIf接受一个表达式作为值，并且强制把表达式计算出的值转换为Boolean类型，如果值为true，则在DOM中渲染模板，如果值为false则不渲染ngIf所在的模板。示例：<div class="c

25天前发布 12分钟阅读 angular

老铁

去掉a标签内部元素文本的下划线

a标签内文本去掉下划线要给a标签内的文本去掉下划线，只需要设置a的text-decoration为none例如：a，a:hover { text-decoration: none; }a标签内元素设置text-decoration:none 问题html<a> <p>hello word</p> <a>这样p标签内的文字页会出现下划线：

28天前发布 1分钟阅读 css

BlueSky

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

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

28天前发布 1分钟阅读 javascript

敲碎时间的一条鱼

CKEditor5事件系统(代理事件)

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

22天前更新 6分钟阅读 ckeditor5

敲碎时间的一条鱼

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

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

22天前更新 13分钟阅读 ckeditor5

Matt

Angular指令ngFor和ngForOf

NgForOf指令ngFor和ngForOf都是指令NgForOf的selector。定义如下：@Directive({selector: '[ngFor][ngForOf]'}) export class NgForOf<T, U extends NgIterable<T> = NgIterable<T>> implements DoCheck {

1个月前发布 1分钟阅读 angular

敲碎时间的一条鱼

CKEditor5事件系统(基础使用)

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

22天前更新 8分钟阅读 ck5

数据加载中

最新推荐前端后端 Android iOS Linux 数据库