JS前端技术类文章
本文已参与「掘力星计划」,赢取创作大礼包,挑战创作激励金。
前沿
装饰器
装饰器是一种函数,写成@ + 函数名
。它可以放在类和类方法的定义前面。
装饰器的行为
1 | @decorator |
装饰器函数的第一个参数,就是所要装饰的目标类。
注意,装饰器对类的行为的改变,是代码编译时发生的,而不是在运行时。这意味着,装饰器能在编译阶段运行代码。也就是说,装饰器本质就是编译时执行的函数。
添加实例属性
1 | function testable(target) { |
Object.assign()
Object.assign()
方法用于将所有可枚举属性的值从一个或多个源对象分配到目标对象。它将返回目标对象。
1 | const target = { a: 1, b: 2 }; |
1 | Object.assign(target, ...sources) |
如果目标对象中的属性具有相同的键,则属性将被源对象中的属性覆盖。后面的源对象的属性将类似地覆盖前面的源对象的属性。
[复制一个对象]
1 | const obj = { a: 1 }; |
[深拷贝问题]
针对深拷贝,需要使用其他办法,因为 Object.assign()
拷贝的是(可枚举)属性值。
1 | const log = console.log; |
[合并对象]
1 | const o1 = { a: 1 }; |
[合并具有相同属性的对象]
1 | const o1 = { a: 1, b: 1, c: 1 }; |
[拷贝 symbol 类型的属性]
1 | const o1 = { a: 1 }; |
[继承属性和不可枚举属性是不能拷贝的]
[原始类型会被包装为对象]
1 | const v1 = "abc"; |
数组的处理
Object.assign
可以用来处理数组,但是会把数组视为对象。
1 | Object.assign([1, 2, 3], [4, 5]) |
Object.assign
只能进行值的复制,如果要复制的值是一个取值函数,那么将求值后再复制。
1 | const source = { |
为对象添加属性
1 | class Point { |
通过Object.assign
方法,将x
属性和y
属性添加到Point
类的对象实例。
克隆对象
1 | function clone(origin) { |
将原始对象拷贝到一个空对象,就得到了原始对象的克隆。
合并多个对象
将多个对象合并到某个对象。
1 | const merge = (target, ...sources) => Object.assign(target, ...sources); |
如果希望合并后返回一个新对象,可以改写上面函数,对一个空对象合并。
1 | const merge = (...sources) => Object.assign({}, ...sources); |
Object.create()
Object.create()
方法创建一个新对象,使用现有的对象来提供新创建的对象的__proto__
。
Object.freeze()
Object.freeze()
方法可以冻结一个对象。一个被冻结的对象再也不能被修改;冻结了一个对象则不能向这个对象添加新的属性,不能删除已有属性,不能修改该对象已有属性的可枚举性、可配置性、可写性,以及不能修改已有属性的值。此外,冻结一个对象后该对象的原型也不能被修改。freeze()
返回和传入的参数相同的对象。
Object.keys()
Object.keys()
方法会返回一个由一个给定对象的自身可枚举属性组成的数组,数组中属性名的排列顺序和正常循环遍历该对象时返回的顺序一致 。
1 | // simple array |
方法的装饰
装饰器不仅可以装饰类,还可以装饰类的属性。
1 | function readonly(target, name, descriptor){ |
修改属性描述对象的enumerable
属性,使得该属性不可遍历。
装饰器有注释的作用。
组件写法:
1 | @Component({ |
1 | class Example { |
外层装饰器@dec(1)
先进入,但是内层装饰器@dec(2)
先执行。
装饰器只能用于类和类的方法,不能用于函数,因为存在函数提升。
UEditor 是由百度「FEX前端研发团队」开发的所见即所得富文本web编辑器
1 | <!DOCTYPE HTML> |
传入自定义的参数
编辑器有很多可自定义的参数项,在实例化的时候可以传入给编辑器:
1 | var ue = UE.getEditor('container', { |
配置项也可以通过 ueditor.config.js 文件修改
设置和读取编辑器的内容
通 getContent 和 setContent 方法可以设置和读取编辑器的内容
1 | var ue = UE.getContent(); |
打开控制台(注意:windows系统下请使用管理员权限打开),输入:
1 | npm install -g grunt-cli |
然后输入以下命令。
1 | npm install grunt --save-dev |
完整的按钮列表
1 | toolbars: [ |
传入配置参数
1 | var ue = UE.getEditor('container', { |
读取配置项
读取配置项可以通过getOpt方法读取
1 | var lang = ue.getOpt('lang'); //默认返回:zh-cn |
前端配置项说明
1 | - **UEDITOR_HOME_URL** {Path String} [默认值:根据config文件路径自动获取] // 为编辑器实例添加一个路径,这个不能被注释 |
1
2
//默认值:
[10, 11, 12, 14, 16, 18, 20, 24, 36]
paragraph {Object} //段落格式 值留空时支持多语言自动识别,若配置,则以配置值为准
1
2
3
4
5
6
7
8
9
10//默认值:
{
'p': '',
'h1': '',
'h2': '',
'h3': '',
'h4': '',
'h5': '',
'h6': ''
}rowspacingtop {Array} //段间距 值和显示的名字相同
1
2//默认值:
['5', '10', '15', '20', '25']rowspacingbottom //段间距 值和显示的名字相同
1
2//默认值:
['5', '10', '15', '20', '25']lineheight [默认值:[‘1’, ‘1.5’,’1.75’,’2’, ‘3’, ‘4’, ‘5’] ] //行内间距 值和显示的名字相同
customstyle [Array] //自定义样式,不支持国际化,此处配置值即可最后显示值block的元素是依据设置段落的逻辑设置的,inline的元素依据BIU的逻辑设置,尽量使用一些常用的标签
1
2
3
4
5
6
7//默认值:
[{
tag: 'h1', //tag 使用的标签名字
name: 'tc', //
label: '', //label 显示的名字也是用来标识不同类型的标识符,注意这个值每个要不同
style: 'border-bottom:#ccc 2px solid;padding:0 4px 0 0;text-align:center;margin:0 0 20px 0;' //style 添加的样式
}, //每一个对象就是一个自定义的样式enableContextMenu {Boolean} [默认值:true] //打开右键菜单功能
contextMenu {Object} //右键菜单的内容
shortcutMenu {Array} //快捷菜单
1
2//默认值
["fontfamily", "fontsize", "bold", "italic", "underline", "forecolor", "backcolor", "insertorderedlist", "insertunorderedlist"]elementPathEnabled {Boolean} [默认值:true] //是否启用元素路径,默认是显示
wordCount {Boolean} [默认值:true] //是否开启字数统计
maximumWords {Number} [默认值:10000] //允许的最大字符数
wordCountMsg {String} [默认值:] //当前已输入