8.7k 字 8 分钟

# 前言

本文将简要介绍前端常用日期处理库：官方停止维护的 moment.js，无缝代替 moment.js 的 day.js，逐渐流行的 date-fns，最后基于 date-fns 封装常用日期处理的 utils。

如果项目中有用 moment.js 的可以用 day.js 代替减少体积做优化，新项目可以直接选择 date-fns。

18k 字 16 分钟

从15个点来思考前端大量数据渲染与频繁更新的方案

先来总结一下处理方法有哪些：

  1. 惰性加载(懒加载)
  2. DOM操作合并处理
  3. 虚拟列表
  4. 分批数据加载
  5. 简化DOM结构
  6. 优化资源
  7. Web Workers
  8. 用户操作优化
  9. 差异更新
  10. 服务端渲染
  11. 动画优化
  12. 逐帧渲染
  13. 异步更新
  14. WebAssembly
  15. GPU加速
4.8k 字 4 分钟

# 路由参数解耦

通常在组件中使用路由参数，大多数人会做以下事情。

export default {
    methods: {
        getParamsId() {
            return this.$route.params.id
        }
    }
}

在组件中使用 $route 会导致与其相应路由的高度耦合，通过将其限制为某些 URL 来限制组件的灵活性。正确的做法是通过 props 来解耦。

const router = new VueRouter({
    routes: [{
        path:  /user/:id ,
        component: User,
        props: true
    }]
})

将路由的 props 属性设置为 true 后，组件内部可以通过 props 接收 params 参数。

export default {
    props: [ id ],
    methods: {
        getParamsId() {
            return this.id
        }
    }
}

您还可以通过功能模式返回道具。

const router = new VueRouter({
    routes: [{
        path:  /user/:id ,
        component: User,
        props: (route) => ({
            id: route.query.id
        })
    }]
})

12k 字 11 分钟

转自

https://juejin.cn/post/7163932925955112996

# 前言

最近在公司开发了一个可视化大屏，开发定制化大屏，大家可能都一个感受，开发大屏主要是两方面的工作：

  • 大屏之关键-前期的自适应适配
  • 根据 ui 稿绘制图表，调细节

而解决了适配问题后，后面就只是一个慢工出细活，耗时间的事情了。

# 适配方案分析

看了网上的各种方案，目前大家采用的大概有 3 种👇

方案实现方式优点缺点
vm vh1. 按照设计稿的尺寸，将 px 按比例计算转为 vw 和 vh1. 可以动态计算图表的宽高，字体等，灵活性较高 2. 当屏幕比例跟 ui 稿不一致时，不会出现两边留白情况1. 每个图表都需要单独做字体、间距、位移的适配，比较麻烦
scale1. 通过 scale 属性，根据屏幕大小，对图表进行整体的等比缩放1. 代码量少，适配简单 2. 一次处理后不需要在各个图表中再去单独适配1. 因为是根据 ui 稿等比缩放，当大屏跟 ui 稿的比例不一样时，会出现周边留白情况 2. 当缩放比例过大时候，字体会有一点点模糊，就一点点 3. 当缩放比例过大时候，事件热区会偏移。
rem + vm vh1. 获得 rem 的基准值 2. 动态的计算 html根元素的font-size 3. 图表中通过 vm vh 动态计算字体、间距、位移等1. 布局的自适应代码量少，适配简单1. 因为是根据 ui 稿等比缩放，当大屏跟 ui 稿的比例不一样时，会出现周边留白情况 2. 图表需要单个做字体、间距、位移的适配

11k 字 10 分钟

# 文章目录

  • 序言
  • 服务端渲染的优点和缺点
  • 客户端渲染的优点和缺点
  • 服务端渲染是产生并发吗
  • 服务端渲染用户每次请求都需要重新渲染吗
  • 为什么服务端渲染只做首屏？
  • 什么情况下，可能需要进行更多的服务端渲染或客户端渲染
  • 前端渲染和前后端分离是不是一回事呢？
  • 服务端渲染模板，前端如何热更新？
  • 前后端分离，前端渲染每个页面都要去请求后端用户现在的登录状态是否有效吗？
  • 客户端渲染和服务端渲染，单页面应用和多页面应用，前端路由和服务端路由有什么区别联系？

8.3k 字 8 分钟

# reflect 的 13 个方法

方法参数说明
Reflect.get(target, name, receiver)target: 目标对象。
name: 是我们要读取的属性。
receiver (可选)： 可以理解为上下文 this 对象。
Reflect.set(target,name,value,receiver)target: 我们需要操作的对象。
name: 我们需要设置该对象的属性名。
value: 我们要设置的属性值。
receiver： 可以理解为上下文 this 对象。如果我们在设置值的时候遇到 setter 函数，该参数就指向与 setter 中上下文 this 对象。
Reflect.apply(target,thisArg,args)target: 我们的目标函数。
thisArg: target 函数调用的时候绑定的 this 对象。
args: 就是函数参数列表。
Reflect.construct(target,args[, newTarget])target: 被运行的目标函数。
args: 调用构造函数传递的参数数组或伪数组。
newTarget: 也是构造函数，表示使用 Reflect.construct 后生成的实列对象是谁的实列。如果没有该参数，默认生成的实列对象就和 target 构造函数是一样的。
Reflect.defineProperty(target,name,desc)该方法 Object.defineProperty 方法类似的，不过唯一的区别是 Reflect.defineProperty 返回值是一个 Boolean 的值。
Reflect.deleteProperty(target,name)target: 表示要操作的对象。
name: 表示要删除该对象上的属性。
Reflect.has(target,name)target: 就是改对象。
name 的含义是：该对象上的属性。
Reflect.ownKeys(target)target：它是一个对象。
Reflect.preventExtensions(target)target：必须是一个对象，否则的话会抛出一个异常。
Reflect.isExtensible(target)target：表示目标对象。
Reflect.getOwnPropertyDescriptor(target, name)target: 表示的是目标对象。
name： 表示目标对象的属性 该方法的具体含义是：如果目标对象中的属性描述符存在的话，就返回这个属性描述符，如果不存在，就返回 undefined。
Reflect.getPrototypeOf(target)该方法是返回一个对象的原型的，也就是说内部的 [[Prototype]] 属性的值。
Reflect.setPrototypeOf(target, prototype)方法的作用是设置一个对象的原型。如果设置成功的话，这个对象就返回一个 true，如果设置失败的话，这个对象就返回一个 false。

3.8k 字 3 分钟

# 前言

今天在写代码时，用了箭头函数，出现了如下问题：

function Drawing(shape) {
  this.shape = shape
}
Drawing.prototype.drawShape = (radius, x, y) => { //bug 问题所在
  return this.shape.draw(radius, x, y) //this 指向了全局
}

报错信息：

Error in created hook: "TypeError: Cannot read properties of undefined (reading 'shape')"

然后，改成 function 后，错误消除。

function Drawing(shape) {
  this.shape = shape
}
Drawing.prototype.drawShape = function(radius, x, y) {
  return this.shape.draw(radius, x, y)
}

原因是 this 指向问题，这是因为不了解箭头函数属性导致的。

  • 箭头函数没有单独的 this 、 arguments 、 super ，并且不能作为构造函数。

9.4k 字 9 分钟

# 前言 就目前而言，前端框架基本上被 Vue 和 React 瓜分得差不多了。如果你去面试一个前端岗位，那么或多或少都会问你一些关于 Vue 和 React 框架得知识，无论是原理还是使用，我们都有必要去了解一番。 数据响应式可以说是这些框架的一大特色与核心，这里我们就拿 Vue 来说。在 Vue2.x 时代，实现数据响应式主要是使用 Object.defineProperty() 这个 API 来实现的，而到了 Vue3.x 时代，数据响应式主要是使用 Proxy() 来实现的。 如果你还不了解 Proxy，那么你很有必要跟着本篇文章学习一下！ # 1. 基本概念 想要学习一个新的...