20190723 前端开发日报

web技巧(15);JavaScript 中的闭包函数;深入研究js中的位运算及用法;写给后端同学的Vue;文件 package.JSON 的说明文档;webpack入门学习手记(五);Re:从零写一个基于JS Proxy的断言库[JavaScript];手把手让你像使用vuex一样测试vuex

  1. Web技巧(15) 上一期咱们围绕着Web动画展开,其中有的动画对部分用户群体会造成不良的反应,会引起 癫痫 。为此,为了避免这种现象出现,可以使用条件CSS中 @media 中的 prefers-reduced-motion 条件来做处理。除此之外, prefers-reduced-motion 在 <picture> 元素中还有一些小技巧,可以帮我们做一些其他有意义的事情。这一期...
  2. JavaScript 中的闭包函数 这周看了 《JavaScript 高级程序设计》 的第七章,讲到了 JavaScript 中的一等公民 - 函数的一些特性,在这里进行一下总结。 在一个函数中返回另外一个函数,当我们调用这个函数,我们称调用的这个函数是 外部函数 ,其返回的函数是 内部函数 ,但是问题来了,正常的情况下,一个函数调用结束时,其内部定义的变量...
  3. 深入研究js中的位运算及用法位运算是在数字底层(即表示数字的 32 个数位)进行运算的。由于位运算是低级的运算操作,所以速度往往也是最快的(相对其它运算如加减乘除来说),并且借助位运算有时我们还能实现更简单的程序逻辑,缺点是很不直...
  4. 写给后端同学的vue文章内,图片很多,占据了一定的篇幅。有写后台的哥们说,vue怎么写,怎么新建一个vue项目,然后我想了想,觉得写一个面向后台同学的vue教程也是有必要,文章中几乎没讲css和vue细节处理的相关内容,减少接受不必...
  5. 文件 package.json 的说明文档 你的 package.json 中最重要的两个字段是 name 和 version ,如果没有它们,您的包将无法安装。 name 和 version 字段一起用于创建唯一ID。 name { "name": "my-awesome-package" } 复制代码 这是您的 包 的名称。 它在URL中使用,作为参数命令行,以及 node_modules 中的目录名...
  6. webpack入门学习手记(五)前几天朋友聚餐突然想到,再过不到半年时间,第一批20后即将出生。这种感觉就像是,现在的90后看60后~ 一不小心我们这些90后在20后的眼中就变成了上个世纪的人。o(╯□╰)o
  7. Re:从零写一个基于JS Proxy的断言库[JavaScript] 什么是断言库,如何使用它们,或是如何写一个自己的断言库。 这篇文章的主要目的是展示构建一个简易JS测试库的过程。该库有着自己的测试函数,也可以传入自定义的测试函数,支持链式调用。我们先来实现库的基本功能,随后会使用js proxy来提高库的性能。 什么是断言库 如果你曾使用过 mocha,chai,assert 或是 je...
  8. 手把手让你像使用vuex一样测试vuex vuex 怎么单元测试,我们只能通过检验state的值是否符合预期来测试,所以,正常的套路应该是测试mutation,然后看看对应的state是否发生了符合预期的变化。没错。原文地址 vue单元测试vuex,mutation,尤其是actions、getters怎么测?让你像使用vuex一样测试vuex mutation 怎么测 比如这种 SET_LIST(state, paylo...
  9. NodeJs简明教程(6)crypto 模块提供了加密功能,包括对 OpenSSL 的哈希、HMAC、加密、解密、签名、以及验证功能的一整套封装。
  10. 在 Laravel 项目中使用 webpack-encore看过我之前写过的博客的应该知道我一直是 laravel-mix 的死忠粉,有好几篇文章都是关于它的。每每提到 laravel-mix 时更是不吝溢美之词。然而就在大概一个月前,我却决定不再使用它,而转投 webpack-encore 阵营。
  11. 异步操作(三)promisePromise 的含义基本用法Promise.prototype.then()Promise.prototype.catch()Promise.prototype.finally()Promise.all()Promise.race()Promise.resolve()Promise.reject()应用Promise.try()
  12. 使用Node做一个简单的聊天室(附webSocket教程)之前一直在讲理论玩,这次说点干货吧。顺带说一下,那个从零单排vue系列,过些日子再写吧。尤神终究是尤神,一时半会儿也确实难以把vue整个模拟出来。
  13. 使用 Babel 进行抽象语法树操作 wiki: 抽象语法树( Abstract Syntax Tree,AST ),或简称语法树( Syntax tree ),是源代码语法结构的一种抽象表示。 它以树状的形式表现编程语言的语法结构,树上的每个节点都表示源代码中的一种结构。 之所以说语法是“抽象”的,是因为这里的语法并不会表示出真实语法中出现的每个细节。 在我们前端,可以通过 Ja...
  14. 再谈JavaScript模块化 模块通常是指编程语言所提供的代码组织机制,利用此机制可将程序拆解为独立且通用的代码单元。 模块化主要是解决代码分割、作用域隔离、模块之间的依赖管理以及发布到生产环境时的自动化打包与处理等多个方面。 javascript应用日益复杂,模块化已经成为一个迫切需求。但是作为一个模块化方案,它至少要解决如下问题...
  15. webpack4自定义项目脚手架 这个脚手架时基于 webpack 4.36.1 ,配置部分可能跟 webpack3 版本有冲突,过程之中会提出。现在主要 webpack 配置主要分打包环境和开发环境,分别对应 webpack.dev.conf.js 和 webpack.prod.conf.js 。后面会利用 webpack-merge 把两部分公用的环境配置抽取到 webpaack.base.conf.js 。其中 dist 目录下是打包环境打包的...
  16. 教你 30 秒发布一个 TypeScript 包到 NPM这篇文章要求你有一定的 JS 、TS 和 NPM 的知识,如果你写过普通的 NPM 包就更好啦~如果没有的话网上也很多教程的,都很简单~
  17. web端 Monkeytest 工具 gremlins 在网上检索 monkey test 扑面而来的信息基本都是关于Android命令行工具 monkey test 的相关内容。那么有没有web端的 monkey test 工具呢?答案是肯定的。接下来将介绍今天的主角 gremlins 一个用JavaScript编写的强大的web端Monkeytest库。 开门见山 其最基本的用法如下,一行代码就可以对当前站点执行 monkey tes...
  18. Angular开发布局利器:Angular Flex Layout 要在Angular CLI项目中使用@angular/flex-layout相当简单,只需要两个步骤: npm install --save @angular/flex-layout // src/app/app.module.ts import {NgModule} from '@angular/core'; import {FlexLayoutModule} from '@angular/flex-layout'; @NgModule({ imports: , ... }) ...

关注github前端日报 订阅精彩文章

前端日报栏目数据来自码农头条,每日分享互联网上热门的前端开发、移动开发、设计、资源和资讯等,为开发者提供动力,如果觉得内容对你有用,记得分享给你的小伙伴。进入码农头条查看更多

原文:20190723 前端开发日报 ,未经许可,禁止转载。
来源:前端开发博客 (http://caibaojian.com/fe-daily-20190723.html)