swiper 源码笔记: Util中 extend的写法

2024-09-04 19:32

本文主要是介绍swiper 源码笔记: Util中 extend的写法,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

const Util = {
//判断是否是Object 类型isObject(o) {//typeof 等于object的也可能是null, 所以要加上 o !== null ; 后面两个条件是防止 new Date()等类型的object, 要判断它的构造函数return typeof o === 'object' && o !== null && o.constructor && o.constructor === Object;},// "...args"是扩展运算符, 把函数传过来的参数全部析构赋值给args, args的个数没有限制,参考[http://es6.ruanyifeng.com/?search=set&x=6&y=9#docs/array]extend(...args) {//获得参数第一个, 第一个是构造环境的thisconst to = Object(args[0]);//循环args(此时是一个数组),从第二个开始for (let i = 1; i < args.length; i += 1) {const nextSource = args[i];//存在则继续if (nextSource !== undefined && nextSource !== null) {//Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组,//数组中属性名的排列顺序和使用 for...in 循环遍历该对象时返回的顺序一致 。const keysArray = Object.keys(Object(nextSource));for (let nextIndex = 0, len = keysArray.length; nextIndex < len; nextIndex += 1) {//传过来的object中的属性const nextKey = keysArray[nextIndex];//Object.getOwnPropertyDescriptor() 方法返回指定对象上一个自有属性对应的属性描述符。//(自有属性指的是直接赋予该对象的属性,不需要从原型链上进行查找的属性)const desc = Object.getOwnPropertyDescriptor(nextSource, nextKey);//desc 存在并且可枚举if (desc !== undefined && desc.enumerable) {//this.xxx 和 nextSource.xxx(参数的属性)都是Objectif (Utils.isObject(to[nextKey]) && Utils.isObject(nextSource[nextKey])) {// 迭代extend 函数Utils.extend(to[nextKey], nextSource[nextKey]);}//this.xxx 不是Object else if (!Utils.isObject(to[nextKey]) && Utils.isObject(nextSource[nextKey])) {//把this.xxx置为空对象to[nextKey] = {};// 迭代extend 函数Utils.extend(to[nextKey], nextSource[nextKey]);} else {//  直接继承to[nextKey] = nextSource[nextKey];}}}}}return to;}
export default Util;

使用方法:

 const swiper = this;Utils.extend(swiper, {autoplay: {running: false,paused: false,run: Autoplay.run.bind(swiper),start: Autoplay.start.bind(swiper),stop: Autoplay.stop.bind(swiper),pause: Autoplay.pause.bind(swiper),onTransitionEnd(e) { if (!swiper || swiper.destroyed || !swiper.$wrapperEl) return;if (e.target !== this) return;swiper.$wrapperEl[0].removeEventListener('transitionend', swiper.autoplay.onTransitionEnd);swiper.$wrapperEl[0].removeEventListener('webkitTransitionEnd', swiper.autoplay.onTransitionEnd);swiper.autoplay.paused = false;if (!swiper.autoplay.running) {swiper.autoplay.stop();} else {swiper.autoplay.run();}},},});

extend进行到autoplay, 是一个对象, 则循环判断autoplay里面的属性, 发现running等状态等不是一个Object, 则直接继续继承;

这篇关于swiper 源码笔记: Util中 extend的写法的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1136826

相关文章

Java 正则表达式URL 匹配与源码全解析

《Java正则表达式URL匹配与源码全解析》在Web应用开发中,我们经常需要对URL进行格式验证,今天我们结合Java的Pattern和Matcher类,深入理解正则表达式在实际应用中... 目录1.正则表达式分解:2. 添加域名匹配 (2)3. 添加路径和查询参数匹配 (3) 4. 最终优化版本5.设计思

利用Python快速搭建Markdown笔记发布系统

《利用Python快速搭建Markdown笔记发布系统》这篇文章主要为大家详细介绍了使用Python生态的成熟工具,在30分钟内搭建一个支持Markdown渲染、分类标签、全文搜索的私有化知识发布系统... 目录引言:为什么要自建知识博客一、技术选型:极简主义开发栈二、系统架构设计三、核心代码实现(分步解析

Java调用C++动态库超详细步骤讲解(附源码)

《Java调用C++动态库超详细步骤讲解(附源码)》C语言因其高效和接近硬件的特性,时常会被用在性能要求较高或者需要直接操作硬件的场合,:本文主要介绍Java调用C++动态库的相关资料,文中通过代... 目录一、直接调用C++库第一步:动态库生成(vs2017+qt5.12.10)第二步:Java调用C++

Python实现无痛修改第三方库源码的方法详解

《Python实现无痛修改第三方库源码的方法详解》很多时候,我们下载的第三方库是不会有需求不满足的情况,但也有极少的情况,第三方库没有兼顾到需求,本文将介绍几个修改源码的操作,大家可以根据需求进行选择... 目录需求不符合模拟示例 1. 修改源文件2. 继承修改3. 猴子补丁4. 追踪局部变量需求不符合很

Spring 中 BeanFactoryPostProcessor 的作用和示例源码分析

《Spring中BeanFactoryPostProcessor的作用和示例源码分析》Spring的BeanFactoryPostProcessor是容器初始化的扩展接口,允许在Bean实例化前... 目录一、概览1. 核心定位2. 核心功能详解3. 关键特性二、Spring 内置的 BeanFactory

Go中sync.Once源码的深度讲解

《Go中sync.Once源码的深度讲解》sync.Once是Go语言标准库中的一个同步原语,用于确保某个操作只执行一次,本文将从源码出发为大家详细介绍一下sync.Once的具体使用,x希望对大家有... 目录概念简单示例源码解读总结概念sync.Once是Go语言标准库中的一个同步原语,用于确保某个操

Python实现阶乘的四种写法

《Python实现阶乘的四种写法》本文主要介绍了Python实现阶乘的六种写法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧... 目录第一种:推导式+循环遍历列表内每个元素相乘第二种:调用functools模块reduce的php累计

MySQL中删除重复数据SQL的三种写法

《MySQL中删除重复数据SQL的三种写法》:本文主要介绍MySQL中删除重复数据SQL的三种写法,文中通过代码示例讲解的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下... 目录方法一:使用 left join + 子查询删除重复数据(推荐)方法二:创建临时表(需分多步执行,逻辑清晰,但会

Java汇编源码如何查看环境搭建

《Java汇编源码如何查看环境搭建》:本文主要介绍如何在IntelliJIDEA开发环境中搭建字节码和汇编环境,以便更好地进行代码调优和JVM学习,首先,介绍了如何配置IntelliJIDEA以方... 目录一、简介二、在IDEA开发环境中搭建汇编环境2.1 在IDEA中搭建字节码查看环境2.1.1 搭建步

JAVA智听未来一站式有声阅读平台听书系统小程序源码

智听未来,一站式有声阅读平台听书系统 🌟&nbsp;开篇:遇见未来,从“智听”开始 在这个快节奏的时代,你是否渴望在忙碌的间隙,找到一片属于自己的宁静角落?是否梦想着能随时随地,沉浸在知识的海洋,或是故事的奇幻世界里?今天,就让我带你一起探索“智听未来”——这一站式有声阅读平台听书系统,它正悄悄改变着我们的阅读方式,让未来触手可及! 📚&nbsp;第一站:海量资源,应有尽有 走进“智听