function spinner(target, options = {}){

  let defaults = {
message: "Please wait",
spinningSpeed: 5,
cssClass: ".is-spinning"
}; let settings = Object.assign(
{},
defaults,
options
); if(settings.spinningSpeed !== defaults.spinningSpeed){
settings.cssClass = _addSpeedClass(target);
} _renderSpinner(target, settings);
}
  • Best pratices to write defaults as an objects, much clean and reuseable.
  • Write an empty object {} to the object.assign is recommened, it avoid defaults been mutated.
  • in if block, you see we might still use default value, so it is important to keep the origin defautls value.

Example2:

function spinner(target, options = {}) {
let defaults = {
message: "Please wait",
spinningSpeed: 5,
cssClass: ".is-spinning"
}; let settings = Object.assign({} , defaults , options); console.log(`Message: ${settings.message}`);
console.log(`spinningSpeed: ${settings.spinningSpeed}`);
console.log(`cssClass: ${settings.cssClass}`);
} spinner(targetElement, {
cssClass: ".is-fast-spinning",
spinningSpeed: 8
});

[ES6] Object.assign (with defaults value object)的更多相关文章

  1. es6 Object.assign

    ES6 Object.assign 一.基本用法 Object.assign方法用来将源对象(source)的所有可枚举属性,复制到目标对象(target).它至少需要两个对象作为参数,第一个参数是目 ...

  2. es6 javascript对象方法Object.assign()

    es6 javascript对象方法Object.assign() 2016年12月01日 16:42:34 阅读数:38583 1  基本用法 Object.assign方法用于对象的合并,将源对象 ...

  3. es6 Object.assign ECMAScript 6 笔记(六) ECMAScript 6 笔记(一) react入门——慕课网笔记 jquery中动态新增的元素节点无法触发事件解决办法 响应式图像 弹窗细节 微信浏览器——返回操作 Float 的那些事 Flex布局 HTML5 data-* 自定义属性 参数传递的四种形式

    es6 Object.assign   目录 一.基本用法 二.用途 1. 为对象添加属性 2. 为对象添加方法 3. 克隆对象 4. 合并多个对象 5. 为属性指定默认值 三.浏览器支持 ES6 O ...

  4. ES6中Object.assign() 方法

    ES6中Object.assign() 方法 1. 对象合并Object.assign 方法用于对象的合并,将源对象(source)的所有可枚举属性,复制到目标对象上.如下代码演示: var targ ...

  5. 【ES6学习笔记之】Object.assign()

    基本用法 Object.assign方法用于对象的合并,将源对象(source)的所有可枚举属性,复制到目标对象(target). const target = { a: 1 }; const sou ...

  6. ES6的Object.assign()基本用法

    Object.assign方法用于对象的合并,将源对象(source)的所有可枚举属性,复制到目标对象(target). 例如: const target = {a:1}, const source1 ...

  7. [转]javascript之Object.assign()痛点

    本文转自:http://blog.csdn.net/waiterwaiter/article/details/50267787 最近也一直会用javascript,然后中间使用的一些组件,如Echar ...

  8. [Javascript] Object.assign()

    Best Pratices for Object.assign: http://www.cnblogs.com/Answer1215/p/5096746.html Object.assign() ca ...

  9. javascript系列--Object.assign实现浅拷贝的原理以及实现

    一.前言 之前在前面一篇学习了赋值,浅拷贝和深拷贝.介绍了这三者的相关知识和区别. 传送门:https://www.mwcxs.top/page/592.html 本文会介绍浅拷贝Object.ass ...

随机推荐

  1. iOSUI基础——懒加载

    1.懒加载基本 懒加载——也称为延迟加载,即在需要的时候才加载(效率低,占用内存小).所谓懒加载,写的是其get方法. 注意:如果是懒加载的话则一定要注意先判断是否已经有了,如果没有那么再去进行实例化 ...

  2. PHP MySQL 读取数据

    PHP MySQL 读取数据 从 MySQL 数据库读取数据 SELECT 语句用于从数据表中读取数据: SELECT column_name(s) FROM table_name 如需学习更多关于 ...

  3. JavaScript中instanceof与typeof运算符的用法及区别详细解析

    JavaScript中的instanceof和typeof常被用来判断一个变量是什么类型的(实例),但它们的使用还是有区别的: typeof 运算符 返回一个用来表示表达式的数据类型的字符串. typ ...

  4. 安卓webview下使用zepto的swipe失效

    安卓webview下使用zepto的swipe遇到的坑 众所周知,安卓手机上touch事件一直有各种各样莫名其妙的问题. 比如,我想要用swipeLeft/swipeRight监听向左向右滑动事件,如 ...

  5. javascript在一个字符串中每隔多少字符插入某个字符串

    function insertStr(str,tar,n,m){ var x='' var str=str.split('') if(str.length==0) return for(var i=n ...

  6. centos7 服务器安装nginx,mysql,php

    一.概述 项目的需要,今天在虚拟机上基于Centos安装配置了服务器运行环境,web服务用 nginx,数据库存储在mysql,动态脚本语言是php. 二.步骤 首页保证Centos7已经安装完毕,正 ...

  7. eval("表达式")

    eval就是把字符串转成可执行代码eval("表达式");表达式被翻译成JavaScript代码执行比如eval("alert('test')");等于aler ...

  8. JQuery Dialog(JS模态窗口,可拖拽的DIV) 效果实现代码

    效果图 调用示意图   交互示意图 如上图所示,这基本是JQueryDialog的完整逻辑流程了. 1.用户点击模态窗口的“提交”按钮时,调用JQueryDialog.Ok()函数,这个函数对应了用户 ...

  9. 开源word操作组件DocX的记录

    开源word操作组件DocX的记录 使用开源word操作组件DocX的记录 1.DocX简介 1.1 简介 DocX是一个在不需要安装word的情况下对word进行操作的开源轻量级.net组件,是由爱 ...

  10. Ant快速入门(三)-----定义生成文件

    适应Ant的关键就是编写生成文件,生成文件定义了该项目的各个生成任务(以target来表示,每个target表示一个生成任务),并定义生成任务之间的依赖关系. Ant生成文件的默认名为build.xm ...