针对前端可视化研发相关资料

定义广义:一切现实物体的虚拟化表达,都可以算是广义的数字孪生行业:数字孪生体应该是与现实物体一对一映射、实时数据连接、有数据模型和对应的数据的可以有一个初步的结论:数字孪生不是简单的静态大屏可视化,它必须是实时数据连接的炫酷的大屏无论是 2D 的还是 3D 的,甚至只是普通的表格页面,只要满足定义,我们都可以将其称为数字孪生项目,只不过复杂度不同和炫酷程度不同。但绝大多数时候,我们说到数字孪生,习

- 阅读全文 -

indexedDB 诞生十余年为何一直不温不火

前言在项目开发过程中,前端需要存储大量的数据。cookie, localstorage 都有存储长度限制。表格一览特性cookielocalStoragesessionStorageindexedDB数据生命周期一般由服务器生成,可以设置过期时间;前端采用和 js-cookie 等组件也可以生成除非被清理,否则一直存在;浏览器关闭还会保存在本地,但是不支持跨浏览器页面关闭就清理刷新依然存在,不支持

- 阅读全文 -

不是吧?async/await异常捕获你还在用try-catch~

不知道大家项目里面是怎么处理 async/await 的异常,我斗胆在我们项目里翻了一下,发现大量使用 try-catch 来处理 async/await 异常。首先说明一下, try-catch 处理并没有什么问题,我只是觉得这么写代码会有点乱,感觉代码逻辑像是断层了一样,不易理解;其次是代码冗余问题,单个 try-catch 就占了好几行代码,如果每个请求的地方都添加 try-catch,就会

- 阅读全文 -

如何设计统一登录业务

前言几乎所有的项目都需要登录,无论是权限限制、个性化定制、信息安全等需求,都要通过登录系统来获取用户信息,以便提供后续服务。而一个公司可能会有多个不同的项目,每个项目后端都是共用同一套用户系统的话,就势必会有通用登录的需求出现。通用登录的方式有很多种,下面我们仅探讨前端的实现方案。项目子域名不同,共用一个父域通过设置 cookie 的 domian 属性,可以使得 cookie 携带的内容在父子域

- 阅读全文 -

前端JavaScript css遵守各司其职原则

第一个故事:切换到夜间模式在 WEB 开发中,HTML 负责网页的结构,CSS 负责网页上各个元素的展示样式,JS 则负责网页和用户的交互。想要成为一名优秀的前端工程师,首先要做的就是遵守这三者各司其职的原则,让我们的代码易于维护和扩展。但是,有时候我们常常一不小心就破坏了这个原则。又或者,我们为了实现业务需求,根本不管这个规则。这都会导致我们的代码结构混乱,维护困难。那么下面,我就通过一个例子,

- 阅读全文 -

js web简单的路由管理器

灵感来自此博客主要模拟了Router的实现原理客供大家参考index.html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content

- 阅读全文 -

这些新特性你知道?ECMAScript 2020的新特性

在引入 ECMAScript 2015(又称 ES6)之前,JavaScript 发展的非常缓慢。但自 2015 年起,每年都有新特性添加进来。需要注意的是,不是所有特性都被现代浏览器支持,但是由于 JavaScript 编译器 Babel 的存在,我们已经可以使用新特性了。本文将介绍 ECMAScript 2020(ES11)的一些最新特性。(不要被吓到,真的是ES11说ES6啥的都low了。今

- 阅读全文 -

Vue3.x和Vue2.x的不同之处

Vue3.x和Vue2.x的不同点1、main.js引入方式不一样// vue3 //code by www.joynop.com import { createApp } from 'vue' import App from './App.vue' createApp(App).mount('#app') // 没有全局的Vue// vue2.X //code by www.joynop.co

- 阅读全文 -

学会threejs鼠标交互Raycaster拾取物体

对场景内的模型增加事件监听,实现鼠标交互,须要用到Raycaster(光线投射)类。拾取物体的原理webGL中获取鼠标交互物体的原理:通过三维空间中相机视点与鼠标在屏幕上的地位的连线,造成一条直线,捕捉与此直线相交的空间中的物体,即为交互对象物体。在three中,Raycaster为咱们封装了大量的逻辑代码,包含生成相机到鼠标的射线、射线与空间物体的碰撞检测、射线相交物体深度计算、相交物体列表等等

- 阅读全文 -

js 位掩码

定义掩码const mask0 = parseInt("00000001", 2); const mask1 = parseInt("00000010", 2); const mask2 = parseInt("00000100", 2); const mask3 = parseInt("00001000", 2);

- 阅读全文 -

js中~~和 | 的妙用

双~的用法~~它代表双非按位取反运算符,如果你想使用比Math.floor()更快的方法,那就是它了。需要注意,对于正数,它向下取整;对于负数,向上取整;非数字取值为0,它具体的表现形式为:~~null; // => 0 ~~undefined; // => 0 ~~Infinity; // => 0 --NaN; // => 0 ~~0;

- 阅读全文 -