- 博客(54)
- 收藏
- 关注
RSS订阅原创 【JavaScript】js实现粘贴复制功能，复制导航内容，快捷键可粘贴
需求：复制导航内容，快捷键可粘贴export const copyUrl = (url, msg) => { let copyTest = url let inputTest = document.createElement('input') inputTest.value = copyTest document.body.appendChild(inputTest) inputTest.select() document.execCommand('Copy') inp
2022-03-18 14:52:14
1193
原创 项目里前端通过json-serve结合postman工具mock数据与接口
json-server 安装流程安装依赖包npm install json-server -D创建文件夹 与子文件 db.jsonjson_server_mock/db.jsonpackage.json 添加配置“json-server”: “json-server json_server_mock/db.json --watch”执行命令npm run json-serverpostman postmande的数据进行操作后就会自动添加数据到db.json 文
2021-12-29 11:39:22
170
原创 问题：Uncaught (in promise) DOMException: Failed to execute ‘open‘ on ‘XMLHttpRequest‘: Invalid URL
xiUncaught (in promise) DOMException: Failed to execute ‘open’ on ‘XMLHttpRequest’: Invalid URL解决方案：url前面一定要加http://
2021-09-08 15:38:41
5261
原创 react组件传值-------------------发布-订阅机制
理解事件的发布-订阅机制早期最广泛的应用在浏览器的DOM事件中， target.addEventListener(type, listener, useCapture)通过调用addEventListener 方法，创建一个事件监听器，这个动作就是 ‘ 订阅 ’。例如下面这个最简单的发布-订阅案例：// 监听 click (点击)事件，click事件被触发时，事件就会被发布出去，进而触发监听这个事件的func函数。 el.addEventListener("click", func, fals
2021-07-22 18:42:25
670
2
原创 知识梳理------React组件性能优化
React 组件性能优化最佳实践React 组件性能优化的核心是减少渲染真实 DOM 节点的频率，减少 Virtual DOM 比对的频率。1. 组件卸载前进行清理操作在组件中为 window 注册的全局事件, 以及定时器, 在组件卸载前要清理掉, 防止组件卸载后继续执行影响应用性能.需求：开启定时器然后卸载组件，查看组件中的定时器是否还在运行。import React, { useState, useEffect } from "react"import ReactDOM from "reac
2021-07-20 17:56:55
328
原创 知识梳理---------Hooks钩子函数的使用
1 React Hooks介绍1.1 React Hooks是用来做什么的对函数型组件进行增强，让函数型组件可以存储状态，一颗拥有处理**副作用**的能力。让开发者在不使用类组建的情况下，实现相同的功能。什么是副作用？组件中只要不是把数据转换成视图的代码，就是属于副作用 例如：获取dom元素，为dom元素添加事件，定时器，发送AJAX请求等 都是属于副作用代码...
2021-07-20 15:37:59
1716
1
转载 知识梳理---------------------React
1. React 介绍React 是一个用于构建用户界面的 JavaScript 库，它只负责应用的视图层，帮助开发人员构建快速且交互式的 web 应用程序。React 使用组件的方式构建用户界面。2. JSX 语法在 React 中使用 JSX 语法描述用户界面，它是一种 JavaScript 语法扩展。在 React 代码执行之前，Babel 会将 JSX 语法转换为标准的 JavaScript API。JSX 语法就是一种语法糖，让开发人员使用更加舒服的代码构建用户界面。2.1 在 JS
2021-07-14 14:51:06
70
原创 前端自动化构建工具Gulp---------------基本使用
gulp 安装及使用安装gulp安装依赖//安装gulp的同时 会安装一个gulp-cli的模块。//后续我们可以通过gulp命令来执行我们的任务$ yarn init$ yarn add gulp新建一个入口文件 1. 在目录下新建`gulpfile.js` 文件，作为gulp的入口文件。 2. 这个文件运行在node.js中 所以我们可以在这个文件中使用CommonJS 的规范。 3. `gulpfile.js`文件中定义构建任务的方式：通过导出函数成员的方式创建任务
2021-06-23 15:27:07
103
原创 常用的前端自动化构建工具gulp/grunt/fis --简介
常用的前端自动化构建工具之前我们自动化构建将入门级别使用的 NPM Scripts自动化构建工具对于相对复杂的项目构建会比较吃力，那么我们会了解GulpGruntfIS用法基本相同：都是通过一些简单的代码，组织一些插件的使用，然后就可以用工具代替我们一些重复的工作，增强开发效率。Grunt是基于内磁盘实现的最早的自动化构建工具 Grunt(点击可进入官网查看)优点：它的插件几乎可以帮助我们完成任何我们想要做的事情，缺点：由于工作过程是基于临时文件去实现的，所以构建速度较慢。下
2021-06-15 17:33:17
504
原创 基于NPM Scripts完成简单的自动化构建---入门
自动化构建简介什么是自动化： 机器代替手工完成一系列工作。什么市构建： 转换，什么市自动化构建工作流: 指把我们开发阶段写出来的源代码自动化转换成生产环境中可以运行的代码或者程序。自动化构建简介作用： 1.脱离运行环境兼容带来的问题 2.使用提高效率的语法、规范和标准最典型的应用场景 我们开发网页应用时，使用 1.ECMAScript Next:提高编码质量 2.sass :来增强css的可编程性， 3.模版引擎:来抽象页面中重复的html 这些
2021-06-15 17:00:43
173
原创 Promise手写源码以及api详解-----学了就会学完就忘系列
/* 1、通过class关键字创建一个类 MyPromise 2、我们需要使用构造函数constructor 来接受这个构造函数,executor代表执行器(执行器是立即执行的,执行器就代表回调函数)*/const PENGDING = 'pending'const FULFILLED = 'fulfilled'const REJECTED = 'rejected'class MyPromise { constructor(executor) { // 当前
2021-06-09 17:20:44
277
原创 基于Yeoman搭建自己的脚手架-----自定义Generator
创建Generator 模块Generator 本质上就是一个NPM模块，但是Generator 有一个特定结构首先我们创建一个文件夹当做目录# mkdir generator-sample# yarn init# yarn add yeoman-generator# code . //打开VScode然后我们按照按照上面的基础结构创建相应的文件夹在index js 中可以直接创建consst Generator =require('yeoman-generator')mod
2021-06-07 15:08:44
184
原创 脚手架--------Yeoman基本使用
Yeoman 脚手架工具是一款用于创造现代化应用的脚手架工具，可以创建自己的generator 创建自己前端脚手架。优点即缺点：过于通用，不够专注，不像vue-cli 那些使用率更高。Yeoman 基本使用在 node 环境安装 yarn 后 以下是基于 yarn 命令安装使用全局安装yoyarn global add yo安装过后我们可以使用Yeoman来帮我们创建项目，但是单yo这个模块是不够的，yeoman需要搭配generator 来使用，我们要是用yeoman来帮我们搭
2021-06-07 14:30:15
170
原创 脚手架的本质作用
脚手架的本质作用 创建项目的基础结构，提供项目规范和约定相同的组织结构想用的开发范式相同的模块依赖相同的工具配置相同的基础代码常用的脚手架工具React 项目 create-react-appVue 项目 vue-cliAngular 项目 angular-cli以上根据信息创建对应的项目基础结构。Yeoman等 通用的脚手架结 根据一套模板生成一个对应的项目结构，灵活方便扩展Plop 等 用于去创建一些特定类型的文件，例如创建一个组件、模块所需要的
2021-06-07 13:57:33
153
原创 一个项目过程中工程化的表现
工程化表现： 一切以提高效率、降低成本、质量保证为目的的手段都属于-工程化 一切复杂的工作都应该被自动化创建项目环节: 创建项目结构创建特定类型文件，可使用脚手架工具自动的帮我们完成基础结构搭建编码：格式化代码，校验代码风格，编译/构建/打包测试/浏览：Web Sever 、Mock LiveReloading 、HMR Source Map、提交：git Hooks Lint-staged（提交日志） 方便日后回滚参考 持续继承部署： CI/CD 自动发布工程
2021-06-07 13:48:28
115
原创 「javaScript」使用proxy监听数组的变化
监听数组变化let list = []const listProxy = new Proxy(list, { set(target, property, value) { console.log('set', property, value) //property指下标 value值 target[property] = value return true //表示设置成功 }})listProxy.push(100)...
2021-05-28 11:25:31
2796
原创 mac本 安装淘宝镜像
直接sudo npm install -g cnpm --registry=https://registry.npm.taobao.org --verbose出现npm timing action:postinstall Completed in 252msnpm verb unlock done using /Users/duzhenjie/.npm/_locks/staging-3a08f0df5026584d.lock for /usr/local/lib/node_modules/.sta
2021-05-22 17:35:33
949
原创 「小程序」——————————swiper引入图片不显示解决方案
我是直接从官方文档直接搬运过去的 ，然后出现了问题，经过排查是wxml文件的问题。将在这里插入图片描述后来改动为 问题解决。后面图片显示不全 样式存在问题，所以我直接在样式文件里对样式进行了 修改下面为记录当时的思路。因为是第一次弄小程序，所以 一直在百度，看文档，看视频，所以当时并没有觉得是自己搬运过来的东西有问题，一直觉得是自己哪里写错了。哎～～～～问题排查一：首先在app.json文件中检查当前文件是否引入当前swiper组件所在文件。因为我这面的图是下面这样的并不是说完全没有显示 只
2021-04-08 09:29:56
3856
1
原创 对象的新方法 Object.is() Object.keys()等
Object.preventExtensions()方法让一个对象变的不可扩展，也就是永远不能再添加新的属性。Object.isExtensible()方法判断一个对象是否是可扩展的（是否可以在它上面添加新的属性）。Object.seal()方法封闭一个对象，阻止添加新属性并将所有现有属性标记为不可配置。当前属性的值只要原来是可写的就可以改变。Object.is(value1, value2);方法判断两个值是否为同一个值。Object.entries()返回一个数组，其元素是与直接在ob
2021-04-06 15:26:57
158
原创 js的属性标签---------[configurable][enumerable][writable]以及结合set/ get的使用
获取对象属性我们可以通过Object.getOwnPropertyDescriptor() 方法来获取一个对象的所有属性标签 Object.getOwnPropertyDescriptor({pro:true},'pro'); //Object.{value:true,wirtable:'true,enumerbale:true,configurable:true} Object.getOwnPropertyDescriptor({pro:true},'a');//undefined .
2021-04-06 14:45:07
333
原创 js中读写属性的------get/set 方法
var man={ name:'dudu', weibo:'dudu', get age(){ return new Date().getFullYear() - 1988; }, set age(val){ console.log( ' Age can't be set to '+ val) }}console.log(man.age) //27man.age=100 // Age can't be set to 1
2021-04-06 14:02:02
312
原创 js----------------------运算符
通过 hasOwnProperty 这个方法来判断这个属性是这个对象本身上的 还是这个对象的原型链上的属性Function Foo(){}Foo.prototype.x=1;var obj=new Foo();obj.x; //1obj.hasOwnProperty('x') //falseobj._proto_.hasOwnProperty('x'); //true ****...
2021-03-18 11:07:11
68
原创 promise异步操作----详解
主要用于异步计算可以讲异步操作队列化，按照期望的顺序执行，返回符合预期的结果，可以在对象之间传递和操作promise，帮助我们处理队列为什么异步操作可以避免页面冻结？异步操作常见语法异步操作以事件为主回调主要出现在Ajax 和File Api事件侦听与响应：doncument.getElementById('start').addEventListener('click',start,false);function start(){ //响应事件，进行相应的操作}//jq$('
2021-03-17 14:24:38
1923
1
原创 antd -----上传文件Upload 组件赋值默认文件 发送文件流
- upload组件 import { Upload, message, Button } from 'antd'; import { UploadOutlined } from '@ant-design/icons'; import React,{Component} from 'react' class Demo extends Component { state={ fileList:[], delFileIds:[] } onChange=
2021-03-12 16:46:27
4030
原创 【javascript 算法】------------------------------ sort排序
- sort() 的定义和基本用法sort() 方法用于对数组的元素进行排序，提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结前言提示：这里可以添加本文要记录的大概内容：例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。提示：以下是本篇文章正文内容，下面案例可供参考一、pandas是什么？示例：pandas 是基于NumPy
2021-03-12 13:44:58
60
原创 react中key值的作用
- react中key值的作用React中的key 值必须保证其唯一和稳定性react中的key属性，它是一个特殊的属性，它是出现不是给开发者用的，而是给React自己使用，有了key属性后，就可以与组件建立了一种对应关系，react利用key来识别组件，他是一种身份标识。每个key 对应一个组件，相同的key react认为是同一个组件，这样后续相同的key对应组件都不会被创建。在render函数执行的时候，新旧两个虚拟DOM会进行对比，如果两个元素有不同的key，那么在前后两次渲染中就会被认为是不同
2021-03-12 10:57:08
2054
原创 qrcode生成二维码设置通讯录内容------导入联系人
基本格式设置通讯录名片的内容 let html="BEGIN:VCARD"; html=html+"\n"; html=html+"VERSION:3.0"; html=html+"\n"; html=html+"N:"+'姓 名'; //html=html+"FN:"+'名 姓'; html=html+"\n"; html=html+"TITLE:"+'职位'; html=html+"\n"; html=html+"ADR;WORK:"+'地址'; html=html+"\n"
2021-03-08 15:34:43
675
原创 js使用qrcode.react插件生成二维码
下载资源包yarn add qrcode.reactnpm install qrcode.react 首先本地下载 qrcode.react 插件资源包，放入制定项目的node包里面。引入 import {QRCode} from 'qrcode.react'使用//和正常组件一样使用 <QRCode id='qrcode' //二维码内容 value={'设置二维码内容'} size={100} fgColor='#515151' styl.
2021-03-08 15:26:19
937
原创 深度树递归处理---让子元素以及子元素孩子中所有的id添加到父元素的字段指定字段中
const children = (arr) => { arr.map(item=>{ item.ids=[] if(item.children&&item.children.length>0){ const deptVos=(value)=>{ value.map(i=>{ item.ids.push(i.id) if(i.children&&i.children.length>0){ .
2020-12-25 16:22:30
348
原创 js截取url路径？后面的参数，并获取指定参数或将参数转化成对象的形式，
js截取url路径中的参数，并转换成对象类型 const paramsObj= ( url ) =>{ let params = url.split('?') let _params = params[i].split( '&' ) let obj = {} for( let i = 0; i < parmas.length; i++){ let arr_params = params[i].split( '=' ) obj[arr_params[0]] = a
2020-12-25 15:48:19
1172
原创 运行报错：Unknown argument type ‘ _attribute__‘ in method -[ RCTAppState gerCurrnetAppState:error:]
static BOOL RCTParseUnused(const char **input){ return RCTReadString(input, "__unused") || RCTReadString(input, "__attribute__((__unused__))") || RCTReadString(input, "__attribute__((unused))");}// static BOOL RCTParseUnused(const c
2020-12-23 10:37:52
349
原创 利用dom中标签的文本节点,将特殊字符类似<；>；这种的字符转为‘＜’或‘＞‘
利用dom中标签的文本节点,将特殊字符类似<>这种的字符转为‘<’或’>’const htmlEncode = (text) => { let temp = document.createElement("div"); temp.innerHTML = text; const output = temp.innerText || temp.textContent; temp = null; return output; };以上
2020-12-23 08:59:18
345
原创 react-native 搭建项目时控制台一直：info There appears to be trouble with your network connection. Retrying...
在搭建react-native项目的时候，控制台到=运行一段时间后一直info There appears to be trouble with your network connection. Retrying…info There appears to be trouble with your network connection. Retrying…info There appears to be trouble with your network connection. Retrying…。
2020-12-22 19:16:34
503
原创 ps怎么样等分的切分一张图片
选择裁剪工具–切片工具鼠标变成一个刀片，然后右键图片–切片划分去设置想要的水平划分还是垂直划分的切片数量最后保存时 Ctrl+shift+Alt+S 导出就好了桌面会有一个images 文件夹
2020-12-22 18:47:55
3643
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人