在 DOM 中动态插入并执行脚本

DOM HTML JavaScript jQuery

在 HTML 中脚本以 <script> 来标记,通过设置其内容或src属性执行内联脚本或外部脚本。 本文讨论动态地插入脚本标签时浏览器对它的解析、下载和执行行为。 动态插入脚本的场景可能包括使用 AJAX 获取脚本并动态执行(多用于性能优化), 以及运行时决定执行页面模板中的某段脚本(多用于单页异步)。

动态执行脚本还有其他方式,比如evalnew Function,这些不在本文的讨论范围。

继续阅读

动态插入外部样式表

DOM HTML 事件 异步 CSS

相比于动态插入外部脚本, 动态插入外部样式表(<link rel="stylesheet">)的行为简单很多: 只要插入到当前 DOM 树时,浏览器总会异步地立即下载并应用该样式表, 被从 DOM 树移除时样式消失并立即触发重绘。

内联样式表(这里指<style>标签)除了不需要去下载之外,其他行为与外部样式表相同。 因此下文略过对内联样式表的讨论。

继续阅读

Raspbian Jessie 的 GPIO 串口配置

Raspbian GPIO UART

Raspberry Pi 开源硬件提供了 GPIO (General Purpose Input/Output) 接口, 但 Raspberry Pi 3 新增的蓝牙支持占用了原 GPIO 使用的 UART(PL011), 让 GPIO 14/15 引脚转而使用 Mini UART,因此对于不使用蓝牙的用户降低了 GPIO 的吞吐量。 为了使 GPIO 继续使用 UART 协议以及设置对应设备(/etc/ttyAMA0)权限笔者话费了不少功夫, 于是将串口配置过程记录在此。

如果你不是在使用 GPIO(比如连接 Arduino、传感器等等)引脚,本文基本与你无关。

继续阅读

CORS 跨域中的 preflight 请求

跨域 CORS preflight AJAX HTTP XHR

我们知道借助Access-Control-Allow-Origin响应头字段可以允许跨域 AJAX, 对于非简单请求,CORS 机制跨域会首先进行 preflight(一个 OPTIONS 请求), 该请求成功后才会发送真正的请求。 这一设计旨在确保服务器对 CORS 标准知情,以保护不支持 CORS 的旧服务器,

Flowchart_showing_Simple_and_Preflight_XHR

Wikipedia: https://upload.wikimedia.org/wikipedia/commons/c/ca/Flowchart_showing_Simple_and_Preflight_XHR.svg

继续阅读

CORS 跨域发送 Cookie

AJAX Cookie XHR CORS 跨域

在 Web 页面中可以随意地载入跨域的图片、视频、样式等资源, 但 AJAX 请求通常会被浏览器应用同源安全策略,禁止获取跨域数据,以及限制发送跨域请求。 虽然有多种方法利用资源标签进行跨域,但能够进行的数据交互非常有限。 在 2014 年 W3C 发布了 CORS Recommendation 来允许更方便的跨域资源共享。 默认情况下浏览器对跨域请求不会携带 Cookie,但鉴于 Cookie 在身份验证等方面的重要性, CORS 推荐使用额外的响应头字段来允许跨域发送 Cookie。

继续阅读

Electron 中的 IPC

Github IPC Node.js 事件 Electron

Electron是 Github 为了打造一款纯 JavaScript 开发的代码编辑器而编写的 JavaScript 跨平台桌面应用框架。 Electron 中的 Node.js 是一个后台进程的运行时(注意不是 Web 服务器), 使用 Chromium (其实是libchromiumcontent库)作为用户接口。 碉堡了有木有!

其中后台进程(Main Process)与渲染进程(Render Process) 之间的通信便需要借助于 Electron 提供的 IPC 机制 (该机制需要跨平台,可能是通过libuv这样的跨平台 IO 库实现的)。 在这样的架构中 IPC API 会在开发中经常用到,本文介绍这些 API 的使用场景。

继续阅读