置顶文章
精选分类
前端
技术设计心得
思维照片
高质量精选kotlin
技术设计文章列表
PDF 预览和下载你是怎么实现的?
# 前言
在开发过程中要求对 PDF
类型的发票提供 预览 和 下载 功能, PDF
类型文件的来源又包括 H5 移动端
和 PC 端
,而针对这两个不同端的处理会有些许不同,下文会有所提及。
针对 PDF 预览
的文章不在少数,但似乎都没有提及可能遇到的问题,或是提供对应的具体需求场景下如何选择,因此,本文的核心就是结合实际需求场景下,看看目前各种实现方案到底哪一个更适合,当然希望大家可以在评论区对文中的内容进行斧正,或是提供更优质的方案。
基本要求:
- 支持
pdf 文件
内容的 完整预览 多页 pdf 文件
支持分页查看
PC 端
和移动端
都需支持 下载 和 预览
产品要求:
- PC 端 的预览要支持在 当前页 进行预览
pdf 文件
预览时的字体要 和 实际文件的 字体保证一致性
多巴胺是最廉价的毒药
不辜负每一个阅读的人。
反思一下现实中,你有没有发现这样的现象:
当你想认认真真做点正事的时候,总会有各种因素干扰你。
学习没一会,你心痒难耐想打两把游戏,然后一打就是两小时;
工作刚开展,你又忍不住点开某短视频,然后一刷就是老半天。
其实这些 **“奶头乐” 的背后,都是 “多巴胺陷阱”**。
JavaScript 模块化:CommonJS vs AMD vs ES6
本文主体部分 翻译 + 搬运 自外网著名技术博客网站 medium.com 的一篇点赞数 2.7k 的文章 (文章链接在结尾处)
# 什么是 JavaScript 模块
JavaScript 模块指的是一段可复用的,独立的代码。他们通常都有特定的功能,能在整个代码系统里被引进或删除 —— 这个概念多少类似于 Java 或者 Python 中的类。
模块通常是独立的 —— 与其他代码解耦,因此方便修改。这也提高了代码的可读性和可维护性。模块化在使部分代码保持私有,仅暴露公共部分的的同时,还解决了命名空间模糊性的问题。
性能优化之通俗易懂学习requestAnimationFrame和使用场景举例
# requestAnimationFrame 官方介绍
# requestAnimationFrame 用处概述
window.requestAnimationFrame()
告诉浏览器 —— 你希望执行一个动画,并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数,该回调函数会在浏览器下一次重绘之前执行...
官方文档对应截图
官方文档:https://developer.mozilla.org/zh-CN/docs/Web/API/Window/requestAnimationFrame
8 种方案机智应对后端一次性返回 10万 条数据
# 问题描述
- 面试官:后端一次性返回
10万条
数据给你,你如何处理? - 我:歪嘴一笑,`what the f**k!
# 问题考察点
看似无厘头的问题,实际上考查候选人知识的广度和深度,虽然在工作中这种情况很少遇到...
- 考察前端如何处理大量数据
- 考察候选人对于大量数据的性能优化
- 考察候选人处理问题的思考方式(关于这一点,文末会说到,大家继续阅读)
- ......
文末会提供完整代码,供大家更好的理解
# 使用 express 创建一个十万条数据的接口
若是道友对
express
相关不太熟悉的话,有空可以看看笔者的这一篇全栈文章(还有完整代码哦):
水冗水孚:Vue+Express+Mysql 全栈项目之增删改查、分页排序导出表格功能 8 赞同・4 评论文章
route.get("/bigData", (req, res) => { | |
res.header('Access-Control-Allow-Origin', '*'); // 允许跨域 | |
let arr = [] // 定义数组,存放十万条数据 | |
for (let i = 0; i < 100000; i++) { // 循环添加十万条数据 | |
arr.push({ | |
id: i + 1, | |
name: '名字' + (i + 1), | |
value: i + 1, | |
}) | |
} | |
res.send({ code: 0, msg: '成功', data: arr }) // 将十万条数据返回之 | |
}) |
# 点击按钮,发请求,获取数据,渲染到表格上
html 结构如下:
<el-button :loading="loading" @click="plan">点击请求加载</el-button> | |
<el-table :data="arr"> | |
<el-table-column type="index" label="序" /> | |
<el-table-column prop="id" label="ID" /> | |
<el-table-column prop="name" label="名字" /> | |
<el-table-column prop="value" label="对应值" /> | |
</el-table> | |
data() { | |
return { | |
arr: [], | |
loading: false, | |
}; | |
}, | |
async plan() { | |
// 发请求,拿数据,赋值给 arr | |
} |
应该在JavaScript中使用Class吗?
# 看似无处不在的 OOP
OOP 即 面向对象编程 (Object Oriented Programming)毫无疑问是软件设计和发展中的一大进步。事实上,一些编程语言如 Java 、C++ 就是基于 OOP 的核心概念 class 开发出来。
在高校的 CS 相关专业中,无论教授什么编程语言,OOP 的学习是绝对不会被落下的。
同时,OOP 在业界中也的确被大量使用,尤其是的后端服务领域、桌面软件、移动 APP 开发等。
因此,OOP 看起来在软件行业无处不在,在这种有点教条主义的氛围下,很多程序员甚至以为 class 是编程固有的概念 —— 然而并不是。
OOP 只是一套帮助开发者设计和编写软件的方法论,但并不代表它能解决所有领域的问题,也不是能在所有编程语言的任何场景下都适用。我们应避免陷入这种教条主义。
JavaScript不用class也能实现设计模式!
性能优化之使用vue-worker插件(基于Web Worker)开启多线程运算提高效率
# 什么是 Web Worker
15 年前,也就是 2008 年, html
第五版 html5
发布,这一版的发布,提供了不少新的好用的功能,如:
- Canvas 绘图
- 拖拽 drag
- websocket
- Geolocation
- webworker
- 等...
笔者之前说过: 一项新技术新的技术方案的提出,一定是为了解决某个问题的,或者是对某种方案的优化
那么 Web Worker
这个新技术解决了什么问题?有哪些优化价值呢?
让我们继续往下看...
Cookie、Session、Token、JWT详解
# 什么是认证(Authentication)
- 通俗地讲就是验证当前用户的身份,证明 “你是你自己”(比如:你每天上下班打卡,都需要通过指纹打卡,当你的指纹和系统里录入的指纹相匹配时,就打卡成功)
- 互联网中的认证:
- 用户名密码登录
- 邮箱发送登录链接
- 手机号接收验证码
- 只要你能收到邮箱 / 验证码,就默认你是账号的主人
# 什么是授权(Authorization)
- 用户授予第三方应用访问该用户某些资源的权限
- 你在安装手机应用的时候,APP 会询问是否允许授予权限(访问相册、地理位置等权限)
- 你在访问微信小程序时,当登录时,小程序会询问是否允许授予权限(获取昵称、头像、地区、性别等个人信息)
- 实现授权的方式有:
cookie
、session
、token
、OAuth
# 什么是凭证(Credentials)
- 实现认证和授权的前提是需要一种媒介(证书) 来标记访问者的身份
- 在战国时期,商鞅变法,发明了照身帖。照身帖由官府发放,是一块打磨光滑细密的竹板,上面刻有持有人的头像和籍贯信息。国人必须持有,如若没有就被认为是黑户,或者间谍之类的。
- 在现实生活中,每个人都会有一张专属的居民身份证,是用于证明持有人身份的一种法定证件。通过身份证,我们可以办理手机卡 / 银行卡 / 个人贷款 / 交通出行等等,这就是认证的凭证。
- 在互联网应用中,一般网站(如掘金)会有两种模式,游客模式和登录模式。游客模式下,可以正常浏览网站上面的文章,一旦想要点赞 / 收藏 / 分享文章,就需要登录或者注册账号。当用户登录成功后,服务器会给该用户使用的浏览器颁发一个令牌(token),这个令牌用来表明你的身份,每次浏览器发送请求时会带上这个令牌,就可以使用游客模式下无法使用的功能。
用过Pinia后Vuex 都不香了
前言
Vue3 已经推出很长时间了,它周边的生态也是越来越完善了。之前我们使用 Vue2 的时候,Vuex 可以说是必备的,它作为一个状态管理工具,给我们带来了极大的方便。Vue3 推出后,虽然相对于 Vue2 很多东西都变了,但是核心的东西还是没有变的,比如说状态管理、路由等等。再 Vue3 种,尤大神推荐我们使用 pinia 来实现状态管理,他也说 pinia 就是 Vuex 的新版本。
那么 pinia 究竟是何方神圣,本篇文章带大家一起学透它!