前端
关注
分享
扫一扫
文章平均质量分 56
lpq1201
这个作者很懒，什么都没留下…
展开
-
vue2与vue3实现响应式数据的原理对比
vue2实现原理：对象类型：通过Object.defineProperty()对属性的读取、修改进行拦截（数据劫持）。数组类型：通过重写更新数组的一系列方法来实现拦截。（对数组的变更方法进行了包裹）。Object.defineProperty(data, 'count', { get () {}, set () {}})存在问题：新增属性、删除属性, 界面不会更新。直接通过下标修改数组, 界面不会自动更新。vue3实现原理:通过Proxy原创 2021-08-29 14:24:32 · 226 阅读 · 0 评论 -
JS函数柯里化（Currying）
简介柯里化(Currying)是把接收多个参数的原函数变换成接受一个单一参数（就是将使用多个参数的函数转换成一系列使用一个参数的函数的技术)并返回一个新的函数，新的函数能够接受余下的参数，并返回和原函数相同的结果。function currying(fn,...rest1){ return function(...rest2) { return fn.apply(null,rest1.concat(rest2)) } }例子function sayHello(name,ag原创 2021-08-01 20:09:12 · 309 阅读 · 0 评论 -
js数组去重
数组去重–ES5实现function unique(arr) { const res = arr.filter((item, index, array) => { return array.indexOf(item) === index })}数组去重–ES6实现function unique(arr) { const newArr = [...new Set(arr)] return newArr }原创 2021-07-25 20:03:50 · 145 阅读 · 0 评论 -
JS数据类型判断
typeof 可以正确识别：Undefined、Boolean、Number、String、Symbol、Function 等类型的数据，但是对于其他的都会认为是 object，比如 Null、Date 等，所以通过 typeof 来判断数据类型会不准确。但是可以使用 Object.prototype.toString 实现。//方式１function typeof(arg){//"[object xxx]" const strRes = Object.prototype.toString.ca原创 2021-07-18 20:05:12 · 119 阅读 · 0 评论 -
javascript继承方式总结
javascript继承方式总结原型继承function supType() { this.colors = ["red", "green", "blue"]}supType.prototype.getColors = function () { return this.colors}function subType() {}subType.prototype = new supType()const instance1 = new subType()instance1.c原创 2021-07-11 20:12:20 · 75 阅读 · 0 评论 -
webpack生产环境配置
webpack生产环境配置const { resolve } = require('path');const MiniCssExtractPlugin = require('mini-css-extract-plugin');const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');const HtmlWebpackPlugin = require('html-webpack-plugin原创 2021-07-04 20:44:43 · 107 阅读 · 0 评论 -
this基础总结
1.简介this在面向对象中指的当前对象对的一个引用。但在js中this不是固定不变的，会根据执行环境的改变而变化。在绝大多数情况下，函数的调用方式决定了this的值（运行时绑定）。在函数中this表示全局对象window,指向window；在单独使用时表示全局对象；在方法调用中，this指向调用该方法的对象（如果存在多级调用指向方法的上一级对象）在函数的严格模式下（use strict）this为undefined；在事件中，this指向接受事件的元素；call()、apply()、bind原创 2021-06-27 20:01:40 · 101 阅读 · 0 评论 -
webpack开发环境的使用
webpack依赖关系图webpack 是一种前端资源构建工具，一个静态模块打包器(module bundler)。 在 webpack 看来, 前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理。 它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源(bundle)。在磁盘中新建目录webpack及其子目录：css、js…,并初始化npm(用于安装各种包、插件)index.jsindex.htmlindex.less新建webpack.config原创 2021-06-13 17:58:39 · 119 阅读 · 0 评论 -
浏览器缓存---强缓存与协商缓存
概述当我们第一次访问网站的时候，比如 juejin.cn，电脑会把网站上的图片和数据下载到电脑上，当我们再次访问该网站的时候，网站就会从电脑中直接加载出来，这就是缓存。缓存的好处提升性能，打开本地资源肯定会比请求服务器来的快。缓解服务器压力，不用每次都去请求某些数据了减少带宽消耗，当我们使用缓存时，只会产生很小的网络消耗，至于为什么打开本地资源也会产生网络消耗缓存类型数据库缓存CDN缓存代理服务器缓存浏览器缓存 所谓浏览器缓存其实就是指在本地使用的计算机中开辟一个内存区，同时也原创 2021-06-06 18:14:46 · 453 阅读 · 0 评论 -
JS常用的循环遍历
数组遍历for、forEach、for …ofconst list = [1, 2, 3, 4, 5, 6, 7, 8,, 10, 11];for (let i = 0, len = list.length; i < len; i++) { if (list[i] === 5) { break; // 1 2 3 4 // continue; // 1 2 3 4 6 7 8 undefined 10 11 } console.log(list[i]);}fo原创 2021-05-30 21:27:02 · 2020 阅读 · 0 评论 -
5种实现CSS底部固定的方法
方法一：全局增加一个负值下边距等于底部高度有一个全局的元素包含除了底部之外的所有内容。它有一个负值下边距等于底部的高度html代码：<body> <div class="wrapper"> content <div class="push"></div> </div> <footer class="footer"></footer></body>CSS代码：h.原创 2021-05-23 21:14:00 · 8368 阅读 · 0 评论 -
JavaScript 中如何实现大文件并行下载
在上传大文件时，为了提高上传的效率，我们一般会使用 Blob.slice 方法对大文件按照指定的大小进行切割，然后在开启多线程进行分块上传，等所有分块都成功上传后，再通知服务端进行分块合并。那么对大文件下载来说，我们能否采用类似的思想呢？在服务端支持 Range 请求首部的条件下，我们也是可以实现多线程分块下载的功能，具体如下图所示：## HTTP 范围请求HTTP 协议范围请求允许服务器只发送 HTTP 消息的一部分到客户端。范围请求在传送大的媒体文件，或者与文件下载的断点续传功能搭配使用时非常有用原创 2021-04-25 19:58:57 · 1179 阅读 · 0 评论 -
渲染页面：浏览器的工作原理
大部分情况下，浏览器是单线程执行的。为了有流畅的交互 ，开发者的目标是确保网站从流畅的页面滚动到点击响应的交互性能。渲染时间是关键要素，确保主线程可以完成所有给它的任务并且仍然一直可以处理用户的交互。通过了解浏览器单线程的本质与最小化主线程的责任可以优化Web性能，来确保渲染的流畅和交互响应的及时。原创 2021-04-17 15:05:36 · 201 阅读 · 1 评论 -
树相关算法总结
1二叉树的中序遍历中序遍历：先打印当前节点的左子树，再打印当前节点，最后打印当前节点的右子树**const inorderTraversal = function(root) { const result = []; function pushRoot(root) { if (root !== null) { if (root.left !== null) { pushRoot(root.left);原创 2021-03-28 21:23:18 · 432 阅读 · 1 评论 -
安全之同源策略、CSRF 和 CORS
同源策略 SOP同源策略（Same-origin policy，简称 SOP）跨站请求伪造（Cross-site request forgery，简称 CSRF）跨域资源共享（Cross-Origin Resource Sharing，简称 CORS）先解释何为同源：协议、域名、端口都一样，就是同源。你之所以会遇到 跨域问题，正是因为 SOP 的各种限制。但是具体来说限制了什么呢？如果你说 SOP 就是“限制非同源资源的获取”，这不对，最简单的例子是引用图片、css、js 文件等资源的时候就允原创 2021-03-21 20:35:04 · 391 阅读 · 0 评论