【译】如何在生产环境中部署ES2015+

原文:https://philipwalton.com/articles/deploying-es2015-code-in-production-today/ 大部分前端开发人员热衷于使用新的 JavaScript 语言特性来书写 JS 代码,例如 async 、 await 、 classes 、 arrow functions 等。然而,尽管目前所有的前沿浏览器都能运行 ES2015+ 代码(译注:ES2015及俗称的ES6),自然也能够支持我刚刚列举的新特性,但是为了兼容占有小比例的低版本浏览器用户,大部分的开发者仍然使用 polyfills 将代码编译成 ES5 语法。 这种情况无疑糟透了,在理想的世界里,我们将无需输送不必要的代码! 使用新的 JavaScript 和 DOM APIs ,我们可以有条件的加载 ployfills,因为我们能够在运行时使用特性检测判断浏览器是否支持这些语法。但是随着一些新的 JavaScript 语法的出现,由于任何未知的语法都会导致代码解析错误,并且不再执行之后的代码,导致单凭特性检测来检查新语法的支持程度很是棘手。 尽管对于新的语法特性检测还没有一个好的解决方案,但目前对于 ES2015 的基本语法特性检测我们还是有办法的。解决之道便是 <script type="module">。 大部分开发者认为 <script type="module">是用来加载 ES 模块的(事实的确如此),但是 <script type="module">也拥有更直接且实用的功能——加载浏览器可以处理的、使用 ES2015+ 语法的 JavaScript 文件。 换句话说,每个支持 <script type="module">的浏览器都支持你所熟知的大部分 ES2015+ 语法,例如: 支持 <script type="module"> 的浏览器也支持 async 和 await 函数。 支持 <script type="module"> 的浏览器也支持 Class 类。 支持 <script type="module"> 的浏览器也支持 arrow functions。 […]

ELF – 灵活可扩展的 HTML5 构建工具

ELF,意为小精灵,来自 War3 中暗夜精灵族的农民。 通常当我们开始一个新的 HTML5 场景营销活动项目时,需要创建项目目录,初始化基本的项目文件,然后再添加构建(grunt/gulp/webpack)相关的文件(一次两次三次…,像小精灵采木一样~),目前有不少工具可以帮我们解决一部分这种重复性的工作,但不能完全的解决,于是,就有了小精灵 – ELF。 快速上手 1. 安装 通过 npm 全局安装(依赖的包比较多,推荐使用淘宝的 npm 镜像进行安装)

安装好后,可以运行 elf –help 查看支持的命令和帮助说明。 2. 初始化项目 假如我们现在要做一个向下整页滑屏的 HTML5 项目

这样一个向下整页滑屏的 HTML5 项目就已运行在开发模式上,样式预处理自动编译、样式热加载等功能早已具备,在此基础上,你就可以开始按照你的需求愉快的开发了。 3. 部署 当项目开发完成之后,需要将代码合并压缩用于部署,运行

会生成一个 dist 文件夹用于部署。 整个流程下来,基本解决了 HTML5 项目开发过程中项目初始化和构建部分的重复工作,已在团队内广泛使用,包括 Q4 京东品牌运营的10多个 H5 项目,如 皇家视频 京东精选 功能介绍 ELF 主要包括三部分功能:项目构建、示例模板和通用组件。 项目构建 现在在做 web 开发时,基本都会引入构建工具,常用的有 grunt、gulp 以及目前最流行的 […]

视频H5のVideo标签在微信里的坑和技巧

随着 4G 的普遍以及 WiFi 的广泛使用,手机上的网速已经足够稳定和高速,以视频为主的 HTML5 也越来越普遍了,相比帧动画,视频的表现更加丰富,前段时间开发了一个以视频为主的移动端 HTML5,在这里介绍一些实践经验。 统一播放效果 我们希望视频播放时可以全屏播放,没有进度条、播放按钮等与系统相关的元素,可以在视频上方增加自定义的元素(比如一个跳过按钮),类型下面的效果: 在不同的操作系统(主要就是 iOS 和 Android),为了达到比较统一的播放效果,分别对其进行兼容。 iOS 在 iOS 上,APP 都是使用的系统自带的浏览器进行页面渲染,video 播放视频的效果是统一的,只需要考虑不同的 iOS 版本是否有不一致的地方。在 iOS 上,播放视频默认会弹出一个播放器全屏播放视频,如下效果 播放器上下有的系统默认的控制栏,可以控制视频的播放进度、音量以及暂停或继续播放,播放视频时,视频会 “浮” 在页面上,页面上的所有元素都只能是在视频下面,这种效果显然不是我们想要的。 但好在 iOS 10 Safari 中,video 新增了  playsinline 属性,可以使视频内联播放。 在 webkit 的 blog 上提到  A note about the playsinline attribute: this attribute has recently been added to the HTML specification, […]

“等一下,我碰!”——常见的2D碰撞检测

“碰乜鬼嘢啊,碰走晒我滴靓牌”。想到“碰”就自然联想到了“麻将”这一伟大发明。当然除了“碰”,洗牌的时候也充满了各种『碰撞』。 好了,不废话。直入主题——碰撞检测。 在 2D 环境下,常见的碰撞检测方法如下: 外接图形判别法 轴对称包围盒(Axis-Aligned Bounding Box),即无旋转矩形。 圆形碰撞 光线投射法 分离轴定理 其他 地图格子划分 像素检测 下文将由易到难的顺序介绍上述各种碰撞检测方法:外接图形判别法 > 其他 > 光线投射法 > 分离轴定理。 另外,有一些场景只要我们约定好限定条件,也能实现我们想要的碰撞,如下面的碰壁反弹: the Pen Boundary collision detection by Jc @JChehe) on CodePen. 当球碰到边框就反弹(如x/y轴方向速度取反)。

再例如当一个人走到 100px 位置时不进行跳跃,就会碰到石头等等。 因此,某些场景只需通过设定到适当的参数即可。 外接图形判别法 轴对称包围盒(Axis-Aligned Bounding Box) 概念:判断任意两个(无旋转)矩形的任意一边是否无间距,从而判断是否碰撞。 算法:

两矩形间碰撞的各种情况: 在线运行示例(先点击运行示例以获取焦点,下同): See the Pen Axis-Aligned Bounding Box Collision […]

CSS 3D Panorama – 淘宝造物节技术剖析

前言 3D 全景并不是什么新鲜事物了,但以前我们在 Web 上看到的 3D 全景一般是通过 Flash 实现的。若我们能将 CSS3 Transform 的相关知识运用得当,也是能实现类似的效果。换句话说,3D 全景其实就是 CSS3 3D 的应用场景之一。 准备 在实现 CSS3 3D 全景之前,我们先理清部分 CSS3 Transform 属性: transform-origin:元素变形的原点(默认值为 50% 50% 0,该数值和后续提及的百分比均默认基于元素自身的宽高算出具体数值); perspective:指定了观察者与z=0平面的距离,使具有三维位置变换的元素产生透视效果。(默认值:none,值只能是绝对长度,即负数是非法值); transform-style:用于指定其为子元素提供2D还是3D的场景。另外,该属性是非继承的; transform:该属性能让你修改CSS可视化模型的坐标空间,其中包括 平移(translate)、旋转(rotate)、缩放(scale) 和 扭曲(skew)。 下面对上述的一些点进行更深入的分析: 对于 perspective,该属性指定了“眼睛”与元素的 perspective-origin (默认值是 50% 50%)点的距离。那么问题来了:“当我们应用 px 作为衡量单位时,那它的实际距离该如何量化呢(即如何得到我们熟悉且易于表达的距离)?” 答:当我们的屏幕的分辨率是1080P(1920*1080px),且该元素或祖先元素的 perspective 值是 1920px 时,该应用了 CSS3 3D Transform 的元素的立体效果就相当于我们在距离一个屏幕宽度(1920px)的屏幕前观看该元素的真实效果。尽管如此,目前我也不清楚如何准确地为元素设置一个合适的 perspective 值,只能猜测个大概值,然后再动态修改值,以达到满意的呈现效果。 根据 相似三角形 的性质可计算出被前移的元素最终在屏幕上显示的实际大小 […]

© 2017 JDC. All Rights Reserved.