xfy196的博客

【代码】如何一键清除文件目录下所有的node_modules。

theme: v-green熟悉React的开发者并不陌生Redux是什么,一个状态管理容器，简单来说就是帮助前端存储交互的数据的容器。笔者今天聊的就是如何手写一个Redux，破除那些把Redux神话的同学么。Tip: 一定要熟悉JavaScript的原理哦了解Redux的运行原理三大原则单一数据流State只读只能使用纯函数来执行修改工作原理从图片中我们可以看到，Redux的工作原理Action Creators通过派发方法dispatch ,然后派发的action会被Red.

先来聊聊Vue3.0的变化Vue3.0相比Vue2.0发生了翻天覆地的变化，从设计理念，到架构模式都发生了变化，笔者列入最核心的变化diff设计变化，将dom渲染做到极致优化静态变量提升，提高无效的dom渲染监听缓存机制，让重复的数据流操作消失组合式的API，然代码的耦合度更低重写object.defineproperty()的数据双向绑定,使用Proxy代理重写划重点，今天我们聊的只是基于Proxy实现的响应式代理默认大家已经明白Proxy的原理是什么，如果大家还不太了解Proxy

简介TailWind.css是什么？(顺风)？他是一个CSS的工具集。Tailwind CSS 是一个高度可定制的基础层 CSS 框架，它为您提供了构建定制化设计所需的所有构建块，而无需重新覆盖任何内建于框架中的设计风格。繁杂在日常的项目开发阶段，我们最头疼的就是各种情况的兼容和布局自适应问题，每当不同的业务场景和数据场景都会出现不同的布局适应问题，这个时候开发人员大量时间都会忙于调试布局问题，兼容问题，包括每一个页面基础架子的搭建，都会需要重新设计，除非你自己设计一套可以兼容该项目的CSS框架，这

前文react-redux主要提供的功能是将redux和react的组件关联起来。使用提供的connect方法可以使得任意一个react组件获取到全局的store。 实现方法是将store存放于由provider提供的context上，在调用connect时， 就可将组件的props替换， 让其可以访问到定制化的数据或者方法。目标本文尝试使用react-hook来替代react-redux的基本功能。react-redux的特点：全局维护一个store任何组件都可以获得store，最好prop

Kbone原理解析官方介绍Kbone 是一个致力于微信小程序和 Web 端同构的解决方案。Web框架的基本原理首先我们来看下普通Web端框架，以Vue框架为例，一份Vue模板对应一个组件，在代码构建阶段编译成调用Dom接口的JS函数，执行此JS函数就会创建出组件对应的Dom树，从而渲染到浏览器页面上。[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cf3NBomO-1610640222649)(https://s3.ax1x.com/2021/01/13/sNoGk

vue3.0的发布的已经有三个月，三个月中作者尝试着vue3.0的完成一些模块的开发。这里分享一下vue3.0为什么有人说不太好用。一、完全抛弃options api的作风，改用composition api的写法了解vue2.0的都知道vue2.0是基于配置参数的风格去开发的，所有的代码都会已配置为入口，如data, method, computed, filter,watch这样的操作都是需要配置入口的，但是vue3.0完全抛弃这样的做法。采用了类似react的hooks的作风，如reactive,

vue中Axios的封装和API接口的管理如图，面对一团糟代码的你~~~真的想说，What FUC~K！！！回归正题，我们所要的说的axios的封装和api接口的统一管理，其实主要目的就是在帮助我们简化代码和利于后期的更新维护。一、axios的封装在vue项目中，和后台交互获取数据这块，我们通常使用的是axios库，它是基于promise的http库，可运行在浏览器端和node.js中。他有很多优秀的特性，例如拦截请求和响应、取消请求、转换json、客户端防御XSRF等。所以我们的尤大大也是果断放

面试题(第一弹)1.vue-router路由权限认证如何做？vue-router做路由权限认证，首先需求来源，根据不同的用户拥有不同的权限，例如:管理员，超级管理员，普通用户，他们登陆成功，所看到的东西是不一样的，所以也引发了不同角色登录成功会出现不同的路由这个话题了。来讲讲具体怎么做吧！！！首先在没有登录之前，可能除了登录页面和注册页面，其他的页面是没有办法进入，的这个时候我们需要使用到vue的路由前置守卫beforeEach了router.beforeEach((to,from,next) =&

border.css该css样式用于解决移动端1像素边框问题。问题分析：有些手机的屏幕分辨率较高，是2-3倍屏幕。css样式中border:1px solid red;在2倍屏下，显示的并不是1个物理像素，而是2个物理像素。为了解决这个问题，引入border.css是非常有必要的。具体代码@charset "utf-8";.border,.border-top,.border-right,.border-bottom,.border-left,.border-topbottom,.bor

使用for in 去遍历 对象会将prototype上面扩展的方法或者属性也打印出来// 递归写法Object.prototype.clone = function(){ let o = this.constructor === Array ? [] : {}; for(let e in this){ o[e] = typeof this[e] === "object" ? this[e].clone() : this[e]; } return o; }

$('body').before('<div id="fps" style="z-index:10000;position:fixed;top:3;left:3;font-weight:bold;"></div>'); var showFPS = (function () { var requestAnimationFrame = window.requestAnimationFrame || .

首先安装babel转换器yarn add @babel/core @babel/preset-env @babel/plugin-proposal-decorators -Dnpm i @babel/core @babel/preset-env @babel/plugin-proposal-decorators -D在你的react根目录下创建.babelrc文件写入{ "presets": [ "@babel/preset-env" ], "plugins"

MVVM是Model-View-View-Model的缩写Model:代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑View: 代表UI组件，他负责将数据模型转化UI展现出来ViewModel: 监听模型数据的改变和控制视图行为。处理用户交互，简单理解是一个同步View和Model的对象，连接Model和View。在MVVM架构下，View和Model之间没有直接的联系，而是通过ViewModel进行交互 ，Model和ViewModel之间的交互是双向的，因此View数据的变化

关于如何计算remrem是指根元素(root element html) 的字体大小 ，根元素默认的字体大小为16px。rem是通过根元素进行适配的，网页中的根元素是html我们通过设置html的字体大小就可以控制rem的大小；所以默认我们认为1rem=16px； 2rem=32px。如果为了方便计算我们一般设置1rem=100px，我们需要设置字体大小为100px所以我们一般在js中做判断；：<script> (function(){ let a = d

Webpack性能优化在使用webpack打包的时候，当我们的项目工程越来越大的时候就会出现打包的时间越来越长，这个时候需要对打包资源进行一系列的优化。减少Webpack打包时间优化Loader对于 Loader 来说，影响打包效率首当其冲必属 Babel 了。因为 Babel 会将代码转为字符串生成 AST，然后对 AST 继续进行转变最后再生成新的代码，项目越大，转换代码越多，效率就越低。当然了，我们是有办法优化的。首先我们可以优化 Loader 的文件搜索范围module.exports

图片优化计算图片大小对于一张 100 * 100 像素的图片来说，图像上有 10000 个像素点，如果每个像素的值是 RGBA 存储的话，那么也就是说每个像素有 4 个通道，每个通道 1 个字节（8 位 = 1个字节），所以该图片大小大概为 39KB（10000 * 1 * 4 / 1024）。但是在实际项目中，一张图片可能并不需要使用那么多颜色去显示，我们可以通过减少每个像素的调色板来相应缩小图片的大小。了解了如何计算图片大小的知识，那么对于如何优化图片，想必大家已经有 2 个思路了：减少像素

解决办法参考https://segmentfault.com/a/1190000010984731?utm_source=tag-newestnpm uninstall node-sassnpm i node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/

自定义视频播放组件css部分 <style type="text/css"> * { margin: 0; padding: 0; } ul { list-style: none; } .container { width: 80%; margin: 0 auto; } .videoBox { width: 8...

浏览器端存储技术CookieCookie 是指存储在用户本地终端上的数据，同时它是与具体的 Web 页面或者站点相关的。Cookie 数据会自动在 Web 浏览器和 Web 服务器之间传输，也就是说 HTTP 请求发送时，会把保存在该请求域名下的所有 Cookie 值发送给 Web 服务器，因此服务器端脚本是可以读、写存储在客户端的 Cookie 的操作。LocalStorage在 HTM...

作为 Web 开发人员，开发和调试 REST API 是家常便饭。我们会用一些工具来模拟 HTTP 请求，最常用的可能就是 Postman 了。前不久还冒出一个女版 Postman，那就是 Postwoman，详情可见我之前写的一篇介绍：还在用 Postman 测试接口？是时候试试 Postwoman 了！这些工具确实很实用，但也存在一些局限性。通过模拟 HTTP 请求来测试 REST API...

什么是楼梯特效？如果各大网站点击按钮本页面跳转对应的板块的功能就是楼梯效果思路大家可以看到左侧的按钮和右侧的内容板块是一一对应的，所以我们需要知道右侧每个板块在当前页面的位置在可以通过左侧的楼梯去控制右侧的板块内容的跳转。试想，右侧每一个板块都会距离页面顶端距离，只需要点击左侧按钮让对应位置的楼梯跳转到对应板块的高度位置即可。接下来具体代码实现.js核心代码 // 梯子对象 ...

1、DOCTYPE有什么作用？标准莫诗雨混杂模式如何区分？它们有何意义？告诉浏览器使用哪个版本的HTML规范来渲染文档。DOCTYPE不存在或形式不正确会导致HTML文档以混杂模式呈现。 标准模式（Standards mode）以浏览器支持的最高标准运行；混杂模式（Quirks mode）中页面是一种比较宽松的向后兼容的方式显示。2、HTML5为什么只需要写 <!DICTYPE HTM...

jQuery zTreezTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。本教程是为了配合项目实战 的简易教程，主要实现了 异步加载 树形结构数据的功能，具体用法请参考官方文档官方文档页面引用css部分 <link rel="stylesheet" href="/static/assets/plu...

jQuery treeTabletreeTable 是跨浏览器、性能很高的 jQuery 的树表组件，它使用非常简单，只需要引用 jQuery 库和一个 js 文件，接口也很简单优点：兼容主流浏览器：支持 IE6 和 IE6+, Firefox, chrome, Opera, Safari接口简洁：在普通表格的基础上增加父子关系的自定义标签就可以组件性能高：内部实现了只绑定了 tabl...

jQuery DatatablesDataTables 是一款 jQuery 表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。中文网站：http://www.datatables.club/实例索引：http://www.datatables.club/example/参考手册：http://www.datatables.club/manual/帮助文档：h...

页面引用CSS部分<!-- iCheck for checkboxes and radio inputs --><link rel="stylesheet" href="/static/assets/plugins/iCheck/all.css">JS部分<!-- iCheck 1.0.1 --><script src="/static/as...

页面引用<!-- jQuery Validation 1.14.0 --><script src="/static/assets/plugins/jquery-validation/js/jquery.validate.js"></script><script src="/static/assets/plugins/jquery-validation...

Gulp是一个前端自动化构建工具，基于流的的构建系统，主要优点是速度，效率和简化Gulp可以干什么？开发服务器，Sass,Less或Stylus文件的预处理器，处理JavaScript的自动化脚本，代码优化工具，压缩，编译或移动文件Gulp的官网 https://www.gulpjs.com.cn/gulp类似的工具 : grunt webpackgulp是基于nodejs的， g...

为什么使用深浅拷贝在JS中我们经常会遇到一个数据赋值，但是又不符合真正意义上的数据赋值的问题。这个问题产生的原因又是什么呢？这就先要了解一下JS的数据类型了，在JS中数据类型分为基本数据类型和引用数据类型两大派系。众所周知基本数据类型存储的位置就是栈中，以key=>value的形式去存储的，每一个value都对应一个key，但是在引用数据类型中他的存储结构并不是栈而是堆，在堆中堪比一个空间...

PromisePromise是什么？主要用异步计算可以异步操作队列化，按照期望的顺序执行，返回符合的数据可以再对象之间传递和操作promise，帮我们处理队列为什么会有Promise呢？为了避免任务冻结同步：假设你去了一家饭店，找个位置，叫来服务员，这个时候服务员对你说，对不起我是“同步”服务员，我要服务完这张桌子才能招呼你。那桌客人明明已经吃上了，你只是想要个菜单，这么小的动...

不明白为什么是烟花优化版本的先参考作者的烟花基础版本烟花优化版本主要实在优化爆炸的范围和运动上做了优化，爆炸范围我们采用已圆的爆炸方式，以鼠标点击的位置为圆形爆炸的烟花效果<!DOCTYPE html><!-- * @Descripttion: * @version: * @Author: 小小荧 * @Date: 2020-03-18 19:15:15...

html代码部分<!DOCTYPE html><!-- * @Descripttion: * @version: * @Author: 小小荧 * @Date: 2020-03-18 19:15:15 * @LastEditors: 小小荧 * @LastEditTime: 2020-03-18 20:14:28 --><html lang...

JS面向对象介绍首先面向对象是什么?为什么要使用面向对象。因为JavaScript对每个创建的对象都会自动设置一个原型（谷歌火狐中是proto），指向它的原型对象prototype，举个例子：function persoon(){}那么person的原型链就是：person(proto) > Function.prototype(proto) > Object.protot...

在JS中元素运动的时候我们需要使用一些运动的操作，这里作者自己设计了一个简单的运动函数，可以实现匀速和缓冲运动效果。/* * @Descripttion: * @version: * @Author: 小小荧 * @Date: 2020-03-17 18:01:21 * @LastEditors: 小小荧 * @LastEditTime: 2020-03-17 19:11:01...

小案例带你揭秘JS事件### 什么是事件？在js中一个事件的组成由那些呢？谁触发事件：事件源触发什么事件: 事件的类型触发事件干什么事：事件处理函数事件传播的过程捕获阶段就是从window事件处理函数开始，依次向内，只要事件目标的事件处理函数都会执行执行顺序是从上到下的函数执行顺序目标阶段你触发在哪个元素上那么这个事件的目标源就是谁冒泡阶段从事...

DOM概念所谓DOM，其实就是 Document Object Model文档对象模型，毫无疑问，这个东西是让我们去操作对象的，那什么是对象呢？其实就是文档的对象。，在文档中一切皆为对象，比如html,body, p,div等等这些都是文档的对象。通过操作这些对象我们可以对这些文档对象进行有趣的操作，比如点击div然后div随机变换背景色。解析过程HTML加载完成，渲染引擎会在内存中把ht...

什么是函数呢？对于JS来说，我们可以把函数理解为任意一段代码放在一个盒子里，在我们想要让这段代码执行的时候，直接执行这个盒子里的代码就行。专业一点来讲：js函数就是由事件驱动的可执行课重复只用的代码块。函数定义函数定义基本有三种为声明式，赋值式和构造函数式声明式使用function关键字去声明一个函数语法:function fn() { }//这个function就声...

为什么会出现浏览器兼容问题？1、各大厂商出于自身利益考虑而设置的种种技术壁垒，都让CSS应用起来比想象得要麻烦2、由于各大主流浏览器由不同的厂家开发，所用的核心架构和代码也很难重和，这就为各种莫名其妙的Bug(代码错误）提供了温床 浏览器内核代表及代表作品Trident 代表作：IE元老级内核之一，有微软开发，并于1997年10月首次在ie4.0中使用，凭借其windows垄断...

在网页布局中我们经常会遇到高度塌陷的这样的问题，那么什么是高度塌陷呢？什么是高度塌陷?父元素高度自适应，子元素float之后，造成父元素高度为0，称为高度塌陷。他的产生条件就是子元素浮动如何解决高度塌陷呢？这里作者总结了8种解决方法和每种方法的优缺点方案一给父元素添加固定高度，适合做高度固定的布局<!DOCTYPE html><html lang="en"&gt...