HTML5 活动宣传页「My Flyme 独家记忆」开发实践总结

年前放假的最后一天,我们上线了「My Flyme 独家记忆」 H5 活动宣传页。 因种种原因,直到放假前几天,才突然要求我们参与并开始项目的前端部分。此时大概的情况是:所有数据已计算完毕;后端接口已完成待联调;交互视觉只出了不到四分之一(一共二十多个页面);我们平时以中后台项目为主,这种活动页从未涉及。我们真正介入时距离上线时间点只有四天,在这种背景下,已经谈不上探讨什么样的技术选型最佳,只能是越
HTML5 活动宣传页「My Flyme 独家记忆」开发实践总结

使用 yarn 代替 npm 管理前端项目模块依赖

简单来说,yarn 是一个与 npm 功能相同的工具,用于前端项目的依赖管理。在使用 npm 的项目中,使用 npm 命令的地方都可以使用 yran 来代替。为什么要使用 yarn 替代 npm 呢?请阅读本文详情寻找相关答案。
使用 yarn 代替 npm 管理前端项目模块依赖

实现基于项目约定的 ajax 通用性封装

相同或相似功能应尽量书写可复用代码实现,函数化、模块化、参数化是实现代码可复用的关键技巧,也是高质量编码的基本要求。简单的复用实现可以是一个函数,更复杂完善一些就成了通用性组件、库或框架。
实现基于项目约定的 ajax 通用性封装

禁用 window.opener

一般来说,打开同源(域名相同)的页面,不会有什么问题,毕竟都是一个站点提供的。但对于跨域的外部链接来说,存在一个被钓鱼的风险。 在跨域的情况下,window.opener 拿不到来源页面的具体内容,但是 window.opener.location 却是例外:它可以修改打开它的页面地址。这会带来什么问题?如果你在社交网站上点击了一个钓鱼链接,钓鱼页面本身没有问题,但它却可以悄悄地替换打开它的社交网站页面,从而实现钓鱼以获取用户账号密码等信息的目的。
禁用 window.opener

vscode: Visual Studio Code 常用快捷键及前端开发常用插件

主命令框 F1 或 Ctrl+Shift+P : 打开命令面板。在打开的输入框内,可以输入任何命令,例如: 按一下 Backspace 会进入到 Ctrl+P 模式 在 Ctrl+P 下输入 > 可以进入 Ctrl+Shift+P 模式 在 Ctrl+P 窗口下还可以: -直接输入文件名,跳转到文件 ? 列出当前可执行的动作 ! 显示 Errors或 Warnings,也可以 Ctrl+Shift
vscode: Visual Studio Code 常用快捷键及前端开发常用插件

node-sass 安装失败的解决办法

node-sass 安装失败的原因 npm 安装 node-sass 依赖时,会从 github.com 上下载 .node 文件。由于国内网络环境的问题,这个下载时间可能会很长,甚至导致超时失败。 这是使用 sass 的同学可能都会遇到的郁闷的问题。 解决方案就是使用其他源,或者使用工具下载,然后将安装源指定到本地。
node-sass 安装失败的解决办法

在 nginx 中配置 HTTP/2 与 TLSv1.3 支持

HTTP/2 协议于 2015 年 5 月 14 日正式版发布。随着 nginx 等流行 webserver 以及各大浏览器对 HTTP/2 的支持,越来越多的网站开始部署 HTTP/2 了。 HTTP/2 协议 HTTP/2 源自 SPDY/2。SPDY 系列协议由谷歌开发,于 2009 年公开。它的设计目标是降低 50% 的页面加载时间。 HTTP/2 协议由以下两个 RFC 组成: RFC
在 nginx 中配置 HTTP/2 与 TLSv1.3 支持

使用 Lets Encrypt 生成用于 https 站点的免费 SSL 证书

提示:本站当前已切换为使用 acme.sh 和 dnspod 的模式生成并自动续期证书,可参考该文: 基于 acme.sh 和 dnspod API 自动生成与更新网站泛域名证书 以下内容由于长久未作验证更新,已不再保证有效性,仅供参考。 使用 certbot-auto 这是官方推荐的方法,通过 shell 命令的方式,可以最简单方便地达到目的。步骤如下: 访问 certbot 网站,地址为:ht
使用 Lets Encrypt 生成用于 https 站点的免费 SSL 证书

使用 mocha 和 chai 进行基于浏览器的 javascript 异步测试

基于 BDD (行为驱动开发) 的 UI 相关的功能性测试,特别是涉及到与后端数据交互的情况下,需要浏览器环境和对 ajax 的支持,对于涉及动画的交互,还需要延时执行测试代码。这里提到了几个基本要求: 浏览器环境支持(DOM/DOM JavaScript API/CSSDOM 等) ajax 支持 异步测试支持 下面针对这样的诉求,介绍使用 mocha、chai 和 PhantomJS 方案的相
使用 mocha 和 chai 进行基于浏览器的 javascript 异步测试