Category Archives: Frontend

CSS translate3d(x,y,z)

translate3d方法用来规定指定元素在三维空间中的位移。用法比较简单，本文将通过一段代码实例动态演示translate3d的效果。与二维空间位移相比多Z轴的位移，具体参阅CSS3 translate(x,y)一章节。 transform变换更多内容参阅CSS3 2D/3D转换一章节。语法结构：

1	transform:translate3d(x,y,z)

参数解析：（1）.x：表示在x轴方向的位移。（2）.y：表示在y轴方向的位移。（3）.z：表示在z轴方向的位移。代码实例如下：

<!DOCTYPE html>

<html>

<head>

<style>

#box{

position:relative;

height:150px;

width:150px;

margin-left:450px;

margin-top:250px;

padding:10px;

border:1px solid black;

perspective:1200px;

}

#ant{

width:100px;

height:100px;

text-align:center;

line-height:100px;

font-size:12px;

border:1px solid black;

background-color:yellow;

transform:translate3d(0px,0px,0px);

}

table{

font-size:12px;

width:500px;

margin-left:220px;

text-align:left;

}

.left{

text-align:right;

width:150px;

}

</style>

function change(x,y,z){

var odiv = document.getElementById("ant");

var oshow = document.getElementById("show");

odiv.style.transform = "translate3d(" + x + "px," + y + "px," + z + "px)";

oshow.innerHTML = x_range.value + "/" + y_range.value + "/" + z_range.value;

}

window.onload=function(){

var x_range = document.getElementById("x_range");

var y_range = document.getElementById("y_range");

var z_range = document.getElementById("z_range");

x_range.onmousemove = function () {

change(x_range.value, y_range.value, z_range.value);

}

y_range.onmousemove = function () {

change(x_range.value, y_range.value, z_range.value);

}

z_range.onmousemove = function () {

change(x_range.value, y_range.value, z_range.value);

}

</script>

</head>

<body>

</div>

<table>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

上面的代码结合JavaScript演示了translate3d方法的功能。特别说明：如果不使用perspective属性，将看不到z轴演示效果，因为3D场景就不会有景深的Z轴。 perspective属性参阅CSS3 perspective一章节。 translate3d方法也可以拆分单独写:

transform:translateX(10px);

transform:translateY(20px);

transform:translateZ(30px);

from:http://www.softwhy.com/article-8720-1.html

龙生 04 Jan 2020

View Details

Vue HTML5 History 模式

vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。

const router = new VueRouter({

mode: 'history',

routes: [...]

})

当你使用 history 模式时，URL 就像正常的 url，例如 http://yoursite.com/user/id，也好看！不过这种模式要玩好，还需要后台配置支持。因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404，这就不好看了。所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。 #后端配置例子 #Apache

RewriteEngine On

RewriteBase /

RewriteRule ^index\.html$ - [L]

RewriteCond %{REQUEST_FILENAME} !-f

RewriteCond %{REQUEST_FILENAME} !-d

RewriteRule . /index.html [L]

</IfModule>

除了 mod_rewrite，你也可以使用 FallbackResource。 #nginx

location / {

try_files $uri $uri/ /index.html;

}

#原生 Node.js

const http = require('http')

const fs = require('fs')

const httpPort = 80

http.createServer((req, res) => {

fs.readFile('index.htm', 'utf-8', (err, content) => {

if (err) {

console.log('We cannot open "index.htm" file.')

}

res.writeHead(200, {

'Content-Type': 'text/html; charset=utf-8'

})

res.end(content)

})

}).listen(httpPort, () => {

console.log('Server listening on: http://localhost:%s', httpPort)

})

#基于 Node.js 的 Express 对于 Node.js/Express，请考虑使用 connect-history-api-fallback 中间件。 #Internet Information Services (IIS) 安装 IIS UrlRewrite 在你的网站根目录中创建一个 web.config 文件，内容如下：

<?xml version="1.0" encoding="UTF-8"?>

<system.webServer>

<rules>

</conditions>

</rule>

</rules>

</rewrite>

</system.webServer>

</configuration>

#Caddy

rewrite {

regexp .*

to {path} /

}

#Firebase 主机在你的 firebase.json 中加入：

{

"hosting": {

"public": "dist",

"rewrites": [

{

"source": "**",

"destination": "/index.html"

}

]

}

#警告给个警告，因为这么做以后，你的服务器就不再返回 404 错误页面，因为对于所有路径都会返回 index.html 文件。为了避免这种情况，你应该在 Vue 应用里面覆盖所有的路由情况，然后在给出一个 404 页面。

const router = new VueRouter({

mode: 'history',

routes: [

{ path: '*', component: NotFoundComponent }

]

})

或者，如果你使用 Node.js 服务器，你可以用服务端路由匹配到来的 URL，并在没有匹配到路由的时候返回 404，以实现回退。更多详情请查阅 Vue 服务端渲染文档。 from:https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90

龙生 03 Jan 2020

View Details

vue-输入框change事件并获取值

1.html

<input type="text" @change="specifiName($event)" />//输入框的change事件

<input type="text" @input="specifiName($event)" />//输入框的输入事件

<input type="text" @keyup.enter="specifiName($event)" />//输入框的回车事件

2.js

var vm = new Vue({

el: "#app",

methods: {

specifiName(e) {

var that = this;

var val = e.target.value;

console.log(val);

}

});

from:https://www.cnblogs.com/zhizou/p/10648513.html

龙生 19 Dec 2019

View Details

vue中v-show和v-if的异同

一、官方解释： v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。 v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。二、个人理解：相同点：v-show和v-if都能控制元素的显示和隐藏。不同点：实现本质方法不同 v-show本质就是通过设置css中的display设置为none，控制隐藏 v-if是动态的向DOM树内添加或者删除DOM元素编译的区别 v-show其实就是在控制css v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件编译的条件 v-show都会编译，初始值为false，只是将display设为none，但它也编译了 v-if初始值为false，就不会编译了性能 v-show只编译一次，后面其实就是控制css，而v-if不停的销毁和创建，故v-show性能更好一点。注意点：因为v-show实际是操作display:" "或者none，当css本身有display：none时，v-show无法让显示总结：如果要频繁切换某节点时，使用v-show（无论true或者false初始都会进行渲染，此后通过css来控制显示隐藏，因此切换开销比较小，初始开销较大），如果不需要频繁切换某节点时，使用v-if（因为懒加载，初始为false时，不会渲染，但是因为它是通过添加和删除dom元素来控制显示和隐藏的，因此初始渲染开销较小，切换开销比较大） from:https://www.cnblogs.com/liutianzeng/p/10978890.html

龙生 13 Dec 2019

View Details

Vue.js学习笔记之修饰符详解

本篇将简单介绍常用的修饰符。在上一篇中，介绍了 v-model 和 v-on 简单用法。除了常规用法，这些指令也支持特殊方式绑定方法，以修饰符的方式实现。通常都是在指令后面用小数点“.”连接修饰符名称。一、v-model的修饰符 v-model 是用于在表单表单元素上创建双向数据绑定的指令。在 <input> 和 <textarea> 上，默认通过监听元素的 input 事件来更新绑定的属性值。为了能明显的看到绑定属性值的变化，需要在Chrome浏览器中安装Vue Devtools扩展程序。当查看Vue开发的页面时，按F12就可以在开发者工具里看到Vue页签。这里需要注意，只有在引用Vue的开发版本文件，即vue.js文件时，Vue Devtools工具才能正常使用。 .lazy 首先在 vm 对象中增加需要绑定的属性 1 2 3 4 5 6 var vm = new Vue({ el: "#app", data: { input_lazy: "" } }); 在页面中的 input 的元素上添加指令 1 2 3 4 <div class="row"> <h2>v-model.lazy</h2> <input type="text" v-model.lazy="input_lazy" /> </div> 打开页面，开启Vue Devtools，在文本框中输入字符，查看属性值变化当在文本框输入内容，并且光标焦点没有离开文本框时，属性值没有实时发生变化而当焦点离开文本框时，属性值发生了变化并与文本框内容保持一致。从这个例子可以看出 .lazy 修饰符延迟了同步更新属性值的时机。即将原本绑定在 input 事件的同步逻辑转变为绑定在 change 事件上。 .number 该修饰符用来将输入内容自动转换成数值。在 vm 对象里增加一个属性，默认为空字符串 1 2 3 4 5 6 var vm = new Vue({ el: "#app", data: { input_number: "" } }); 在页面的 input 元素上添加指令 1 2 3 4 5 <div class="row"> <h2>v-model.number</h2> <input type="text" v-model.number="input_number" /> <hr /> […]

龙生 12 Dec 2019

View Details

前端JavaScript规范

JavaScript规范目录类型对象数组字符串函数属性变量条件表达式和等号块注释空白逗号分号类型转换命名约定存取器构造器事件模块 jQuery ES5 兼容性 HTML、CSS、JavaScript分离使用jsHint 前端工具类型原始值: 相当于传值(JavaScript对象都提供了字面量)，使用字面量创建对象。 string number boolean null undefined

var foo = 1,

bar = foo;

bar = 9;

console.log(foo, bar); // => 1, 9

复杂类型: 相当于传引用 object array function

var foo = [1, 2],

bar = foo;

bar[0] = 9;

console.log(foo[0], bar[0]); // => 9, 9

对象使用字面值创建对象。

// bad

var item = new Object();

// good

var item = {};

不要使用保留字 reserved words 作为键。

// bad

var superman = {

class: 'superhero',

default: { clark: 'kent' },

private: true

};

// good

var superman = {

klass: 'superhero',

defaults: { clark: 'kent' },

hidden: true

};

数组使用字面值创建数组。

// bad

var items = new Array();

// good

var items = [];

如果你不知道数组的长度，使用push。

var someStack = [];

// bad

someStack[someStack.length] = 'abracadabra';

// good

someStack.push('abracadabra');

当你需要拷贝数组时使用slice. jsPerf。

var len = items.length,

itemsCopy = [],

i;

// bad

for (i = 0; i < len; i++) {

itemsCopy[i] = items[i];

}

// good

itemsCopy = items.slice();

使用slice将类数组的对象转成数组。

function trigger() {

var args = [].slice.apply(arguments);

...

}

字符串对字符串使用单引号 "（因为大多时候我们的字符串。特别html会出现"）。

// bad

var name = "Bob Parr";

// good

var name = 'Bob Parr';

// bad

var fullName = "Bob " + this.lastName;

// good

var fullName = 'Bob ' + this.lastName;

超过80(也有规定140的，项目具体可制定)个字符的字符串应该使用字符串连接换行。注: 如果过度使用，长字符串连接可能会对性能有影响。

// bad

var errorMessage = 'This is a super long error that was thrown because of Batman. When you stop to think about how Batman had anything to do with this, you would get nowhere fast.';

// bad

var errorMessage = 'This is a super long error that \

was thrown because of Batman. \

When you stop to think about \

how Batman had anything to do \

with this, you would get nowhere \

fast.';

// good

var errorMessage = 'This is a super long error that ' +

'was thrown because of Batman.' +

'When you stop to think about ' +

'how Batman had anything to do ' +

'with this, you would get nowhere ' +

'fast.';

编程时使用join而不是字符串连接来构建字符串。

var items,

messages,

length, i;

messages = [{

state: 'success',

message: 'This one worked.'

},{

state: 'success',

message: 'This one worked as well.'

},{

state: 'error',

message: 'This one did not work.'

}];

length = messages.length;

// bad

function inbox(messages) {

items = '<ul>';

for (i = 0; i < length; i++) {

items += '<li>' + messages[i].message + '</li>';

}

return items + '</ul>';

}

// good

function inbox(messages) {

items = [];

for (i = 0; i < length; i++) {

items[i] = messages[i].message;

}

return '<ul><li>' + items.join('</li><li>') + '</li></ul>';

}

函数函数表达式:

// 匿名函数表达式

var anonymous = function() {

return true;

};

// 有名函数表达式

var named = function named() {

return true;

};

// 立即调用函数表达式

(function() {

console.log('Welcome to the Internet. Please follow me.');

})();

绝对不要在一个非函数块里声明一个函数，把那个函数赋给一个变量。浏览器允许你这么做，但是它们解析不同。注: ECMA-262定义把块定义为一组语句，函数声明不是一个语句。阅读ECMA-262对这个问题的说明。

// bad

if (currentUser) {

function test() {

console.log('Nope.');

}

// good

if (currentUser) {

var test = function test() {

console.log('Yup.');

};

}

绝对不要把参数命名为 arguments, 这将会逾越函数作用域内传过来的 arguments 对象。

// bad

function nope(name, options, arguments) {

// ...stuff...

}

// good

function yup(name, options, args) {

// ...stuff...

}

属性当使用变量和特殊非法变量名时，访问属性时可以使用中括号（. 优先）。

var luke = {

jedi: true,

age: 28

};

function getProp(prop) {

return luke[prop];

}

var isJedi = getProp('jedi');

变量总是使用 var 来声明变量，如果不这么做将导致产生全局变量，我们要避免污染全局命名空间。

// bad

superPower = new SuperPower();

// good

var superPower = new SuperPower();

使用一个 var 以及新行声明多个变量，缩进4个空格。

// bad

var items = getItems();

var goSportsTeam = true;

var dragonball = 'z';

// good

var items = getItems(),

goSportsTeam = true,

dragonball = 'z';

最后再声明未赋值的变量，当你想引用之前已赋值变量的时候很有用。

// bad

var i, len, dragonball,

items = getItems(),

goSportsTeam = true;

// bad

var i, items = getItems(),

dragonball,

goSportsTeam = true,

len;

// good

var items = getItems(),

goSportsTeam = true,

dragonball,

length,

i;

在作用域顶部声明变量，避免变量声明和赋值引起的相关问题。

// bad

function() {

test();

console.log('doing stuff..');

//..other stuff..

var name = getName();

if (name === 'test') {

return false;

}

return name;

}

// good

function() {

var name = getName();

test();

console.log('doing stuff..');

//..other stuff..

if (name === 'test') {

return false;

}

return name;

}

// bad

function() {

if (!arguments.length) {

return false;

}

var name = getName();

return true;

}

// good

function() {

var name = getName();

if (!arguments.length) {

return false;

}

return true;

}

[…]

龙生 12 Dec 2019

View Details

gulp基本操作

1、安装淘宝镜像 npm install cnpm -g --registry=https://registry.npm.taobao.org cnpm -v 2、生成项目描述文件 package.json npm init cnpm init (可代替 npm init) （需要项目名称、版本号、描述、入口文件、运行命令、作者、证书 —- 一路按回车即可） 3、全局安装gulp cnpm i gulp@3 -g 全局安装gulp @3 代表选择了 3 的版本 i 即为 install -g 即为 --global gulp -v 4、当前目录内部安装 gulp 模块 cnpm i gulp@3 -D cnpm i gulp@3 -S （二者选择其一即可） -D 缩写 --save-dev 开发依赖 -S 缩写 --save 项目依赖开发依赖：开发过程中需要使用到的依赖的模块，项目上线时不需要的模块 — 代码格式校验的模块项目依赖：项目上线仍然需要使用的模块 —-- 如果不知道怎么选择，那你就写 -S 5、创建文件 gulpfile.js ,配置gulp

1	<span class="hljs-keyword">const</span> gulp = <span class="hljs-built_in">require</span>(<span class="hljs-string">'gulp'</span>);

5.1 创建 index.html，使用gulp完成对于index.html的复制操作，复制到当前目录的dist目录内

+++

// 复制index.html 到 dist 目录

gulp.task('copy-index', function () {

gulp.src('./index.html')

.pipe(gulp.dest('dist'))

})

命令行执行了 gulp copy-index 发现多了 dist目录 5.2 gulp/css/a.css + gulp/css/b.css 5.2.1 复制 gulp/css 至 […]

龙生 12 Dec 2019

View Details

webpack

一、什么是webpack？ webpack是一个现代JavaScript应用程序的静态模块打包器，在webpack里一切文件皆模块，通过loader转换文件，通过plugin注入钩子，最后输出由多个文件组合成的文件，webpack专注构建模块化项目。 webpack可以看做是模块打包机：他做的事情是，分析项目，找到JavaScript模块以及其他的一些浏览器不能直接运行的拓展语言（scss， TypeScript等），并将其打包为合适的格式以供浏览器使用。二、四个核心概念 entry：一个可执行文件或库的入口文件。 chunk：多个文件组成的一个代码块。例如把一个可执行文件和他所有依赖的模块组合为一个chunk，这体现了webpack的打包机制。 loader：文件转换器。例如把es6转换为es5，scss转换为css。 plugin：插件，用于扩展webpack的功能，在webpack构建生命周期的节点上加入扩展hook为webpack加入功能。三、webpack构建流程解析webpack配置参数，合并从shell传入和webpack.config.js文件里配置的参数，生产最后的配置结果。注册所有配置的插件，好让插件监听webpack构建生命周期的事件节点，以做出对应的反应。从配置的entry入口文件开始解析文件构建AST语法树，找出每个文件所依赖的文件，递归下去。在解析文件递归的过程中根据局文件类型和loader配置找出合适的loader用来对文件进行转换。递归完后得到每个文件的最终结果，根据entry配置生成代码块chunk。输出所有chunk到文件系统。四、webpack和grunt、gulp的不同 1. 概念区别：（1）gulp/grunt是一种能够优化前端的开发流程的工具。（2）webpack是一种模块化的解决方案。 2. 工作方式的区别：（1）Grunt和Gulp的工作方式是：在一个配置文件中，指明对某些文件进行类似编译、组合、压缩等任务的具体步骤。工具之后可以自动替你完成这些任务。（2）Webpack的工作方式：把你的项目当做一个整体，通过给定的主文件（如：index.js），webpack将从这个文件开始找到你的项目的所有依赖文件，使用loader处理他们，最后打包为一个（或多个）浏览器可识别的JavaScript文件。 3. 基于类型的区别（1）grunt和gulp是基于任务和流（task、stream）的。类似jQury，找到一个（或一类）文件，对其做一系列链式操作，更新流上的数据，整条链式操作构成了一个任务，多个任务就构成了整个web的构建流程。（2）webpack是基于入口的。webpack会自动地递归解析入口所需要加载的所有资源文件，然后用不同的loader来处理不同的文件，用plugin来扩展webpack功能。五、几种常见的loader file-loader：把文件数出到一个文件夹中，在代码中通过相对URL去引用输出的文件。 url-loader：和file-loader类似，但是能在文件很小的情况下以base64的方式把文件内容注入到代码中去。 source-map-loader：加载额外的source map文件，以方便断点调试。 image-loader：加载并且压缩图片文件。 babel-loader：把es6转换成es5。 css-loader：加载CSS，支持模块化、压缩、文件导入等特性。 style-loader：把CSS代码注入到JavaScript中，通过DOM操作去加载CSS。 eslint-loader：通过ESLint检查JavaScript代码。六、webpack的优缺点优点专注处理模块化的项目，能做到开箱即用，一步到位。可通过plugin扩展，完整好用又不是灵活。使用场景不局限于web开发。社区庞大活跃，经常引入紧跟时代发展的新特性，能为大多数场景找到已有的开源扩展。良好的开发体验。缺点 webpack的缺点是只能用于采用模块化开发的项目。七、什么是模块的热更新？模块热更新是webpack的一个功能，他可以使得代码修改过后不用刷新浏览器就可以更新，是高级版的自动刷新浏览器。 DevServer中通过hot属性可以控制模块的热替换。 1、通过配置文件

const webpack = require('webpack');

const path = require('path');

let env = process.env.NODE_ENV == "development" ? "development" : "production";

const config = {

mode: env,

devServer: {

hot:true

}

plugins: [

new webpack.HotModuleReplacementPlugin(), //热加载插件

module.exports = config;

2、通过命令行

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1",

"start": "NODE_ENV=development webpack-dev-server --config webpack.develop.config.js --hot",

八、懒加载（按需加载路由） webpack中提供了require.ensure()来实现按需加载。以前引入路由是通过import这样的方式引入，改为const定义的方式进行引入。不进行页面按需加载的引入方式：

1	import home from '../../common/home.vue'

进行页面按需加载的引入方式：

1	const home = r =>require.ensure([ ],() =>(require('../../common/home.vue')))

九、通过webpack处理长缓存浏览器在用户访问页面的时候，为了加快加载速度，会对用户访问的静态资源进行存储，但每一次代码升级或是更新，都需要浏览器去下载新的代码，最方便和简单的更新方式就是引入新的文件名称。在webpack中可以在output中输出的文件指定chunkhash，并且分离经常更新的代码和框架代码。通过NameModulesPlugin或是HashedModuleldsPlugin使再次打包文件名不变。作者：李丹linda 链接：https://www.jianshu.com/p/86a3c35079cc 来源：简书著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

龙生 11 Dec 2019

View Details

Jest

jest 是facebook推出的一款测试框架，集成了 Mocha，chai，jsdom，sinon等功能。安装与配置

1 2	npm install --save-dev jest npm install -g jest

运行命令 jest 后会自动运行项目下所有.test.js和.spec.js这种格式的文件。涉及到运用 ES 或 react 的，要与babel相结合，加上.babelrc文件即可。jest的配置默认只需要在package.json中配置即可，当然也可以用独立的配置文件。我们这里直接将 jest 的运行范围限定在test文件夹下，而不是全部，所以在package.json中加入如下配置：

"jest": {

"testRegex": "/test/.*.test.jsx?$"

}

注意到这里的匹配规则是正则表达式基本用法和之前介绍的 mocha 和 chai 的功能很像，甚至可以兼容部分 mocha 和 chai 的语法。可以这么写

import React from 'react'

import { shallow } from 'enzyme'

import CommentItem from './commentItem'

describe('测试评论列表项组件', () => {

// 这是mocha的玩法，jest可以直接兼容

it('测试评论内容小于等于200时不出现展开收起按钮', () => {

const propsData = {

name: 'hj',

content: '测试标题'

}

const item = shallow(<CommentItem {...propsData} />)

// 这里的断言实际上和chai的expect是很像的

expect(item.find('.btn-expand').length).toBe(0);

})

// 这是jest的玩法，推荐用这种

test('两数相加结果为两个数字的和', () => {

expect(3).toBe(3);

});

}

jest与eslint检测如果看了上面的代码会发现我没有引用任何类似于

1	import * from 'jest'

的代码，而那个expect是没有定义的。这段代码直接运行jest命令没有任何问题，但是eslint会检测出错，对于这种情况，我们可以再eslint配置文件.eslintrc中加入以下代码：

"env": {

"jest": true

jest的断言 jest有自己的断言玩法。除了前面的代码中已经写到的

1	expect(x).toBe(y)//判断相等，使用Object.is实现

还有常用的

expect({a:1}).toBe({a:1})//判断两个对象是否相等

expect(1).not.toBe(2)//判断不等

expect(n).toBeNull(); //判断是否为null

expect(n).toBeUndefined(); //判断是否为undefined

expect(n).toBeDefined(); //判断结果与toBeUndefined相反

expect(n).toBeTruthy(); //判断结果为true

expect(n).toBeFalsy(); //判断结果为false

expect(value).toBeGreaterThan(3); //大于3

expect(value).toBeGreaterThanOrEqual(3.5); //大于等于3.5

expect(value).toBeLessThan(5); //小于5

expect(value).toBeLessThanOrEqual(4.5); //小于等于4.5

expect(value).toBeCloseTo(0.3); // 浮点数判断相等

expect('Christoph').toMatch(/stop/); //正则表达式判断

expect(['one','two']).toContain('one'); //不解释

function compileAndroidCode() {

throw new ConfigError('you are using the wrong JDK');

}

test('compiling android goes as expected', () => {

expect(compileAndroidCode).toThrow();

expect(compileAndroidCode).toThrow(ConfigError); //判断抛出异常

}）

更多断言玩法 jest的 mock 介绍了jest替代mocha和chai的部分，那么接下来就看看如何替代sinon。下面是官网的示例：

function forEach(items, callback) {

for (let index = 0; index < items.length; index++) {

callback(items[index]);

}

const mockCallback = jest.fn();

forEach([0, 1], mockCallback);

// 判断是否被执行两次

expect(mockCallback.mock.calls.length).toBe(2);

// 判断函数被首次执行的第一个形参为0

expect(mockCallback.mock.calls[0][0]).toBe(0);

// 判断函数第二次被执行的第一个形参为1

expect(mockCallback.mock.calls[1][0]).toBe(1);

从上面可以看到这种玩法很类似于sinon的 sinon.spy()。当然也有类似于stub返回值的那种玩法，更多的请参考 jest mock的更多玩法 mock文件和css module的问题如果js文件中引用了css或者本地其他文件，那么就可能测试失败。为了解决这个问题，同时也为了提高测试效率：

"jest": {

"moduleNameMapper": {

"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/test/config/fileMock.js",

"\\.(css|less)$": "identity-obj-proxy"

}

而fileMock.js文件内容为：

1	module.exports = 'test-file-stub';

然后安装identity-obj-proxy即可：

1	npm install --save-dev identity-obj-proxy

jest与别名在webpack中经常会用到别名，而jest测试时，如果文件中引用了别名会出现找不到文件的问题。毕竟jest测试时没有经过webpack处理。对于以下玩法

resolve: {

alias: {

common: path.resolve(__dirname, 'plugins/common/')

}

可以通过

"jest": {

"testRegex": "./src/test/.*.test.js$",

"moduleNameMapper": {

"^common(.*)$": "<rootDir>/plugins/common$1",

}

这个和之前 mock文件和css module的问题一样，都是使用了moduleNameMapper这个属性生成测试覆盖率报告只需要在jest命令后加入 --coverage即可

1	jest --coverage

13人点赞前端单元测试作者：我向你奔链接：https://www.jianshu.com/p/eaaf07c1b88f […]

龙生 11 Dec 2019

View Details

安装cnpm后运行报cnpm : 无法加载文件 C:\Users\yizon\AppData\Roaming\npm\cnpm.ps1，因为在此系统上禁止运行脚本

安装cnpm：

1	npm install -g cnpm --registry=https://registry.npm.taobao.org

安装完成后报错：无法加载文件 C:\Users\yizon\AppData\Roaming\npm\cnpm.ps1，因为在此系统上禁止运行脚本解决：管理员身份运行power shell，再输入：

1	set-ExecutionPolicy RemoteSigned

输入A，回车 from:https://www.cnblogs.com/yifamily/p/11853259.html

龙生 11 Dec 2019

View Details

« Previous 1 … 21 22 23 … 59 Next »