- 博客(101)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 html2canvas、pdf-lib、file-saver将html页面导出成pdf
html2canvas、pdf-lib、file-saver将html页面导出成pdf
2024-08-30 15:04:28
1731
1
原创 隐藏路由回调API wx.onAppRoute，全局定义分享内容
发现微信小程序中存在一个不为人知的强大功能：一个隐藏的路由监听API wx.onAppRoute。通过简单的初始化监听，我们可以在全局范围内捕捉到路由改变的事件，对开发者来说，这无疑是一项实用的功能
2024-03-21 10:48:33
1075
原创 h5企微插件之WeixinJSBridge、iframe通过cors-anywhere加载微信文章实践
h5之WeixinJSBridge、iframe通过cors-anywhere加载微信文章实践
2024-03-11 16:14:29
2338
2
原创 web component - 使用HTML Templates和Shadow DOM构建现代UI组件
Custom Elements用于定义一个自定义元素UserCard，Shadow DOM用于封装组件内部的样式和结构，防止外部样式干扰组件，HTML Templates则用于定义组件的模板。最后，在JavaScript代码中，我们使用addEventListener方法监听组件的follow-event事件，并在事件处理程序中调用handleFollowEvent方法来处理按钮点击事件。在setContent方法中，我们使用getAttribute方法获取组件的属性，并将其挂载到shadowRoot中。
2023-12-28 15:07:41
808
原创 call、apply、bind
call修改this的指向通过arg1，arg2方式进行传参会执行函数call实现继承const Father = function (name, age) { this.name = name this.age = age}const Son = function (name, age) { Father.call(this, name, age)}const son = new Son('name', 'age')console.log('%c [ Son ]-
2022-02-13 16:36:51
239
原创 Object.defineProperty
Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。语法 Object.defineProperty(obj, prop, descriptor)obj表示要定义的对象props，表示属性的名称descriptor，要修改的属性值value属性的值，可以是任意有效的js值默认为 undefinedwritable当该属性为true时候，属性的value才能被修改默认为 falseenumerable当该属
2022-02-13 15:26:21
887
原创 react ant-sesign使用阿里巴巴iconfont方法
xxx.js为文件iconfont下载的iconfont文件import { createFromIconfontCN } from '@ant-design/icons';interface iconfontProps { type: string; style?: object; className?: string; onClick?: any; [key: string]: any;}const IconFont = createFromIconfontCN({ .
2021-11-30 22:25:49
812
原创 ant design-form表单的自定义校验validator
在form表单的使用中，我们经常是使用rules属性进行简单输入文本验证，常见的使用模式如下：rules={[{ required: true, message: ‘’ }<Form name="basic" ref={ref} labelCol={{ span: 4, }} wrapperCol={{ span: 16, }} > <Form.Item label="password" .
2021-11-21 11:33:14
9590
原创 手写虚拟列表
虚拟列表是按需显示的一种技术，可以根据用户的滚动，不必渲染所有列表项，而只是渲染可视区域内的一部分列表元素的技术。在日常的使用中，有很多优秀的虚拟列表使用库，如之前写过的react-virtualized虚拟滚动(https://blog.youkuaiyun.com/weixin_43760969/article/details/121012775)等这边文章主要是手写简单的虚拟列表，纯js实现使用requestAnimationFrame进行节流处理window.requestAnimationFrame.
2021-11-21 00:07:44
477
原创 new Blob前端文件下载
import bambooMessage from ‘./bambooMessage’;export function blod(data: any, headers: any) {try {const type = headers.get(‘content-type’);const fileName = headers.get(‘content-disposition’).split(’=’)[1] || ‘’;const blob = new Blob([data], { type });c
2021-11-20 23:45:12
9143
2
原创 node+puppeteer node+selenium-webdriver网页截图
/**在无头浏览器中将一个网页截图保存为图片*/const puppeteer = require(‘puppeteer’);const saveScreenshot = async (url) => { // 启动浏览器 const browser = await puppeteer.launch(); // 打开页面 const page = await browser.newPage(); // 设置浏览器视窗 page.setViewport({ width:
2021-11-20 23:39:10
1083
原创 react-virtualized虚拟滚动list
import React from ‘react’;import ReactDOM from ‘react-dom’;import { InfiniteLoader, List } from ‘react-virtualized’;import ‘react-virtualized/styles.css’; // only needs to be imported once// This example assumes you have a way to know/load this informa
2021-11-20 21:01:13
1912
1
原创 React PureComponent、shouldComponentUpdate、meno
React PureComponent、shouldComponentUpdate、meno使用PureComponent、shouldComponentUpdate、meno可以提高react界面的性能在React 开发的过程中，当一个组件的state或props改变时候，React 会将最新返回的元素和之前渲染的元素进行比较，以确定是否有必要更新DOM，当发生改变时候回触发Dom的重新渲染即使 React 只更新改变了的 DOM 节点，重新渲染仍然花费了一些时间。在大部分情况下它并不是问题，不过如
2021-10-17 14:05:02
285
原创 React-refs
refs作用1.获取子组件的元素的dom2.获取子组件的数据获取子组件的元素的dom步骤我们通过调用 React.createRef 或者 useRef 创建了一个ref 并将其赋值给 ref 变量。我们通过指定 ref 为 JSX 属性，将其向下传递给 <Compoment ref={ref}>。React 传递 ref 给 forwardRef 内函数 (props, ref) => ...，作为其第二个参数。我们向下转发该 ref 参数到 <button re
2021-10-17 14:00:15
156
原创 React.context
React.contextcontext作用在一个典型的 React 应用中，数据是通过 props 属性自上而下（由父及子）进行传递的，但此种用法对于某些类型的属性而言是极其繁琐的（例如：地区偏好，UI 主题），这些属性是应用程序中许多组件都需要的。Context 提供了一种在组件之间共享此类值的方式，而不必显式地通过组件树的逐层传递 props。什么时候使用contextContext 设计目的是为了共享那些对于一个组件树而言是“全局”的数据，例如系统的cookie、公用方法、用户信息等数据使
2021-10-17 13:59:25
136
原创 mobx应用
mobx第一个需要注意的是如果mobx的版本大于6.0的话，需要在store的构造函数中使用以下代码，不然组件中改变store数据时候，界面不会刷新import { makeObservable } from "mobx"class Store { constructor() { // 添加makeObservable makeObservable(this) }}修改store文件时候报错"The set of provided
2021-10-17 13:57:16
450
原创 resize节流
requestAnimationFramewindow.requestAnimationFrame()方法是在界面重绘之前，通知浏览器的一个指定函数，这个方法接受一个入参，该函数在重绘之前调用，常用于 web 动画的制作，用于准确控制页面的帧刷新渲染，让动画效果更加流畅window.addEventListener() 添加事件监听window.dispatchEvent() 抛出事件Event算是一个顶级接口，CustomEvent基于Event，增加了部分参数，详细查看https://deve
2021-10-17 13:56:17
486
原创 css3-pointer-events
pointer-events:nonepointer-events:none的作用是让元素实体“虚化”。例如一个应用pointer-events:none的按钮元素，则我们在页面上看到的这个按钮，只是一个虚幻的影子而已，您可以理解为海市蜃楼，幽灵的躯体。当我们用手触碰它的时候可以轻易地没有任何感觉地从中穿过去。一切都是幻影!作用1，用于提高界面滚动的效率pointer-events 是一个 CSS 属性，可以有多个不同的值，属性的一部分值仅仅与 SVG 有关联，这里我们只关注 pointer-eve
2021-10-17 13:55:20
585
原创 前端水印-canvas、MutationObserver
前端水印canvas添加水印通过canvas生成base64图片，生成一个绝对定位的大小与body一样的div–waterDiv，将waterDiv的背景设置为canvas的base64图片，将waterDiv挂在到body下面<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content=
2021-10-17 13:53:18
439
1
原创 antd form.Item嵌套添加rules
formItem嵌套使用，使用rules的正确用法，需要在外层formItem然后在里层formItem添加required属性，在里层form.item添加rules即可外层form.item没有添加的required时候，没有必填标识<Form labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}> <Form.Item label={'label'} wrapperCol={{ span: 16, offset: 1 }}&g.
2021-08-17 21:44:18
4909
1
原创 antdesign的treeselect的模糊查询、精确查询
模糊查询import React, { useState } from "react";import ReactDOM from "react-dom";import "antd/dist/antd.css";import "./index.css";import { TreeSelect } from "antd";const { TreeNode } = TreeSelect;const Demo = () => { const [value, setValue] = use
2021-05-10 22:08:55
2288
原创 antdesign和react的使用dropDown定位问题
Select基于rc-select，rc-select的下拉框基于rc-trigger，rc-trigger的下拉框定位基于第三方库dom-align，dom-align的overflow参数的adjustX、adjustY可以计算可视区域，在下拉框溢出可视区域的时候添加偏移量将位置放到可视区域中。依赖链路dependency chain： Select.dropdownAlign => rc-select.dropdownAlign => rc-trigger.popupAlign =&g.
2021-05-10 22:04:39
2891
2
原创 google地图去除右上角全屏按键，自定义按键全屏
很多时候，google地图控件的位置不是我们想要的，我百度时候发现，google地图好像没有将全屏按键作为一个单独的控件，也有可能是我没有查询到，下面是一个这样的需求，由于全屏按键被遮挡了，无法点击，现将按键移到右下角先上效果图具体代码如下创建地图代码self.mapLoad().then((AMap: any) => { self.map = new AMap.Map(document.getElementById(options.container || ""), {
2021-01-09 11:07:20
1507
原创 React-路由2
路由重定向路由重定向使用的是react-router-dom的Redirect组件import { BrowserRouter as Router, Link, Route, Redirect } from 'react-router-dom'import React from 'react'// 定义一个登录组件function Login() { return ( <div> 登录界面组件 </div>
2020-12-13 01:05:09
110
原创 React-路由
React路由根据不同的路径显示不同的组件内容，使用react-router-dom库安装：npm install react-router-dom下面例子中，通过export暴露App类，返回index.js中使用渲染，下面代码中，需要注意的是，Router的div内容是正常显示的，其中使用的exact为精确匹配import React from 'react'import { BrowserRouter as Router, Link, Route } from 'react-router-
2020-12-13 00:16:09
909
原创 React-插槽
React插槽插槽用于组件中预留位置，就可以添加内容，这些内容可以被识别和控制，React需要自己开发支持插槽功能原理：组件中写入的HTML，可以传入到props先看下面代码，直接写内容在组件内是不起作用的，这时候在组件中输出propsimport React from 'react';import ReactDOM from 'react-dom';import './index.css';class ParentCom extends React.Component { rende
2020-12-12 23:18:08
306
原创 React-完成生命周期
React的生命周期生命周期的三个状态Mounting：将组件插入dom中Updating：将数据更新到dom中Unmounting：将组件移出dom中生命周期中的钩子函数ComponentWillMount：组件将要被渲染，可以使用AJAX获取数据，添加动画前的类ComponentDidMount：组件渲染完毕，可以添加动画ComponentWillReceiveProps：组件将要接受props数据，查看接收props是什么数据ShouldComponentUpdate：组件接收
2020-12-02 20:19:51
126
原创 React-列表渲染
React并没有Vue的v-for这种列表渲染方式使用for进行列表渲染import React from 'react'import ReactDOM from 'react-dom'// 列表渲染class Test extends React.Component { constructor (props) { super(props) this.state = { list: [ {
2020-12-02 14:51:52
534
1
原创 React-事件详解
特点react事件使用驼峰命名法事件需要用{}括起来，例如：onClick={show}最简单的点击事件import React from 'react'import ReactDOM from 'react-dom'class Parent extends React.Component { render () { return ( <div> <button onClick={this.
2020-11-30 16:13:39
325
原创 React-父子组件通信
父组件通过props传递值给子组件父组件传递数据给子组件，为单项数据流props传地址可以为任意类型props可以设置默认值xxx.defaultProps = { name: '张三' }import React from 'react';import ReactDOM from 'react-dom';import './index.css';// 定义父组件class Parent extends React.Component { constructor(
2020-11-30 12:29:49
137
原创 React-类组件事件
Tab组件的功能：通过点击按钮，切换不同的tab在lTab组件中定义了clickEvent方法，但是需要注意的是，需要注意this的指向问题，需要在构造函数中修改this指向，this.clickEvent = this.clickEvent.bind(this)两个按键同时绑定clickEvent事件，需要在button标签添加属性进行辨别，通过data-xxx=‘xxx’来进行辨别，在clickEvent中，通过e.target.dataset.xxx可以获取到data-xxx的值需要注意，一定
2020-11-30 11:14:25
527
原创 React-生命周期函数
componentDidMount是React的生命周期函数，是组件渲染完成时的回调函数需要注意的是，不能直接通过this.state.xxx = xxx,这种方法是不推荐的，同时这种修改方法不会触发React修改界面，只有使用this.setState()才可以使、界面重新渲染this.setState()函数内容都进行设置之后，同意对比虚拟DOM对象，然后统一修改，提高性能import React from 'react'import ReactDOM from 'react-dom'cl
2020-11-30 10:43:39
163
原创 React-state(状态)
state相当于vue的data，也就是用于存放数据，但使用上和data却很不一样下面例子中，创建一个类组件，在类组件的构造函数constructor中定义this.state,并进行赋值，在render()函数中，直接使用this.state.xxx即可访问state的数据import React from 'react'import ReactDOM from 'react-dom'class Clock extends React.Component { constructor (
2020-11-30 10:17:25
218
解决git _ 无法将“git”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写，如果包括路径，请确保路径正确.md
2020-05-05
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人