前端
文章平均质量分 63
huangpb0624
这个作者很懒,什么都没留下…
展开
-
JavaScript沙箱
沙箱是一个虚拟系统程序,沙箱提供的环境相对于每一个运行的程序都是独立的,而且不会对现有的系统产生影响,即沙箱提供一个限制该应用程序对系统资源的访问权限。在 iframe 中运行的脚本程序访问到的全局对象均是当前 iframe 执行上下文提供的,不会影响其父页面的主体功能,因此使用 iframe 来实现一个沙箱是目前最方便、简单、安全的方法。with 会在作用域链的顶端添加一个新的作用域,该作用域的变量对象会加入 with 传入的对象,因此相较于外部环境其内部的代码在查找变量时会优先在该对象上进行查找。原创 2024-09-18 21:48:00 · 846 阅读 · 0 评论 -
SSE(Server-Sent Events)技术及其简单演示
SSE(Server-Sent Events)是一种用于实现服务器主动向客户端推送数据的技术,也被称为“事件流”(Event Stream)。它基于 HTTP 协议,利用了其长连接特性,在客户端与服务器之间建立一条持久化连接,并通过这条连接实现服务器向客户端的实时数据推送。转载 2024-05-22 21:31:20 · 215 阅读 · 0 评论 -
CommonJS的本质
【代码】CommonJS的本质。原创 2024-05-05 20:53:43 · 179 阅读 · 0 评论 -
中文输入法导致的高频事件
在中文拼写开始和结束的时候分别会触发 compositionstart 和 compositionend 事件,在 compositionstart 和 compositionend 之间,input 事件回调直接退出。当给一个输入框绑定了 input 事件,输入法切换到中文正在拼写的过程中也会触发 input 事件。Element UI 的 el-input 已经对中文输入进行了处理,所以我们不用额外去处理。原创 2024-04-28 21:56:34 · 349 阅读 · 0 评论 -
鼠标事件中的距离
鼠标点击时到视口的距离。与页面有无滚动条无关。鼠标点击时到整个文档边缘的距离。原创 2024-03-17 17:40:01 · 399 阅读 · 0 评论 -
前端文件下载的实现方式
上面的这么多方案,不管是通过浏览器的内置行为进行下载,还是通过ajax进行下载,文件下载的最终还是浏览器的行为。转载 2023-09-10 11:46:00 · 1285 阅读 · 0 评论 -
前端数据模拟的几种方法
现在开发项目社会的主流是前后端分离,这样前端和后端就可以根据自己的进度开发,可以不同步。后端同学接口还没做好,前端同学怎么测试呢,这样就要用到模拟数据了。 现在我就来说说我认为还不错的三种模拟数据方法。方法一:请求本地的 json 文件项目里新建个文件夹用来存放测试用的 json 文件。reqwest({ url: 'mock/user.json'原创 2018-02-07 09:43:32 · 11623 阅读 · 4 评论 -
js数据结构
一、认识数据结构什么是数据结构?下面是维基百科的解释数据结构是计算机存储、组织数据的方式数据结构意味着接口或封装:一个数据结构可被视为两个函数之间的接口,或者是由数据类型联合组成的存储内容的访问方法封装我们每天的编码中都会用到数据结构,因为数组是最简单的内存数据结构,下面是常见的数据结构:数组(Array) 栈(Stack) 堆(Heap) 队列(Queue) 链表(L...原创 2019-12-21 22:48:19 · 1618 阅读 · 0 评论 -
nprogress - 页面顶部细长的进度条插件
这是一个类似youtube、Medium等网站上的小进度条插件。页面切换的时候顶部会出现一个细长的表示页面加载进度的进度条。一、安装npm install --save nprogress二、使用比如用在 SPA Vue 项目页面切换的时候:import NProgress from 'nprogress';import 'nprogress/nprogress.css';import router from './router';// 路由前置守卫:页面跳转前执行rout原创 2021-06-20 22:14:24 · 157 阅读 · 1 评论 -
Serverless
一、介绍是指依赖于第三方应用程序或服务来管理服务器端逻辑的应用程序。 此类应用程序是基于云的数据库(如腾讯云,Google Firebase)或身份验证服务。无服务器也意味着开发为事件触发的代码,并且在无状态计算容器中执行。 这种架构通常称为功能即服务(FaaS)。FaaS(Function as a service 函数作为一种服务) 本质上是一个小程序或函数,它执行由事件触发的小任务,而不像单个应用程序那样做很多事情。因此,在FaaS架构中,我们将应用程序分解为小型,自包含的程序或功能,而不转载 2020-09-29 22:19:36 · 194 阅读 · 0 评论 -
浏览器的多进程架构
以 Chrome 为例,它由多个进程组成,每个进程都有自己核心的职责,它们相互配合完成浏览器的整体功能。Chrome 采用多进程架构,其顶层存在一个 Browser process 用以协调浏览器的其它进程。优点由于默认 新开 一个 tab 页面 新建 一个进程,所以单个 tab 页面崩溃不会影响到整个浏览器。同样,第三方插件崩溃也不会影响到整个浏览器。多进程可以充分利用现...转载 2020-01-23 20:52:26 · 786 阅读 · 0 评论 -
授权认证登录之 Cookie、Session、Token、JWT 详解
目录一、先了解几个基础概念二、什么是 Cookie1. cookie 重要的属性2. 服务器端设置cookie示例(Node)3. 客户端对Cookie的存取4. 每个域名下cookie个数限制5.封装对Cookie的操作三、什么是 Session四、Cookie 和 Session 的区别五、什么是 Token(令牌)Acesss Token...原创 2020-01-14 22:25:54 · 16368 阅读 · 5 评论 -
前端如何实现即时通讯?
短轮询短轮询的原理很简单,每隔一段时间客户端就发出一个请求,去获取服务器最新的数据,一定程度上模拟实现了即时通讯。优点:兼容性强,实现非常简单 缺点:延迟性高,非常消耗请求资源,影响性能Websocket使用指南请看WebSocket 教程Websocket是一个全新的、独立的协议,基于TCP协议,与http协议兼容、却不会融入http协议,仅仅作为html5的一部分,其作...转载 2019-11-24 16:43:04 · 2626 阅读 · 0 评论 -
为什么前端监控要用GIF打点
1背景我们知道,目前主流的前端监控(百度统计/友盟/谷歌统计)都在用GIF进行打点。但是,为什么这些系统都会使用GIF,难道是因为没有其他的解决方案吗?这得从前端监控的原理说起。2前端监控的原理所谓的前端监控,其实是在满足一定条件后,由Web页面将用户信息(UA/鼠标点击位置/页面报错/停留时长/etc)上报给服务器的过程。一般是将上报数据用url_encode(百度统计/CNZZ...转载 2019-11-10 17:04:08 · 2022 阅读 · 1 评论 -
前端路由原理解析和实现
在单页应用如此流行的今天,曾经令人惊叹的前端路由已经成为各大框架的基础标配,每个框架都提供了强大的路由功能,导致路由实现变的复杂。想要搞懂路由内部实现还是有些困难的,但是如果只想了解路由实现基本原理还是比较简单的。本文针对前端路由主流的实现方式 hash 和 history,提供了原生JS/React/Vue 共计六个版本供参考,每个版本的实现代码约 25~40 行左右(含空行)。什么是前...转载 2019-05-16 23:16:02 · 813 阅读 · 0 评论 -
MIME 类型
多用途Internet邮件扩展(MIME)类型: 是一种标准化的方式来表示文档的性质和格式。 浏览器通常使用MIME类型(而不是文件扩展名)来确定如何处理文档;因此服务器设置正确以将正确的MIME类型附加到响应对象的头部是非常重要的。语法通用结构type/subtypeMIME 由类型与子类型两个字符串中间用'/'分隔而组成。不允许空格存在。MIME类型对大小写不敏...原创 2019-04-07 14:43:03 · 241 阅读 · 0 评论 -
前端三大主流框架的对比React、Vue、Angular
1. 组件React 和 Vue 都擅长处理组件:小型的无状态的函数接收输入和返回元素作为输出。Angular 没有组件化的概念。2. Typescript,ES6 与 ES5React 专注于使用 ES6。Vue 使用 ES5 或 ES6。Angular 依赖于 TypeScript。3. 模板 —— JSX 还是 HTMLReact 使用 JSX 模板,把 'HTML' 放...原创 2019-08-21 23:33:15 · 945 阅读 · 0 评论 -
PC端浏览器兼容性解决方案
代码兼容:IE7及以上,360浏览器,搜狗浏览器,谷歌,火狐,欧朋等等。一.需要注意的地方:1.写好标准头:2.首先引入初始化css,保证消除不同浏览器的细微差别。具体内容:*{margin:0;padding:0;}body{font-size:12px;line-height:25px;font-family:Arial,Helvet原创 2017-10-13 23:23:27 · 2028 阅读 · 0 评论 -
键盘各个键的Unicode编码,也就是event.keyCode打出的值
A A键 65 Add 加号键 107 Alt ALT组合键 262144 Apps 应用程序键(Microsoft Natural Keyboard,人体工程学键盘) 93 Attn ATTN 键 246 B B键 66 Back BACKSPACE键 8转载 2016-10-31 16:20:15 · 10497 阅读 · 1 评论 -
Data URL和图片,及Data URL的利弊
Data URL给了我们一种很巧妙的将图片“嵌入”到HTML中的方法。跟传统的用img标记将服务器上的图片引用到页面中的方式不一样,在Data URL协议中,图片被转换成base64编码的字符串形式,并存储在URL中,冠以mime-type。本文中,我将介绍如何巧妙的使用Data URL优化网站加载速度和执行效率。 观看演示 1. Data URL基本原理图片在网页中的使用方法...转载 2017-08-29 16:54:33 · 1519 阅读 · 0 评论 -
前端缓存详解
前言缓存机制无处不在,有客户端缓存,服务端缓存,代理服务器缓存等。一、按缓存位置分类按缓存位置分类,可以分为:Service Worker,Memory Cache,Disk Cache。在 Chrome 浏览器开发者工具的Network的Size栏会出现的四种情况:from ServiceWorker from memory cache from disk cache ...原创 2018-09-26 22:17:53 · 6974 阅读 · 1 评论 -
服务器渲染和浏览器渲染的区别
何为渲染?页面上的数据要发生更新,就是渲染。这个工作放在服务器进行就是服务器渲染,放在浏览器进行就是浏览器渲染。服务器端渲染,指的是后台语言通过一些模板引擎生成 html。浏览器端渲染,指的是用 js 去生成 html,前端做路由。浏览器端渲染路线:请求一个 html。 服务端返回一个 html。 浏览器下载 html 里面的 js/css 文件。 等待 js 文件下...原创 2018-10-31 23:14:04 · 4610 阅读 · 0 评论 -
技术选型需要注意的事
1 引言作者给出了从 12 个角度全面分析 JS 库的可用性,分别是: 特性。 稳定性。 性能。 包生态。 社区。 学习曲线。 文档。 工具。 发展历史。 团队。 兼容性。 趋势。 下面总结一下作者的观点。2 概述 & 精读特性当你调研一个 JS 库,功能...转载 2018-10-27 16:14:42 · 303 阅读 · 0 评论 -
新一代网页生命周期API
背景在 Android,iOS 和较新的 Windows 平台上,操作系统对 App 有启动和运用的权限,这些平台会合理地为应用分配资源。在 Web 平台,很早就有了生命周期的概念(如 load,unload,visibilitychange),但还不是很完善。现代浏览器正在逐步的优化当中。概览网页生命周期和状态注:Chrome 68 已经引入了新的生命周期特性了。状态包括...转载 2018-11-24 23:48:10 · 543 阅读 · 0 评论 -
页面可视化搭建工具技术要点
背景页面可视化搭建工具, 是互联网公司中常见的运营工具, 实现了运营人员快速生成和发布页面, 提升页面上线效率; 且无需开发人员介入, 节省开发人力.页面可视化搭建工具搭建出的页面示例:但从零开始设计和开发出这种工具并不简单. 作者维护的页面可视化搭建框架 pipeline, 提供了页面可视化搭建的核心功能, 免去从零实现页面可视化搭建工具的困难.本文主要包含以下内容: ...转载 2019-05-07 23:00:17 · 1097 阅读 · 0 评论 -
最全45种设计模式
设计模式(Design pattern)代表了最佳的实践,通常被有经验的面向对象的软件开发人员所采用。设计模式是软件开发人员在软件开发过程中面临的一般问题的解决方案。这些解决方案是众多软件开发人员经过相当长的一段时间的试验和错误总结出来的。设计模式的类型最全45 种设计模式有哪些呢?这些模式可以分为四大类:创建型模式(Creational Patterns)- 这些设计模式提供了一种在...转载 2019-07-25 23:14:12 · 486 阅读 · 0 评论 -
浅谈前端SPA(单页面应用)
单页Web应用(single page web application,SPA): SPA 是一种特殊的 Web 应用,是加载单个 HTML 页面并在用户与应用程序交互时动态更新该页面的。它将所有的活动局限于一个 Web 页面中,仅在该 Web 页面初始化时加载相应的 HTML 、 JavaScript 、 CSS 。一旦页面加载完成, SPA 不会因为用户的操作而进行页面的重新加载或跳转,而是利...转载 2019-01-09 22:14:07 · 26780 阅读 · 1 评论 -
JavaScript模块化 --- Commonjs、AMD、CMD、UMD、ES6 modules
模块化主要是用来抽离公共代码,隔离作用域,避免变量冲突等。AMD、CMD、CommonJs 是ES5中提供的模块化编程方案,ES6 Modules 是ES6提供的模块化编程方案。IIFE使用自执行函数来编写模块化。特点:在一个单独的函数作用域中执行代码,避免变量冲突。(function() { return { data: [] };})();AMD(A...原创 2017-06-06 12:14:04 · 676 阅读 · 0 评论