- 博客(53)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 前端复杂 table 渲染及 excel.js 导出
为了达到使用一套代码兼容页面渲染和 excel 生成的目的，我们需要统一以行的维度进行数据的组织，然后分别使用原生 table 渲染和 excel.js 生成 Excel 文件并导出。
2024-02-02 15:02:51
1283
原创 为 el-select 组件添加滚动加载更多的功能
在项目中，我们展示到 el-select 的数据通常是从服务端获取的，如果服务端的查询较慢或者数据量过大，就会导致在前端的显示很慢，特别是在网络不好的时候。 所以，分页展示就是一种较好的交互体验。
2023-08-02 11:39:35
1367
2
原创 CSS 实现 Turbo 官网 3D 网格线背景动画
查看 Turbo 官网时发现它的背景动画挺有意思，就自己动手实现了一下。简单说明原理：使用 mask-image 绘制网格，perspective、rotate 设置 3D 效果并添加位移动画。
2023-07-18 17:02:35
1790
原创 CSS 渐变边框及动画
CSS 实现渐变边框及动画。 简单说明原理：使用伪元素 `::before` 绘制渐变色，然后使用伪元素 `::after` 绘制背景，使其遮住渐变色的一部分，仅保留边框部分，然后添加旋转动画即可。
2023-07-18 16:54:33
2306
原创 微前端（wujie）使用手册
wujie 是一个基于 WebComponent 容器 + iframe 沙箱的微前端方案。能够解决适配成本、样式隔离、运行性能、页面白屏、子应用通信、子应用保活、多应用激活、vite 框架支持等问题。
2023-07-07 09:55:36
1241
原创 微前端（micro-app）使用手册
micro-app 是借鉴了 WebComponent 的思想，通过 CustomElement 结合自定义 ShadowDom，将微前端封装成一个类 WebComponent 组件，从而实现组件化。
2023-06-25 16:47:17
2089
原创 微前端（qiankun）使用手册
qiankun 孵化自蚂蚁金融科技基于微前端架构的云产品统一接入平台，在经过一批线上应用的充分检验及打磨后，我们将其微前端内核抽取出来并开源，希望能同时帮助社区有类似需求的系统更方便的构建自己的微前端系统，同时也希望通过社区的帮助将 qiankun 打磨的更加成熟完善。
2023-05-22 11:35:40
1210
原创 常见微前端方案
常见微前端方案及其优缺点。iframe、路由转发、动态加载模块、npm、Web Component、EMP、single-spa / qiankun、wujie、micro-app。
2023-05-12 16:09:49
777
原创 Node.js 入门
Node.js 是一个基于 Chrome V8 引擎的开源的跨平台的 JavaScript 运行时环境。 Node.js 采用了基于事件的、单线程的异步 I/O 架构。
2023-03-28 12:47:48
638
1
原创 Vite2 + React + Antd 踩坑指南
process is not defined报错：Uncaught ReferenceError: process is not defined解决方案：// 使用 import.meta.env 替换 process.envprocess.env --> import.meta.env# .env# 字段名必须以 VITE_ 开头，否则不会暴露到 import.meta.env 中VITE_APP_VERSION = "1.0.0"Property ‘env’ does n
2021-02-28 22:05:52
3330
原创 使用 Vite2 构建 React + Antd 项目
Vite2、React、Antd什么是 Vite？Vite（法语意思是 “快”，发音为 /vit/，类似 veet）是一种全新的面向未来的前端开发服务器和构建工具。Vite 利用浏览器原生 ES Module 去解析 imports，在服务器端按需编译返回，跳过了打包的概念，服务器随起随用。同时不仅支持 Vue 和 React，还搞定了热更新，而且热更新的速度不会随着模块增多而变慢。针对生产环境则可以把同一份代码用 rollup 打包。创建项目# 使用 npm 创建 React 模板的项目 m.
2021-02-28 22:01:02
3116
1
原创 Python 查询 GitLab commit 次数
年底了，看看自己这一年总共提交了多少次代码吧。一、安装 python-gitlab# Python2pip install python-gitlab# Python3pip3 install python-gitlab二、下载脚本我已经写好了脚本，点击这里获取脚本和配置文件config.py 配置文件，需要获取自己的配置信息并填写到该文件中。queryer.py 查询脚本，修改配置后运行该 脚本即可启动查询。三、获取 GitLab 地址和 Access TokenGitLa
2021-02-03 22:07:28
1208
1
原创 降域 & postMessage
同源策略 & 跨域iframe 跨域由于同源策略的限制，使用 iframe 标签引入非同源的资源，在外部操作 iframe 中的 DOM 元素将会被浏览器阻止并报错。假设有两个域名：blog.sch.com、game.sch.com。在 blog 的页面中加载 game 的页面，并操作其中的 DOM 元素。<body> <div>This is outside window.</div> <iframe src="https:/.
2020-12-24 21:23:18
382
1
原创 CORS 跨域原理
同源策略&跨域什么是 CORS？CORS 全称 Cross-Origin Resource Sharing，即跨域资源共享。CORS 是一种基于 HTTP Header 的机制，该机制通过允许服务器标示除了它自己以外的其它域。服务器端配合浏览器实现 CORS 机制，可以突破浏览器对跨域资源访问的限制，实现跨域资源请求。CORS 验证机制CORS 的验证机制分两种模式：简单请求和预检请求。简单请求简单请求模式下浏览器直接发送请求，并在请求头中携带 Origin。 服务器端接到请求.
2020-12-22 12:37:39
1572
原创 同源策略 & 跨域
同源策略为保护用户信息安全，防止恶意网站窃取用户数据，浏览器限制本域中的脚本只能访问本域中的资源，这就是同源策略。同源的定义如果两个 URL 的 protocol、host、port 三者都相同的话，则这两个 URL 是同源，即属于同一个域。源的继承在页面中通过 about:blank 或 javascript: URL 执行的脚本会继承打开该 URL 的文档的源，因为这些类型的 URL 没有包含源服务器的相关信息。源的修改可以通过设置 document.domain 为当前域或者当前域的父域
2020-12-18 11:09:25
174
1
原创 JSONP 跨域原理
同源策略： 为保护用户信息安全，防止恶意网站窃取用户数据，浏览器限制本域中的脚本只能访问本域中的资源。同源判断： 协议、域名、端口号三者完全一致视为同源，即属于同一个域。跨域： 请求非同源的资源即为跨域。什么是 JSONP？JSONP（JSON with Padding）是资料格式JSON的一种“使用模式”，可以让网页从别的网域获取资料。 —— 维基百科JSONP 核心原理script 标签不受同源策略影响。动态插入到 DOM 中的 script 脚本可以立即得到执行。实现步骤.
2020-12-17 11:06:52
411
1
原创 工厂模式（Factory Pattern）
模式定义工厂模式属于创建型模式，它提供了一种创建对象的最佳方式。在工厂模式中，创建对象时不会对外暴露创建逻辑，并且通过一个共同的接口指向创建对象。根据实现方式的不同，工厂模式可以分为简单工厂模式、工厂方法模式。简单工厂模式简单工厂模式又称为静态工厂方法模式。大家经常使用的机械键盘有各种轴的，如红轴、青轴、茶轴等等。现在有一个厂商可以生产红轴和青轴键盘，使用代码该如何表现呢？interf...
2019-10-16 17:53:56
110
原创 设计模式简述
一、简介设计模式代表了软件开发的最佳实践，是软件开发人员在软件开发过程中面临的一般问题的解决方案，是一套反复使用的、多人知晓的、经过分类编目的代码设计经验的总结。使用设计模式的目的是重用代码、让代码更易理解、保证代码的可靠性和可维护性。学习这些模式有助于经验不足的开发人员通过一种简单快捷的方式来学习软件设计。二、设计原则开闭原则对扩展开发，对修改关闭。在对程序进行扩展的时候不能修改原...
2019-10-16 11:14:15
176
1
原创 Flutter 自定义缩放控件
最近在学习 Flutter，俗话说的好，纸上得来终觉浅，所以动手撸了一个 gank.io 的 APP，有兴趣的可以 到 GitHub 看看源码。本文将与大家分享项目中自定义的缩放控件 GestureZoomBox 。功能双击缩放。双指缩放。以双击位置/双指位置作为缩放中心。限制缩放/拖动范围，超过范围自动回弹。作为父级 Widget 直接嵌套，无侵入。核心原理手势识别Ge...
2019-09-18 16:09:50
3014
1
原创 你一定会用到的 RxJava 操作符
RxJava 操作符阅读本文前请先了解 RxJava 的基本使用。参考文档： RxJava JavaDoc ReactiveX文档中文翻译1 Observable 的创建1.1 from( )转换集合为一个每次发射集合中一个元素的 Observable 对象。可用来遍历集合。方法列表：public static Observable from(Future
2016-09-19 09:20:57
2531
1
原创 Android Studio No Debuggable Applications
今天换了台手机进行测试，但是手机连上之后却不能选择要输出log的应用（选应用的位置显示No Debuggable Applications），导致logcat中不断打印出一行行log，而从这茫茫log中找出自己需要的log是恨痛苦的，咋办咧？Google呗。 通过谷歌发现，大家解决此问题的方式大都是这样：从Android Studio的工具栏依次选择Tools-> Android -> Ena
2016-05-03 17:01:58
3880
1
原创 Android Studio 指定DEBUG和RELEASE版本打包时的APK文件名
build.gradle文件的代码片段：android {...... //打包后应用名称 applicationVariants.all { variant -> variant.outputs.each { output -> def outputFile = output.outputFile def fileNam
2016-03-17 10:18:48
10227
1
原创 可添加Header可下拉刷新的RecyclerView
RefreshRecyclerView下拉刷新的RecyclerView，兼有上拉加载更多、添加头部、定制脚部功能，下拉刷新使用SwipeRefreshLayout。代码在这效果图用法不想看我啰嗦的直接看MainActivity.java添加Header和FooterFooter有默认的，就是效果图上的那个，当然也可以使用以下方法定制Footer。refreshView.setHeader(R.la
2016-01-28 20:13:50
1416
1
原创 面试题－Java API篇
最近得空，就去一些招聘网站做了些面试题，为方便大家共同学习，Java API相关的就在这篇博客里记录一下，以后有空会持续更新，大家有更好的答案也可以留言告诉我。 面试题－Java算法篇 传送门 面试题－Android篇 传送门1. HashMap和Hashtable的区别Hashtable 继承自 Dictiionary 而 HashMap继承自AbstractMap。HashMap允许将n
2015-11-18 17:23:06
3857
1
原创 面试题－Android篇
最近得空，就去一些招聘网站做了些面试题，为方便大家共同学习，Android相关的就在这篇博客里记录一下，以后有空会持续更新，大家有更好的答案也可以留言告诉我。面试题－Java算法篇 传送门
2015-11-18 16:05:40
738
1
原创 面试题－Java算法篇
最近得空，就去一些招聘网站做了些面试题，为方便大家共同学习，Java相关的算法就在这篇文章里记录一下，以后有空会持续更新，大家有更好的写法也可以留言告诉我。Android篇的传送门1. 使用递归完成以下输出：***************/** * 打印星号, 第一行1个, 以后每行增加一个 * * @param row 行数 */public void printStart(in
2015-11-18 15:59:40
1058
1
原创 使用AIDL实现进程间通信
AIDL(Android Interface Definition Language) 是一种IDL语言，用于生成可以在Android设备上两个进程之间进行进程间通信(IPC)的代码。以下的文件创建过程是基于Android Studio。使用AIDL实现进程间通信步骤：1. 创建.aidl文件该文件结构类似与Java中的接口，定义了可用的方法和数据的接口。 右键点击程序包 –> new –> A
2015-11-04 16:59:07
1491
3
原创 ImageLoader工具类
Universal Image Loader 项目主页 为乐更加方便的使用ImageLoader，整理出来一个工具类ImageLoaderHelper.java。import android.content.Context;import android.graphics.Bitmap;import com.nostra13.universalimageloader.cache.disc.nami
2015-11-02 18:07:34
945
原创 Android开启悬浮窗
开启全局的悬浮窗（即覆盖在所有Activity上的悬浮窗）需要使用Application的Window，即使用Application Context获取WindowManagerWindowManager manager = (WindowManager) applicationContext.getSystemService(WINDOW_SERVICE);如果使用Activity Context
2015-10-21 16:40:25
1542
原创 Retrofit2.0使用详解
Retrofit2.0 项目主页 Retrofit2.0 官方文档简介Retrofit是由Square公司出品的针对于Android和Java的类型安全的Http客户端，网络服务基于OkHttp 。 Retrofit2.0: 有史以来最大的改进使用Retrofit2.0下载 v2.0.0-beta2 JARGradlecompile 'com.squareup.retrofit:retrofit
2015-10-20 18:15:33
36226
17
原创 获取<meta-data>元素的value属性的值
获取元素的value属性的值，有注释不解释。import android.app.Activity;import android.content.ComponentName;import android.content.Context;import android.content.pm.ActivityInfo;import android.content.pm.ApplicationInf
2015-10-20 15:09:39
1540
原创 解决ScrollView滚动条不在最顶部的问题
ScrollView中嵌套GridView(已重写)，就是那种按照网上的方法。GridView重写以下方法解决不能完全显示的问题/** 重新方法，使其不会出现滚动条，以解决被嵌套进ScrollView不能正常显示的问题 */@Overridepublic void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { int e
2015-10-10 17:38:13
2238
原创 重写TimePickerDialog以解决多次添加的问题
使用TimePickerDialog时，点击对话框的确定按钮，会添加两条数据，原因是OnTimeSetListener中的onTimeSe()执行了两次，点击确定按钮时执行一次，对话框取消时，TimePickerDialog的onStop()方法中也执行了一次。解决方法：重写TimePickerDialog类，并覆盖onStop()import android.app.TimePickerDialo
2015-10-10 17:35:48
1226
原创 Android中使用lambda表达式
使用lambda可以大大简化代码： http://www.oschina.net/question/12_59047 http://blog.csdn.net/wangboxian/article/details/41963205Android 中使用lambda需要java 8 的支持，下载地址：http://www.androiddevtools.cn/Android Studio中使用la
2015-10-10 17:34:10
824
原创 解决Bitmap转Drawable尺寸变小的问题
// 设置bitmap转成drawable后尺寸不变DisplayMetrics metrics = new DisplayMetrics();((Activity)context).getWindowManager().getDefaultDisplay().getMetrics(metrics);Resources resources = new Resources(context.get
2015-10-10 17:32:37
2482
1
原创 解决SurfaceView画图时图片失真的问题
项目中使用到SurfaceView，绘制图片的时候总是出现一些条纹，好像被拉伸了似的，但是使用View去绘制时却这没有这个问题，针对SurfaceView找了好久都没找到原因，后来无意中发现Paint中一个方法，问题轻松解决。mPaint.setDither(true);
2015-10-10 17:29:33
1510
原创 仿手机QQ消息数拖动删除效果
仿手机QQ消息数拖动删除效果用法：复制/app/src/main/java/com/sch/dragdelete/DragDeleteTextView.java，和/app/src/main/res/drawable/clean_anim.xml，以及使用到的图片/app/src/main/res/mipmap-xhdpi/到自己项目中的对应位置。DragDeleteTextView类的用法与Tex
2015-10-09 17:37:11
1422
1
原创 带头尾和动画的下拉刷新RecyclerView
不废话，先看效果，嗯…看起来有点卡，截图软件的问题：上图中演示了三种不同的布局和下拉效果，三种布局和三种下拉效果可以通过Header的设置任意组合。图中普通列表是ListView样式，没有设置Header和Footer，使用默认的下拉刷新和上拉加载。 宫格列表使用的是自定义Header和Footer的下拉刷新和上拉上拉加载，并设置了下拉使放大的图片。 瀑布流列表使用的是自定义Header和Foo
2015-08-06 19:52:11
10351
33
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人