1.dayjs源码解析(二):Dayjs 类
2.fullcalendar显示当月日历方法
3.dayjs源码解析(一):概念、日期日期locale、源码constant、代码utils tags
4.js时间转换,日期日期能够把时间转换成yyyymmdd格式或yyyymm格式
5.原生JS实现一个日期选择器(DatePicker)组件
6.CesiumJS 源码杂谈 - 时间与时钟系统
dayjs源码解析(二):Dayjs 类
上篇文章讲述了dayjs的基础知识、locale、源码constant和utils,代码在线排版网站源码本文将继续深入解析dayjs的日期日期核心部分——src/index.js中的Dayjs类。
src/index.js文件结构清晰,源码按照以下步骤构建:
然而,代码这里存在两个疑问,日期日期可能是源码为了缩减代码体积,由@iamkun提出。代码
现在开始正式分析代码。日期日期
locale相关全局定义
首先默认导入了locale/en.js英文的源码locale,然后使用L存储当前使用的代码locale名字,使用Ls(locale Storage)存储locale对象。
工具补充
定义了一个工具方法parseLocale。这个方法处理以下几种情况:
然后将定义好的parseLocale方法补充到Utils中。
相关方法
在Dayjs类中,关于locale的方法有两个,实例私有方法$locale用来返回当前使用的locale对象;实例方法locale本质上就是调用了parseLocale方法,但最后返回的是新的改变了locale的Dayjs实例。
注意:在dayjs中,许多操作都使用clone()方法来返回新的Dayjs实例,这也是这个库的优点之一。
最后同样将parseLocale方法补充到Dayjs类的静态方法中。
补充Utils
上一节和前文中已经分析了一些Util工具,这里将其补充完整:
注意:这些工具方法没有统一定义在utils.js文件中的原因是用到了index.js作用域中的一些变量。
需要特别关注的是wrapper方法,在Dayjs类中大量应用了该方法,其实是通过date和原实例封装了一个新实例,新实例和原实例的主要区别就是关联的时间不同。
Dayjs类
Dayjs类是整个dayjs库的核心,可以给其定义的实例方法分类,也可以查看官网的文档分类。
解析都写在了代码的gps爱车监控源码注释里:
原型链
通常来说,定义在实例中的方法应该在原型链上,但有几个与时间有关的setter/getter方法相似,所以单独将原型链写在了上面。
这几个方法都是不传参数时为getter,传参数时为setter。
静态属性
还有一些方法和属性挂在了dayjs函数对象上,最核心的是加载插件和加载locale的方法,几个方法的用法都能在官方文档中找到。
如果对dayjs函数对象、Dayjs类和原型的关系感到困惑,可以参考下图,最后形成的关系如下图所示:
总结
如果不看插件部分,dayjs库的核心已经解析完成,看一下默认生成dayjs实例长什么样子:
实例本身的属性是一些与时间相关的属性,各种操作方法都在原型__proto__上。
本节结束,下一节将开始解析dayjs的插件。
fullcalendar显示当月日历方法
切图网专注于前端开发,包括fullcalendar日历改造,最近项目就遇到了,项目中日期插件用的是fullcalendar,需要显示农历、阴历、节气、当前是第几周、星期几、天干地支、生肖年等等,实现的demo效果如下:
由于插件本身不支持使用农历、节日展示所以对fullcalendar进行了修改,当你重新安装是需要手动去修改源码,修改内容如下
* 1、在fullcalendar.js之前引入lunar.js
lunar.js是一个计算农历和各种节假日的第三方js,需在fullcalendar前引用。
* 2、修改fullcalendar.js
正常生成的头条无水印 源码日历只是包含一个日期,想要显示农历就需要手动修改源码,目前我使用的版本是3.9.0,改动仅有一处。
if (isDayNumberVisible) { html += view.buildGotoAnchorHtml(date, , date.format(D) // inner HTML);//此处可以搜索fc-day-number,在下面添加以下代码var cTerm = lunar(date).term;if(cTerm){ html+=div class=fc-day-cnTerm+cTerm+/div;}var fes = lunar(date).festival();if(fesfes.length0){ html += div class=fc-day-cnTerm + $.trim(fes
.desc)+/div;}if(!cTerm (!fes || fes.length == 0)){ html += div class=fc-day-cnDate+lunar(date).lMonth+月+lunar(date).lDate+/div;}
结语
至此就都改完了,剩下就是样式了,随便你怎么调可以自由发挥。
来源:/fullcalendar-gaizao-lunar/
dayjs源码解析(一):概念、locale、constant、utils tags
深入剖析 Day.js 源码(一):概念、locale、constant、utils
Day.js 是一款轻量级的时间库,由饿了么的开发大佬 iamkun 维护,主打无需引入过多依赖,以减少打包体积的特性。本文将通过解析 Day.js 的源码,揭示其结构与功能的奥秘,旨在为开发者提供深入理解与应用 Day.js 的工具。
目录概览
本文将分五章展开 Day.js 的源码解析,分别从代码结构、基础概念、时间标准、语言(文化)代码以及 locale、constant、utils 的实现进行深入探讨。我们将逐步揭开 Day.js 的核心逻辑与设计思路。
代码结构与依赖分析
Day.js 的源代码目录结构简洁明了,主要依赖集中在入口文件 src/index.js 中。此文件依赖链简单,未直接引用 locale 和 plugin 目录下的语言包与插件,体现出 Day.js 优化体积、按需加载的核心优势。
基础概念与时间标准
在解析源码之前,mt源码是啥理解以下基础概念至关重要,包括时间标准、GMT、UTC、ISO 等。这些标准与概念为后续分析提供了背景知识。
时间标准解释
格林尼治平均时间(GMT)与协调世界时(UTC)是本文中的核心时间概念。GMT 作为本初子午线上的平太阳时,而 UTC 则是基于原子时标准,与格林威治标准时间(GTM)关系密切。本文详细解释了 UTC 的定义、用途与与 0 度经线平太阳时的关系。
ISO 标准
ISO 是国际标准化组织推荐的日期和时间表示方法。在 JavaScript 中,Date.prototype.toISOString() 方法返回遵循 ISO 标准的字符串,以 UTC 时间为基准。
语言(文化)代码与 locale
不同语言对时间的描述各具特色,Day.js 通过 locale 实现了多语言支持,用户可根据需求引入相应的语言包。本文介绍了语言代码与 locale 的关联,以及如何按需加载特定语言。
constant 与 utils
src/constant.js 和 src/utils.js 分别负责存储常量与工具函数。constant 文件中包含了时间单位与格式化的正则表达式,而 utils.js 则封装了一系列实用工具函数,用于简化时间操作。
总结与展望
本文完成了 Day.js 源码解析的第一部分,深入探讨了概念、locale、constant、utils 的实现。接下来,我们将分析 Day.js 的核心文件 src/index.js,解析 Dayjs 类的实现细节。欢迎关注后续内容,期待与您共同探索 Day.js 的链接源码贵吗更多奥秘。
js时间转换,能够把时间转换成yyyymmdd格式或yyyymm格式
转换示例,参考源码:<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4. Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>表单默认值设置示例</title>
</head>
<body>
<script type="text/javascript">
//定义转换函数
function dateConvert(dateParms){
// 对传入的时间参数进行判断
if(dateParms instanceof Date){
var datetime=dateParms;
}
//判断是否为字符串
if((typeof dateParms=="string")&&dateParms.constructor==String){
//将字符串日期转换为日期格式
var datetime= new Date(Date.parse(dateParms.replace(/-/g, "/")));
}
//获取年月日时分秒
var year = datetime.getFullYear();
var month = datetime.getMonth()+1;
var date = datetime.getDate();
var hour = datetime.getHours();
var minutes = datetime.getMinutes();
var second = datetime.getSeconds();
//月,日,时,分,秒 小于时,补0
if(month<){
month = "0" + month;
}
if(date<){
date = "0" + date;
}
if(hour <){
hour = "0" + hour;
}
if(minutes <){
minutes = "0" + minutes;
}
if(second <){
second = "0" + second ;
}
//拼接日期格式例如:yyyymmdd
var time = year+month+date;
//或者:其他格式等
//var time = year+"年"+month+"月"+date+"日"+hour+":"+minutes+":"+second;
//返回处理结果
return time;
}
document.write(dateConvert("-- ::"));
//输出结果:
</script>
</body>
</html>
原生JS实现一个日期选择器(DatePicker)组件
前言:
最近在慕课网上看到了一个关于实现日期选择器组件的课程,空闲时间学习了下,觉得挺有参考价值的。于是结合自己的理解,用最简单的方式描述了整个实现过程,希望对初学者有所帮助。文章中可能会涉及一些拓展知识,希望大家不要错过。
文章知识点:
本文将使用原生HTML/CSS/JavaScript技术,完成一个日期选择器组件的开发。主要内容包括:datepicker静态结构的编写、日历数据的获取、组件的渲染以及事件处理。
实现效果:
一.什么是日期选择器(datepicker)?
日期选择器在网站或应用中非常常见,它允许用户快速选择日期。虽然类型多样,但总体上与下图类似:
我们这次的目标就是实现类似的效果,重点在于理解实现思路和方法。
二.组件化开发思想
随着前端技术的发展,组件化开发理念越来越受欢迎。组件化开发不仅限于前端,其他语言或桌面程序等也都有所应用。只要涉及到UI开发,组件化思想就不可或缺。一个组件是一个独立的个体,页面可以由多个组件构成,例如按钮、侧边栏等。
更多关于组件化的知识,请参考以下文章:
三.编写页面结构和样式
(一)HTML结构
HTML结构相对简单,分为head和body两部分。需要注意的是,我们给元素取的类名比较长、特殊,这是因为我们采用组件化开发,类名要尽可能独特,避免重名。
此时页面没有样式,但可以大致看出结构:
更多关于表格结构的知识,请参考以下文章:
(二)添加样式
新增style.css文件,主要设置表头和表格样式。补充一个不常用的样式属性:
此时日期选择器的基本结构已完成:
四.日历中的核心数据
所谓核心数据,就是日历中显示每一天的数据,如下所示:
这些数据的作用:
五.需要事先了解的知识点
(一)日期对象——Data
W3C上的部分说明:
具体详情请参考:
这里我们主要使用以下方式进行传值,因为用户选择日期时,实际上是将点击的值传入Date对象,然后获取值:
注意:日期对象有“越界自动进(退)位”的特性。
(二)其他API——getFullYear()/getMonth()/getDate()/getDay()
W3C上的解释:
1.getFullYear()
详情请参考:
2.getMonth()
W3C上的解释:
具体详情请参考:
3.getDate()
W3C上的解释:
详情请参考:
4.getDay()
W3C上的解释:
详情请参考:
(三)日期对象获取天数
这里为什么会单独拿出来说明呢?因为这里有一些令人疑惑的地方:
这里我们可以看到获取当月最后一天时,月份并没有-1,而是默认获取下一个月,然后将天数设置为0。这里就解释了前面所说的“越界自动进(退)位”。
注意:传入的月份范围:0~
为什么会有这样的定义呢?打个比方,我们要获取某年2月份的最后一天,这时候很多人可能会这样写:
这里大家应该已经看出来了,2月份的天数是不固定的,所以传入值时可能会不确定。但是有了上面的规则,我们就可以这样写:
利用“越界自动进(退)位”的特性,让系统自动获取最后一天,这样我们就不必担心了。任何事物存在必有它的道理。
六.编写我们的JavaScript
(一)获取日历数据
我们新建一个data.js文件
index.html页面添加如下代码:
此时我们看一下打印台上打印的内容:
很明显,这里已经打印出了2月份所有的天数。至于为什么会打印这么多天,留给读者思考。
(二)数据渲染
获取到了数据,接下来就是将其渲染到日历中。
新建一个main.js
index.html页面加上:
可以看到我们的数据已经能够正常渲染出来了。值得注意的是,我们在js中进行了渲染,因此index.html中的部分代码可以删除,如下:
注意:我们没有引用第三方插件或库,所以渲染时使用字符串拼接。但实践中通常采用第三方插件或库。更多知识请参考以下文章:
(三)细节修改
我们都知道,很多日期选择器的样式都是一个选择框,点击选择框后才弹出日历。我们还没有实现这个功能,所以现在来修改一下:
此时的index.html变为:
然后修改main.js,动态创建我们的div:
此时页面上多了一个文本框,但页面上已经没有div了。整个包含日历的div元素由js代码创建。
(四)日历的展开收起
我们可以看到,一进入页面,日历就已经存在了。一般情况下,需要点击输入框才显示日历。我们需要采用定位方式来限定日历位置,因为页面上有其他元素。如果不采用定位,就会影响其他元素。
在style.css中添加一个类来控制显示或隐藏:
此时在main.js的init函数中设置显示或隐藏,并根据输入框位置动态添加top和left值,这样可以适用于多种场景。此时init函数变为:
这样编写之后,我们就能通过点击输入框实现日历的显示或隐藏了,而且也能通过定位方式确定日历位置。
点击之后:
(五)月份切换和日期选择
我们将实现月份切换的逻辑也放在init函数中:
这里需要注意的是:我们的init函数只执行了一次。如果我们直接将事件绑定在btn上,那么事件就只在渲染页面时初始化一次,意味着只绑定了一次。但在渲染之后,我们的按钮会根据html字符串重新渲染,也就是按钮会不断销毁和重建。因此,绑定的事件无法生效。所以我们这里采用将事件绑定在不变的外层元素wrapper上。
这里修改的地方较多,最终的main.js代码如下:
这里改动的地方较多,主要增加日期选择和两个按钮事件,期间将一些逻辑单独提取为方法。由于担心讲解时遗漏,所以直接贴出main.js的最终代码。
四.总结
主要实现步骤:
到这里,日期选择器组件就完成了。总的来说,实现过程较为复杂,但只要细心、肯思考,编写代码后收获肯定不少。另外,在我编写文章时,可能存在遗漏或错误,导致代码出现错误。特别是添加按钮点击事件和添加选择日期功能,这两步改动较多,所以没有一一说明。请不要卡壳,继续往下走,后面你会发现问题所在。此篇文章也是我在观看慕课网视频的过程中自己总结的,深刻理解其中的代码逻辑等。
源代码请参考以下链接:
CesiumJS 源码杂谈 - 时间与时钟系统
时间的“诞生”
在CesiumJS中,时间的首次创建是在Scene类的构造函数中,通过JulianDate类表示整个程序中的时间。JulianDate类使用天数(dayNumber)和秒数(secondsOfDay)作为成员字段,描述从儒略第一天(公元前年1月1日)到现在的总时间以及今天已经走过的时间。公历时间在CesiumJS中同样存在,作为JS原生类Date的高精度替代品。初始化CesiumJS时,通过JulianDate.now方法获取的时间值始终代表程序运行的当前时刻,实际时间值存储在Scene类的_frameState对象的time字段。
时间的推进
CesiumJS内部时间的更新通过CesiumWidget对象的渲染过程实现,每一帧都会调用CesiumWidget.prototype.render方法,使Clock对象tick一次,从而更新当前时间传递给Scene.prototype.render。Clock对象的tick方法负责获取当前时间clock.currentTime,并通过JulianDate类的addSeconds方法向前推进时间。默认情况下,Clock以当前JulianDate作为起始时刻,并设定一天的终点时刻。每次tick时,会计算从起始时刻到当前时间的总秒数,并返回给CesiumWidget.prototype.render方法,继续更新渲染过程。
Entity API与Property API的更新动力源
Entity API通过挂载于Viewer对象上实现,确保与CesiumWidget的clock.onTick事件保持同步。当clock.tick触发时,会触发Viewer的_onTick事件,进而通过EventHelper监听并执行后续逻辑。对于参数化几何的Entity,当GeometryVisualizer调用fireChangedEvent函数后,Visualizer会接收到最新的Entity定义,利用Property API、Updater等组件更新数据。若无Clock的onTick事件驱动,Entity无法根据当前时间更新,也就无法获取最新的Property,影响场景中三维Entity的动态更新。
简单应用
1. 使用原生JSDate对象创建JulianDate:JulianDate.now方法展示了如何将当前时间转换为JulianDate格式。同样,可以手动创建一个Date对象,并将其转换为JulianDate。
2. 使用时间字符串创建JulianDate:以北京时间为例,使用ISO或UTC时间字符串时,需要在日期与时间之间添加大写字母T,并在字符串尾部加上时间偏移量,如+:表示东八区。
3. 设置Clock的起止时间和速率:Clock对象允许设置起始时刻、终点时刻和时间更新速率,配合ClockStep参数调整更新逻辑,如设置倍数以配合SYSTEM_CLOCK_MULTIPLIER或TICK_DEPENDENT参数。
4. 调整时钟的循环情况:Clock对象提供LOOP_STOP、CLAMPED和UNBOUNDED三种循环模式。LOOP_STOP模式下,时钟到达终点后会重新回到起点,实现循环效果。CLAMPED模式在到达终点后停止,保持在终点时刻。UNBOUNDED模式即使超过终点,时钟也不会停止,实现持续更新。