- 博客(56)
- 收藏
- 关注
RSS订阅
原创 webpack系列 —— 打包原理
为什么要使用webpack?如今的很多网页其实可以看做是功能丰富的应用，它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度，前端社区涌现出了很多好的实践方法:模块化，让我们可以把复杂的程序细化为小的文件;类似于TypeScript这种在JavaScript基础上拓展的开发语言：使我们能够实现目前版本的JavaScript不能直接使用的特性，并且之后还能能装换为JavaScript文件使浏览器可以识别；scss，less等CSS预处理器.........这
2021-04-27 10:39:31
15946
3
原创 前端实现在线预览文件
XDOC可以实现预览以DataURI表示的DOC文档，此外XDOC还可以实现文本、带参数文本、html文本、json文本、公文等在线预览，具体实现方法请看官方文档。word、ppt、xls文件实现在线预览的方式比较简单可以直接通过调用微软的在线预览功能实现（预览前提：资源必须是公共可访问的）实现 word、xls、ppt文件在线预览功能。
2023-08-31 17:59:11
934
转载 CSS 修改 滚动条默认样式
2、设置overflow为scroll（如果只想保留横向或者竖向的滚动条的话，直接设置overflow-x或overflow-y）1、首先我们要给div一个固定的高度或者最大的高度（height）3、给改div或者整个页面添加css，就可以了。
2023-05-29 16:48:16
683
原创 Vue3 + vite PC端自适应
网上有很多Vue3.0 + vite 自适应PC端的文章，我也尝试过其他方式，只有这种方式在我的项目中没出现各种各样的问题。
2023-05-29 14:53:32
2063
6
原创 nextTick 运行机制
每设置一个nextTick就新建一个setTimeout，毕竟一个setTimeout是异步，两个setTimeout也是异步，两个都要等再同步代码执行完毕之后才执行，那我直接只设置一个setTimeout不就好了。所以，当三次修改数据的时候，会push回调数组，三个watcher.update，但是只有第一次是push成功的，其他的会被过滤掉，因为已经存在了。首先，nextTick并不是浏览器本身提供的一个异步API，而是Vue中，用过由浏览器本身提供的原生异步API封装而成的一个异步封装方法。
2023-04-17 13:57:07
377
原创 react-redux中connect与其的装饰器用法@connect
react-redux中connect的装饰器用法@connect：最近在琢磨react中的一些小技巧，这篇文章记录一下在redux中用装饰器来写connect。https://www.jianshu.com/p/d07ccef9f4f0react-redux的connect用法详解：https://blog.csdn.net/yoonerloop/article/details/112058929...
2021-12-07 11:55:19
382
1
原创 js的事件机制总结
js的事件机制包括三个阶段，捕获、目标和冒泡。1. 事件冒泡微软提出了名为事件冒泡的事件流。事件冒泡可以形象地比喻为把一颗石头投入水中，泡泡会一直从水底冒出水面。也就是说，事件从最内层的元素开始发生，一直向上传播，直到document对象。2. 事件捕获网景提出另一种事件流名为事件捕获与事件冒泡相反，事件从最外层开始发生，直到最具体的元素。上面的例子在事件捕获的概念下发生click事件的顺序应该是 document -> html -> body -> div -> p
2021-12-06 10:51:06
748
1
转载 如何判断是PC端还是移动端
// app.vue 中 mounted() { if (this.browser().mobile || this.browser().android || this.browser.ios || document.body.clientWidth < 787) { // 判断是否是移动端 console.log('这里是移动端') } else { console.log('这里是pc端') } window.addEventListe
2021-12-03 11:06:26
1813
原创 vue系列 —— vue-route详细使用方法
说到路由， 我们最熟悉的路由是什么呢？ 那就是路由器了。 其实路由器有两个重要的功能： 路由和传送路由： 路由决定数据包从哪里来， 到哪里去。 也有是来源和目的地的路径。路由中有一个路由表，路由表本质上就是一个映射表，决定了数据包的传输方向。传送： 传送是将输入端的数据传送给输出端下面我们先来搭建一个项目, 然后一边学习一遍在项目里实战创建vue-cli2项目vue init webpacek vueroute然后一路向下就可以了, 如果本地创建项目很慢, 可以采用离线创建项目的
2021-11-30 10:34:33
35489
14
原创 了解CommonJS模块化规范
1.概述Node应用由模块组成，采用CommonJS模块规范。每个文件就是一个模块，有自己的作用域。在一个文件里面定义的变量、函数、类，都是私有的，对其他文件不可见。// example.jsvar x = 5;var addX = function (value) { return value + x;}上面代码中，变量x和函数addX，是当前文件example.js私有的，其他文件不可见。如果想在多个文件分享变量，必须定义为global对象的属性。global.wrni.
2021-11-30 10:31:56
288
2
原创 观察者模式和发布订阅模式的区别是什么？
观察者模式和发布订阅模式的区别是什么？观察者模式和发布订阅模式最大的区别就是发布订阅模式有个事件调度中心。观察者模式中，观察者和目标直接进行交互，观察者由具体目标调度，每个被订阅的目标里面都需要有对观察者的处理。而发布订阅模式中同一由调度中心进行处理，订阅者和发布者互不干扰。这样一方面实现了解耦，还有就是可以实现更细粒度的一些控制。比如发布者发布了很多消息，但是不想所有订阅者都接收到，就可以在调度中心做一些处理，类似于权限控制之类的。还可以做一些节流操作。......
2021-11-30 10:30:24
339
原创 webpack系列 —— 性能优化篇
一 压缩图片和css压缩图片image-webpack-loader 来压缩图片文件// image-webpack-loader 使用 imagemin 来进行压缩use: [ 'file-loader', // 需要在file-loader之后添加 image-webpack-loader { loader: 'image-webpack-loader', options: { // 压缩 jpg
2021-11-30 10:29:28
415
原创 vue2.0源码入口
vue系列第二篇—vue源码分析入口vueJS一. vue源码我们安装好vue以后， 如何了解vue的的代码结构， 从哪里下手呢？1.1. vue源码入口vue的入口是package.json<image src=“https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a0c1fe1b2e4447e69de4c25f60d141b8~tplv-k3u1fbpfcp-watermark.image” width=“60%”/>来分别看看
2021-11-30 10:27:54
1168
1
原创 webRtc直播技术难点
webRtc直播技术难点如何做到秒开视频音视频同步如何保证如何切换不同分辨率如何解决弱网问题如何做到秒开视频？通过服务端缓存关键帧，在客户端加入房间时，把缓存的关键帧发送给客户端音视频同步如何保证？同步公式来计算同步的音视频如何切换不同分辨率？MCU通过推送两种流的方式，比如720p和480p如何解决弱网问题？？？（待解决）...
2021-11-23 23:05:02
159
原创 RTC和RTMP
RTC直播发布流程：offer + answer 模型直播订阅流程：1. 使用UDP私有协议来进行媒体拉流2. 适用高互动性的直播场景，如在线教育、电商直播、远程医疗3. 低延时（< 300ms）和无卡顿4. 快速切换分辨率，无需写上，服务器也可以根据用户网络情况，进行分辨率的切换RTC流程：1. 推流客户端：采集本地音视频 --> 编码 --> 发送给RTN传输网络2. RTN传输网络：接收数据，并转发给下行拉流客户端3. 拉流客户端：接收数据 -->.
2021-11-23 22:54:12
1651
原创 网络协议 —— HTTP协议详解
HTTP协议通过本文你将了解：HTTP协议概述发展历史URL与URIHTTP请求方法HTTP状态码HTTP报文工作流程TCP与HTTP一、 HTTP协议1、概述超文本协议（英文：HyperText Transfer Protocol，缩写：HTTP）是一种用于分布式、协作式和超媒体信息系统的通信协议。它是一个应用层协议，承载于TCP协议之上，是万维网的数据通信的基础。它允许将超文本标记语言（HTML）文档从Web服务器传送到客户端的浏览器。2、作用规定了应用进程间通信的准
2021-09-28 19:08:54
1950
原创 CSS —— 盒模型
概念CSS 盒模型本质上是一个盒子，盒子包裹着HTML 元素，盒子由四个属性组成，从内到外分别是：content 内容、padding 内填充、border 边框、外边距 margin盒模型的分类W3C 盒子模型(标准盒模型)- IE盒子模型（怪异盒模型）两种盒模型的区别：宽度和高度的计算方式不同标准盒模型：width: content-widthheight: content-height怪异盒模型:width = content-width + padding-wid
2021-09-28 17:46:46
115
原创 CSS —— BFC机制
参考：https://www.cnblogs.com/qs-cnblogs/p/12349887.html参考：https://blog.csdn.net/sinat_36422236/article/details/88763187BFC 定义BFC直译为“块级格式化上下级”。它是一个独立的渲染区域，只有Block-level box 参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。个人理解1、BFC是一个独立的布局环境，BFC内部的元素布局与外部互不
2021-09-28 17:10:35
679
1
原创 CSS —— 选择器
CSS选择器笔记（阮一峰）：1、基础选择器2、复合选择器目的是为了选择更准确更精细的目标元素标签。复合选择器就是由两个或者多个基础选择器，通过不同方式组合而成的。3、CSS选择器的三大特性：1）层叠性（即后浪推前浪）相同选择器相同属性设置相同样式，此时一个样式会覆盖另一个样式。样式冲突遵循的是就近原则。样式不冲突则不会层叠2）继承性（即子承父业）子标签会继承父级的某些样式，如文本颜色、字体等以text-、font-、line-开头的元素以及color属性等都可
2021-09-28 16:27:41
5696
原创 关于HTML
一、html语义化、结构化的理解：参考：https://www.cnblogs.com/fliu/articles/5244866.html什么是HTML语义化？<基本上都是围绕着几个主要的标签，像标题（H1~H6）、列表（li）、强调（strong em）等等>根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。为什么要语义化？a. 为了在没有CSS的情况下，页面也能呈现出很好的内容结构、代码结构（为
2021-09-28 15:13:14
95
原创 前端基本功
基本功考察关于Html html语义化标签的理解; 结构化的理解; 能否写出简洁的html结构; SEO优化 h5中新增的属性; 如自定义属性data, 类名className等, 新增表单元素, 拖拽Drag h5中新增的API, 修改的API, 废弃的API 稍作了解 (离线存储, audio, video)关于CSS CSS选择器( 三大特性 ) BFC机制盒模型 CSS模块化开发(封装); SCSS和LESS的使用 屏幕适配 以及 页面自适应 CSS3中新增的选择
2021-09-28 11:06:47
106
原创 Node.js的模块系统
一、模块化的定义① 具有文件作用域② 具有通信规则：加载和导出的规则二、CommonJS模块规范1. nodejs中的模块系统，具有文件作用域，也具有通信规则，使用require方法加载模块，使用exports接口对象导出模块的成员。2. 加载require① 语法：var 自定义变量 = require("模块")② 两个作用：执行被加载模块中的代码，得到加载模块中的exports导出接口对象。3. 导出exports① nodejs中的是模块作用域，默认文件中的所有成员只在当前文件
2021-09-13 08:30:26
242
原创 react 错误边界
错误边界（Error boundaries）从react v16开始，引入边界错误概念。本文将展示如何使用错误边界捕获来自react组件的错误默认情况下，若一个组件在渲染期间（render）发生错误，会导致整个组件树被卸载错误边界：是一个组件，该组件会获取到渲染期间（render）子组件发生的错误，并有能力阻止错误继续传播目的：某些UI崩溃，不至于整个webapp崩溃一.组件中添加捕获错误注⚠️：必须是class组件。1. 编写生命周期函数 getDerivedStateFromError
2021-08-12 10:00:52
236
原创 安装create-react-app报错 npm ERR! code EINVALIDTAGNAMEnpm ERR!
// 命令npm install -g create-react-app// 报错内容npm ERR! code EINVALIDTAGNAMEnpm ERR! Invalid tag name "create-react-app ": Tags may not have any characters that encodeURIComponent encodes.解决方式：安装旧版对等依赖项npm install --legacy-peer-depsnpm install .
2021-08-02 17:24:02
1902
原创 react 列表&key
KeysKeys 可以在 DOM 中的某些元素被增加或删除的时候帮助 React 识别哪些元素发生了变化。因此应当给数组中的每一个元素赋予一个确定的标识。const numbers = [1, 2, 3, 4, 5];const listItems = numbers.map((number) => <li key={number.toString()}> {number} </li>);一个元素的 key 最好是这个元素在列表中拥有的一个独
2021-08-02 02:45:04
519
原创 Vue 3.0双向绑定原理的实现
proxy方法vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过new Proxy()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。Vue 3.0与Vue 2.0的区别仅是数据劫持的方式由Object.defineProperty更改为Proxy代理，其他代码不变。具体实现过程的代码如下：1....
2021-07-19 11:58:05
1415
原创 Vue 2.0双向绑定原理的实现
Object.defineProperty方法vue.js是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter、getter，在数据变动时发布消息给订阅者，触发相应的监听回调。具体实现过程的代码如下：定义构造函数 function Vue...
2021-07-18 14:46:18
98
原创 简易版vuex源码
实现一个插件：挂载 $store实现store以下是实现的一份简易版 vuex 源码：// 一、缓存Vue构造函数let Vue; // 二、核心：声明一个Store类class Store { constructor(options) { //访问state方法：this.$store.state.xxx this._vm = new Vue ({ // Vue会把data里的数据变为响应式， .
2021-07-15 15:47:16
109
原创 vue —— Vuex状态管理
Vuex学习目标Vuex 概述Vuex 基本使用步骤Vuex 核心概念一、Vuex概述1.1组件之间共享数据的方式父向子传值：v-bind 属性绑定 ( props )子向父传值：v-on 事件绑定 ($emit自定义事件)兄弟组件之间数据： EventBus5. $on 接收数据的那个组件6. $emit 发送数据的那个组件1.2 Vuex 是什么Vuex 是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间的数据的共享。1.31）使用Vuex统一管理状
2021-07-14 10:02:41
144
原创 vue生命周期 —— 模板编译
Vue 的 template 是如何编译成真正的 HTML 并做到双向绑定等等特殊功能的呢？在这张图中，我们可以看到 Vue 的模板编译是在 $mount 的过程中进行的，在 $mount 的时候执行了 compile 这个方法来将 template 里的内容转换成真正的 HTML 代码。complie 之后执行的事情也蛮重要的，这个我们留到最后再说。complie 最终生成 render 函数，等待调用。这个方法分为三步：parse 函数解析 template optimize 函数优化静态
2021-06-30 07:51:34
420
原创 webpack系列 —— 模块化原理-CommonJS
webpack是基于node.js开发的，而node.js开发的模块化规范是commonJS.webpack npm node之间关系？webpack是npm生态中的一个模块，我们可以通过全局安装webpack来使用webpack对项目进行打包； webpack的运行依赖于node的环境，没有node是不能打包的，但是webpack打包后的项目本身只是前端静态资源和后台没有关系，也就是说不依赖与node，只要有后台能力的都可以部署项目 npm是于Node社区中产生的，是nodejs的官..
2021-05-25 12:43:18
1203
原创 webpack5的变化
webpack5 :这个版本的重点在于以下几点。尝试用持久性缓存来提高内置性能。 尝试用更好的算法和最小值来改进长期缓存。 尝试用更好的Tree Shaking和代码生成来改善包大小。 尝试改善与网络平台的兼容性。 尝试在不约会任何破坏性变化的情况下，清理那些在实现v4功能时处于奇怪状态的内部结构。 尝试通过现在约会突破性的变化来为未来的功能做准备，使其能够重新连续地保持在v5版本上。一、webpack 5 的介绍及下载webpack 5 通过持久缓存提高构建性能。webpack 5
2021-04-07 16:12:58
2984
原创 webpack基础配置
const path = require('path');// 为html文件中引入的外部资源如script、link动态添加每次compile后的hash，防止引用缓存的外部文件问题// 可以生成创建html入口文件，比如单页面可以生成一个html文件入口，配置N个html-webpack-plugin可以生成N个页面入口// 注意版本问题（ TypeError: Cannot read property 'tap' of undefined at HtmlWebpackPlugin）co
2021-04-02 19:03:04
595
原创 vue中使用Ueditor编辑器
vue中使用Ueditor编辑器一、下载包：从Ueditor的官网下载1.4.3.3jsp版本的Ueditor编辑器，官网地址为： http://ueditor.baidu.com/website/下载解压后会得到如果下文件目录：将上述Ueditor文件夹拷贝到vue项目的static文件夹中，此文件夹为项目的静态服务文件夹；二、修改配置 在ueditor.config.js中修改如下代码：// 这里是配置Ueditor内部进行文件请求时的静态文件服务地址 w...
2021-03-19 19:18:31
10957
7
原创 webpack配置
阅读《深入浅出的webpack》-配置整体配置结构：constpath=require('path')module.exports={//entry表示入口，Webpack执行构建的第一步将从Entry开始，可抽象成输入//类型可以是string、object、arrayentry:'./app/enty',//只有1个入口，入口只有一个文件entry:['./app/entry1','./app/entry2'],//只有1个入口，入口有...
2021-03-18 16:49:45
179
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人