GitHub 地址

这次的练习是 JavaScript 的数组练习。

Q1 过滤出出生于 16 世纪的发明家

Answer

1
const fifteen = inventors.filter(inventor => inventor.year >= 1500 && inventor.year < 1600);

JavaScript 的 filter 用法与 Swift 中集合类型的 filter 使用方法一样,需要保留的数据返回 true 既可。

JavaScript 中提供了 console.table 方法,通过表格的样式打印出表格化的数据

阅读更多


day-03


GitHub 地址

使用 JavaScript 实时修改 CSS 的属性,本例中修改了图片的 padding,背景色以及高斯模糊的 blur 值。

技术要点

  1. :root 伪类
  2. data-* 自定义属性的集合 dataset

阅读更多



GitHub 地址

使用 CSS + JS 实现的时钟,实时显示当前的时间。这里没有仿照 JavaScript 30 的样式制作,而是选择了 这篇 进行了一些简化和修改。

技术要点

时钟的项目,技术难点不在 JavaScript 中,实际 JavaScript 涉及的内容并不多。主要的代码和 Day 01 Drum Kit 类似,需要注意的是秒针在 59s 到 0s 时切换。由于为了实现更自然的秒针移动效果,动画使用了贝塞尔曲线,并设置了动画时间 transition: all .2s cubic-bezier(0.4, 2.08, 0.55, .44) 会导致秒钟角度从 354° 切换到 0° 时由于动画时长的 0.2s 会有在 0.2s 内指针旋转一周的问题。解决方式如下

1
2
3
4
const container = document.querySelector(`.${hand.hand}-keyframes`);
if (hand.hand === 'seconds') {
container.style.transition = 'all ' + (hand.angle === 0 ? 0 : 0.2) + 's cubic-bezier(0.4, 2.08, 0.55, .44)';
}

阅读更多



GitHub 地址

使用 JavaScript 实现爵士鼓的页面,通过敲击键盘上对应的按键,来播放不同的音调。

技术要点

  • 事件监听
  • 音频播放
  • CSS 动画的添加与移除
  • CSS 区别 px/em/rem

阅读更多



原文地址

Raw String (原始字符串)

SE-0200
原始字符串中特定的字符不会被转义,例如 \ " 等。使用原始字符串时,只需要在字符串的开头和结尾添加 # 就可以了,例如 let rawString = #"This is a "raw" "String""#。由于开头和结尾的 # 是新的界定符号,所以 Swift 会把单独的 " 理解成普通的字符,而不是字符串的开始或结尾符号。
同样, 原始字符串中也可以使用 \ ,例如 let rawString = #"This is a "raw" "String" with keyPath \Person.name"# 。不过需要注意的是,由于 \ 的特殊性,在原始字符串中添加变量时,需要改为 \#(value)

1
2
let value = 42
let rawString = #"This is a raw string with \#(value)"#

阅读更多



原文地址

作为工程师,我们会花费 70% 的时间来调试。剩下的 20% 用于思考架构和与同事交流,最后的 10% 才是真正用于编码的时间。

调试就像是在犯罪电影中同时扮演侦探和嫌疑人。

Filipe Fortes via Twitter

因此,如何让 70% 的调试时间尽可能的愉快,就显得及其重要。LLDB 因此应运而生。Xcode 的 UI 调试工具展示了所有有用的调试信息,而不用敲任何 LLDB 指令。然而,控制台在我们日常工作中仍然扮演了重要的角色,下面介绍一些笔者在日常调试工作中经常使用的 LLDB 小技巧。

阅读更多



原文地址

准备工作

作为 Swift 开发者,一定对 Dictionary (字典) 非常熟悉。如果你也是一个 Kotlin 开发者,那会对 HashMap 有所了解。这两种数据结构的本质都是 hash table (哈希表)

Swift 中的字典是一个键值对集合。想要在字典中存储一个值,需要通过 key 来传递:

1
2
3
4
5
6
7
var dictionary: [String: String] = [:]

// 添加 键值对
dictionary["firstName"] = "Steve"

// 通过 key 获取值
dictionary["firstName"] // 输出 "Steve"

实际上,字典将键值对存入一个哈希表。本文中,你将了解到哈希表的一个基础实现以及它的性能。

阅读更多



前些日子准备周会关于 Swift Extension 的分享时,翻看自己之前写过的 Extension 时。发现有些在可扩展性,以及易用性上并不尽如人意,这也让我在周会讨论中加入了如下议题。

  • 如何评判一个 Extension 是必要的,且有价值的
  • 编写 Extension 需要遵循哪些原则

阅读更多

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×