px rem em vh vw之间的区别到底是啥?

绝对长度pxpx是像素值,是一个固定的长度,比如我们的米,厘米一样。相对长度为什么我们需要相对长度rem em等?🤔固定长度已经不能满足我们现在的需求了。🌰举例:比如我们在缩小我们屏幕的时候,我们不仅仅是需要缩小我们的盒子的宽高,我们还想要让我们字体大小也随之缩小,这样用户体验会更好一点。remrem 与 px 的计算关系rem的值是px的倍数默认情况下font-size = 16px,那么1re

- 阅读全文 -

手把手教你使用Electron9+vue3开发跨平台桌面应用

Electron 是一个基于 chromium 和 nodejs,可以使用 HTML、CSS、和 JavaScript 构建跨平台应用的技术框架,兼容 Mac、Windows 和 Linux。虽然 B/S 是膜前开发 ad 主流,但是 C/S 仍然有很大的市场需求。受限于浏览器的沙盒限制,网页应用在无法满足某些场景下的使用需求,而桌面应用可以读写本地文件、调用更多系统资源,加上 web 开发成本低

- 阅读全文 -

如何设计统一登录业务

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

- 阅读全文 -

TsLint配置介绍

{ "defaultSeverity": "warning", "extends": [ "tslint:recommended" ], "linterOptions": { "exclude": [ "node_module

- 阅读全文 -

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

- 阅读全文 -

前端如何解决pc端屏幕显示设置缩放比例对页面布局的影响?

现在很多笔记本电脑都推荐将缩放设置为125%,等比例放大显示。(垃圾Windows这对我们前端的页面的布局会产生一些影响首先,单独的响应式布局hold不住这个问题,因为出问题的是device-pixel-ratio。问题现象是高分屏下整好的东西,在普分屏下会放大;而普分屏下整好的东西,在高分屏上会缩小。重现这个问题不需要高分屏,直接用Ctrl++或者Ctrl+-出来的效果是跟高分屏一致的(所以搞定

- 阅读全文 -

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

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

- 阅读全文 -

JavaScript脏检查

什么是脏检查?脏检查的全名是 脏数据检查。是AngularJS命名的。脏数据也就是产生了变化的数据。脏检查因一个原因而被称为脏。它定时检查而不是直接监听属性变化。我们把这个检查称为摘要周期(digest)。angularJS监测对象变化不是像vue.js那样通过Object.defineproperty这种接口,而是在某些情况下制定策略,通过复制保存一份数据,进行快照对比,来监测变化。脏检查这个东

- 阅读全文 -