ES6 Symbol 的用途

ES6 Symbol 迭代器

Symbol 唯一的用途就是标识对象属性,表明对象支持的功能。 相比于字符属性名,Symbol 的区别在于唯一,可避免名字冲突。 这样 Symbol 就给出了唯一标识类型信息的一种方式,从这个角度看有点类似 C++ 的 Traits

ES6 迭代器:Iterator, Iterable 和 Generator

ES6 JavaScript 生成器 迭代器

对集合中每个元素进行处理是很常见的操作,比如数组遍历、对象的属性遍历。 以往这些操作是通过 for 循环、.forEach.map 等方式进行, 在 ES6 中直接把迭代放在语言层面进行支持,同时提供定制 for...of 的机制。 借由迭代器机制为 Map、Array、String 等对象提供了统一的遍历语法,以及更方便的相互转换。 为方便编写迭代器还提供了生成器(Generator)语法。

本文展开介绍了这些相关概念:Iterables(可迭代对象)、Iterator(迭代器)、 Generator(生成器)和 Generator Function(生成器函数), 以及相关机制:Iterable Protocol、Iterator Protocol、Symbol.iterator。

JavaScript 中数字的底层表示

JavaScript Number 浮点数 二进制 运算符

至今 JavaScript 已经有 6 种基本类型 了,其中数字类型(Number)是表示数字的唯一方法。 目前其标准维护在 ECMA262,在 JavaScript 语言层面不区分整数与浮点、符号与无符号。 所有数字都是 Number 类型,统一应用浮点数算术。 由于 JavaScript 中无法访问低层的二进制表示,而且 64 位可表示范围非常大,不容易遇到和了解到边界情况。 这篇文章对 JavaScript Number 的二进制表示进行简要的介绍,主要明确使用者观察到的边界, 解释 MAX_VALUE, MIN_VALUE, MAX_SAFE_INTEGER, MIN_SAFE_INTEGER, EPSILON 这些常量取值的原因;回答 POSITIVE_INFINITY, NEGATIVE_INFINITY, NaN 这些常量的表示方法。

iOS UIWebView 的 Bug 集锦

iOS 动画 UIWebView scroll

Apple 在 App Store Review Guidelines 中提到 iOS 软件只允许使用其 WebKit 内核,事实上就是只能选择 UIWebViewWKWebView 来实现 Web 浏览。而官方推荐在 iOS 8 之后的系统中使用 WKWebview,UIWebView 已处于 Deprecated 状态:

In apps that run in iOS 8 and later, use the WKWebView class instead of using UIWebView. Additionally, consider setting the WKPreferences property javaScriptEnabled to false if you render files that are not supposed to run JavaScript. – Apple Developer

尽管如此,由于商业或技术上的原因很多国内浏览器仍然在使用 UIWebview。 比如 WKWebview 直到 iOS11 才支持 WKURLSchemeHandler (类似 UIWebView 的 NSURLProtocol)影响 Web 页面和 Native 通信的实现。

  • QQ 浏览器。曾经是 UIWebView 现在已经切换到 WKWebview(不存在官方 Changelog)。
  • 微信内置浏览器。从2017年3月1日切换到 WKWebview,参考:iOS WKWebview 网页开发适配指南。虽然不知道为啥 WKWebview 还要“适配”,WTF
  • UC 浏览器。目前(版本 12.0.3.1077)仍然是 UIWebView。
  • 百度(手机百度)。目前(版本 10.8.6)仍然是 UIWebView。

本文描述的是 UIWebview 下的 Bug,Safari 和基于 WKWebview 的浏览器比如 Chrome 不受影响。

设置和获取 radio input 的状态:checked, prop, attr, val

Web 表单 是 HTML 文档与用户交互的重要部分, 其中的 input[type="radio"] 是单选框控件。 如何设置和获取 单选控件input[type=radio])的状态还是比较繁琐的, 而且需要理解 DOM 的一些基本概念。 本文整理一下相关操作,并给出可用的代码片段。

TL;DR

  • HTML 选中可以添加 checked Attribute(Content Attribute):<input type="radio" checked>
  • 脚本选中需要设置 checked Property(IDL Attribute):contactChoice3.checked=true
  • 选中变化需要监听所有单选控件,处理函数中找到选中的控件,读取器 value 属性。

正确使用 HTML5 标签:img, picture, figure 的响应式设计

HTML 响应式 媒体查询 图片

TL;DR: 相比 img 标签,picture 提供了更丰富的响应式资源选择方式; figure 用于提供排版的图表概念,其中的图片仍然要使用 pictureimg; 在支持 HTML5 的浏览器中,可以基于视口宽度、设备像素密度、缩放级别、 以及图片格式的支持程度来选择图片资源。 图片替代文本(alt 属性)的目的是替代图片内容,可以增强网页在很多场景下的可用性。 此外对于纯装饰性的图片不建议使用任何 HTML 标签,可以利用 CSS 实现。

导航: 下一页

加载中...

🔝