【译】如何在生产环境中部署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。 […]

探讨判断横竖屏的最佳实现

在移动端,判断横竖屏的场景并不少见,比如根据横竖屏以不同的样式来适配,抑或是提醒用户切换为竖屏以保持良好的用户体验。 判断横竖屏的实现方法多种多样,本文就此来探讨下目前有哪些实现方法以及其中的优缺点。 CSS Media Queries 通过媒体查询的方式,我们可以通过以下方法来实现根据横竖屏不同的情况来适配样式: 1.内联样式

2.外联样式

window.matchMedia() 除此之外,CSS Object Model(CSSOM)Views 规范增加了对 JavaScript 操作 CSS Media Queries 的原生支持,它在 window 对象下增加了 matchMedia() 方法,让我们能够通过脚本的方式来实现媒体查询。 window.matchMedia() 方法接受一个 Media Queries 语句的字符串作为参数,返回一个 MediaQueryList 对象。该对象有 media 和 matches 两个属性: media:返回所查询的 Media Queries 语句字符串 matches:返回一个布尔值,表示当前环境是否匹配查询语句 同时,它还包含了两个方法,用来监听事件: addListener(callback):绑定回调 callback 函数 removeListener(callback):注销回调 callback 函数 那么,通过 window.matchMedia() 的方法,我们可以这样判断横竖屏:

通过Can I Use […]

拥抱模块化的JavaScript

我们再一次被计算机的名词、概念笼罩。Backbone、Emberjs、Spinejs、Batmanjs 等MVC框架侵袭而来。CommonJS、AMD、NodeJS、RequireJS、SeaJS、Curljs 等模块化的JavaScript概念及库扑面而来。
模块化JavaScript的概念尤为突出,似乎有赶超07年Ajax风潮之趋势。2009年,Nodejs诞生!这个服务器端的JavaScript采用模块化的写法很快征服了浏览器端的JSer。牛人们纷纷仿效,各种写模块的规范也是层出不穷。CommonJS想统一前后端的写法,AMD则认为自己是适合浏览器端的。好吧,无论写模块的风格是啥样,写模块化的JavaScript却已开始流行了。你,准备好了吗?本文为你介绍模块化的JavaScript的发展、现状、未来及其重要性,而且总结阐述了几种JavaScript模块化的写法以及其核心要点。

© 2017 JDC. All Rights Reserved.