置顶文章

1.8k 2 分钟

还记得所有 AI 教程必提的「奥卡姆剃刀原则」吗?即:如无必要,勿增实体。这条原则也被收藏,还有一些不太常见的费茨法则、盖尔定律、康威定律等,都被一一收入囊中。

精选分类

文章列表

9.9k 9 分钟

# 前言

在开发过程中要求对 PDF 类型的发票提供 预览下载 功能, PDF 类型文件的来源又包括 H5 移动端 PC 端 ,而针对这两个不同端的处理会有些许不同,下文会有所提及。

针对 PDF 预览 的文章不在少数,但似乎都没有提及可能遇到的问题,或是提供对应的具体需求场景下如何选择,因此,本文的核心就是结合实际需求场景下,看看目前各种实现方案到底哪一个更适合,当然希望大家可以在评论区对文中的内容进行斧正,或是提供更优质的方案。

基本要求:

  • 支持 pdf 文件 内容的 完整预览
  • 多页 pdf 文件 支持 分页查看
  • PC 端 移动端 都需支持 下载预览

产品要求:

  • PC 端 的预览要支持在 当前页 进行预览
  • pdf 文件 预览时的字体要 和 实际文件的 字体保证一致性

2.9k 3 分钟

不辜负每一个阅读的人。

反思一下现实中,你有没有发现这样的现象:

  • 当你想认认真真做点正事的时候,总会有各种因素干扰你。

  • 学习没一会,你心痒难耐想打两把游戏,然后一打就是两小时;

  • 工作刚开展,你又忍不住点开某短视频,然后一刷就是老半天。

其实这些 **“奶头乐” 的背后,都是 “多巴胺陷阱”**。

3.7k 3 分钟

本文主体部分 翻译 + 搬运 自外网著名技术博客网站 medium.com 的一篇点赞数 2.7k 的文章 (文章链接在结尾处)


# 什么是 JavaScript 模块

JavaScript 模块指的是一段可复用的,独立的代码。他们通常都有特定的功能,能在整个代码系统里被引进或删除 —— 这个概念多少类似于 Java 或者 Python 中的类。

模块通常是独立的 —— 与其他代码解耦,因此方便修改。这也提高了代码的可读性和可维护性。模块化在使部分代码保持私有,仅暴露公共部分的的同时,还解决了命名空间模糊性的问题。

8.2k 7 分钟

# requestAnimationFrame 官方介绍

# requestAnimationFrame 用处概述

window.requestAnimationFrame() 告诉浏览器 —— 你希望执行一个动画,并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数,该回调函数会在浏览器下一次重绘之前执行...

官方文档对应截图

img

官方文档:https://developer.mozilla.org/zh-CN/docs/Web/API/Window/requestAnimationFrame

12k 11 分钟

# 问题描述

  • 面试官:后端一次性返回 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
}

9.1k 8 分钟

img

# 看似无处不在的 OOP

OOP 即 面向对象编程 (Object Oriented Programming)毫无疑问是软件设计和发展中的一大进步。事实上,一些编程语言如 Java 、C++ 就是基于 OOP 的核心概念 class 开发出来。

在高校的 CS 相关专业中,无论教授什么编程语言,OOP 的学习是绝对不会被落下的。

同时,OOP 在业界中也的确被大量使用,尤其是的后端服务领域、桌面软件、移动 APP 开发等。

因此,OOP 看起来在软件行业无处不在,在这种有点教条主义的氛围下,很多程序员甚至以为 class 是编程固有的概念 —— 然而并不是。

OOP 只是一套帮助开发者设计和编写软件的方法论,但并不代表它能解决所有领域的问题,也不是能在所有编程语言的任何场景下都适用。我们应避免陷入这种教条主义。

9.9k 9 分钟

转自:https://zhuanlan.zhihu.com/p/163032982 Object Oriented Programming (OOP) 面向对象衍生出的精华之一 —— 设计模式,在过去几十年的软件开发历史中被证明是行之有效的一系列软件设计最佳实践。 这本《设计模式:可复用面向对象软件的基础》是讲述设计模式的经典书籍,懂 Java 的朋友务必要看看这本书。 如果是纯前端的同学,Java 语法看起来可能有点不习惯。但事实上,或许也不一定要看懂这本书的代码,而是去理解里面描述的设计模式到底是什么。 在上一篇文章 应该在 JavaScript 中使用 Class...
15k 13 分钟

# 什么是 Web Worker

15 年前,也就是 2008 年, html 第五版 html5 发布,这一版的发布,提供了不少新的好用的功能,如:

  • Canvas 绘图
  • 拖拽 drag
  • websocket
  • Geolocation
  • webworker
  • 等...

笔者之前说过: 一项新技术新的技术方案的提出,一定是为了解决某个问题的,或者是对某种方案的优化

那么 Web Worker 这个新技术解决了什么问题?有哪些优化价值呢?

让我们继续往下看...

9.4k 9 分钟

# 什么是认证(Authentication)

  • 通俗地讲就是验证当前用户的身份,证明 “你是你自己”(比如:你每天上下班打卡,都需要通过指纹打卡,当你的指纹和系统里录入的指纹相匹配时,就打卡成功)
  • 互联网中的认证:
  • 用户名密码登录
  • 邮箱发送登录链接
  • 手机号接收验证码
  • 只要你能收到邮箱 / 验证码,就默认你是账号的主人

# 什么是授权(Authorization)

  • 用户授予第三方应用访问该用户某些资源的权限
  • 你在安装手机应用的时候,APP 会询问是否允许授予权限(访问相册、地理位置等权限)
  • 你在访问微信小程序时,当登录时,小程序会询问是否允许授予权限(获取昵称、头像、地区、性别等个人信息)
  • 实现授权的方式有: cookiesessiontokenOAuth

# 什么是凭证(Credentials)

  • 实现认证和授权的前提是需要一种媒介(证书) 来标记访问者的身份
  • 在战国时期,商鞅变法,发明了照身帖。照身帖由官府发放,是一块打磨光滑细密的竹板,上面刻有持有人的头像和籍贯信息。国人必须持有,如若没有就被认为是黑户,或者间谍之类的。
  • 在现实生活中,每个人都会有一张专属的居民身份证,是用于证明持有人身份的一种法定证件。通过身份证,我们可以办理手机卡 / 银行卡 / 个人贷款 / 交通出行等等,这就是认证的凭证。
  • 在互联网应用中,一般网站(如掘金)会有两种模式,游客模式和登录模式。游客模式下,可以正常浏览网站上面的文章,一旦想要点赞 / 收藏 / 分享文章,就需要登录或者注册账号。当用户登录成功后,服务器会给该用户使用的浏览器颁发一个令牌(token),这个令牌用来表明你的身份,每次浏览器发送请求时会带上这个令牌,就可以使用游客模式下无法使用的功能。

13k 11 分钟

前言

Vue3 已经推出很长时间了,它周边的生态也是越来越完善了。之前我们使用 Vue2 的时候,Vuex 可以说是必备的,它作为一个状态管理工具,给我们带来了极大的方便。Vue3 推出后,虽然相对于 Vue2 很多东西都变了,但是核心的东西还是没有变的,比如说状态管理、路由等等。再 Vue3 种,尤大神推荐我们使用 pinia 来实现状态管理,他也说 pinia 就是 Vuex 的新版本。

那么 pinia 究竟是何方神圣,本篇文章带大家一起学透它!