javascript前端
前端相关
布里渊区
这个作者很懒,什么都没留下…
展开
-
函数式编程
柯里化函数:函数元降维技术,柯里化函数帮助我们把一个多元函数变成一个不完全调用,把函数调用变成延迟的偏函数(不完全调用函数)调用。偏函数:所谓偏函数,就是以原函数为基础,将某个位置上的参数固定住,后续参数重新扩展传递给原函数,对外则是生成一个新函数。3、函数式编程,是声明式的编程范式(与之对应的是命令式),逻辑清晰,提高代码可读性。2、纯函数的使用,不与全局状态发生交互,具有独立稳定性,提高代码的可维护性。1、将函数视为积木,通过函数来提高代码的模块化和可重用性。柯里化(代码模块化,提高复用性)原创 2023-01-12 00:06:31 · 217 阅读 · 1 评论 -
rem和vw,vh 移动端自适应
rem布局的本质是基于宽度的等比缩放rem单位都是相对于根元素html的font-size来决定大小的,根元素的font-size相当于提供了一个基准,当页面的size发生变化时,只需要改变font-size的值,那么以rem为固定单位的元素的大小也会发生响应的变化。 因此,如果通过rem来实现响应式的布局,只需要根据视图容器的大小,动态的改变font-size即可。function refreshRem() { var docEl = doc.documentElement;原创 2022-04-25 23:33:50 · 712 阅读 · 0 评论 -
事件循环 EventLoop
1、setTimeout(fn, 0)在下一轮“事件循环”开始时执行2、立即resolve()的 Promise 对象,是在本轮“事件循环”(event loop)的结束时执行setTimeout(function () { console.log('three');}, 0); Promise.resolve().then(function () { console.log('two');}); console.log('one'); // one// two// t原创 2022-04-15 14:15:53 · 149 阅读 · 0 评论 -
Generator生成器 和 Iterator迭代器
generator - 廖雪峰的官方网站IteratorIterator是一种机制,也可以说是一种接口,它为不同的数据结构提供了统一的访问机制。任何数据结构只要配置了 Iterator 接口,就可以完成遍历操作for...of循环的背后调用的正是iteration,数组对象上有iteration属性,数组是一个可迭代对象,因此数组可以被for...of遍历一个数据结构只要部署了Symbol.iterator属性,就被视为具有 iterator 接口,这个接口就可以被for...of循环消原创 2022-03-04 19:08:14 · 465 阅读 · 0 评论 -
Symbol
Symbol - JavaScript | MDN2.3 ES6 Symbol | 菜鸟教程每个从Symbol()返回的symbol值都是唯一的。一个symbol值能作为对象属性的标识符;这是该数据类型仅有的目的。最大的用法是用来定义对象的唯一属性名由于每一个 Symbol 的值都是不相等的,所以 Symbol 作为对象的属性名,可以保证属性不重名。...原创 2022-03-03 21:17:13 · 346 阅读 · 0 评论 -
Vue2 的数据响应式缺陷
const vm = new Vue({ el:'#app', data:{ message:'aaaaaa', user:{ name:'zhang-san' }, list:['aaaa','bbbb','cc...原创 2022-03-03 19:16:04 · 1015 阅读 · 0 评论 -
Vue生命周期
beforCreate 初始化事件和生命周期created 初始化注入和响应式beforMount 把模板编译为render函数mounted 挂载DOMbeforUpdate 数据变化触发更新updatedbeforDestory 移除事件监听,watchers,和子组件destoryedactivated 组件激活deactivated 组件失活...原创 2022-02-23 19:54:41 · 292 阅读 · 0 评论 -
$attrs 和 $listeners
$attrs--继承所有的父组件属性(除了prop传递的属性、class 和 style )$listeners--属性,它是一个对象,里面包含了作用在这个组件上的所有监听器,你就可以配合v-on="$listeners"将所有的事件监听器指向这个组件的某个特定的子元素。1、页面中引用Parent组件<template> <div class="x-page"> <Parent address="上海浦东" name="张..原创 2022-02-23 16:26:55 · 735 阅读 · 0 评论 -
怎么理解vue的单向数据流和v-model双向绑定
Vue 的单向数据流:指数据一般从父组件传到子组件,子组件没有权利直接修改父组件传来的数据,即子组件从 props 中直接获取的数据。子组件使用 $emit 发出一个事件,让父组件接收去修改这个值。v-model 数据双向绑定,和 单向数据流是两个概念。v-model 只是一个语法糖,等同于<input v-model=“phoneInfo.phone”/><input :value="PhoneInfo.phone" @input="val => { Pho原创 2022-02-22 15:51:00 · 695 阅读 · 0 评论 -
微前端-微应用
现在有哪些成熟的微前端框架? - 知乎介绍 - qiankunsingle-spa | single-spa为什么要用微前端?拆分巨型应用,使应用方便迭代更新兼容历史应用,实现增量开发特点:独立部署 增量迁移 团队自治 松耦合代码优点:通过路由进行跨应用程序通信 解决了大型项目如何迭代的问题 解决了多团队技术栈不同的问题,实现react和Vue等框架整合实现方式:NPM式:子工程以NPM包的形式发布源码;打包构建发布还是由基座工程管理,打包时集成。原创 2022-02-22 11:07:07 · 414 阅读 · 0 评论 -
webpack 与 vite 对比
webpack vite 打包原理 把代码打包为立即执行函数,这个转换封装逻辑,代码量越大,打包时间越长 把模块区分为 依赖和源码,用 go写的 esbuild 去预构建 这些依赖,源码部分利用浏览器原生ESM的方式去提供出去。(浏览器请求源码时,vite进行了转换) 热更新 先编译打包,然后更新模块 不需要编译打包 生产环境 仍然需要打包,因为模块嵌套导入会导致网络开销。 打包之后可以进行 tree-shaking / 懒...原创 2022-02-21 16:33:47 · 572 阅读 · 0 评论 -
ESM(ESModule)和CJS(CommonJS)的区别
ES Module Common JS 输出值的引用 输出值的拷贝(浅拷贝) 编译时,输出接口 运行时加载 import和export这些关键字是在编译阶段就做了模块解析 模块解析发生在执行阶段,因为require和module本质上就是个函数或者对象,只有在执行阶段运行时,这些函数或者对象才会被实例化。因此被称为运行时加载 ...原创 2022-02-16 17:27:32 · 1104 阅读 · 0 评论 -
Vue和React的比较
谁能大致说下vue和react的最大区别之处? - 知乎首先找到 Vue 和 React 的共性,它们被用于解决什么问题, 然后再挖掘各自独特的个性、设计原理以及未来…https://www.zhihu.com/question/309891718/answer/2282544794共同点Vue和React存在着很多的共同点:-数据驱动视图-组件化-都使用 Virtual DOM不同点Vue和React两者虽然都是用于构建用户界面的框架,但是也有很大的差异,首..原创 2022-02-11 18:57:09 · 2522 阅读 · 0 评论 -
Vue3和Vue2相比,新特性
参考官方文档:介绍 | Vue.jsVue.js - The 渐进式 JavaScript 框架https://v3.cn.vuejs.org/guide/migration/introduction.html#%E5%80%BC%E5%BE%97%E6%B3%A8%E6%84%8F%E7%9A%84%E6%96%B0%E7%89%B9%E6%80%A7原创 2022-01-25 16:08:08 · 857 阅读 · 0 评论 -
前端技术栈
https://juejin.cn/post/7036581158670303240原创 2021-12-01 17:20:28 · 295 阅读 · 0 评论 -
事件总线EventBus
https://juejin.cn/post/6844903895798382599/* * @Author: guhua * @Description: 实现全局eventBus */import Vue from 'vue'const Bus=new Vue()const eventBus={ // 注册事件函数 emit(eventType,args){ Bus.$emit(eventType,args) }, // 触发事件函数 on(eventTyp.原创 2021-07-23 18:57:49 · 132 阅读 · 0 评论 -
Electron
一个 Electron 应用总是有且只有一个主进程,有多个渲染进程。主进程:职责:创建渲染进程(可多个) 控制了应用生命周期(启动、退出APP以及对APP做一些事件监听) 调用系统底层功能、调用原生资源可调用的API:Node.js API Electron提供的主进程API(包括一些系统功能和Electron附加功能)渲染进程职责用HTML和CSS渲染界面 用JavaScript做一些界面交互可调用的API:DOM API Node.js AP...原创 2021-07-22 17:15:52 · 243 阅读 · 0 评论 -
React Native原理
一、JavaScript 引擎:解释和执行 JavaScript 代码的环境(虚拟机)有三种:1.JavaScriptCore(Safari)2.V8(Google)3.SpiderMonkey (Mozilla)二、 react native 原理React Native采用的是JavaScriptCore,在Android上,需要应用自己附带JavaScriptCore,Ios上JavaScriptCore属于系统的一部分,不需要应用附带。JsCore的提供了两个功能:在原生代码原创 2021-07-22 15:49:47 · 213 阅读 · 0 评论 -
原型链相关
一、var A = function() {};A.prototype.n = 1;var b = new A();A.prototype = { n: 2, m: 3}var c = new A();console.log(b.n); console.log(b.m);console.log(c.n);console.log(c.m);//答案b.n -> 1b.m -> undefined;c.n -> 2;c.m -> 3;.原创 2021-07-19 19:13:44 · 53 阅读 · 0 评论 -
new一个新对象的过程,发生了什么?
function Father(name) { this.name = name; } let son = new Father('Lisa'); console.log(son); //Father{name: "Lisa"}(1) 创建一个空对象 son {}(2) 为 son 准备原型链连接 son.__proto__ = Father.prototype(3) 重新绑定this,使构造函数的this指向新对象 Father.call(this)(4) 为新对象属性赋...原创 2021-07-19 17:57:45 · 187 阅读 · 0 评论 -
instanceof 原生实现
function instance_of (L, R) { // 验证如果为基本数据类型,就直接返回 false const baseType = ['string', 'number', 'boolean', 'undefined', 'symbol'] if(baseType.includes(typeof(L))) { return false } let RP = R.prototype; // 取 R 的显示原型 L = L.__proto__; // 取 L...原创 2021-07-15 21:53:17 · 61 阅读 · 0 评论 -
JavaScript继承
参考:https://juejin.cn/post/6844903745768144903function inherits(Child,Parent){ let F=function(){} F.prototype=Parent.prototype Child.prototype=new F() Child.prototype.constructor=Child}寄生组合继承(最佳实践)function Person(age){ thi.原创 2021-07-15 21:30:29 · 81 阅读 · 1 评论 -
事件委托(事件代理)
事件委托,就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。事件冒泡:如上图所示,事件传播分成三个阶段:捕获阶段:从window对象传导到目标节点(上层传到底层)称为“捕获阶段”(capture phase),捕获阶段不会响应任何事件;目标阶段:在目标节点上触发,称为“目标阶段”冒泡阶段:从目标节点传导回window对象(从底层传回上层),称为“冒泡阶段”(bubbling phase)。事件代理即是利用事件冒泡的机制把里层所需要响应的事件绑定到外层;事件委托的原创 2021-07-12 15:42:52 · 299 阅读 · 0 评论 -
网页安全XSS攻击和CSRF攻击
1、XSS攻击通过各种手段,往网页上插入一些非法脚本,获取用户信息。比如 通过form表单,输入<script> let cookie = document.cookie post(url,cookie)</script>解决方法:服务端对于输入内容的特殊字符要进行转移...原创 2021-07-08 11:09:00 · 196 阅读 · 0 评论 -
keep-alive原理
https://juejin.cn/post/6844903837770203144keep-alive是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在父组件链中;使用keep-alive包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。对外暴露的对象Vue在初始化生命周期的时候,为组件实例建立父子关系会根据abstract属性决定是否忽略某个组件。在keep-alive中,设置了abstract: true,那Vue就会跳过该组件实例。最后构建的组件树中就不会包含.原创 2021-06-29 17:02:48 · 386 阅读 · 1 评论 -
vue provide/inject
provide/inject提供了一种新的组件间通信的方法。它允许父组件向子孙组件间进行跨层级的数据分发。但是provide/inject是非响应式的,如果要子孙组件根据父组件的值进行改变,provide/inject机制不是一个好的选择。此时可以使用Vuex来管理状态。提示:provide和inject绑定并不是可响应的。这是刻意为之的。然而,如果你传入了一个可监听的对象,那么其对象的属性还是可响应的。...原创 2021-06-28 15:40:55 · 181 阅读 · 0 评论 -
nextTick的实现原理
首先nextTick并不是浏览器本身提供的一个异步API,而是Vue中,用过由浏览器本身提供的原生异步API封装而成的一个异步封装方法。它对于浏览器异步API的选用规则如下,Promise存在取由Promise.then,不存在Promise则取MutationObserver,MutationObserver不存在setImmediate,setImmediate不存在最后取setTimeout来实现。nextTick即有可能是微任务,也有可能是宏任务,从优先去Promise和MutationO原创 2021-06-22 15:21:08 · 4221 阅读 · 2 评论 -
JS模板引擎实现
正则实现let templateStr = 'i am {{name}},age {{age}},job {{job}} ';let data = { name:'xbd', age:18, job:'CTO'}function templateFunc(str,data){ let result = str.replace(/\{\{(\w+)\}\}/g,function(match,key){ return data[key] .原创 2021-06-21 21:54:06 · 189 阅读 · 0 评论 -
webpack相关
webpack loader和plugin的区别loader赋予了webpack处理其他类型文件的能力,比如css、图片等。plugin是用来增强文webpack的能力,让webpack有更多的活性。原创 2021-06-18 17:41:33 · 125 阅读 · 0 评论 -
http缓存
缓存:优先级:强制缓存>协商缓存强制缓存当缓存数据库中已有所请求的数据时。客户端直接从缓存数据库中获取数据。当缓存数据库中没有所请求的数据时,客户端的才会从服务端获取数据。header里面,Cache-Control字段:private:客户端可以缓存public:客户端和代理服务器都可以缓存max-age=t:缓存内容将在t秒后失效no-cache:需要使用协商缓存来验证缓存数据no-store:所有内容都不会缓存协商缓存客户端会先从缓存数据库中获取到一...原创 2021-06-18 14:16:32 · 75 阅读 · 0 评论 -
http和https的区别?
https://juejin.cn/post/6904227431939342344原创 2021-06-17 15:30:56 · 158 阅读 · 0 评论 -
CommonJS 和 ES6 Module 究竟有什么区别?
https://es6.ruanyifeng.com/#docs/module-loader#ES6-%E6%A8%A1%E5%9D%97%E4%B8%8E-CommonJS-%E6%A8%A1%E5%9D%97%E7%9A%84%E5%B7%AE%E5%BC%82CommonJS 模块输出的是一个值的拷贝,ES6 模块输出的是值的引用。CommonJS 模块是运行时加载,ES6 模块是编译时输出接口。CommonJS 模块的require()是同步加载模块,ES6 模块的import命令是异步加载原创 2021-06-17 15:10:22 · 82 阅读 · 0 评论 -
前端大文件上传(文件分片)
https://juejin.cn/post/6844903860327186445原创 2021-06-16 17:27:17 · 149 阅读 · 0 评论 -
从输入URL到页面加载发生了什么
1、DNS解析,域名得到IP2、TCP连接3、HTTP请求4、服务器处理响应,并输出报文5、浏览器得到报文,解析渲染页面6、浏览器渲染过程html构成 DOM树CSS构成渲染树绘制到屏幕:reflow(回流)和repain(重绘)js单线程机制:JS的执行机制就可以看做是一个主线程加上一个任务队列(task queue)。同步任务就是放在主线程上执行的任务,异步任务是放在任务队列中的任务。所有的同步任务在主线程上执行,形成一个执行栈;异步任务有了运行结果就会在任务队列中放置一个事件;脚原创 2021-06-16 16:24:09 · 70 阅读 · 0 评论 -
JSBridge技术原理
https://juejin.cn/post/6844903640520474637App的URL Scheme就如同网页的url链接一样,可以打开App或跳转到相应的页面。但是大部分APP没有公开自己的URL Scheme。原创 2021-06-09 17:39:28 · 72 阅读 · 0 评论 -
BFC(Block Formatting Context)块级格式上下文
1、元素浮动之后,父元素高度坍塌,子元素溢出容器解决:父容器加上display:flow-root2、浮动元素和未浮动元素重叠在一起,界限不清解决:给非fudong原创 2021-06-09 17:09:06 · 68 阅读 · 0 评论 -
js正则表达式
https://www.liaoxuefeng.com/wiki/1022910821149312/1023021582119488原创 2021-06-09 14:58:21 · 42 阅读 · 0 评论 -
函数柯里化
https://www.jianshu.com/p/2975c25e4d71原创 2021-06-09 14:25:11 · 122 阅读 · 0 评论 -
Reduce实现
Array.protopy.myReduce = function(fn,value){ if(typeof fn !== 'function'){ console.log('第一个参数必须为一个函数') return } const acc = value || this[0]; const startIndex = value ? 0 : 1 for(let i = startIndex; this.length,i++).原创 2021-06-02 17:49:25 · 63 阅读 · 0 评论 -
promise实现
const FULLFILLED='FULLFILLED'const REJECTED='REJECTED'const PENDDING='PENDDING'class MyPromise{ constructor(handle){ //初始化状态 this._status=PENDDING this._value=undefined this.fullfilledQueues=[] this.reject.原创 2021-06-01 21:51:20 · 105 阅读 · 0 评论