javascript

Mocha + Chai + istanbul in ES2015

使用 JavaScript 写代码的时候,无论是使用 TDD 方法还是为了保证代码的质量和可维护性,都应该考虑加上单元测试。在博文 mocha + chai + Travis CI + Codecov 使用流程 中有简单地介绍了如何使用流行的 JavsScript 库来对代码进行自动测试,检查代码覆盖率。 在那篇文章中,使用的是 Mocha/Chai/istanbul 和在线的 Codecov,以及和 Github 关系密切的 Travis CI,而且测试的 JavaScript 代码是 es5。现在 es2015 已经标准化了,那么教程也需要更新一下了。另外如果项目是私有项目,那么还是使用完备的离线测试环境比较好。接下来就是一个快速可行的教程。 安装和配置 测试框架无需变更,还是 Mocha + Chai 的组合,但是 istanbul 需要稍微变动一下。 如果你不需要 istanb…

Read more

说说牛客上的一道 JavaScript 题目

牛客上有这么一道 JavaScript 的题目。 //填写内容让下面代码支持a.name = “name1”; b.name = “name2”; function obj(name){ 【1】 } obj.【2】 = "name2"; var a = obj("name1"); var b = new obj; 【1】和【2】是填写的内容,【2】的答案是 prototype.name,没争议。 问题是【1】,参考答案居然是 if(name){ this.name = name;}return this;,这么随便地玩弄 this 不就是明摆着污染全局变量吗?暴力赋值不可取。 下面的一些高票讨论还说了一大堆解释的废话,连他自己都说自己好罗嗦。对,你不但罗嗦,而且还没有改错。注释里都说了给 window 的属性赋值,还不自知出问题,真是误人子弟。 先来分析一下题目,a…

Read more

FictionInjection-始动:Angular 依赖注入分析和源码抽取改造(上)

几年前有一个项目构思,由于技术水平低,当时并没有思考得很清楚,所以一直没怎么着手开始。近来前端很多优秀的库出现了,也让我对那个项目有了新的想法。在写了几个 JavaScript 的项目后我觉得可以尝试开始了。尝试并成功写出一些代码之后,就开(挖)始(坑)了这个系列的博文。 项目是写一个 JavaScript 框架,干什么的在此并不是重点,但是首先需要一个可扩展的模块系统。最简单就是直接用 jQuery 扩展的写法,直接将函数等的挂载在一个对象下,不过如此一来模块之间依赖非常多的话,管理起来会十分困难。也可以使用 AMD / CMD 的模块化的方法,不过考虑到 ES2015 已经加入了 import / export 的语法,最好就直接使用。然而使用了 ES2015 的语法之后,仍然使用 AMD 等的语法就显得很别扭,但是又想要依赖注入功能怎么办? 解决方法是模(fu)仿(zhi)著名的 A…

Read more

使用ES6编写一个生命游戏

GitHub 地址 缘起 前段时间看了《Understanding ECMAScript 6》,因为有 JavaScript 的基础,很快就上手了,还写了笔记。然而编程只看书是不够的,还需要让身体熟悉起来。刚好最近在看「全部成为F」这部新番,看到 ED 采用了「生命游戏」的表现形式,于是便有了用 ES6 来写一个的主意。 「生命游戏」 「生命游戏」的英文原文是「Game of Life」,是细胞自动机的一种形式,每个细胞的未来状态只取决于以其为中心周围八格细胞的当前状态。更详细的信息请看wiki条目,给出一个有意思的动画图。 而状态判断只有四条: 当前细胞为存活状态时,当周围低于2个(不包含2个)存活细胞时, 该细胞变成死亡状态。(模拟生命数量稀少) 当前细胞为存活状态时,当周围有2个或3个存活细胞时, 该细胞保持原样。 当前细胞为存活状态时,当周围有3个以上的存活细胞时,该…

Read more

《Understanding ECMAScript 6》笔记

在线免费阅读:https://leanpub.com/understandinges6/read/ 部分代码使用原书,代码版权归原书所有 块级绑定(Block Bindings) 字符串 正则 字符串模板(template strings) 标签模板(tagged templates) 函数 对象 解构(Destructuring) Symbols 生成器(Generators) 迭代器(Iterators) 类 Promises 模块(Modules) 杂七杂八 块级绑定(Block Bindings)↑ let 块级{}中有效 同块级不可重复声明 没有变量提升 块级会形成暂时性死区(TDZ,Temporal Dead Zone) const 基本和 let 相同,值不可修改 let 和 const 最…

Read more

mocha + chai + Travis CI + Codecov 使用流程

mocha a feature-rich JavaScript test framework running on Node.js and the browser chai a BDD / TDD assertion library for node and the browser that can be delightfully paired with any javascript testing framework Travis CI Free continuous integration platform for GitHub projects Codecov Continuous Code Coverage 编写测试 简单来说,就是使用 mocha 作为测试框架,chai 作为断言库,将项目交给 Travis CI 做自动测试,交给 Codecov 做覆盖率测试。 以我自己的项目 …

Read more

配合 angular 和 angular-material 来开发基于 electron 的应用 · 3--文件组织结构和开发流程

文件组织结构 良好的文件组织结构不仅能帮助我们更快地定位文件,更能配合开发工具形成流畅的开发流程,从而提高编程效率。 以下的目录和文件都放在存放应用的根目录 app 下。 package.json Electron 应用的配置文件,经常做 node 开发的人应该很熟悉了。稍微说明一下一些字段: name: 应用的名字,本项目就是 radioit 了 description: 应用的描述 version: 应用的版本号 author: 作者名字 email: 作者的邮箱 main.js Electron 应用的入口点,可以在 package.json 的 main 字段自定义 node_modules/ node 库的目录,一般不用手动管理,而是使用 npm 来安装和卸载库。 lib/ 存放 node 模块的目录。 src/ 存放源代码的目录。 src/css/ 存放待编译的 css 代码,…

Read more

配合 angular 和 angular-material 来开发基于 electron 的应用 · 2--node 库的使用和抓取代码的编写

使用 nodejs 的库 python 脚本的详细编写,请看之前的博文:radioit计划——动画广播辅助脚本radioitScript。 需要用 node 实现脚本中的某些逻辑是获取和提取广播的信息,整合成 JSON 格式的数据。 而用一些库就能轻松做到。 superagent superagent 是一个极其简单的 AJAX 库。 使用方法简单得令人发指。 var request = require( 'superagent' ); request .get( 'http://xxx.com' ) .end( function ( err, res ) { // Do something }); 还用介绍吗?不用了。 bluebird bluebird 是一个 Promise 库。 凡是类似 IO 的操作,必定需要异步。经典的解决方法是回调,然而是时候用 P…

Read more

thumbnail

配合 angular 和 angular-material 来开发基于 electron 的应用 · 1--分析与配置

应用github地址。github 代码和文章代码并不同步,用作预览和 PR。 目标分析 一句话概述:开发的应用是一个抓取网页有用信息并重新统一排布的应用,是之前文章提到的 radioit 计划里脚本的 GUI 版本。 关键词:网页抓取、信息统一、信息排布、脚本的 GUI 版本 功能: 浏览某一个广播站的广播 浏览某一个广播的详细信息 下载某一个广播最新的相关图片 下载某一个广播最新的相关音频 能够通过设置代理来突破某些限制 能够离线浏览(未定) 预定周期下载任务(未定) 整合视频压制工具(未定) 业务流程: 请求特定 url 资源 对取得的 url 资源进行信息提取 信息整合成统一格式 显示信息 某些情况下执行预定命令行(未定) 技术联想: 请求特定 url 资源 -> node 对取得的 url 资源进行信息提取 -> node 的…

Read more

配合 angular 和 angular-material 来开发基于 electron 的应用 · 0--前言

Electron Electron 是什么?它之前的名字是 Atom Shell,是 Github 开发的结合了 io.js 和 chromium 的跨平台桌面应用框架。Github 自己出的编辑器 Atom 以及微软出的编辑器 VSCode 都是基于这个框架。 众所周知,Google chrome 就是基于 chromium 而发展出来的一款优秀的浏览器。因其出色的体验和网页解析性能,所有国内出产的山寨浏览器 / 双核浏览器,无不选用了 chrome 作为内核。所以在网页解析渲染方面,使用 chromium 是极其正确的选择。 那跟平常的桌面应用构建,使用 Electron 又有什么优势呢? 普通的桌面应用构建,比较成熟的语言不外乎 C/C++、Java、C#、Python 等。然而 C/C++ 易学难精,即使其 GUI 框架有 MFC、Qt、KDE 等众,也是极难快速开发;Java 的…

Read more