主题测试中...

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

基于 BDD (行为驱动开发) 的 UI 相关的功能性测试,特别是涉及到与后端数据交互的情况下,需要浏览器环境和对 ajax 的支持,对于涉及动画的交互,还需要延时执行测试代码。这里提到了几个基本要求: 浏览器环境支持(DOM/DOM JavaScript API/CSSDOM 等) ajax 支持 异步测试支持 下面针对这样的诉求,介绍使用 mocha、chai 和 PhantomJS 方案的相关测试工具/库的安装与测试环境的构建。 1. 相关测试工具/库简介 1.1 mocha mocha 是近年来非常流行的 JavaScript 测试框架。它 支持浏览器环境,并且支持异步测试(done 回调或 Promise) ...

CSS 代码质量校验:stylelint 与 stylefmt 的开发环境配置参考

在团队开发中,良好的代码规范约定是保证互相良好协作的基本要求。 stylelint 是 PostCSS 团队开发的 CSS linter 工具,它使用 PostCSS 的 AST 语法解析树引擎,支持 PostCSS 支持的所有语法识别,而且还支持自定义语法解析器,功能非常的强大,具有很大的扩展性,对于 SCSS、LESS 和 PostCSS 的 SugarSS 都可以良好的支持。 stylefmt 是一个基于 stylelint 的代码修正工具,它可以完全基于 stylelint 的代码约定规范配置,对可修正的地方作格式化输出。 本文将简要介绍 stylelint 和 stylefmt 的安装配置步骤,为快速完成相关环境配 ...

nodeJS 中从命令行等待并读入用户输入实现与用户交互的方法

在实现与用户交互的工具时,总会有类似 c++ 中 cin>> 操作符的功能需求,从命令行读取用户输入然后继续执行。 在 nodejs 中,避免掉使用事件监听的方式,实现同步的代码书写,可通过如下两种方法。 1. fs.readSync + process.stdin 同步读取用户输入 使用 fs.readSync 从 process.stdin 中读取。示例: const fs = require('fs'); function readSyncByfs(tips) { var response; tips = tips || '> '; process.stdout.write(tips); process.stdin.pause(); response = fs.readSync(process.std ...

CSS 代码校验器 csslint: 在 sublime text 编辑器中安装和配置 csslint

本文主要介绍在 sublime text 3 编辑器中配置 csslint 的方法步骤,以帮助你快速完成相关配置,避免花费更多的时间去探索。 1. 安装 csslint 打开 cmd 命令提示符,使用 node 进行全局安装 csslint npm i eslint -g –registry=http://registry.npm.taobao.org/ –disturl=https://npm.taobao.org/dist 2. 安装 sublime text 相关插件 打开 sublime text,打开 preferences->Package Control (ctrl+shift+l),搜索和安装如下两个插件: SublimeLinter SublimeLinter-csslint 进入项目根目录,新建一个名称为 .csslintrc 的文件 ...

使用 JSDoc 与 docstrap 生成 JavaScript 项目 API 文档

JSDoc 规范是 JavaScript 最为流行的一套 JS 注释规范,许多 IDE 编辑器都对其提供内核或插件级别的支持。 根据 JSDoc 规范书写注释的 JavaScript 文件,可以借助 JSDoc 工具生成标准的使用文档,也可以被 IDE 编辑器用于代码提示。 JSDoc 默认的文档模板比较单调,docstrap 提供了 14+ 种 bootstrap 风格的模板,使用 docstrap 使得生成的文档更美观易用。 下面志文工作室针对 JSDoc 与 docstrap 安装使用的方法与要点作简要介绍。 一、安装 JSDoc 与 Docstrap 首先进入项目根目录。 1.1 安装 JSDoc npm i -g jsdoc 1.2 安装 Docstra ...

pt 与 px、em、rem 的区别与换算

DPI/pt/px 单位的含义 DPI(Dots Per Inch) 每英寸像素数。Windows 系统默认是 96dpi,Apple 系统默认是 72dpi。 pt (point,磅) 是一个物理长度单位,指的是 72 分之一英寸。 px (pixel,像素) 一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果 px 要换算成物理长度,需要指定精度 DPI,在扫描打印时一般都有 DPI 可选。常见浏览器的默认字体大小都是 16px。 由于屏幕大小的差异性,相同大小的字体在不同屏幕下显示的效果差异比较大。那么动态的放大/缩小字体就变得比较重要。显然针对每一处的字体设置都去做兼容是复杂的, ...

git autocrlf 自动换行符转化导致的文件内容不一致问题(TortoiseGit)

提交本地仓库代码到远端后再拉取回来,正常情况下目录应当是全部为绿色的全部已同步状态。 但在 windows 下,如果你发现每次拉取回来后都会变为感叹号,则说明拉取回来的文件是有差异的。 到底是什么原因产生这样的差异? 这很可能是因为开启了 Git 的自动转换行符设置。 可行的解决方式则是关掉它。执行如下命令: git config --global core.autocrlf false git config --global core.safecrlf true 如果你使用 TortoiseGit,则可在 settings 里如图一所示方式设置: 取消 Auto CrLf(自动换行符转化) 的选中 设置 safecrlf(检查 ...

nodejs 包管理工具 npm 的模块依赖 dependencies 简介

nodejs 包管理工具 npm 依靠 package.json 文件进行依赖管理。 package.json 文件中的 dependencies 与 devDependencies 配置,决定了下载一个包后还需要如何下载依赖包;依赖包后面声明的版本配置则决定了其位置如何存放。 在一个目录下,如果存在 package.json,那么执行命令 npm install ,则会安装相关依赖包到当前目录下的 node_modules 目录中。如果加了 -g 参数则会安装到全局。 一个 package.json 文件的示例: { "name": "demo", "main": "index.js", "version": "1.0.0", "description": "demo by lzw. ...

Atom 编辑器设置、快捷键与必备插件

Atom 编辑器界面比 sublime text 更好看,随着不断的升级优化,卡顿情况也大有改善,喜欢折腾的你快来试一试吧! 打造好用的 Atom 编辑器,让你的 Atom 更好用,一些必要的设置、好用的插件、以及记住常用快捷键是必须的。 Atom 设置 推荐几个设置选项: 显示空格、换行等符号: 选中 Show Invisibles 鼠标滚轮滚屏太小:设置 Scroll Sensitivity 参数,如 100(默认为 40) 允许到尾部还可以向上滚屏: 选中 Scroll Past End Atom 常用快捷键概览 英文 中文 快捷键 功能 New Window 新建界面窗口 Ctrl + Shift + N 如中文意 ...

Windows 上安装 Jekyll

Jekyll 是一个将纯文本转化为静态网站和博客的工具。现在许多的开源项目文档和示例,都使用 Jekyll 驱动。那么安装一个 Jekyll 就必不可少了。 本文简单介绍在 windows 上安装 Jekyll 的步骤。 1. 安装 Ruby A. 下载Ruby:http://rubyinstaller.org/downloads/ B. 最好保持默认的路径,如:Ruby22-x64。因为安装包明确提出 “请不要使用带有空格的文件夹 (如: Program Files)”。 C. 勾选 “Add Ruby executables to your PATH”,将执行程序路径加入到环境变量 PATH 中。 2. 安装 DevKit A. 下载:http://rubyinstaller.org/downloads/ ...

javascript 代码校验器 eslint: 在 sublime text 编辑器中安装和配置 eslint

当你在使用 ES6+ 书写前端代码的时,eslint 是必备的代码校验器。 下面为你介绍在 sublime text 3 编辑器中配置 eslint 的方法步骤。 1. 安装 eslint 打开 cmd 命令提示符,使用 node 进行全局安装 eslint npm i eslint -g –registry=http://registry.npm.taobao.org/ –disturl=https://npm.taobao.org/dist npm i babel-eslint -g –registry=http://registry.npm.taobao.org/ –disturl=https://npm.taobao.org/dist 如果你使用 react.js 框架,还应当安装 eslint-plugin-react 插件: npm i eslint-plugin-r ...

safari 附件下载文件被添加后缀(html\exe等)的问题

通过程序读取文件或生成文件来下载,一般只需设置 header 头即可: header('Content-type: application/pdf'); header('Content-Disposition: attachment; filename="保存时的文件名.pdf"'); 在谷歌、火狐等浏览器中,Content-type 的设置貌似并不重要,但在 Safari 上则有不同: 当 Content-type 设置为 text/html 时,下载的文件会被自动添加上后缀 .html; 当设置为 application/x-msdownload 时,下载的文件会被自动添加后缀 .exe。 content-type 用于告诉浏览器应该以何种方式处理文件。浏览器会尽量以可识别的方式来打开它 ...