- 博客(27)
- 收藏
- 关注
RSS订阅
原创 Faicso函数问题——JS作用域，原型链，变量提升
Faicso函数问题——JS作用域，原型链，变量提升今天偶然在一个web前端交流群中看到了一道群友分享的JavaScript面试题，感觉有点意思，在此分享下。题目：function Faicso() { getName = function () { console.log('图片') } return this } Faicso.getName = function () { console.log('微传单')} Faicso.prototype.g
2021-04-07 20:22:24
199
2
原创 TypeScript封装axios——Vue3+TypeScript实践
TypeScript封装axios简介1. 认识axios1.1 为什么选择axios2. axios基本使用3. 用面向对象的思想封装axios3.1 为什么要对axios进行封装？3.2 用面向对象的思想封装axios3.2.1 基础封装3.2.2 支持传入自定义拦截器功能4. 使用封装后的HRequest简介最近在用Vue3 + TypeScript 重构一个Vue2项目，之前项目中用到axios来发送网络请求，进行前后端交互，但并未对axios库做过多的封装，导致代码重复度较高，维护起来比较麻烦
2022-01-03 23:17:23
2905
2
原创 D3js快速入门——用最新版D3js实现树图
文章目录：引言1. D3js 是什么2. D3js 相对其他数据可视化方案的优势2.1 SVG 对比 Canvas2.2 D3.js 对比 Echarts3. 怎么用 D3.js 开发一个树图3.1 前置基础3.2 d3开发树图流程3.3 动手实现一个树图3.3.1 普通tide tree3.3.2 你的树图不简单—— radio tide tree3.3.3 更多可能——更多类型的树图引言上周我们组新开项目，技术调研之后决定使用 d3.js 做数据可视化开发，mentor让我来做初期技术调研，之后的技
2021-08-15 00:42:10
13401
原创 Websocket实现简易聊天室（小小demo）
Websocket实现简易聊天室逛社区的时候，偶然看到一个用Websocket实现聊天室的教程，感觉有点意思，并且想体验下Websocket的使用，于是自己也写了简单（简陋emoj）的聊天室。看看最终效果:写这么简单的CSS（狗头保命）等过段时间，会重做一个功能完善的聊天室。/* css */ #talk { width: 220px; height: 200px; background-color: pink; font-size: 12px
2021-04-17 14:55:40
319
1
原创 输入URL后到页面加载完成都发生了什么？（简记版）
输入URL后到页面加载完成都发生了什么？（简记版）URL解析，生成发送给Web服务器的请求信息，根据请求信息（Web服务器和文件名）生成HTTP请求消息dns解析找对应域名的IP地址（找对应域名的ip地址 ， 查缓存：浏览器缓存 -> 系统缓存 -> 路由器缓存 。缓存查不到找dns服务器：本地dns服务器 -> 根dns服务器 -> 顶级dns服务器 -> 权威dns服务器）找到IP后，根据这个IP以及端口，构造HTTP请求构造好的HTTP请求会被封装再TCP包里，
2021-04-15 17:54:00
154
原创 HTTP协议相关
http学习记录一 . HTTP 基本知识1. HTTP是什么？HTTP是超文本传输协议。超文本传输协议就是，【超文本】【传输】【协议】。超文本：即指【超越了文本的文本】，是图片，文本，视频，尤其关键的超链接等。HTML也是超文本，虽然它本身是文字文件，但它包含了图片，超链接，视频等超文本内容。传输：传输很好理解，就像我们将一个东西从A点搬到B点，或从B点搬到A点。可别小看这个简单的动作，它至少包含了两项重要的信息。其一，传输是双向的。可以从A点到B点，同样也可以从B点到A点。即，浏览器
2021-04-15 16:46:55
201
1
原创 Less学习笔记
Less前言：维护CSS的弊端CSS是一门非程序语言，没有变量，函数，SCOPE(作用域)等概念。CSS需要书写很多看似没有逻辑的代码，CSS代码冗余度比较高。CSS没有很好的计算能力。不方便维护，不利于复用。非前端开发工程师来讲，往往会因为缺少CSS编写经验而很难写出组织良好且易于维护的CSS代码项目。1. Less介绍Less是一门CSS扩展语言，也称为CSS预处理器。Less 作为CSS的一种扩展，他没有减少CSS的功能，并且在现有CSS的语法基础上，为CSS增加了程序式语言的特
2021-04-13 16:58:54
104
原创 媒体查询+rem移动端布局
媒体查询+rem布局移动端布局1.移动端基础2.视口3.二倍图4.移动端调试5.移动端常见布局6.移动端开发之rem布局方案？6.1 rem单位6.2 媒体查询6.2.1 什么是媒体查询？6.2.2 媒体查询的语法规范6.2.3 媒体查询 + rem实现元素动态大小变化6.2.4 引入资源移动端布局1.移动端基础2.视口viewport3.二倍图物理像素像素比4.移动端调试chorme模拟手机调试工工具5.移动端常见布局现在市场上主要有两种布局方案：单独开发移动端（
2021-04-12 23:16:14
467
原创 通俗理解防抖与节流函数
手写js防抖与节流函数概念防抖：顾名思义，防抖就是防止“抖动”，避免一个事件被多次触发。就像大家在上网时难免会遇到网络不佳的时候，网页加载慢，而你心急的不断点击刷新按钮，在刷新进度条还为加载完成的时候，你又再次点击刷新，进度条又重新回到了起点，而最终加载出界面一定是在你最后一次点击刷新后，不再操作等待一定时间的结果。虽然上面的例子并未用到防抖，但表现有相似之处。若是假设每次刷新页面所用时间固定且相同，这样就和执行防抖操作有了相同的表现。防抖函数： function debounce(fun,
2021-04-10 22:31:41
171
1
原创 原型链学习demo
原型链学习demo隐式原型 和 显示原型所有实例对象都有隐式原型，即 _proto_属性。 在ES6语法之前，不能通过隐式原型操作原型对象所有构造函数都有显式原型，即 prototype属性它们的关系是： 实例对象.__proto__ === 构造函数.prototype , 且看下面代码举例（fn.proto === Fn.prototype）。 let Fn = new Function() let fn = new Fn() let obj = {} consol
2021-04-08 23:30:16
93
原创 call()、apply()、bind()从了解到手写
JavaScript 中 call()、apply()、bind() 的用法最近在回顾学习JavaScript的过程中又看到了call(),apply(),bind()这三个方法，在此做个总结。在JavaScript中函数也是对象，对象则有方法，而call(),apply(),bind()就是函数对象的方法，十分重要且很是强大，它们都能够改变函数执行的上下文环境（context），即 this 绑定的对象。且看以下实例快速了解：实例let obj1 = { name: '王乐乐',
2021-04-05 22:41:05
96
2
原创 Promise-异步编程的一种解决方案
Promise-异步编程的一种解决方案1.Promise的含义Promise是异步编程的一种解决方案，比传统的解决方案——回调函数和事件更合理且更强大。简单来说，Promise是一个容器，里面包含着一个未来才会结束的事件。从语法上，promise是一个对象，从它可以获取异步操作的消息。1.1 Promise 的特点Promise有两个特点。1. promise对象的状态不受外界影响。promise有三种状态，Pending(进行中)，Fulfilled(已完成)，Rejected(已失败) 只有
2021-04-02 15:37:23
331
原创 css外边距折叠塌陷
css外边距折叠塌陷1. 什么是外边距折叠？css的外边距折叠是指，毗邻的两个或多个外边距（margin）会合并成一个外边距。毗邻的条件：1.这两个或多个外边距没有被非空内容分隔开，如：border,padding,clear等2.这些margin都处于普通流中2. 发生折叠的情况2.1 非浮动元素的情况一般地，在不分隔的情况下，且没有高度限制，一个元素的margin-top与其第一个子元素的margin-top属性毗邻；其margin-bottom属性与其最后一个子元素的margin-b
2021-03-22 14:21:39
111
1
原创 关于JSON
关于JSON1. 什么是JSONJSON: JavaScript Object Notation(JavaScript 对象表示法)JSON是轻量级的文本数据交换格式JSON独立于语言：JSON使用JavaScript语法来描述对象，但其仍独立于语言和平台，被很多编程语言支持JSON具有自我描述性，更易于理解2. 为什么使用JSON？为什么使用json,也就是说json有哪些优点相比于同样作用的XML2.1 使用XML:1.首先要加载XML文档2.使用XML DOM迭代循环文档3.读取
2021-03-22 10:53:27
101
原创 vue的自定义指令
vue的自定义指令1.创建局部指令var app = new Vue({ el: '#app', data: { }, // 创建指令(可以多个) directives: { // 指令名称 dir1: { // 指令中第一个参数是当前使用指令的DOM inserted(el) { // 对DOM进行操作 console.lo
2021-03-20 21:14:15
97
原创 drag事件，html5新特性
drag事件，html5新特性拖放拖放是一种常见的特性，即抓取对象以后拖到另一个位置。在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。drag事件的使用1.将元素设置为可拖放将属性draggable设置为true draggable="true"2.拖动的是什么在元素拖放的过程中会发生什么？其实拖动的是元素的数据通过 event.dataTransfer.setData()方法可以设置拖动的数据类型和值function drag(e) { e.dataTransfer
2021-03-17 21:19:05
447
原创 click在移动端上有300ms延迟，如何解决？
supermall项目中click在移动端上有300ms延迟，如何解决？解决方式：1.简单粗暴型，禁用缩放<meta name="viewport" content="width=device-width, user-scalable=no">2.(2)利用FastClick插件基本原理：当检测到touchend事件后，立刻模拟click事件，并阻断300ms后真正发出的事件。3.vue项目中的使用1.下载插件npm install fastclick --save2.在ma
2021-03-16 22:28:58
79
原创 flex布局详解笔记
flex布局详解笔记flex布局是什么？Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器（无论行级元素还是块级元素）都可以指定为Flex布局。.box{display: flex;}Webkit内核的浏览器，必须加上-webkit前缀。.box{display: -webkit-flex; /* Safari */display: flex;}二、基本原理采用Flex布局的元素，称为Flex容器（flex contai
2021-03-07 15:20:42
90
原创 vue响应式原理—依赖技术的分析和学习
vue响应式原理—依赖技术的分析和学习<body> <!-- 1.app.message修改数据。Vue内部是如何监听message数据的改变 * Object.defineProperty -> 监听对象属性的改变 2.当数据发生改变，Vue是如何知道要通知哪些人，界面发生刷新。 * 发布订阅者模式 --> <div id="app"> <div&
2021-03-06 18:30:34
122
原创 px2vw-css移动端适配（单位转化插件）
px2vw-css移动端适配（单位转化插件）1.下载插件npm install postcss-px-to-viewport --save--dev2.配置postcss.config.js文件module.exports = { plugins: { autoprefixer: {}, "postcss-px-to-viewport": { viewportWidth: 375,//视窗的宽度，对应的是我们设计稿的宽度
2021-03-05 18:58:40
937
原创 vue-lazyload的使用
vue-lazyload的使用main.js:import Vue from 'vue'import App from './App.vue'import VueLazyload from 'vue-lazyload'Vue.use(VueLazyload)// or with optionsconst loadimage = require('./assets/loading.gif')const errorimage = require('./assets/error.gif')
2021-03-04 20:20:23
222
1
原创 标题和内容的联动效果
标题和内容的联动效果在中监听标题的点击，获取index滚动到对应的主题：获取所有主题的offsetTop问题：在哪里才能获取正确的offsetTop1.created肯定不行，压根不能获取元素2.mounted也不行，数据还没有获取到3.获取到数据的回调中也不行，DOM还没渲染完4.$nextTick也不行，因为图片的高度没有被计算在内5.在图片加载完成后，得到的offsetTop才是正确的本文记录在supermall项目中，Detail.vue组件在实现标题与内容
2021-02-04 17:50:18
397
原创 Better-scroll导致的吸顶效果失效解决方案
Better-scroll导致的吸顶效果失效解决方案问题背景：在supermall项目中为优化商品展示滚动性能，引入better-scroll框架，由于一些不太清楚better-scroll底层实现，导致tabControl.vue的吸顶样式失效。 原本设置的吸顶样式：(已失效)position:stickytop:44px;left:0;right:0;为了恢复这种效果，可采用 狸猫换太子 的办法。问题解决思路：狸猫换太子原样式可删掉（吸顶效果那部分）在组件产生吸顶效果的地方复制
2021-01-30 20:27:36
947
1
原创 Better-scroll可滚动区域问题以及防抖函数处理
Better-scroll可滚动区域问题已知：better-scroll在决定有多少区域可以滚动时，是根据scrollerHeight属性决定的。问题描述：scrollHeight属性是根据放better-scroll的content中的子组件的高度计算的。但是在better-scroll会计算页面的高度，这时候如果页面中的图片还没加载完成则会出现计算的高度与实际不相符后来图片加载进来后有了新的高度，但是scrollHeight并没有进行更新。所以滚动出现问题如何解决这个问题？监听每
2021-01-30 13:36:54
677
4
原创 supermall项目中better-scroll的使用总结
supermall项目中better-scroll的使用总结 引入Better-scroll目的：重构项目中可滚动区域，从而优化性能，增强用户体验一.在index.html中使用Better-scrollconst bscroll = new BScroll( el, { })注意wrapper和content的关系1.监听滚动probeType: 0/1/2(手指滚动)/3（只要是滚动）bscroll.on(‘scroll’,(position) => { })
2021-01-29 17:30:03
136
原创 supermall项目开发记录02
supermall项目开发记录提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档Scroll和BackTop组件开发记录supermall项目开发记录前言一、Scroll组件1.模板2.better-scroll框架二、BackUp组件1.模板2.问题截图2.12.2 .native修饰符2.3 v-bind 与 ref (父访问子)唯一前言本文简要记录Scroll和BackTop组件开发过程中的方案问题与解决方案一、Scroll组件Scroll组件为使特定元素滚动的
2021-01-28 21:42:14
134
原创 supermall项目开发记录01
supermall项目开发记录提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加例如：第一章 Python 机器学习入门之pandas的使用提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录supermall项目开发记录前言一、GoodsList组件二、开发过程1.GoodsList组件和GoodsListItem组件2.CSS样式总结前言supermall是一个移动端购物项目，本文记录项目搭建过程中的学习内容一、GoodsList组件GoodsL
2021-01-27 21:13:25
248
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人