03 2024 档案
摘要：前言 有些新手朋友可能听说过这么一句话，就是js中存在两个链条,它们分别为:作用域链和原型链 它们彼此的区别在于作用域链是为了访问变量和数据而存在的一种链条访问机制 而原型链是访问对象的属性或者方法而存在的一种机制！ 其中这里的原型链就是今天我要说的主题! 我们学习js必须要知道什么是原型、原型链、
阅读全文
摘要：最近前端届多端框架频出，相信很多有代码多端运行需求的开发者都会产生一些疑惑：这些框架都有什么优缺点？到底应该用哪个？ 作为 Taro 开发团队一员，笔者想在本文尽量站在一个客观公正的角度去评价各个框架的选型和优劣。但宥于利益相关，本文的观点很可能是带有偏向性的，大家可以带着批判的眼光去看待，权当抛砖
阅读全文
摘要：前言： 聪明的你做了几个项目之后，有没有发现发现某些工具方法或者组件的使用频率很高，好多项目都在用。如何做到这些工具方法或者组件的更优雅地复用而不是用到了就复制粘贴呢？封装为一个npm包是一个不错的选择。本文以图文结合的方式介绍了如何从0到1发布一个npm包，文中的一些关键点的说明将帮你避坑提效。欢
阅读全文
摘要：为什么要有js资源隔离机制？ 主应用和子应用，相同的全局变量，可能会发生冲突，子应用和子应用之间，相同的全局变量，也可能会发生冲突。在这里我们主要指的就是window。 思路：打开沙箱时能够修改属性值；关闭沙箱时恢复未开启沙箱前的属性值，并且要记录修改了哪些属性。 qiankun.js隔离机制 Sn
阅读全文
摘要：什么是 Volta Volta 是一种管理 JavaScript 命令行工具的便捷方式。 volta 的特点： 速度 无缝，每个项目的版本切换 跨平台支持，包括 Windows 和所有 Unix shell 支持多个包管理器 稳定的工具安装-无需每次升级都重新安装! 可扩展性挂钩用于特定于站点的定制
阅读全文
摘要：一、安装nvm 1.下载nvm 解压后点击exe文件进行安装： 2、点击下一步安装到 D:\NVM 下 3、先在D:\NVM 下创建nodejs文件夹，然后将路径设置如下： 4、点击next 一直点击 完成安装； 5、找到指定nvm打开后： 给该文件添加这两行命令: node_mirror: htt
阅读全文
摘要：react-redux.js: import React, { Component } from 'react'import PropTypes from 'prop-types' export const connect = (mapStateToProps, mapDispatchToProps
阅读全文
摘要：App.js: import React, { Component } from 'react';import PropTypes from 'prop-types'import Header from './Header' function createStore (reducer) { let
阅读全文
摘要：1.结合 context 和 store import React, { Component } from 'react';import PropTypes from 'prop-types' function createStore (reducer) { let state = null con
阅读全文
摘要：Vite（法语意为 “快速的”，发音 /vit/，发音同 “veet”）是一种新型前端构建工具，能够显著提升前端开发体验。它主要由两部分组成： 一个开发服务器，它基于 原生 ES Module 提供了 丰富的内建功能，如速度快到惊人的 模块热更新（HMR）。 一套构建指令，它使用 Rollup 打包
阅读全文
摘要：vue2和vue3双向数据绑定原理发生了改变 vue2的双向数据绑定是利用了es5 的一个API Object.definepropert() 对数据进行劫持 结合发布订阅模式来实现的。 vue3中使用了es6的proxyAPI对数据进行处理。 1. vue2和vue3双向数据绑定原理发生了改变 相
阅读全文
摘要：本文将针对微前端框架 qiankun 的源码进行深入解析，在源码讲解之前，我们先来了解一下什么是 微前端。 微前端 是一种类似于微服务的架构，它将微服务的理念应用于浏览器端，即将单页面前端应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。各个前端应用还可以独立开发、独立部署。同时，它们也可以
阅读全文
摘要：子应用主应用间如何通信 qiankun官方提供了actions通信，qiankun内部使用initGlobalState(state)定义全局状态，该方法执行后返回一个MicroAppStateActions实例，实例中包含三个方法，分别是onGlobalStateChange、setGlobalS
阅读全文
摘要：废话不多说先了解下在实践。 1. 什么是微前端 web应用构建方式 微前端 微前端在2016年ThoughtWorks Technology Radar正式被提出。微服务这个被广泛应用于服务端的技术范式扩展到前端领域。现代的前端应用的发展趋势正在变得越来越富功能化，富交互化，也就是SPA应用；这样越
阅读全文
摘要：一个上传组件，需要具备的功能： 需要校验文件格式可以上传任何文件，包括超大的视频文件（切片）上传期间断网后，再次联网可以继续上传（断点续传）要有进度条提示已经上传过同一个文件后，直接上传完成（秒传） 前后端分工： 前端： 文件格式校验文件切片、md5计算发起检查请求，把当前文件的hash发送给服务端
阅读全文
摘要：通常，对于一些需要记录用户行为的系统，在进行网络请求的时候都会要求传递一下登录的token。不过，为了接口数据的安全，服务器的token一般不会设置太长，根据需要一般是1-7天的样子，token过期后就需要重新登录。不过，频繁的登录会造成体验不好的问题，因此，需要体验好的话，就需要定时去刷新toke
阅读全文
摘要：说在前面 目前很多业主在使用系统的时候都会有大屏的需求，很多屏幕并不会像我们开发的屏幕一样标准，比如1920*1080，这样我们就需要根据业主的屏幕尺寸进行适配，避免一些图表或文字在大屏中出现偏移，影响视觉观感。 方案比选 方案一： 如果希望在大屏中实现最佳的展示效果，应该由设计人员针对大屏的尺寸进
阅读全文
摘要：虽然前端工程化的概念兴起还没几年的时间，但是对于“工程化”这个词并不是一个新鲜词了，在其他软件开发的领域很早就已经有了高度的工程化，例如Web服务端开发。只不过那个时候，前端工程师并没有工程化的意识，也没有必要对前端进行工程化的操作，毕竟在那个时期，前端的开发工作只能算是整个项目开发过程中的“附属品
阅读全文
摘要：<div id="content_views" class="markdown_views prism-tomorrow-night"> <svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> <path stroke-line
阅读全文
摘要：什么是跨域？ 跨域，是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript实施的安全限制。 这里说明一下，无法跨域是浏览器对于用户安全的考虑，如果自己写个没有同源策略的浏览器，完全不用考虑跨域问题了。是浏览器的锅，对。 同源策略限制了一下行为： Cookie、
阅读全文
摘要：<div id="content_views" class="markdown_views prism-tomorrow-night"> <svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> <path stroke-line
阅读全文
摘要：1. 工厂模式 工厂模式（Factory Pattern）：将对象的创建和使用分离，由工厂类负责创建对象并返回。在前端开发中，可以使用工厂模式来动态创建组件。 前端中的工厂模式是一种创建对象的设计模式，它可以让我们封装创建对象的细节，我们使用工厂方法而不是直接调用 new 关键字来创建对象，使得代码
阅读全文
摘要：一、React基础回顾 1、react介绍 React 是一个用于构建用户界面的 JavaScript 库，它只负责应用的视图层，帮助开发人员构建快速且交互式的 web 应用程序。 React 使用组件的方式构建用户界面。 2、JSX语法回顾 在 React 中使用 JSX 语法描述用户界面，它是一
阅读全文
摘要：jsx介绍 jsx是一种JavaScript的语法扩展（eXtension），也在很多地方称之为JavaScript XML，因为看起就是一段XML语法，用于描述UI界面，并且可以和JavaScript代码结合使用。 比起vue中的模板语法，更加灵活，且不需要学习模板语法中的特定标签，比如：v-if
阅读全文
摘要：Hooks 是 React 16.8 的新增特性。它可以让你在不编写 class 组件的情况下使用 state 以及其他的 React 特性。 React Hooks 表现形式是以 use 开头的函数被称为 Hook。useState 是 React 提供的一个内置 Hook。你可以在 React
阅读全文
摘要：一、如何用好hook 要用好 React Hooks，很重要的一点，就是要能够从 Hooks 的角度去思考问题。要做到这一点其实也不难，就是在遇到一个功能开发的需求时，首先问自己一个问题：这个功能中的哪些逻辑可以抽出来成为独立的 Hooks？ 这样问的目的，是为了让我们尽可能的吧业务陆奥及拆分成独立
阅读全文
摘要：这三者是目前 react 解决代码复用的主要方式： 高阶组件(hoc) 官方解释: 高阶组件（HOC）是 React 中用于复用组件逻辑的一种高级技巧。HOC 自身不是 React API 的一部分，它是一种基于 React 的组合特性而 形成的设计模式。 简言之，HOC 是一种组件的设计模式，HO
阅读全文
摘要：Vue 2.0 相比 Vue 1.0 最大的升级就是利用了虚拟DOM。 在 Vue 1.0 中视图的更新是纯响应式的。在进行响应式初始化的时候，一个响应式数据 key 会创建一个对应的 dep，这个 key 在模板中被引用几次就会创建几个 watcher。也就是一个 key 对应一个 dep，dep
阅读全文
摘要：之前介绍过初始化时 Vue 对数据的响应式处理是利用了Object.defifineProperty()，通过定义对象属性 getter 方法拦截对象属性的访问，进行依赖的收集，依赖收集的作用就是在数据变更的时候能通知到相关依赖进行更新。 通知更新 setter 当响应式数据发生变更时，会触发拦截的
阅读全文
