- 博客(97)
- 收藏
- 关注
RSS订阅原创 学无止境
1.axios核心功能实现2.koa2核心功能实现3.react-redux核心功能实现4.redux核心功能实现5.react核心功能实现6.react-router核心功能实现7.webpack核心功能实现
2021-03-30 16:34:57
183
原创 react组件封装之三剑客（HOC、Render Props、Hook）
封装组件必然是为了逻辑复用，那么下面我们通过使用不同的封装方式去封装一个猫（HOC）、鼠（Render Props）、狗（Hook）跟着鼠标移动的逻辑组件，来看看组件封装的奥妙。一：HOC(高阶组件)高阶组件（HOC）是 React 中用于复用组件逻辑的一种高级技巧。HOC 自身不是 React API 的一部分，它是一种基于 React 的组合特性而形成的设计模式。高阶组件其实就是一个参数是组件，返回值是新组件的函数。import React from "react";// H.
2021-03-22 16:59:12
651
原创 create-react-app配置别名和装饰器并使用
create-react-app为我们封装好了webpack并且隐藏了起来，而日常开发中我们想修改webpack配置别名和装饰器该如何操作呢？1.安装customize-cra和react-app-rewiredyarn add customize-cra react-app-rewired2. 根目录创建config-overrides.js并安装装饰器插件@babel/plugin-proposal-decoratorsyarn add @babel/plugin-proposa.
2021-03-22 10:57:33
704
原创 CSS Modules 使用手册
CSS Modules 就是对css加了局部作用域和模块依赖。一：局部作用域在做SPA项目时，所有css都将会被打包进main.css并全局引用，这将是件极其恐怖的事。你无法知道所有的css合并后带来的影响，也很难定位问题。所以css作用于局部作用域就很重要，而如何实现，那就是给class取一个唯一的名字，不会与其他class重名。而CSS Modules就是这样做的。一个React轮播图组件index.less:.main { color: red;}index.
2021-03-18 14:04:37
244
原创 Mac和windows下安装docker
1.Mac下土豪Mac 一台2. 下载并安装下载地址：https://www.docker.com/products/docker-toolbox下载完成后，根据提示安装。3. 安装完成后，双击 Docker Quickstart Terminal 启动4. 载入镜像$ docker load --input [pathTo]/php-image.tar $ docker images 查看镜像名称，此例中 镜像名称为 nginx-php-image-03095. 创建并..
2021-03-03 16:52:05
302
1
原创 前端性能优化方法与实战
性能化体系主要分为三部分。一： 性能优化流程，主要包括性能指标设定、性能标准确定、收益评估、诊断清单、优化手段、性能立项、性能实践。二：性能指标采集与上报三：性能监控预警平台，包括性能数据处理后台和性能可视化展现前台两部分。01 性能优化关键指标设定及标准加载（白屏时间和首屏时间等）、交互性（首次输入延迟等）和视觉稳定性CLS02从 URL 输入到页面加载整过程分析当在浏览器输入 URL 并回车后，为了把 URL 解析为 IP 地址，浏览器会向 DNS 服务器发...
2021-03-02 16:32:02
530
原创 算法模板大全
二分查找二分法查找，也称折半查找，是一种在有序数组中查找特定元素的搜索算法。常用案例：有序数组插入/** * @param {number[]} nums * @param {number} target * @return {number} */var searchInsert = function(nums, target) { let left = 0, right = nums.length - 1 while (left <= right) {
2021-02-05 15:48:04
442
1
原创 公众号H5跳转到微信小程序
先看效果：看看官方文档：开放标签第一步：进入公众号后台绑定安全域名第二步：页面引入jsdk<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>第三步：配置wx.configwx.config({ debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开..
2021-01-19 17:48:51
442
原创 JS实现数组与树结构的相互转换
1.数组转换为数结构let data= [ { id: 2, name: '部门B', parentId: 0 }, { id: 3, name: '部门C', parentId: 1 }, { id: 1, name: '部门A', parentId: 2 }, { id: 4, name: '部门D', parentId: 1 }, { id: 5, name: '部门E', p
2021-01-15 15:16:27
1224
1
原创 大前端面试汇总
JS：1.垃圾回收机制主要机制是标记并清除，部分老版ie还会用到计数清除。2.判断括号的匹配利用栈的特性。push()入栈和pop()出栈。3.尾递归和尾调用及优化看阮一峰大佬的文档：尾调用优化...
2021-01-11 18:06:53
228
原创 微信小程序+mqtt.js实现发布订阅，及时通讯，接受消息
开篇上文档：mqtt官方文档发布订阅基础：JS设计模式之发布订阅模式微信小程序版mqtt.js下载：mqtt.js在app.js中全局注册mqtt:const mqtt = require('./utils/mqtt.js') // 引入mqttonLaunch: function() {// 防止重复注册if (!this.globalData.client) { this.initSocket() }},// 注册连接initSocket() {
2021-01-11 16:38:12
3828
1
原创 JS设计模式之发布订阅模式
经常会有面试题问发布订阅模式，很多童鞋都一脸懵逼，根本不知道在问什么，甚至觉得自己根本用不上这玩意。其实，市面上的各大框架的事件处理，特别是组件通讯都基于发布订阅模式实现，比如vue的vuex，reace的redux。那么什么是发布订阅模式？发布订阅模式又叫观察者模式，它定义对象之间的一种一对多的依赖关系，当一个抽象的状态发生改变时，所有依赖它的对象都将得到通知。下面我们用一个现实中例子来讲一下它们到底是什么。小王去售楼部买房，但是该楼盘已售罄，于是售楼MM就告诉小王，我给你登记一
2021-01-11 16:13:49
532
原创 微信小程序 页面实现watch监听数据
app.jssetWatcher(page) { let data = page.data; // 获取page 页面data let watch = page.watch; for (let i in watch) { let key = i.split('.'); // 将watch中的属性以'.'切分成数组 let nowData = data; // 将data赋值给nowData let lastKey = key[key.leng
2021-01-05 16:56:57
1999
原创 移动端手机横屏提醒（无需css）
(function rotate() { var orientation = window.orientation; var pd = null; function createPd() { if (document.getElementById('preventTran') === null) { var imgData .
2020-11-05 16:06:32
421
原创 大前端晋阶（一：ES6晋阶）：1.ES6基础
一：let和const1.let用于声明变量，只在let命令所在的代码块内有效，const声明常量，声明后的值无法改变2.for循环计数器很适合let声明for(let i = 0.....)可以不用使用立即执行函数防止变量泄露3.不存在变量提升4.暂时性死区在一个代码块内，使用let声明之前，这个变量都无法使用5.都无法重复声明二：解构赋值和用途1.交换变量[x,y] = [y,x]交换变量x和y的值2.从函数返回多个值// 返回一个数组function.
2020-09-27 17:31:57
140
原创 常用的css特效（一）
1、交错动画<div class="loading"> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div></div>body { dis
2020-07-13 14:08:37
2739
原创 两个数组取交集和差集
let intersection = a.filter(v => b.includes(v))let difference = a.concat(b).filter(v => !a.includes(v) || !b.includes(v))
2020-06-08 16:28:17
280
原创 哀悼日网站变成灰色
一句代码搞定：html{ webkit-filter: grayscale(100%); filter: grayscale(100%);}
2020-04-10 17:16:23
181
原创 Python编程之字典（删除，遍历）
一：删除健值对outs = {'name': 'king', 'age': 25}del outs['name']print(outs) # {'age': 25}二：遍历字典1.遍历健值对outs = {'name': 'king', 'age': 25}for name, value in outs.items() : print(name) pri...
2020-02-17 11:44:49
277
原创 Python编程之操作列表（遍历，数字列表，计算，解析，切片，复制，元组）
一：遍历列表lists = ['c', 'c#', 'java']for list in lists: print(list)二：创建数字列表使用range()可以生成一系列数字，用函数list()，可以创建数字列表。outs = list(range(0, 5))print(outs)# 输出 [0, 1, 2, 3, 4]三：对列表进行简单的统计计算...
2020-02-17 11:29:35
857
原创 Python编程之列表排序与长度
一：sort()方法list = ['w', 'q', 's']list.sort()print(list)# 结果 ['q', 's', 'w']sort()方法为正序，加参数reverse=True可倒序排列list = ['w', 'q', 's']list.sort(reverse=True)print(list)# 结果 ['w', 's', 'q']...
2020-02-11 11:02:24
597
原创 Python编程之添加和删除列表中的元素
一：在列表末尾添加元素list = ["python", "hello"]list.append("world")print(list)# 结果 ["python", "hello", "world"]二：在列表中插入元素list = ["python", "hello"]list.insert(0, "world")print(list)# 结果 ["world"...
2020-02-11 10:36:18
272
原创 react动态样式
es6写法<div className={`container ${index===this.state.currentIndex?"active":null}`}>此标签是否选中</div>
2020-01-06 16:53:27
646
原创 解决Error: Node Sass does not yet support your current environment: Windows 64-bit with Unsupported
Error: Node Sass does not yet support your current environment: Windows 64-bit with Unsupported runtime (64)For more information on which environments are supported please see:https://github.com/s...
2019-12-20 21:55:13
3928
原创 解决Error: ENOENT: no such file or directory, scandir 安装node-sass报错
npm rebuild node-sass
2019-12-20 21:50:37
1023
原创 vue中$router.push打开新窗口
var route = this.$router.resolve({ path: '/index', query: { id: 111 } });window.open(route .href, '_blank');
2019-12-16 11:30:45
590
原创 解决 sockjs-node/info?t=报错
1. 找到/node_modules/sockjs-client/dist/sockjs.js2.找到代码的 1605行try { // self.xhr.send(payload); 把这里注掉 } catch (e) { self.emit('finish', 0, ''); self._cleanup(false); }...
2019-11-28 11:19:57
5331
原创 js检测特殊符号并替换
let reg = /\uD83C[\uDF00-\uDFFF]|\uD83D[\uDC00-\uDE4F]/g if (content.match(reg)) { wx.showToast({ title: '不能使用特殊符号哟', icon: 'none' }) return content.replace(/\uD...
2019-11-27 10:58:29
761
原创 vue-cli+koa2+nuxt.js 构建项目操作笔记
新建项目：// 新建vue-clinpm install -g @vue/cli// 删除vue-clinpm uninstall vue-cli -g// 创建一个项目hello-worldvue create hello-worldVSCode新建.vue文件模板：Ctrl + Shift + P打开控制台，输入snippets(首选项：配置用户代码片段）； 接...
2019-11-07 14:52:37
392
原创 微信小程序swiper来回切换闪烁
问题：swiper组件自动播放时，左右来回切换闪烁原因：解决方案：不要对current重新赋值，改写一下用curswiperChange (e) { this.setData({ cur: e.detail.current }) },...
2019-10-28 18:00:31
2211
原创 程序猿表白动画：爱心怦怦跳！
效果展示：html:<div class="chest"> <div class="heart left sided top"></div> <div class="heart center"></div> <div class="heart right sided"></div&g...
2019-09-23 14:40:41
237
原创 四级联动
简单的四级联动效果：html: <div class="form-control"> <label class="form-label">大区</label> <select id="area" name="area" class="select"> ...
2019-09-05 16:52:32
1237
原创 前端本地文件上传的常用方式
常用的两种本地文件上传方式是：通过 input type="file" 选择本地文件 通过拖拽的方式第一种方式最常用，代码如下：html:<form enctype="multipart/form-data" method="post"> <input type="file" id="file-input" name="fileContent">...
2019-07-09 11:37:25
1049
原创 微信小程序ios中下拉刷新会触发了上拉加载
首先看一下官方解答：从官方的回答看出这个问题并没有解决，是小程序的onReachBottom 在ios下的BUG。所以解决函数的触发问题可能非常复杂。于是考虑从即使触发后也不影响页面数据出发。比如我们写的商品数据的加载，如果商品goods数组长度为0，则即使触发onReachBottom也不加载下一页就行。具体代码：...
2019-06-21 15:10:59
581
原创 优化重复值处理
场景：地图可见区域房源数据，在拖动地图时需要知道哪些是已经有的房源，哪些是新加的房源，超出区域的房源需要删掉。解决方案：两个数组，需要找出第一个数组里面的重复值和非重复值。即一个数组保存上一次数据，另一个数组保留新数据。重复值保留，非重复值删除。1.双重循环 var lastHouse = []; filterHouse: function (houses) { ...
2019-05-24 18:00:10
178
原创 css解决高度height从0到auto问题
可以利用max-height来做高度动画，height:0改为max-height:0,height:auto改为max-height:1000（一个达不到的值就行）。具体css代码：.lists{ max-height: 0; overflow: hidden; transition: all .3s ease; opacity: 0;}.lists.showLi...
2019-05-13 15:39:48
3679
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人