记一次 iOS 环境 H5 页面突然白屏
在新版本 iOS 系统中，某页面出现白屏，原因是 Safari 浏览器新增的全局变量 browser 与旧项目中的同名变量冲突。通过临时修复和代码重构解决了此问题，并加强代码审查和监控机制，以防止类似情况再次发生。
标签： H5
通过 eslint stylelint htmllint 规范前端项目代码
一、部署 eslint 规范 JavaScript
1.1 原理
husky + lint-staged + prettier + eslint + commitlint- husky: 阻止不规范的
git commit,git push。 - lint-staged: 只检测待提交区的代码。
"通过 eslint stylelint htmllint 规范前端项目代码"继续阅读
使用 postMessage + iframe 实现跨域通信
一、postMessage
window.postMessage() 方法可以安全地实现跨源通信。通常，对于两个不同页面的脚本，只有当执行它们的页面位于具有相同的协议（通常为https），端口号（443为https的默认值），以及主机(两个页面的模数 Document.domain设置为相同的值)时，这两个脚本才能相互通信。window.postMessage() 方法提供了一种受控机制来规避此限制，只要正确的使用，这种方法就很安全。
调用 postMessage() 方法时，向目标窗口派发一个 Event 消息。 该 Event 消息的 data 属性为 postMessage() 的数据；origin 属性表示调用 postMessage() 方法的页面的地址。
"使用 postMessage + iframe 实现跨域通信"继续阅读
基于 Vue 的前端开发规范
一、框架 / Vue
1.组件名
组件名为多个单词，并且用连接线（-）连接，避免与 HTML 标签冲突，并且结构更加清晰。
示例：
// 反例
export default {
name: 'item'
}
// 正例
export default {
name: 'page-article-item'
}
"基于 Vue 的前端开发规范"继续阅读
H5应用程序缓存 - Cache manifest
一、作用
离线浏览 - 根据文件规则把资源缓存在本地，脱机依然能够访问资源，联网会直接使用缓存在本地的文件。优化加载速度，节约服务器资源。
"H5应用程序缓存 - Cache manifest"继续阅读
H5 localStorage入门
定义
只读的 localStorage 允许你访问一个 Document 的远端（origin）对象 Storage；数据存储为跨浏览器会话。localStorage 类似于 sessionStorage，区别在于，数据存储在 localStorage 是无期限的，而数据存储在 sessionStorage 会被清除，当页面会话结束时——也就是说当页面被关闭。
属性
length
localStorage 内键值对的数量。
"H5 localStorage入门"继续阅读
HTML5全屏浏览器兼容方案
最近一个项目有页面全屏的的需求，搜索了下有HTML5的全屏API可用，不过各浏览器的支持不一样。
"HTML5全屏浏览器兼容方案"继续阅读