- 博客(90)
- 收藏
- 关注
RSS订阅原创 手写微前端microApp-数据通信
自定义元素无法支持对象类型的属性，只能传递字符串，例如会转换为，想要以组件化形式进行数据通信必须让元素支持对象类型属性，为此需要重写micro-app原型链上setAttribute方法处理对象类型属性。// 记录原生方法// 重写setAttribute// 目标为micro-app标签且属性名称为data时进行处理//Object.getOwnPropertyNames 返回对象的全部属性名// 过滤vue框架注入的数据// 因为获取的数据中会有vue框架注入的数据，
2024-06-10 18:30:10
674
原创 手写微前端micro-app(3)-沙箱前置知识
沙箱，即sandbox，就是让程序跑在一个隔离的环境下，使用的都是自己独立的属性和方法，并且最重要的，不对外界的其他程序造成影响。
2024-05-12 22:30:38
584
原创 micro-app的css样式隔离
子应用的CSS可能会对基座应用或者其他子应用产生的影响首先现在我们把react页面放入到vue2的页面大家也能看到一些问题了，在react中的index.css中对body的一些css样式，已经影响了基座应用的css。做实验的时候，如果是vue2项目。别把这个样式写到了带scoped的style样式标签中了，这种本身就是隔离的，我们这里所谓的隔离，主要是针对全局样式。
2024-04-21 17:57:19
1274
原创 手写微前端micro-app-页面渲染
上面的代码中，把js字符串放入到eval中执行，使用了(0, eval)(info.code)这样的表达式，这其实就是一个立即执行的函数，然后将字符串info.code传给了eval。这样可以保证eval是在当前环境下执行，还是在全局环境下值。说到底，最重要的是保证如果传入字符串info.code中有this，保证this的作用域是指向全局的，因为上面的代码中，eval是放在一个函数中执行的。在source.js文件中，添加extraSourceDom函数，用来提取link，script这种特殊标签。
2024-03-17 19:18:38
484
原创 Micro-app 微前端框架demo介绍
主应用1、创建一个页面，需要加入micro-app自定义元素2、配置路由子应用1、如果在微前端中，加上路由前缀2、设置跨域。
2024-01-07 22:42:48
1942
1
原创 浅谈Web Component
Web Component是HTML5推出的一个新特征，就是web组件,它描述的其实是三种不同的的API：自定义元素，Shadow DOM和HTML模板.自定义元素: 在 HTML 基础标签外扩展自定义标签元素Shadow DOM: 主要用于将 Shadow DOM 的内容与外层document DOM 隔离HTML 模板: 使用 来定义组件模板，使用 作为插槽使用。
2023-12-17 14:43:37
216
原创 安卓和ios针对于new Date()数据格式的兼容问题
在项目中需要实现倒计时,这个倒计时的时间是后端同学给到前端的,我们针对当前时间到结束的时,进行倒计时,这个功能在测试的时候安卓手机和iOS手机都没问题,但是哦生产有用户反馈ios手机无法出现倒计时。,因此我查阅资料发现,最新版本的ios已经修复了这个问题,但是在ios15.2的版本还存在.发现是ios低版本的情况出现这个问题,因为ios低版本不识别这个日期格式,IOS 手机不识别 YYY-MM-DD HH:mm:ss 格式的日期传参。
2023-12-10 17:11:42
736
原创 理解国外大佬用Web做出来跨窗口渲染动画效果
今天刷抖音看见国外一个大佬用Web做出来一个可以跨多浏览器窗口实时互动的渲染动画效果,觉得非常新奇,我就去看了一下源码,作者还写了一个非常好的例子帮助理解。整体思路是监听visibilityState,通过localStorage进行存储每一个窗口的的立方体的位置,和窗口相对于电脑屏幕的位置。WindowManager 这个类中constructor方法中就会监听storage获取到窗口中存储的立方体的位置信息。
2023-11-26 18:27:24
272
原创 关于ios和Android手机的下载pdf文件功能探讨
在Android手机中是调起默认浏览器的下载功能(正常现象,可以实现功能),但是在ios手机中是直接进行文件的有预览.无法下载**,查阅相关资料发现：IOS下载跳转到浏览器的行为是不支持的，**后来修改方案,改成在ios预览,给出提示框进行协议生产地址的复制功能粘贴到浏览器中及逆行保存到手机,在Android手机下载。在工作中遇到了一个需求,在app中需要对一些协议(pdf格式的)进行下载,包括使用babol转成二进制文件流也是一样的,在ios手机中无法下载。
2023-10-31 21:24:04
526
原创 使用pdfjs实现在线预览pdf
在工作中可能会遇到前端展示pdf文件进行预览并提供下载的需求场景,例如操作指引,这个时候需要寻找一款实现该功能的插件,以pdjjs举例子。
2023-10-14 00:10:42
7532
2
原创 vuedraggable影响点击事件的解决办法
但是在移动端使用的时候经常会对排序的某些项进行编辑,这个时候针对编辑或者删除等操作点击事件会和拖拽事件造成冲突.
2023-10-08 23:21:04
1877
原创 页面分布引导新手指引（driver.js）
最近由于有一个需求——做新手指引，在新用户进入页面的时候提供指引和帮助,快速让用户熟悉页面的功能,但是为了不要过多影响现有的页面逻辑和样式,找到一款非常好用的工具:Driver.js是一个功能强大且高度可定制的基于原生JavaScript开发的新用户引导库。它没有依赖项，支持所有主要浏览器。
2023-09-10 18:10:20
999
原创 修改node_modules里的源码
所以在node_modules下面的vue-qr文件夹的dist文件夹下面的vue-qr.js搜索…把node_modules的vue-qr文件夹拷贝一份放到和项目的package.json同层级,然后把这个vue-qr文件夹下面的dist文件夹的vue-qr.js的…这个时候再重新npm install 发现node_modules下面的vue-qr文件夹下面的dist文件夹下的vue-qr.js的文件也被修改了，就会在工程中出现一个patches的文件夹，里面存储的就是修改的对比文件内容。
2023-08-01 22:55:45
867
原创 react-draft-wysiwyg富文本编辑器
GitHub上有相应的问题提出,但是好像还没具体的解决方案:https://github.com/facebookarchive/draft-js/issues/1943。有一个小问题,在频繁输入(数字或者字母等)的时候会报错。
2023-07-23 16:52:02
1085
原创 redux之reducer 为什么必须是纯函数？
在 Redux store 中保存了 reducer 返回的 这个 state，这个新的 store 树就是应用的下一个 state, 所有订阅 store.subscribe(listener)的监听器都将被调用，监听器里可以调用 store.getState()获得当前 state 此时，我们就可以使用新的 state 来更新 UI setState(newState)如果 reducer 不是纯函数会发生什么？我们将上面代码reducer改造一下,直接修改 state，而不是返回新的 state。
2023-07-16 19:57:43
172
原创 json-server 详解
这几天在写react的前端项目,想着后端接口没有,在网上也找不到比较合适的接口,所以在github和npm上翻了许久关于前端简单生成后端接口的工具,终于被找到了这个神仙工具。
2023-06-11 21:46:57
1953
原创 键盘backspace导致浏览器回退解决办法
是一些老版本的浏览器例如360或者chrome浏览器的低版本会有这种问题,尤其是在pc端页面有弹框的时候如果操作按到backspace导致页面回退,造成数据丢失等一系列体验问题,有如下处理办法。
2023-05-27 22:45:14
854
1
原创 vue3+echarts踩坑小计
template > < button @click = "handleClick" > 更换数据 < / button > < div id = "home" ref = "home" > Home < / div > < / template > < script setup lang = "ts" > import {import {id : 1 , name : '衬衫' , xl : 22 , kc : 77 } , {
2023-05-01 23:48:40
316
原创 NextJS(ReactSSR)
发生的时间：next build1). 纯静态化getStaticProps: 当渲染组件之前会运行 生成html + jsongetStaticPaths: 当渲染组件之前会运行 解决动态路由fallback:false: 什么都不做，如果没有静态页面，返回404true: 会给[id].html什么时候要使用静态化：如果你的页面不是根据不同的请求而展示不同，则推荐使用静态化。
2023-02-12 20:03:03
663
原创 Angularjs学习笔记
先引入表单的一些内置依赖import {//构造函数里注入FormBuilder constructor(private fb : FormBuilder) {} //错误提醒数据 formErrors = {//在组件类的初始化函数里对表单中的元素的校验进行定义，并调用表单的valueChanges方法，检测表单的输入的变化 ngOnInit() : void {if(!
2022-12-09 16:14:24
343
原创 ReactSSR-手写服务端渲染react组件
一、express搭建render.jsApp.jsxwebpack.config.jspackage.json目录结构
2022-12-05 23:57:40
322
原创 typescript声明文件学习笔记
以结尾的文件为JS代码提供类型声明工程是使用ts开发的，发布（编译）之后，是js文件，发布的是js文件。如果发布的文件，需要其他开发者使用，可以使用声明文件，来描述发布结果中的类型。配置中的即可对已有库，它是使用js书写而成，并且更改该库的代码为ts成本较高，可以手动编写声明文件对一些第三方库，它们使用js书写而成，并且这些第三方库没有提供声明文件，可以手动编写声明文件。全局声明声明一些全局的对象、属性、变量模块声明三斜线指令在一个声明文件中，包含另一个声明文件编译完成后，将编译结果所在文件夹直接发布到np
2022-12-04 18:37:13
401
原创 vite的预加载
首先vite会找到对应的依赖, 然后调用esbuild(对js语法进行处理的一个库), 将其他规范的代码转换成esmodule规范, 然后放到当前目录下的node_modules/.vite/deps, 同时对esmodule规范的各个模块进行统一集成。找寻依赖的过程是自当前目录依次向上查找的过程, 直到搜寻到根目录或者搜寻到对应依赖为止 /user/node_modules/lodash, …yarn dev —> 开发(每次依赖预构建所重新构建的相对路径都是正确的)
2022-10-07 11:56:37
1566
原创 事件循环promise的async和await的执行
首先 事件循环 是分为同步任务和异步任务，同步任务在浏览器主线程上执行，等同步任务执行完之后再去查看宏任务队列和微任务队列，微任务的优先级比宏任务高，因此先执行微任务队列里面的任务；而promise的async和await就属于微任务。先看一个小例子：console.log('script start') async function async1() {await async2()console.log('async1 end')}async function async2() {con
2022-05-13 15:32:34
1198
2
原创 babel预设
babel预设babel有多种预设，最常见的预设是@babel/preset-env@babel/preset-env可以让你使用最新的JS语法，而无需针对每种语法转换设置具体的插件配置{ "presets": [ "@babel/preset-env" ]}兼容的浏览器@babel/preset-env需要根据兼容的浏览器范围来确定如何编译，和postcss一样，可以使用文件.browserslistrc来描述浏览器的兼容范围last 3 version
2022-05-07 22:53:47
328
原创 webpack其他细节配置
其他细节配置文章目录其他细节配置contextoutputlibrarylibraryTargettargetmodule.noParseresolvemodulesextensionsaliasexternalsstatscontextcontext: path.resolve(__dirname, "app")该配置会影响入口和loaders的解析，入口和loaders的相对路径会以context的配置作为基准路径，这样，你的配置会独立于CWD（current working director
2022-05-03 13:15:04
155
原创 webpack-dev-server
开发服务器在开发阶段，目前遇到的问题是打包、运行、调试过程过于繁琐，回顾一下我们的操作流程：编写代码控制台运行命令完成打包打开页面查看效果继续编写代码，回到步骤2并且，我们往往希望把最终生成的代码和页面部署到服务器上，来模拟真实环境为了解决这些问题，webpack官方制作了一个单独的库：webpack-dev-server它既不是plugin也不是loader先来看看它怎么用安装执行webpack-dev-server命令webpack-dev-server命令几乎支持所有的
2022-05-03 13:05:44
5284
原创 webpack-plugin编写文件列表生成
webpack-plugin编写文件列表生成module.exports = class FileListPlugin { apply(compiler){ //在这里注册事件,类似于window.onload compiler.hooks.emit.tap('FileListPlugin-emit',(compilation) => { let fileList = []; //comp
2022-04-22 21:38:15
470
原创 webpack编译过程
webpack 编译过程文章目录webpack 编译过程初始化编译输出总过程webpack 的作用是将源代码编译（构建、打包）成最终代码整个过程大致分为三个步骤初始化编译输出初始化此阶段，webpack会将CLI参数、配置文件、默认配置进行融合，形成一个最终的配置对象。对配置的处理过程是依托一个第三方库yargs完成的此阶段相对比较简单，主要是为接下来的编译阶段做必要的准备目前，可以简单的理解为，初始化阶段主要用于产生一个最终的配置编译创建chunkchunk是web
2022-04-14 23:51:42
340
原创 webpack编译结果分析
webpack编译结果分析合并两个模块 ./src/a.js ./src/index.js设置一个对象存放模块的路径和代码,key值对应的路径,value是函数,传入三个参数,module exports __webpack_require,其中exports是commjs的导出,modlue.exportslet modules = { //该对象保存了所有的模块，以及模块对应的代码 "./src/a.js": function (module, exports) {
2022-04-10 18:50:42
1081
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人