- 博客(57)
- 收藏
- 关注
RSS订阅
原创 前端基础知识持续整理中。。
一、Css盒模型标准盒模型和IE盒模型在 CSS 盒子模型 (Box Model) 规定了元素处理元素的几种方式：width和height：内容的宽度、高度（不是盒子的宽度、高度）。padding：内边距。border：边框。margin：外边距。CSS盒模型和IE盒模型的区别：标准盒子模型中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。IE盒子模型中，width 和 height 指的是内
2020-07-21 14:58:07
521
原创 node+socket-io长连接应用demo
目的: 建立socket-io 长连接， 客户端实现监听用户添加操作，添加后服务端返回最新的数据给客户端，取代了查询+添加接口，代码分为server和client端，如下所示：server端const express = require('express');// const cors = require('cors');const { db } = require('../../Server/mysql_main');const app = express();// app.use(co
2022-04-24 17:15:52
331
原创 mac下，node访问mysql数据库报错
错误信息：Client does not support authentication protocol requested by server; consider upgrading MySQL client解决方案打开DBeaver，运行以下sqlALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY '要重置的密码'; 再次运行node.js， 成功连接上数据库const mySql = requi.
2022-04-22 11:24:22
1722
原创 mac终端：brew install mysql时报错
终端报错如下信息：Warning: You are using macOS 12.We do not provide support for this pre-release version.You will encounter build failures with some formulae.Please create pull requests instead of asking for help on Homebrew's GitHub,Twitter or any other off.
2022-04-21 17:18:07
1220
原创 2、JS_继承的几种方法
一、原型链基本构想：通过原型继承多个引用类型的属性和方法。构造函数、实例、原型三者之间的关系每个构造函数都有一个原型对象(prototype)，原型对象有一个属性(constructor)指回构造函数，而实例对象有一个内部指针(proto 隐式原型) 指向原型对象。下面来看一个例子-> 从上面例子我们可以清楚原型搜索机制：在读取实例上的属性时，首先会在实例上搜索这个属性。如果没找到，则会继承搜索实例的原型。在通过原型链实现继承之后，搜索就可以继承向上，搜索原型的原型。默认情况下，
2022-04-11 11:29:10
847
原创 1、JS几种引用类型:map、weakMap、set、weakSet
集合引用类型一、Map常用APIMap 和 Object 的对比内存占用: 给定固定大小的内存，Map可以比Object多存储50%的键值对；插入性能: 若插入键值对数量不多，则消耗大致相对；但是当涉及到大量插入操作，Map的性能更佳;查找速度删除性能: Map的delete()操作性能更佳二、WeakMap概念: 称为弱映射，它是Map的兄弟类型，不同的是,weakMap的键只能是 Object 或者继承自 Object 的类型,尝试使用非对象设置键会抛
2022-04-06 11:38:53
1504
原创 9、recoil库的基本使用
1.配置安装npm install recoilapp.js全局配置import React, { Component } from "react";import { ConfigProvider } from 'antd';import { withRouter } from "react-router-dom";import { RecoilRoot } from 'recoil';import Routes from "./router";class App extends
2022-04-01 16:57:02
1158
原创 8、滑动删除组件_mobile端_react
jsx/** * 滑动删除 * * children props 里面传递的盒子 * onDelete 点击删除调用props方法 * id 当前点击的唯一值 */import React from 'react';import './index.less';class SlideDelete extends React.Component { constructor(props) { super(props); this.state .
2022-03-16 16:26:30
1313
原创 7、高德地图(定位、复位功能)
组件jsx文件import React, { useEffect, useRef, useState } from 'react';import './index.less';import { webMercator2LngLat, getCoordinateCommon } from '@/util/transformUtil';import icon_punch_locate from '@/asset/image/informationization/afterSalesPunch/i.
2022-03-07 09:49:54
1141
转载 7、判断处于PC/MOBILE的几种方法
navigator.userAgentif (/Mobi|Android|iPhone/i.test(navigator.userAgent)) { // 当前设备是移动设备}// 另一种写法if ( navigator.userAgent.match(/Mobi/i) || navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/iPhone/i)) { // 当前设备是移动设备}..
2022-01-06 14:18:49
547
原创 6、react-useReducer初体验、useReducer和useContext结合使用
初次体验import React, { useState, useEffect, useReducer } from 'react';export const Demo = () => { const [conut, setCount] = useReducer((state, action) => { switch (action) { case 'increment': return state + 1 cas.
2022-01-05 16:15:37
437
原创 5、react-useContext简单应用
Context 提供了一个无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法 。主要应用场景：为不同层级的组件提供访问同样数据。创建一个共享的UserInfoContext文件userInfoContext.jsimport React from 'react'export const UserInfoContext = React.createContext(null)在顶层组件Parent.js中，传递需要共享的数据import React from 'reac
2022-01-05 11:11:38
672
原创 4、日期筛选组件
/** * @description: 日期筛选组件-完全不受控组件 * @param {Array} allOption 取timeUtils.js的值 * @param {String} defaultSelecType 默认选中的类型 * @param {String, String []} defaultSelectValue 日期组件默认值 * defaultSelecType为自定义时，可传； * 格式: 'YYYY-MM-DD' || ['YYYY-MM-DD', '
2022-01-04 10:08:46
557
原创 3、First-Hook-Demo
/* * @Date: 2021-12-16 09:47:02 * @LastEditTime: 2021-12-28 10:06:30 * @FilePath: /civ_pandawork/src/pages/pandaBigData/pandaWork/reportManagement/hourFill/hourFill.js * @Description: 工时填报 */import React, { useState, useEffect } from 'react'import s
2021-12-30 15:51:33
531
原创 2.react配置less
1、安装依赖库npm install less@3.9.0npm install less-loader@4.1.02、弹出配置文件以便自定义项目配置npm run eject3、修改config/webpack.config.js中的配置添加样式文件正则const lessRegex = /\.(scss|less)$/;const lessModuleRegex = /\.module\.(less)$/;修改getStyleLoaders函数a.增加less-loade
2021-12-30 15:49:07
315
原创 1.react配置react-router 4.x（粗略版，第一次配置，需优化）
安装4.x版本路由npm install react-router-dom@4.3.1 --save创建一个异步组件AsyncComponentimport React from 'react';export default function (componentFactory) { class AsyncComponent extends React.Component { constructor(props) { super(props); this.
2021-12-30 15:44:33
377
原创 6.日期函数（根据moment.js库获取时间段）
import moment from 'moment'const STANTFORMAT = "YYYY-MM-DD 00:00:00"const ENDFORMAT = "YYYY-MM-DD 23:59:59"/** * @description: * @param {String} type * ['前日','昨日', '今日', '明日', '上周', '本周', '下周', '上月', '本月', '下月', * '去年', '今年', '明年', '上季度', '本季度',
2021-12-30 15:39:18
559
原创 5. 滑块组件
组件结构<div role="slider" class="pd-slider"> <div class="pd-slider__runway"> <div class="pd-slider__bar" style="<%= `width: ${value}%;`%> left: 0%;"></div> <div class="pd-slider__button-wrapper" style=.
2021-09-19 17:34:54
194
原创 4.复选框组件封装（基于backbone）
html、css部分<!-- * @Author: RenXiaoDong * @Date: 2021-08-10 09:32:23 * @LastEditTime: 2021-08-29 15:49:21 * @LastEditors: RenXiaoDong * @Description: 复选框--><style> .pd-select-dropdown__wrap { display: inline-block; p.
2021-08-29 15:52:45
165
原创 基于backbone写一个tree结构的table
页面及样式<style> #proProgressRecord { display: flex; flex-direction: column; } #proProgressRecord .proRec-container { height: 100% !important; display: flex; flex-direction: column; } #proPr.
2021-08-29 15:44:18
143
原创 3、常用js函数（持续添加）
获取数据类型function getType(para) { return Object.prototype.toString.call(para)}数组去重//简单数组去重function unique1(arr) { return [...new Set(arr)]}function unique2(arr) { var result = []; arr.forEach(ele => { if (result.indexOf.
2021-08-22 15:21:28
90
原创 2、Js 常用数组方法总结(持续添加)
const arr = [1,2,3,4,5,6,7]filter：过滤器，返回符合条件的元素组成的新数组let result = arr.filter(item => item > 3) // [4, 5, 6, 7]console.log(result) // [4, 5, 6, 7]map：创建一个新数组，其结果是该数组中的每个元素是调用一次提供的函数后的返回值。let result1 = arr.map(item => item > 3) let re
2021-08-08 16:55:32
111
原创 1、交互优化(防抖与节流、MouseEnter 和 mouseLeave事件)
需求：二级菜单的显示与隐藏。鼠标移到一级菜单上，会显示二级菜单，移出元素时，二级菜单则会隐藏。有以下三种实现方法1、首先我们想到的是通过js的鼠标事件来进行处理，那么我们应该先明确一下几个事件的基本概念。mouseenter：当定点设备（通常指鼠标）移动到元素上时就会触发 mouseenter 事件mouseleave:指点设备（通常是鼠标）的指针移出某个元素时，会触发mouseleave事件。mouseout 和 mouseover和以上两个事件的作用相似，那么他们的区别在于什么地方
2021-07-25 16:01:50
2266
2
原创 有关日期的通用方法(获取日期/时间戳转日期格式)
获取日期//获取当前年月日Vue.prototype.getDate = function(item) { let date = new Date(); if(typeof item === 'string') { date = new Date(item); } else if (typeof item === 'object') { date = item } let seperator1 = "-"; let ye.
2021-07-17 21:59:58
107
原创 通用复选框
渲染复选框select = ` <div style="display: inline-block;" class="dictionary_check_box multipleChoiceBox"> <label>${this._dictionaryCheck[i]}：</label> <div style="position: relative;float: right;" class="_productTypeB.
2021-07-17 21:38:57
119
原创 table固定表头、固定列
最近在做一些报表，使用原生table画的，记录一下固定表头的一些方法。使用position:sticky来固定表头html:<div id="common-table"> <table id="table-container" cellpadding="0" cellspacing="0" border="0"> <thead> <tr> <th>1</th>
2021-07-17 21:09:53
8401
1
原创 js 统一封装 api 请求文件 ----window.fetch方法
export default async (url = "", data = {}, type = "GET", method = "fetch") => { let baseUrl = ""; type = type.toUpperCase(); url = baseUrl + url; if (type == "GET") { let dataStr = ""; //数据拼接字符串 Object.keys(data).forEach((key) => {
2020-12-21 10:15:48
563
转载 html5shiv.js 的作用
解析html5shiv主要解决HTML5提出的新的元素不被IE6-8识别，这些新元素不能作为父节点包裹子元素，并且不能应用CSS样式。让CSS 样式应用在未知元素上只需执行 document.createElement(elementName) 即可实现。html5shiv就是根据这个原理创建的。...
2020-12-03 10:26:22
251
原创 ES6生成器函数，解决回调地狱问题
//想要实现的是： 成功获取商品数据后，获取订单数据，成功获取订单数据后，获取商品数据function getUsers() { setTimeout( () => { let data = '用户数据' iterator.next(data) },1000)}function getOrders() { setTimeout( () => { let data = '订单数据' iterator.next(data) },1000)}function
2020-11-30 13:48:18
163
原创 前端API接口
Vue 项目中基于axios封装接口及使用1.封装一个api.js文件import axios from "axios";var loginService = { /** * username: 用户名 * password:密码 * checkImage:验证码 */ login(username,password,checkImage) { var params = { "username": username, "passwo.
2020-11-30 13:47:40
640
原创 手动实现一个迭代器(使用iterator)，自定义遍历数据
let obj = { name: 'IG', stus: ['Rookie','TheShy','Ning','Jk','Bao'], [Symbol.iterator]() { let index = 0; //定义一个索引下标 let that = this; return { next: function() { if(index < that.stus.length) { const
2020-11-23 11:20:55
241
转载 JS 表达式 简化写法
1、逻辑与 && 的运算方式var a = 1 && 2;console.log(a); //返回的结果为 2如果逻辑与运算符左边的值布尔转换后为true，那么返回右边的值（不管右边的值是真还是假）。var a = false && 2;console.log(a); //返回的结果为 false如果逻辑与运算符左边的值布尔转换后为false，那么返回左边的值，但是当逻辑与的左边为 null/NaN/undefined ，结果就会得到null/Na
2020-10-28 10:49:56
373
原创 vue中Axios的封装和API接口的管理
一、axios的封装在vue项目中，和后台交互获取数据这部分，通常使用的是axios库，它是基于promise的http库，可运行在浏览器端和node.js中。它有很多优秀的特性，例如拦截请求和响应、取消请求、转换json、客户端防御XSRF等。安装npm install axios; // 安装axios复制代码引入一般在项目的src目录中，新建一个request文件夹，然后在里面新建一个http.js和一个api.js文件。http.js文件用来封装我们的axios，api.js用来统一管理我
2020-09-24 10:40:00
187
原创 2020-09-15
事件冒泡或事件捕获？事件传递有两种方式：冒泡与捕获。事件传递定义了元素事件触发的顺序。 如果你将 元素插入到 元素中，用户点击 元素, 哪个元素的 “click” 事件先被触发呢？在 冒泡 中，内部元素的事件会先被触发，然后再触发外部元素，即： 元素的点击事件先触发，然后会触发 元素的点击事件。在 捕获 中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即： 元素的点击事件先触发 ，然后再触发 元素的点击事件。addEventListener() 方法可以指定 “useCapt
2020-09-16 15:53:58
175
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人