- 博客(53)
- 收藏
- 关注
RSS订阅原创 重拾jest
Apiglobalexpectmock functionjest objectcli配置jest不支持es6模块语法，配置babelbabel配置jest会自动添加process.env.NODE_ENV === 'test'环境变量ts配置webpack配置jest 配置jest --init初始化jest.config.jsget start异步callback不加done，则会在fetchData执行完立马结束测试。不会等cal
2020-07-21 14:35:12
231
原创 如何调试node_modules中的包
问题本地开发需要调试node_modules中包。这个时候该如何调试呐？本文假设该包clone到本地，或者你就是该包的作者解决npm linknpm link解释使用步骤假设有个项目 projcet,引用了packageA,如何调试project项目 node_modules中的packageA切到packageA目录,npm link(可能需要加sudo)切到project目录，npm link packageA...
2020-06-17 19:49:36
5901
原创 多个react实例报错解决
问题开发了一个根据jsonSchema渲染表单的库babel-form，在其他项目中使用并调试babel-form时出现hooks报错。排查发现是因为使用了多个react版本。注意：本文场景是一个项目引用了babel-form，并且npm link之后发生的报错。所以下面只是讲开发环境的解决。解决babel-form中将react和react-dom都移到peerDependencieswebpack配置alias{ alias:{ react:path.resolve('.
2020-06-17 19:45:15
1136
原创 package.json字段详解
本文主要介绍常见package.json字段的含义。{ //发布时候的包名 @xxx是代表范围包 "name": "@xxx/package", //发布时候的包版本 "version": "1.0.0", //包的描述 "description": "xxx", //包私有，无法发布到npm "private":true, //包的关键字 用于npm搜索 "keywords": [ "xxx", "xxx" ], //包的主页url "homepage"
2020-06-09 17:15:00
4132
原创 css3 attr属性实现元素hover展示不确定的值
接到一个需求，楼层hover时候展示当前楼层的name和order。方案一 js这个我就不细讲了，不是这边文章想要讲的方案二 css3 attr属性对浏览器兼容不是很在意可以使用。什么是attrCSS表达式 attr() 用来获取选择到的元素的某一HTML属性值，并用于其样式。它也可以用于伪元素，属性值采用伪元素所依附的元素。 – MDNMDN建议用于content，其它还在实验中。用法// react组件 <div data-name={`${name}`} cl
2020-06-03 14:35:28
312
原创 momorepo实践
monorepo什么是monorepo和multirepoWhat Is a Monorepo?monorepo有啥优缺点Why startups need to use monorepo in 2019?Advantages of monoreposAwesome MonorepoMonorepos in GitREPO 风格之争：MONO VS MULTIWhy is Babel a monorepo?基于lerna实践monorepoNodeJS：Lerna
2020-05-29 22:04:15
537
原创 使用ajv-keywords给json schema添加自定义关键字
JSON Schema的关键字太少，有些默认的校验无法满足效果，需要自定义校验关键字，ajv-errors提供一些常见的validator关键字用法var Ajv = require('ajv');var ajv = new Ajv({$data:true});//添加所有的关键字require('ajv-keywords')(ajv);//只添加instanceof关键字require('ajv-keywords')(ajv, 'instanceof');//添加多个关键字requi.
2020-05-12 11:25:24
1517
原创 使用ajv校验json schema
使用ajv-errors生成json-schema错误信息ajv-errors给Json-schema添加了一个errorMessage关键字,通过这个关键字来输出错误信息const Ajv = require('ajv')const ajv = new Ajv({ allErrors: true, jsonPointers: true })require('ajv-errors')(ajv)//一个json schema规范的对象const schema = {}//待校验的json对象c
2020-05-12 11:24:35
2524
原创 json schema文档
类型typeNumber/string/boolean/object/array/null字符串、字符串数组形式stringminLength 非负数maxLength 非负数pattern 正则‘format常用格式日期邮件主机名ipuri正则表达式…number/integer(整数)multipleOf 倍数X ≥minimumx >exclusiveMinimumX ≤maximumx <exclusiveMaximu
2020-05-11 18:00:13
831
原创 webpack源码初探
本文只是笔者初次学习webpack源码所写（感谢依柳诚提供的阅读webpack源码的思路），供以后精读作目录使用。vscode debuglib/index.js入口lib/webpack.jsconst webpack = require('../lib/index.js') // 直接使用源码中的webpack函数const config = require('./webpack.config')const compiler = webpack(config)校验op
2020-05-09 17:57:46
308
原创 webpack Tapable
const { SyncHook, SyncBailHook, SyncWaterfallHook, SyncLoopHook, AsyncParallelHook, AsyncParallelBailHook, AsyncSeriesHook, AsyncSeriesBailHook, AsyncSeriesWaterfallHook } = require("tapable...
2020-05-08 16:58:36
208
原创 html使用label添加onClick事件触发两次
<label className="modal-tip--erveryday" onClick={onClickModal}> <input type="checkbox"></input> <span>今日不再提醒</span></label>上述代码会导致click事件触发两次。因为input的click时间...
2020-05-06 10:19:24
1080
原创 webpack使用@import引入‘~xxx’stylus文件失败
解决方案：详见webpack resolve.module章节~默认查找node_modules中包
2020-04-01 15:35:57
969
原创 Jenkins配合webhook实现push,自动构建并发送邮件
Jenkins安装java8 jdksudo apt-get updatesudo apt-get install openjdk-8-jdkgit安装jenkinssudo apt-get updatesudo apt-get install jenkins问题：在ubuntu 18.04上测试发现。使用官网linux ununtu安装方法安装之后。启动jenki...
2020-03-27 18:57:12
886
原创 一键删除远程或者本地合并到master的分支
git branch --merged|–no-merged [分支名]参数解释--merged查询已经合并到当前分支的分支名--no-merged查询未合并到当前分支的分支名分支名不加，则默认为当前分支git branch --merged master查看本地已经合并到master分支git branch -r --merged origin/master查询所有已经合并到远程m...
2020-01-10 18:18:51
577
原创 npm包的发布
README.md编写包的介绍文档发布#登录npm login#输入用户名密码#发布npm publish包版本的更新当前版本为1.0.0，修改本地版本npm version patch 版本变为1.0.1npm version minor版本变为1.1.0npm version major版本变为2.0.0git tag#附注标签git tag -a 标签(一...
2019-12-31 14:51:07
175
原创 expect脚本
expect介绍expect 是一个用来处理交互的命令。借助 expect 可以将交互过程写在一个脚本里，就可以实现自动化完成，无须用户输入mac下安装安装homebrewbrew install expect 安装expect启用选项-c:执行脚本前先执行的命令，可多次使用。-d:debug模式，可以在运行时输出一些诊断信息，与在脚本开始处使用exp_internal ...
2019-12-09 17:07:06
489
原创 shell前端软件包管理器 yum
linux yum 命令yum（ Yellow dog Updater, Modified）是一个在Fedora和RedHat以及SUSE中的Shell前端软件包管理器。基於RPM包管理，能够从指定的服务器自动下载RPM包并且安装，可以自动处理依赖性关系，并且一次安装所有依赖的软体包，无须繁琐地一次次下载、安装。yum提供了查找、安装、删除某一个、一组甚至全部软件包的命令，而且命令简洁而又好...
2019-12-09 14:00:31
286
原创 enzyme初探
本文为enzyme初次学习笔记，持续更新。。。选择器css选择器react组件function MyComponent() { return <div />;}// find instances of MyComponentconst myComponents = wrapper.find(MyComponent);react displaymef...
2019-11-20 16:54:45
758
原创 jest单元测试
globalafterAll(fn, timeout)该文件中的所有测试完成后，运行一个函数；timeout：中止之前要等待的时间afterEach(fn, timeout)该文件中的每个测试完成后，运行一个函数beforeAll(fn, timeout)运行此文件中的任何测试之前，运行一个函数beforeEach(fn, timeout)运行此文件中的每个测试之前运行一个...
2019-11-11 00:18:04
633
原创 使用create-react-app开发Chrome插件
chrome插件下面是我学习谷歌插件开发时看的一些文档博客使用React.js开发Chrome插件Chrome插件(扩展)开发全攻略manifest.json字段解释中文文档英文官方文档图灵Chrome扩展及应用开发谷歌插件都一个清单manifest.json文件，该文件具体编写请看我写的另一篇文章create-react-app初始化npx create-react-ap...
2019-10-29 12:01:30
842
原创 谷歌扩展程序manifest.json常用字段解释
后台网页[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-F1qRFM8v-1572253042329)(/Users/jiangxiaowei/Library/Application Support/typora-user-images/image-20191028165342691.png)]用户界面[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来...
2019-10-28 16:59:00
754
原创 puppeteer
本文为使用puppeteer进行自动化测试的实践总结，持续更新。puppeteer用途网页截图或者生成 PDF爬取 SPA 或 SSR 网站UI 自动化测试，模拟表单提交，键盘输入，点击等行为捕获网站的时间线，帮助诊断性能问题创建一个最新的自动化测试环境，使用最新的 js 和最新的 Chrome 浏览器运行测试用例测试 Chrome 扩展程序常见用法...
2019-10-24 14:40:23
436
转载 深入理解js事件循环机制（浏览器篇）
本文非原创，原文请点击查看抛在前面的问题：单线程如何做到异步事件循环的过程是怎样的macrotask 和 microtask 是什么，它们有何区别单线程和异步提到js，就会想到单线程，异步，那么单线程是如何做到异步的呢？概念先行，先要了解下单线程和异步之间的关系。js的任务分为 同步 和 异步 两种，它们的处理方式也不同，同步任务是直接在主线程上排队执行，异步任务则会被放到任务队...
2019-10-18 10:30:35
686
1
原创 git常见命令
本文是阅读git的gitbook的笔记本地文件(本地工作目录)=> git add .=>暂存区(index索引区)=>git commit=>git仓库=>git push=>git远程仓库Git 基础查看某个命令的帮助git help xxx克隆远程仓库并重置本地仓库命名git clone 远程仓库地址 【本地命名】合并add和co...
2019-09-23 16:01:31
213
原创 使用Storybook管理UI库
babel-ui库介绍babel-ui是通天塔可视化使用ui库。目前有Alert、Alink、Button、Checkbox、Messages、Modal、ToolTip等组件而这个对于可视化经常使用的ui库，却有以下两个糟点没有文档介绍各个组件具体使用方法目前为止一直没有文档介绍组件的使用方法。这就导致每次开发都需要去看各个组件的propTypes，甚至去看各个组件的源码实现。...
2019-09-09 09:44:48
4078
原创 MutationObserver
MutationObserverMutationObserver接口提供了监视对DOM树所做更改的能力。它被设计为旧的Mutation Events功能的替代品，该功能是DOM3 Events规范的一部分。简单来讲就是使用Mutationboserver可以监听dom节点的属性变化，节点的删除增加等一系列变化那MutationObserver有啥用呐？页面水印的制作防止水印被用户...
2019-08-12 22:38:40
1610
原创 sessionStorage详解
待整理什么是sessionStorage不同tab之间sessionStorage是否共享？sessionStorage 的数据会在同一网站的多个标签页之间共享吗？这取决于标签页如何打开什么是会话window.open || 点击链接打开的页面 sessionStorage是否共享？原页面和sessionstorage是否属于两个会话什么是顶级浏览器上下文https://html.sp...
2019-08-07 11:36:25
33928
1
原创 DOMContentLoaded和load事件的区别
区别DOMContentLoaded事件页面dom加载完成触发，无需等待后续图片等资源load事件整个页面所有资源加载完成之后触发；load一定在DOMContentLoaded之后触发...
2019-08-06 23:57:13
844
原创 css direction属性
csss direction属性用来控制元素内文本的方向，有ltr和rtl两个常用值//classname为a的元素内问本内容方向从左往右.a{ direction:ltr}//classname为b的元素内文本内容方向从右往左.b{ direction:rtl}...
2019-08-06 23:25:19
343
原创 原生JS forEach()和map()遍历的区别
原生JS forEach()和map()遍历共同点： 1.都是循环遍历数组中的每一项。 2.forEach() 和 map() 里面每一次执行匿名函数都支持3个参数：数组中的当前项item,当前项的索引index,原始数组input。 3.匿名函数中的this都是指Window。 4.只能遍历数组。forEach()不可中途跳出循环或者return...
2019-08-05 23:00:13
178
原创 encodeURI和encodeURIComponent
encodeURI编码encodeURI 会替换所有的字符，但不包括以下字符类型包含保留字符; , / ? : @ & = + $非转义的字符字母 数字 - _ . ! ~ * ' ( )数字符号#解码decodeURIencodeURIComponent编码encodeURIComponent 转义除了字母、数字、(、)、.、!、~、*...
2019-08-05 21:59:22
225
原创 dom.querySelector和document.getElementById区别
、document.getElementById可以查询纯数字的iddom.querySelectordocument.querySelectorAll(’[id=“111”]’)在某个dom下寻找相应选择器的元素背景产品反馈项目系统模板复制之后，元素无法拖拽。经排查发现元素继承自move组件。而每个元素绑定的id竟然纯数字；复制模板之后由于项目的复杂性无法统一的对复制出...
2019-08-05 21:22:19
1495
原创 post数据加号和&号变空格
产品发公告时突然发现 广告+商品 的+号不见了，但是编辑器里面是有的。打开控制台看到network的查询公告接口的 view source是有加号的，排除接口调用前对+号做了replace。查询发现，url转码会对+号以及&号进行空格替换。解决办法：使用encodeURIComponent对数据进行编码直接使用转义字符%2B、%26分别替代+和&...
2019-07-09 16:34:47
3678
原创 hash和chunkhash、contenthash区别
hashhash是跟整个项目的构建相关，只要项目里有文件更改，整个项目构建的hash值都会更改，并且全部文件都共用相同的hash值chunkhashchunkhash根据不同的入口文件(Entry)进行依赖文件解析、构建对应的chunk，生成对应的哈希值。我们在生产环境里把一些公共库和程序入口文件区分开，单独打包构建，接着我们采用chunkhash的方式生成哈希值，那么只要我们不改动公共库的...
2019-07-09 09:19:25
493
原创 Onject.keys获取对象的属性是无序的
Object.keys返回对象的属性数组是无序的。MDN定义如下：Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和使用 for...in 循环遍历该对象时返回的顺序一致而for….in以任意序迭代一个对象的属性。ECMA-262（ECMAScript）第三版中描述，for-in 语句的属性遍历的顺序是由对象定义时属性的书写顺序...
2019-06-20 10:59:02
1119
原创 nodejs中exports和module.exports区别
众所周知，nodejs使用的是commonjs规范Module.exports 暴露接口require引入模块服务器端同步执行CommonJS规范module对象每个模块内部，都有一个module对象，代表当前模块module.id //模块的识别符，通常是带有绝对路径的模块文件名。module.filename //模块的文件名，带有绝对路径。module.loaded ...
2019-06-18 15:35:29
532
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人