全部文章
共 1299 篇文章
前端中的观察者和发布订阅设计模式的区别和应用
前言 观察者模式（Observer Pattern）和发布订阅模式（Publish Subscribe Pattern）都是常见的行为设计模式，用于实现对象之间的解耦和通信。它们之间的主要区别在于对象之间的关系和通信方式。 观察者模式： 关系 ：观察者模式中存在一个被观察者（Subject）和多个观察者（Observer）之间的一对多关系。当被观察者的状态发生变化时，所有观察者都会收到通知并进行相应的更新。 通信方式 ：被观察者直接通知...
手机chrome浏览器真机调试PC端本地的项目_chrome 测试pc端
1.本次实验环境 操作系统: win10 10.0.19042 PC端： 97.0.4692.99（正式版本） （64 位） ：Android 10; MIX 2S Build/QKQ1.190828.002 chrome浏览器手机端：96.0.4664.104 2.前期准备 1. 将手机的开发者模式打开，不同手机可能打开的方式不同。（百度自查） 2. 用数据线将手机与电脑进行连接。（注意部分数据线只有充电功能，不能传输数据） 3. 手...
探秘移动端网页调用摄像头的两种方式
简介： PC 端网页调用摄像头的场景想必大家并不陌生，打开一个网址，开启摄像头开始笔试/视频聊天/直播等。而在移动端网页调用摄像头的场景你见得多吗？我想答案应该是不多吧（在下见识浅薄）。 前言小叙 PC 端网页调用摄像头 的场景想必大家并不陌生，打开一个网址，开启摄像头开始笔试/视频聊天/直播等。 而在 移动端网页调用摄像头 的场景你见得多吗？我想答案应该是不多吧（在下见识浅薄）。 H5 相较于native app 一直被诟病的就有 调...
javascript基础之拖拽--dataTransfer对象
最近学了的一些关于拖拽的一些案例，原来的认识太过浅薄，所以以多个案例说明一下 目标导航 1，拖放事件 源对象 过程对象 目标对象 2，dataTransfer对象 存储数据 获取存储名字为“name”的数据 清除dataTransfer存储的数据 通过img元素设置拖放图标 属性 3,元素拖拽 =》即从浏览器内拖动 3.1，将目标元素拖放至指定区域 3.2,设置拖动时的图标 3.3，鼠标拖拽实现移动效果 1，拖放事件 如果不使用 元素的...
前端请求如何避免明文传输
要在前端发送请求时做到不明文，有以下几种方法： 1. HTTPS 加密传输： 使用 HTTPS 协议发送请求，所有的数据都会在传输过程中进行加密，从而保护数据不以明文形式传输。这样即使数据被截获，黑客也无法直接获取到数据的内容。 2. 数据加密处理： 在前端对敏感数据进行加密处理，然后再发送请求。可以使用一些加密算法，如 AES、RSA 等，将敏感数据进行加密后再发送到服务器。这样即使数据在传输过程中被截获，也无法直接获取其内容。 3....
图解原型和原型链
什么是原型（prototype）？ 我们知道原生的js中并没有类（Class）这个概念， 因此在js中创建对象主要是通过以下两种方式实现： 其中前者适用于创建单个对象，当需要批量创建对象时，我们往往采取后者，即通过构造函数创建对象。 原型（prototype） 是函数的一个特定属性，该属性可看做一个指针，指向一个对象，该对象包含了构造函数的所有共有属性和函数。 简单来说原型相当于一个共享窗口，凡是放在原型里的属性都能共享给子代使用，但子...
技术选型
1. react flow 1. react flow 240311 2. butterfly 1. butterfly 240311 3. reaflow 1. reaflow 240311 4. react diagrams 1. 1. <img src="../../ resources/ba1308db4a49672ebab2bc1e522a5fe6.png" alt="ba1308db4a49672ebab2bc1e522a5...
CSS 也能实现 if 判断？实现动态高度下的不同样式展现
1. CSS 能否实现，容器再某个高度下是某种表现，一旦超出某个高度，则额外展示另外一些内容 为了简化实际效果，我们看这么一张示意效果图： 可以看到，当容器高度没有超过某一个值时，没有箭头图标。反之，箭头图标出现。 这个效果在很多场景都会出现，可以算是一个高频场景，那么在今天，我们能否不使用 JavaScript，仅仅凭借 CSS 实现类似于这样的功能呢？ 答案当然是可以，XBoxYan 大佬在 介绍了一种非常巧妙的 借助浮动的解法 ，...
CSS 实现自动换行、强制换行、强制不换行的属性
实现效果 1.自动换行： word wrap:break word; word break:normal; 2.强制换行： word break:break all; 按字符截断换行 /\ 支持IE和chrome，FF不支持\ / word wrap:break word; 按英文单词整体截断换行 /\ 以上三个浏览器均支持 \ / \ 注意：单词换行需要父盒子为块级元素 3.强制不换行： white space:nowrap; 换行属...