- 博客(93)
- 收藏
- 关注
RSS订阅原创 electron的webview和内嵌网页如何通信
由于我使用的是react框架的ref来引用webview组件的，因此需要通过这个引用来获取 webview 的 webContents，进而使用 executeJavaScript 方法。● 与页面交互：你可以使用 executeJavaScript 来注入和执行自定义脚本，从而与网页中的 DOM 进行交互，修改网页内容，或者触发在网页中定义的 JavaScript 函数。webContents 对象提供的一个功能，允许开发者在 web 页面的上下文中运行任意的 JavaScript 代码字符串。
2024-04-11 20:38:23
661
原创 浅谈微前端
本文呢是我梳理的一个扫盲文，由于最近团队准备使用微前端对项目进行改造，所以我呢就先浅了解一下：微前端到底是什么？为什么要使用微前端？都有哪些微前端方案？微前端有什么不好的地方吗？通过以上几个问题，来浅谈一下：什么是微前端？**概念：**微前端是指存在于浏览器中的微服务。微前端是一种类似于微服务的架构，它将微服务的理念应用于浏览器端，即将单页面前端应用由单一的单体应用转变为把多个小型前端应用聚合为一体的应用。这就意味着前端应用的拆分，拆分后的应用实现应用自治、单一职责、技术栈无关三大特性，再进
2023-06-15 22:27:36
687
原创 微前端探秘：初始微前端、现有方案和未来趋势
应用的加载与切换：路由问题、应用入口、应用加载应用的隔离与通信：js隔离、css样式隔离、应用间通信而single-spa则很好地解决了 路由问题、应用入口 两个问题，但是应用的加载并未实现。因此qiankun在此基础上封装了一个应用加载方案，并给出了js隔离、css样式隔离和应用间通信三个问题的解决方案，同时提供了预加载功能。总是微前端是什么呢？在路由变化的时候，去加载对应子应用的代码，并在容器内跑起来。缩小项目打包体积解决系统上线拥挤问题用户使用无感知。
2023-06-15 22:21:13
1256
原创 vue源码:Watcher系列（一）
vue源码:Watcher系列（一）在分析之前我们先来看看，vue中都有哪些Watcher种类呢？以及分别在什么时候创建呢？从vue源码里面看，Watcher是一个公共类，在不同的地方去初始化Watcher就代表不同类的Watcher。主要分为以下三类：computed watcher：执行计算属性更新computeduser watcher：用户注册的普通watcherrender watcher：负责视图更新注意者三种watcher的执行顺序为computed watcher、user w
2022-04-07 15:14:55
1756
2
原创 redux与react-redux学习笔记
少年驰骋，仗剑天涯愿你眼眸有星辰，心中有大海从此，以梦为马，不负韶华redux 是一个应用数据流框架，主要是解决了组件间状态共享的问题，原理是集中式管理。React-redux是为方便react使用，在redux上封装的库。在实际的项目中我们可以使用redux也可以直接使用react-redux。1.redux1.redux的概念redux和react之间是没有关系的，Redux支持React、angular、jQuery甚至Javascriptredux 是一个应用数据流框架，主要是解.
2022-03-18 23:01:11
1789
2
原创 图解：vue依赖收集及派发更新
前面也已经写过vue的依赖收集和派发更新的源码讲解了，但是估计很多不了解的人看的仍然一头雾水，还是不能明白整个流程是怎样的。因此我又花了一些时间来弄懂这块梳理成图，阅读性也更好一些。话不多说，开始上图了：依赖收集这里给大家备注一下某些变量的作用：subs：Dep类创建的，用于存放所有被收集的依赖即watcher,将依赖存放在subs中，目的是后面数据发生变化的时候能够通知那些subs做出准备。watcher中定义的：newDeps：表示新添加的Dep实例数组deps：表示上一次添加的De
2022-03-05 18:42:35
1286
原创 css新特性
css新特性宣言：合抱之木，生于毫末；九层之台，起于累土本篇可能有些属性已经不是那么新了，还是写了一下并有人知道有人不知道嘛！对于本篇的例子我写的那可谓是相当简单，非常易于理解。嘻嘻，至少我觉得是那样！如果看了本文的同学真的有所收获那我也是非常幸运，如果没什么收获，看看就好啦！我会再接再厉的！！！:is():is()css伪类函数可将选择器列表作为参数，并选择该列表中任意一个选择器可以选择的元素。就是说is它的参数是一个列表可以选择列表任意的元素。利用:is()来对css进行代码的重复部分的删
2021-12-01 19:59:10
1135
原创 微前端探秘：初始微前端、现有方案和未来趋势
qiankun是一个基于single-spa规范的微前端框架，可以帮助开发者将多个独立的前端应用整合为一个整体应用。通过qiankun，每个子应用可以独立开发、独立部署，并且可以随时添加或删除子应用，从而实现了前端应用的松耦合。qiankun提供了完善的生命周期管理、路由管理、状态共享等功能，同时还支持多种应用间通信方式。qiankun已经被广泛应用于企业级应用和互联网应用中，是当前最为流行的微前端框架之一。
2021-11-14 19:44:15
2482
原创 ESlint常见警告解决及配置讲解
作为前端开发工程师的你，是不是很难忍代码中因为配置了eslint后，又配置了自动修复eslint问题但是还是无法避免eslint警告⚠️和报错呢？？看着一行行红色的警告错误提示是不是很难受啊！但是有些问题确不知道要怎样改呢？那如何查自己的项目中自己的命令呢？npm run lint你就可以看到下面的报错总数：如果你也有这样的困扰，那看这个准没错，后续有的eslint问题处理也会继续发出来。当然如果打家有更好的解决办法，请在下方评论区赐教哦！项目中eslint配置导致的警告点解决1.props
2021-10-30 15:43:47
10264
原创 vue2.x源码解读：数据驱动
在说数据驱动之前先很大家讲一下vue的两种编译模式，不看源码是真的不晓得????这两种编译模式到底是有怎样的区别噻，想知道就往下⬇️：Runtime Only与 Runtime+compuler编译方式Runtime Only的优点：压缩体积小，运行速度快.只能识别render函数，不能识别template。.vue文件中的也是被 vue-template-compiler 翻译成了 render函数，所以只能在.vue里写 template。vue对template的解析方式：template-&
2021-10-29 09:50:07
264
原创 搞不懂vue3.0 ref和reactive类型定义有什么区别吗？看这里
了解ref和reactive的区别首先我们都知道ref函数和reactive函数都是用来定义响应式数据；但是reactive更适合定义复杂的数据类型（json/arr）、ref适合定义基本数据类型（可接收基本数据类型和对象）reactive:(1)它的响应式是更加‘深层次’的，底层本质是将传入的数据包装成一个Proxy。(2)参数必须是对象或者数组，如果要让对象的某个元素实现响应式时比较麻烦。需要使用toRefsref:(1)函数参数可以是基本数据类型，也可以接受对象类型(2)如果参数是对象
2021-10-27 22:39:50
7314
1
原创 不知道如何取消axios请求的小伙伴看这里【canceltoken】
首先我们要明确：cancelToken是axios用来取消请求的API。那为什么要取消呢？是由于浏览器的请求的响应时间存在不确定性，请求次数过多可能较早发起的请求会比较晚的响应。所以要为了提升页面性能减少不必要的等待，我们需要取消不需要等待的较早的请求。那种过多的请求是无意义且浪费性能的呢？比如：（1）菜单的路由页面跳转、tab栏的高频切换；（2）搜索框的change事件模糊匹配时，短时间发送多个ajax请求，返回数据并不是最想要的。当然了，还有很多的适用场景哦！了解的可以在评论区下方发出来，供大
2021-10-27 22:33:49
3299
原创 浅谈vue的provide和inject使用方法及其原理
首先来谈谈我们为什么要使用provide/inject呢？对于爷爷和孙子组件之间，甚至太爷爷组件与孙子组件通信我们用vuex不就ok了。那事实的确如此，但是，请听我说但是，有时候你项目比较小甚至组件通信的场景很少的，那么你引入vuex就为了那么几个通信传参是不是很浪费啊。有人也可能会想到使用$parent获取父组件实例，来获取data/methods，这种两层就还好，那多层呢，组件嵌套很深的话，你怎么弄？写个函数把$parent再封装一下。那不是很麻烦吗，现成的你不用非要曲线救国。哈哈～扯远了。不废话那
2021-10-27 22:31:36
903
原创 小程序echarts雷达图组件封装
由于业务需要学员和非学员数据的对比雷达图或者个人单次的雷达图，有时候显示legend类型有时候不需要显示。所以为了使用方便直接封装了echarts雷达图组件。需要的童鞋们！直接拿走，项目亲测有效。实际项目展示：(1)对比（2）单个展示代码讲解部分真实使用时只需要组件传参：(1)radarList为对象(2)isShowLegend 当值为true显示legend否则不显示radarList: { name: '2021-09-09', list: [{
2021-07-07 17:35:00
593
原创 微信小程序如何使用mixins
什么是Mixins呢？Mixins就是将可复用的代码混入到当前代码里面，解耦重复的模块，让系统维护更加方便优雅。vueJS和小程序Mixins对比 在 VueJS 中，会把来自 Mixins 和组件的对象属性当中的内容（如 data, methods等）混合，以确保两边的数据都同时存在。它的生命周期属性，会优先执行来自 Mixins 当中的，后执行来自组件当中的。且对象类型属性，来自 Mixins 和来自组件中的会共存。 在小程序中，自定义的方法是直接定义在 Page 的属性当中的，
2021-06-30 15:36:20
3149
4
原创 词法欺骗：eval和with，尽量少用
词法欺骗：eval和with，尽量少用1.evalfunction demo1(str,a){eval(str)//欺骗console.log(a,b)}var b =2;demo1("var b=3",1)eval("var b = 3"),在demo1内部声明了一个b变量，对已经存在的demo1的词法作用域进行了修改，内部创建的b变量遮蔽了全局作用域中同名的b变量。因此当console.log(a,b)在demo1内部同时找到了a,b所以就不会向外部找了，因此输出1
2021-02-24 11:23:11
95
原创 为什么区分LHS和RHS？
因为在变量还没声明(在任何作用域中都无法找到该变量)情况下，这两种查询行为是不一样的。LHS与RHS是JavaScript引擎的两种查找类型。RHS:需要获取那个变量的值，就是对那个变量的值进行RHS引用，理解为赋值操作的源头。(=1)LHS:对那个赋值就是对那个进行LHS引用，可以理解为赋值操作的目标.(var a)例一：var a = 1;将其以等式拆为两个部分：var a和=1.var a 则是进行LHS查询，编译器遇到var a，会询问作用域是否存在一个名为a的变量，如果有
2021-02-23 14:40:10
988
原创 scss项目element-ui按需加载且自定义主题
前提，已经在Vue项目中使用了scss,则可以直接创建一个element-variables.scss文件：$--color-primary: #409EFF;$--color-success: #03C78C;$--color-warning: #FFBE2D;$--color-danger: #FF2660;$--color-info: #727FC5;$--color-text-primary: #333333;$--color-text-regular: #666666;$--c
2020-06-19 17:30:07
1013
1
原创 VueRouter按需加载
如果router.js中全部都使用下面这种方式引入路由组件，那么所有组件都打包在一个js中，导致进入首页时，加载时间相对过长。import Vue from 'vue';import Router from 'vue-router';Vue.use(Router);import product from './pages/product';export default new Router({ routes:[ { path:'/produc
2020-05-22 10:26:40
614
原创 input图片上传
1.view实现：<formname="commentForm",method="post",enctype="multipart/form-data",action="/post/addComment"><inputtype="file"name='img'><inputtype="submit"value="提交"><...
2020-04-22 17:43:45
191
原创 本地开发Mock设置
moke 的优点：开发阶段，为了高效率，需要提前Mock 减少代码冗余、灵活插拔 减少沟通，减少联调时间mock设置的方法：本地创建json easy-mock平台 集成Mock API本地创建json：特点：虽然简单但是当请求真正的接口时，需要修改代码（真实接口并不是在mock中）easy-mock：特点：代码改动较少，但是easy-mock网站非常容易垮掉，...
2020-04-15 19:55:38
445
原创 前端接口环境配置
因为有本地开发环境，测试环境，生产环境,因此需要判断当前启动的项目是测试环境还是生产环境。process.env.NODE_ENV 皆可以判断当前处于什么环境。在packag中配置mode后，就可以在env.js中通过process.env.NODE_ENV 拿到环境变量值，去请求对应的接口。1.创建env.js文件，let baseURL;switch (process.env...
2020-04-15 16:26:14
1087
原创 跨域之接口代理
1.在vue.config.js中配置如下：module.exports={ /* webpack-dev-server 相关配置 */ devServer: { host:'localhost', port:8080, proxy:{ '/api':{ /* 目标代...
2020-04-15 14:50:20
283
原创 如何在腾讯云服务器上安装node8.9.4
下载8.9.4的安装包： wget https://nodejs.org/dist/v8.9.4/node-v8.9.4.tar.gz 解压：tar -zxvf node-v8.9.4.tar.gz1 生成配置文件：./configure1 编译：make 安装：make install1 安装完成，查看Node版本，node -v注意这里必须要用执行make和make install...
2020-04-12 18:20:21
199
原创 小白教程：将本地项目上传到云服务器上
1.购买腾讯云或者阿里云服务，购买地址：https://console.cloud.tencent.com/2.下载xshell：https://xshell.en.softonic.com/Xshell是一款功能强大且安全的终端模拟器，支持SSH、SFTP、TELNET、RLOGIN和SERIAL。可以连接云服务器。3.xshell连接云服务器文件--》新建--》在主机哪里填云服...
2020-04-12 18:13:31
3487
1
原创 如何修改C:\Windows\System32\drivers\etc\hosts文件
1.首先点击win,搜索记事本。2.以管理员权限打开3.点击文件，打开（路径为C:\Windows\System32\drivers\etc\hosts）4.然后点击文件类型为所有文件5.打开hosts，修改然后ctrl+s...
2020-04-10 20:16:54
7254
9
原创 防止csrf攻击之token
1.设置随机字符串，尽量大一些var csrfToken=parseInt(Math.random()*999999,10); ctx.cookies.set('csrfToken',csrfToken) console.log(ctx.cookies.get('csrfToken'))2.在表单中提交的数据中加入csrfTokenif(post){ ctx.rend...
2020-04-02 19:42:03
588
原创 SVG-captcha验证码在node中的应用
良心推荐吧！觉得比ccap的图片验证码便捷许多，不用什么python,c++的环境。切身感受，用ccap搞环境搞了将近一天都没弄好，报错层出不穷。心累得。。。下面呢？说一下很快搞好的这个可耐验证码吧1.创建captcha.js，生成验证码var captcha={};var cache={}; captcha.captcha=async function(ctx,next){ ...
2020-04-02 18:26:35
332
原创 WebSocket多人聊天室
1.express后端框架2.socket.io封装了多种协议的webscoket库1.项目搭建：npm initnpm expressnpm install socket --save利用bootstrap构建前端部分，安装bootstap :npm install bootstrap@32.目录结构：3.index.js文件const express =...
2020-03-23 15:46:18
182
原创 nodejs搭建静态服务并设置缓存
1.首先搭建nodej服务var http=require('http');var server = http.createServer(function (request, response) { // TODO});server.listen(3200);console.log("Server runing ...");2.实现路由var server = http.c...
2020-03-10 19:28:37
727
原创 vue-axios的特点及使用详解
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范，它本身具有以下特征：从浏览器中创建 XMLHttpRequest 支持 Promise API 客户端支持防止CSRF 提供了一些并发请求的接口（重要，方便了很多的操作） 从 node.js 创建 http 请求...
2019-11-28 09:52:33
1525
1
原创 vue-i18n的使用
安装vue-i18n npm install vue-i18n --save-dev 将i18n引入vue实例(main.js)中，在项目中实现调用API和模板语法。 import VueI18n from 'vue-i18n' //引入vue-i18n Vue.use(VueI18n); //通过插件的形式挂载 /*基本使用：创建i...
2019-08-31 17:14:43
954
原创 epub阅读器开发简介
Epubjs核心安装epubjs npm install epubjs电子书的解析和渲染 将电子书存放至public文件夹 import Epubjs from 'epubjs'; const DOWNLOAD_URL='121312.epub'//指向电子书的下载路径 生成Epubjs电子书 this.book=new ...
2019-08-21 18:58:10
1206
2
原创 webpack打包流程中常见问题解决
注意并不是所有的所有的问题的解决办法都对于你适应，因为每个人电脑的配置环境都是有差异的。随着webpack的升级，安装的依赖包也略有不同，因此认真看命令行的提示会帮你解决好多不必要的问题。1.利用webpack打包时，用这个命令：webpack .\src\main.js .\dist\bundle.js 发现由于版本号太高，导致打包错。换成：webpack .\src\main.js -o...
2019-06-18 09:16:21
1184
4
原创 浏览器缓存机制
http缓存（强制缓存和协商缓存）浏览器缓存是浏览器在本地磁盘对用户最近访问过的文档进行储存，当用户再次访问同一文档时，浏览器就可以直接从本地磁盘加载文档。据以上特点可以知道浏览器缓存的优点：减少冗余的数据传输减少服务器的负担加快用户加载页面的速度http缓存涉及三个角色：浏览器，服务器，数据缓存库。当浏览器第一次请求数据时：强制缓存请求机制：原理：请求的数据在缓存数据库中...
2019-06-10 20:23:38
250
原创 浏览器缓存之cookie详解
浏览器端的存储方式：说到cookie不能不说本地存储了。本地存储的优点： 避免取回代码前一片空白，若是不需要新的数据可以减少向服务器的请求次数，从而减少用户等待服务器的响应时间。 网路状态不好时可以离线显示存储部分。 常见的几种本地存储：打开chrome——>f12——>Application 1.cookie：cookie的实现：Cook...
2019-06-10 10:13:58
1466
1
原创 Vuex的基本用法
Vuex主要适用于大型单页应用，适合多人协同开发。（emmm....这是我看书上知道的，先记下来再看是不是。。）1。通过NPM安装Vuex:npm install --save vuex2.与vue-router用法相似，在main.js里通过Vue.use()使用vuex:import Vuex from 'vuex';Vue.use(Vuex);//配置路由省略c...
2019-05-21 09:40:55
197
原创 webpack基础配置以及配置vue
这篇文章是好久好久之前写的，还是具有一定的参考价值滴。不喜勿喷哦，前端小白艰苦学习旅程~~~1.创建一个文件目录webdemo,结构如下：2.编写index.html<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title&...
2019-05-12 10:05:11
796
原创 webpack4.0基础配置以及（webpack-dev-server）的使用
今天又开启了我webpack4.0的学习旅途。上次学习webpack中途问题实在是解决不了，就搁置好久没看了。可是怎么能不看呢，毕竟自己准备进军前端一线了。哈哈~~~说下webpack都可以干什么吧？代码转换，文件优化，代码分割，模块合并，自动刷新，代码校验，自动发布等特点好了不说啦开始基本配置吧在开始配置之前，先新建一个文件夹webpc，在根目录下写src(js, css,....
2019-05-11 22:26:40
5525
2
原创 vue组件实现发表评论功能（localStorage）
首先画出简单的界面如下：说说我的思路：由于是为了去练习组件之间传值，所以将页面上的写评论部分写在了子组件中，然后在然后然后子组件点击发表将数据传递给父组件的data,再由父组件来渲染评论社区的页面。1.先主实例的data中写一个固定的评论列表，然后在页面上利用v-for来渲染实现页面效果。2.在模板中定义一个方法publishctx，用来发表数据，但是如何拿到评论人和评论内容呢？...
2019-05-09 21:40:57
5481
7
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人