- 博客(55)
- 收藏
- 关注
RSS订阅
原创 this指向及改变this指向的方法（call、apply、bind）
this指向及改变this指向的方法任何函数都有属于自己的this函数的调用方式决定了this的指向一、this指向window1）、普通函数（声明式函数）调用，此时this指向window2）、 箭头函数没有自己的this，它的this指向上下文中的this(即所处环境的this)3）、赋值式函数调用，此时this指向window4）、定时器函数，指向window//普通函数（声明式函数）function fn(){ console.log(this);//指向window}
2020-07-04 19:47:50
278
原创 react及hook路由传参
前言总结 React-Router 页面路由传参的四种方式，对比四种传参方式的优缺点，更好的去选择合适的方式去传参。1.params优点: 刷新地址栏，参数依然在。缺点: 只能传字符串且传值太多的话，url 会又长又不美观。// 定义路由匹配<Route path='/path/:name' component={Path}/>// Link组件实现跳转<link to="/path/2">xxx</Link>// history实现跳转this.
2021-09-18 16:46:01
6148
4
原创 ant的ProTable如何设置序号
ant design 的 ProTable：https://procomponents.ant.design/components/table按照文档书写代码import React, { useRef } from 'react';import { PlusOutlined, EllipsisOutlined } from '@ant-design/icons';import { Button, Tag, Space, Menu, Dropdown } from 'antd';import ty
2021-09-18 16:45:15
1697
原创 Jest的好帮手 Enzyme ,模拟事件测试 测试异常
EnzymeEnzyme是Airbnb开源的React测试工具库库，它对官方的测试工具库ReactTestUtils的二次封装，提供了一套简洁强大的 API，并内置Cheerio实现了jQuery风格的方式进行DOM 处理，开发体验十分友好。在开源社区有超高人气，同时也获得了React 官方的推荐。API: https://airbnb.io/enzyme/三种渲染方法shallow：浅渲染，是对官方的Shallow Renderer的封装。将组件渲染成虚拟DOM对象，只会渲染第一层，子组件将
2021-07-05 14:33:46
1439
原创 Jest 中的生命周期
Jest 中的生命周期在讲述生命周期前，先得了解以下内容：globals APIdescribe(name, fn)：描述块，讲一组功能相关的测试用例组合在一起it(name, fn, timeout)：别名test，用来放测试用例afterAll(fn, timeout)：所有测试用例跑完以后执行的方法beforeAll(fn, timeout)：所有测试用例执行之前执行的方法afterEach(fn)：在每个测试用例执行完后执行的方法beforeEach(fn)：
2021-07-05 11:17:40
525
转载 【转载】只用 CSS 就能做到的像素画/像素动画
【转载】只用 CSS 就能做到的像素画/像素动画如图：原文链接：box-shadowを使ってCSSだけでドット絵を描き、アニメーションさせる作者推特：bc_rikko作者的推特里面有不少例子，有能力的同学可以看一下翻译博客地址：https://ssshooter.com/css-pixel/这篇文章将会介绍只用 CSS 就能制作像素画·像素动画的方法。虽说纯 CSS 就能做到，但是为了更高的可维护性，也会顺便介绍使用 Sass 的制作方法。上面的马里奥和 Minecraft 方块都没有
2021-07-02 14:38:41
927
原创 出现TypeError: Cannot assign to read only property ‘jsx‘ of object ‘#‘
项目组一开始使用yarn 命令安装模块，后来改换为npm，一换就出问题了，一直报下面的问题。删除node_modules 包也没用。TypeError: Cannot assign to read only property 'jsx' of object '#<Object>' at verifyTypeScriptSetup (/Users/Nathan/Projects/pwa/pwa-react/pwa-react/node_modules/react-scripts/scr
2021-07-02 10:46:27
1204
3
原创 小程序苹果手机底部出现横杠处理
iphone X 手机底部会出现横杠，会影响底部的操作，可以通过判断是否是对应机型，进行不同样式的设置Taro.getSystemInfoSync() 获取系统信息同步接口。官网说明：https://taro-docs.jd.com/taro/docs/apis/base/system/getSystemInfoSync示例代码：try { const res = Taro.getSystemInfoSync() console.log(res.model) // 设备型号 cons
2021-07-01 18:01:35
1661
原创 and design 路由传参
and design 路由传参有多种方式进行路由传参，history这个history，需要在定义的函数组件中，解构获取：export default function CreateCoupon({ history, location }) {}history.push('/home/priceManagement/discount-price', { queryCouponList: true });跳转到对应router，后面带入数据跳转到页面，通过解构出location，在locati
2021-07-01 17:59:02
245
原创 关闭滚动条的css属性
内容超出容器的高宽就会生成滚动条，而滚动条影响美观，可以使用css关闭滚动条 boxClaasName { // 这层为要写样式的盒子 font-size: 34rpx; padding-bottom: 24px; max-height: 640px; ::-webkit-scrollbar { width: 0; height: 0; color: transparent; ma
2021-07-01 17:18:22
286
原创 ant design select组件 解决选项框随页面滚动分离问题
在ant design 使用过程中，发现页面内容超过一屏会出现选项框跟随滚动而滚动其实这是官方组件存在的问题，getPopupContainer 菜单渲染父节点，默认渲染到 body 上。使用getPopupContainer属性： select组件，Cascader组件使用getCalendarContainer属性： DatePicker****组件在antd的每个组件api中都有说明是使用getPopupContainer还是getCalendarContainer1，getPopupCo
2021-07-01 17:08:54
2410
原创 Jest 如何配置快照文件，生成在当前测试文件夹内
Jest 默认 生成的快照文件会放在同一的文件夹中。实际开发中我会将每个文件的快照生成在对应的文件夹中例如// src/page/invitationPack/bill -invitationPack -bill -index.less -index.tsx -index.config.js -index.test.tsx -index.test.tsx.snap首先在jest.config.js文件内配置snapshotResolver: '<root
2021-07-01 16:56:24
417
原创 Taro React Hooks 如何正确的引入Jest进行工作 一
Taro React Hooks 如何正确的引入Jest进行工作 一由于本人开发是使用React 无状态组件写法，在Taro写Jest中吃了相当多的坑，而网上基本没啥详细的写法（官网只写了一句：单元测试推荐使用Jest！我的天。）特此写下我用到过的JestTaro版本为3.0.x以上安装yarn add --dev jest//npm安装 就 npm install jest --dev // 还需要安装需要使用的enzymeyarn add --dev enzyme enzyme-ad
2021-07-01 16:40:44
1171
6
原创 Hooks Jest 的useState如何模拟，如何测试使用
我们通过 jest.spyOn 创建了一个监听 React 对象的 useState 方法的 spy。它就像间谍一样监听了所有对 React#useState 方法的调用。由于创建 spy 时，Jest 实际上修改了 React 对象的 useState 属性 it('模拟React的useState 方法，并调用', () => { const setState = jest.fn(); const useStateSpy = jest.spyOn(React, 'useSta
2021-07-01 13:47:13
2191
原创 React Hooks 组件 Jest写法
React 拥有了更加强大的 Hooks书写方式，本人公司基本都抛弃使用class组件写法，随之jest单元测试写法也有些变化。下面上一个demo// demo.jsimport React from 'react';const TestComponent = () => { const [count, setCount] = React.useState(0); return ( <h3>{count}</h3> <span>
2021-07-01 11:48:00
665
原创 Jest Mock的使用
在使用jest 单元测试中，mock 是非常重要的！1、捕获函数的调用和返回的结果，以及this和调用顺序2、它可以让我们自由的设置返回结果3、改变函数的内部实现下面介绍mock 的一些方法使用:首先需要了解：jest.fn()jest.fn()是创建Mock函数最简单的方式，如果没有定义函数内部的实现，jest.fn()会返回undefined作为返回值。test('测试jest.fn()调用', () => { let mockFn = jest.fn(); let resu
2021-07-01 11:34:06
2124
原创 Jest 常用匹配器
Jest 常用匹配器toBetoBe 使用 Object.is 判断是否严格相等。我理解为精准匹配test ('测试10与10相匹配',()=>{ // toBe 匹配引用地址相同 expect(10).toBe(10)})toEqualtoEqual 递归检查对象或数组的每个字段。匹配相同的内容test ('测试相匹配',()=>{ const a = {one:1} expect(a).toEqual({one:1})})notnot 取反；所有的匹配
2021-07-01 11:01:19
787
1
原创 Canvas 转化成图片
Canvas 转化成图片使用canvasToTempFilePathApi例如： // 生成图片，获取临时路径（得到之后，想干嘛就干嘛了） wx.canvasToTempFilePath({ canvasId: 'myQrcode', canvas: canvas, x: 0, y: 0, width: 260, // 图片指定宽高 height: 260, destWidt
2021-06-30 18:27:27
859
原创 Taro小程序如何引入微信原生小程序
在根路径中找到 app.config.ts 文件在里面的属性中定义需要引入的第三方组件如： usingComponents: { // 定义需要引入的第三方组件，如： 'wux-calendar': './components/Calendar/index', myQrcode: './components/TestQrcode/index', },之后在页面中直接使用即可如： <View> <wux-calendar id="
2021-06-30 18:15:20
1788
原创 createSelectorQuery获取对象为null
wx.createSelectorQuery().in(this).select(’#’ + id);Taro小程序同理 const query = wx.createSelectorQuery().in(this); query .select(`#${id}`) .fields({ node: true, size: true, }) .exec((res) => { .
2021-06-30 18:12:27
2210
原创 微信小程序生成canvas-2d类型的二维码
canvas画布。2.9.0 起支持一套新 Canvas 2D 接口（需指定 type 属性），同时支持同层渲染，原有接口不再维护。在目前版本中，如果使用旧canvas，开发者工具也会提示切换为canvas 2d 渲染效率更高git用户 DoctorWei基于 weapp-qrcode 修改成canvas 2d写法。下面介绍如何使用：1、先在 wxml 文件中，创建绘制的 canvas，并定义好 width, height, id , type ，其中type的值必须为2d<canvas ty
2021-06-30 17:40:36
1354
3
原创 ReactElement、ReactNode以及JSX.Element
interface PreProcessorProps {error?: boolean | BooleanFunctionloading?: boolean | BooleanFunctionchildren: React.ReactNode | RenderFunction}}const PreProcessor: React.FC = ({ children }) => {// …return children}在使用ts写React时，尴尬的遇到了这个错误不能将类型“({
2021-04-29 18:41:45
8190
原创 CSS 文本超过部分显示省略号，解决数字或英文不换行问题
1、单行文本.Text{ //记得一定要给div宽度 width:200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}2、多行文本.moreText{ //记得一定要给div宽度 width:200px; white-space: normal; overflow: hidden; text-overflow: ellipsis; display: -
2021-04-29 18:16:04
667
原创 微信小程序完全去除button默认样式
button{background-color:rgb(247, 247, 247); //可根据自己的背景颜色自行设置border-radius: 0rpx;padding:0rpx;margin:0rpx;display: inline-block;line-height: 1;}button::after{ /*button的边框样式是通过::after方式实现的*/border:none;}.button-hover{ /*点击后样式*/color:#000;back.
2021-04-29 18:15:05
1317
原创 Taro 小程序，拖拽图标功能
由 MovableArea 和 MovableView 进行书写Taro官方事例 MovableAreaTaro官方事例 MovableView具体的props 按文档上的来代码事例 <MovableArea className="home-page_move" style={{ height: 200px }}> <MovableView y="340px" x={xWidth}
2021-04-29 18:13:41
701
1
原创 Jest 单元测试 enzyme 报错信息：When using mount: Cannot read prop
报错信息：报错信息：When using mount: Cannot read property ‘child’ of undefined on React 17jest 单元测试需要 为酶倒入React新的适配器以下适配器由酵素公司正式提供，与React具有以下兼容性：Enzyme Adapter PackageReact semver compatibilityenzyme-adapter-react-16^16.4.0-0enzyme-adapter-react-16
2021-04-29 18:12:59
721
原创 eslint 出现一个报错 declaration-colon-newline-after
报错信息：Expected newline after “:” with a multi-line declaration declaration-colon-newline-after出现问题的代码： background: linear-gradient( 360deg, rgba(255, 107, 49, 1) 0%, rgba(248, 83, 62, 1) 47%, rgba(255, 219, 118, 1) 100% );
2021-04-29 18:11:32
1408
原创 如何让图片跟随div大小自动填满
1、图片与div的width和height一致（一般不同），手动调整div或图片的width和height2、div的属性设置：background:url("背景图片路径");background-size:100% 100%;background-repeat: no-repeat; // 保险起见，添加不重复属性...
2021-04-29 18:10:46
1128
原创 es6，find方法的使用
find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined；找到满足条件，后续代码不执行。用法find() 方法返回通过测试（函数内判断）的数组的第一个元素的值。如果没有符合条件的元素返回 undefinedfind() 对于空数组，函数是不会执行的。find() 并没有改变数组的原始值。array.find(function(currentValue, index, arr),thisValue)，其中currentValue为当前项
2021-04-29 18:05:52
5167
原创 认识弹性布局，熟悉弹性布局
说到弹性布局，很多人知道进行设置水平垂直居中布局，那么其他的呢？ #dad{ width: 500px; height: 500px; border: 2px solid #9a9a9a; display:flex; justify-content:center; align-items:center; } #dad div { width: 100px;
2020-09-06 21:29:49
216
原创 获取两个数之间的随机数（面试会考！）
获取两个数之间的随机数，面试会有考！前端时间，一同事去面试，信心满满的回来，我询问有啥考题？他说：写出一段代码，求m-n之间的随机数。我脑海立马就出现了这个Math.random()介绍var random = Math.random() :随机出一个0-1之间（不包含1）的小数以此类推：1.随机出一个0-10之间（不包含10）的小数：Math.random() * 10 = [0,10]随机出一个1-10之间（不包含10）的小数(Math.random() * 10)
2020-07-25 19:43:16
2124
原创 webpack无法加载文件，webpack : 无法加载文件 C:\Users\13647\AppData\Roaming\npm\webpack.ps1，因为在此系统上禁止运行脚本
webpack : 无法加载文件 C:\Users\13647\AppData\Roaming\npm\webpack.ps1，因为在此系统上禁止运行脚本。这是因为在此系统上禁止运行脚本。解决方案：以管理员身份运行vs code执行：get-ExecutionPolicy，显示Restricted，表示状态是禁止的执行：set-ExecutionPolicy RemoteSigned这时再执行get-ExecutionPolicy，就显示RemoteSigned此时发现再进行打包就没有问题了
2020-07-25 19:36:15
679
原创 跨域是什么，如何解决跨域？
跨域问题1、什么跨域？跨域指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对javascript施加的安全限制。同源策略：是指协议、域名、端口都要相同，只要三者有一个不同就会阻止获取数据。例如：a页面想获取b页面资源，如果a、b页面的协议、域名、端口、子域名有不同，所进行的访问行为都是跨域的，而浏览器为了安全问题一般都限制了跨域访问，也就是不允许跨域请求资源。注意：跨域限制访问，事实上是浏览器的限制策略，理解这一点很重要。2、三种方式解决跨域问题JSONP（需前
2020-07-25 19:34:10
85
原创 npm的使用，安装依赖时，为什么要分-S -D，有什么作用？
npm安装依赖时，为什么要分-S -D -g，有什么作用？在使用任何框架之前，都要经历环境搭建的过程，npm（node package manager （node包管理工具）是必不可少。在搭建一个前端项目之前，往往都会在目录中生产package.json文件。它是npm包的描述文件，会记录 安装的依赖类型、版本，也可用于定义项目信息，配置包依赖关系。但在安装依赖时，常常会有疑惑，为什么不同依赖后面的后缀不一样？一会是-g 一会是-G？其实这是指令，存入那个环境的依赖管理。-g表示进行全局进行安
2020-07-25 19:32:17
1647
原创 什么是事件冒泡和事件捕获、事件委托，他们的作用
事件模型JavaScript事件使得网页具备互动和交互性，我们应该对其深入了解以便开发工作，在各式各样的浏览器中，JavaScript事件模型主要分为3种：原始事件模型、DOM2事件模型、IE事件模型。一.原始事件模型（DOM0级）这是一种被所有浏览器都支持的事件模型，对于原始事件而言，没有事件流，事件一旦发生将马上进行处理，有两种方式可以实现原始事件：（1）在html代码中直接指定属性值：（2）在js代码中为 document.getElementsById(“demo”).onclick =
2020-07-25 19:29:52
1750
转载 纸吸管，是下一个环保智商税吗？
7 月 1 日，麦当劳中国郑重其事地宣告：以后再也不给吸管了。对于这一天的来临，消费者大概也早有预感。2020 年 1 月，发改委、环境部出台《关于进一步加强塑料污染治理的意见》，要求到 2020 年底禁用不可降解一次性塑料吸管。在世界范围内，弃用吸管已经属于政治正确，欧洲和北美的多个城市都颁布了塑料吸管的禁令，麦当劳之类企业带头做出表率就更为普遍。2018 年，星巴克就已宣布要在 2020 年用纸吸管全面替代塑料吸管，从 2019 年世界地球日开始，在上海、深圳等一千多家门店开始执行。这样做意
2020-07-15 14:14:09
645
原创 Github和码云的简单使用
Github服务器在国外，码云服务器在国内。所以码云的访问速度是快过Github。码云网站：gitee.com码云初次使用：一、创建账号首先你需要一个码云帐号。点击网站右上角，注册一个账号，按要求完成注册，登录成功即可第一次登录，并不能直接创建仓库，也不能直接上传和下载代码，需要对账号进行配置1、登录完成后，鼠标放到右上角的头像，点击设置。2、进入了设置面板，点击左侧边栏的安全设置==》SSH公钥第一次使用，需要生成公钥进行配置。点击 ‘’怎样生成公钥‘’ ，再点击 ‘’公钥管理‘’ ，
2020-07-13 01:00:51
552
原创 input去除蓝色边框
input标签在使用的时候会有边框样式。当input聚焦的时候又会显示出一个蓝色边框。很多时候我们并不需要这种默认样式的边框，就需要去除边框。给需要去除的标签添加css样式：border: none; 去除input默认的边框outline:none; 去除聚焦时的蓝色边框outline-width:0 去除聚焦时的蓝色边框或者直接 input:focus { outline: none; }去除所有input的聚焦边框<!DOCTYPE html><html lan
2020-06-28 21:01:10
595
原创 vue遇到的各种报错
vue的一些报错解决方法1、第18行第5个，World组件已经创建，但未被使用。使用组件就可以解决2、21行第9个，aaa定义（创建）了，但未使用3、Non-nested routes must include a leading slash character. Fix the following routes 警告---- 非嵌套路由必须包含前导斜杠字符4、Uncaught TypeError: WEBPACK_IMPORTED_MODULE_1_vuex.a.store is not a
2020-06-28 19:29:33
629
原创 隐藏元素几种方法和它们之间的不同。
隐藏元素的方法有好几种1、opacity:0元素隐藏，但不会改变页面布局，如果该元素绑定了事件（如：click事件），那么依旧可以触发。2、visibility：hidden元素隐藏，但不会改变页面布局，如果该元素绑定了事件，不会触发。3、dispaly:none元素隐藏，但会改变页面布局，相当于在页面删除了这个元素4、z-index:-1元素隐藏，但它是将自身置于其他元素下面根据情况，酌情使用隐藏方法。...
2020-06-26 15:44:51
218
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人