公子 发布于 11月15, 2017

ThinkJS 3.0 如何实现对 TypeScript 的支持

ThinkJS 3.0 是一款面向未来开发的 Node.js 框架,内核基于 Koa 2.0。 3.0 相比 2.0 版本进行了模块化改造,使得内核本身只包含了最少量必须的代码,甚至还不足以构成一个完整的 Web MVC 框架,除了内核里面实现的 Controller, View 和 Model 被实现为扩展(Extend)模块 think-viewthink-model,这样实现的好处也是显而易见的,如果我的 Web 服务只是简单的 RESTful API,就不需要引入 View 层,让代码保持轻快。

think-cli 2.0 新版发布

在本文发布的同时 ThinkJS 团队发布了新版的脚手架 think-cli 2.0,新版脚手架最大的特点是脚手架和模板分离,可以在不修改脚手架的基础上添加各种项目启动模板,如果老司机想跳过下面实现细节,快速开始尝试 TypeScript 下的 ThinkJS 3.0, 可以用 think-cli 2.0 和 TypeScript 的官方模板:

npm install -g thinkjs-cli@2
thinkjs new project-name typescript

阅读全文 »

公子 发布于 11月14, 2017

75CDN 增加 SRI 支持

[75CDN][75cdn] 是一个由奇舞团维护的静态资源托管平台,创立至今已经稳定运行了一年多的时间。近期我们增加了 SRI 的支持,作为国内首个提供 SRI 服务的静态资源库了,也算是为 [75CDN][75cdn] 一周年庆生吧。

SRI 全称是 Subresource Integrity,是用来解决由于 CDN 资源被污染而导致的 XSS 漏洞的方案。当浏览器检测加载脚本签名与给定的签名不一致时,会拒绝执行该脚本。目前浏览器的支持情况如下:

浏览器 支持版本
Chrome 以及 Chrome for Android 45+
Firefox 以及 Firefox Mobile 43+
Safari 以及 iOS Safari 11+
IE 以及 Edge 不支持
UC 浏览器 不支持

注: 数据来源于 [CanIUse][caniuse] 和 [MDN][mdn]

阅读全文 »

akira_cn 发布于 06月26, 2017

漫谈 JS 函数式编程(一)

原文:https://www.h5jun.com/post/js-functional-1.html

这可能是最简单易懂的函数式编程介(扯)绍(淡)了

目前前端界(以及其他一些领域)对函数式编程大体上两种态度,一些人是觉得函数式编程特牛逼,尤其是现在许多新生的框架和库都在标榜自己的函数式特征。而另一些人,又觉得函数式编程学起来很难,而且似乎也没有什么卵用,理由是在自己经历的项目里面很难看到具体的函数式编程应用场景,甚至其中许多人认同一个观点,觉得函数式编程只适合于学术研究,很难在工程项目中实际使用。

不管你在阅读本文之前属于哪一种人,又或者你是刚接触函数式编程的新人,都没有关系。本文不是研究函数式编程范式的学术研究,而函数式编程作为一个可以说是程序设计理论中最古老的编程范式,在它几十年上百年的发展历史中,已经积累了大量的资料和素材,对于想要在学术领域里完全弄明白它的同学,完全可以在网上、书店里找到各种资料。本文的重点不在于概念,而在于实战。因此,你不会听到太多各种函数式编程的名词讨论,比如诸如 Curry、Mond 之类的专业术语。相反,我们主要来讨论函数式编程在前端领域内使用的一些实际例子,了解为什么前端需要学习函数式编程,使用函数式编程写代码能给我们带来什么。如果弄明白了这些,那么关于函数式编程不实用的谣言也就不攻自破了。

阅读全文 »

公子 发布于 06月18, 2017

SVG动画实践

原文:https://imnerd.org/svg-animation-in-action.html

SVG 是基于 XML 的矢量图形描述语言,可以近似理解成 HTML,所以能和 JS 以及 CSS 进行交互。 特别是 CSS,配合 CSS Animation 就能实现一些令人心旷神怡的动画,这实在是让人兴奋。下面我们就来看看 SVG 配合 CSS 实现动画的一些方法。

本文内容主要是我之前分享的文字版,若想看重点的话可以看之前的 Slide:

也可以查看分享视频:http://cloud.live.360vcloud.net/theater/play?roomid=2079

阅读全文 »

akira_cn 发布于 03月08, 2017

使用 webpack2 和 NPM Scripts 进行 JavaScript 组件开发

原文:https://www.h5jun.com/post/using-webpack2-and-npm-scripts.html

最近 webpack 成为非常流行的打包工具,很多项目都在使用它。在我们进行 JavaScript 独立组件开发的时候,如果我们想要使用语言新特性,又想发布的时候产出兼容性好的代码,那么使用 webpack 就能够很大程度上帮助我们实现这一目标。

现在让我们来看看究竟该怎么做吧。

阅读全文 »

akira_cn 发布于 03月07, 2017

用60行代码实现JavaScript动画序列播放

原文:https://www.h5jun.com/post/sixty-lines-of-code-animation.html

最近在给学生上课,上周六的第一堂课是关于 JavaScript 动画的内容,其中包括一些简单的动画,比如匀速或者匀加/减速的运动,也包括复杂一些的组合动画。而动画的基本原理,在我之前的文章已经有了详细的介绍。在这里,我想谈一谈的是,我们可以如何针对现代浏览器设计更加简单的 API,来实现动画的序列播放。

阅读全文 »

akira_cn 发布于 02月23, 2017

轻松管理你的 Node 版本

原文:https://www.h5jun.com/post/manage_node_with_n.html

玩 Node.js 的小伙伴们都知道,现在 Node 的版本更新很快,目前最新稳定版已经更新到 v7.6.0 了,而生产环境一般选择使用 LTS(Long-term Support)版本,目前最新的是 v6.10.0。

新版的 Node 7.x.x 有非常有用的更新,那就是支持了 --harmony-async-await。这样就不用依赖 babel 来使用 async/await 特性了。

但是,如何让 7.x.x 和 LTS 的 6.x.x 并存呢?就需要用 Node 版本管理工具了。

阅读全文 »