苍青浪1的博客_Javascript

使用fabric.js 快速开发一个图片编辑器

最近自己开发了一个图片编辑器，把源码也放在了GitHub上，顺便也总

github

单选

初始化

转载 2022-12-31 21:47:39 277 阅读

从浏览器多进程到JS单线程，JS运行机制最全面的一次梳理

前言见解有限，如有描述不当之处，请帮忙及时指出，如有错误，会及时修正。超长文+多图预警，需要花费不少时间。如果看完本文后，还对进程线程傻傻分不清，不清楚浏览器多进程、浏览器内核多线程、JS单线程、JS运行机制的区别。那么请回复我，一定是我写的还不够清晰，我来改。。。正文开始最近发现有不少介

图层

事件队列

单线程

原创 2022-12-09 11:33:09 127 阅读

从输入URL到页面加载的过程？如何由一道题完善自己的前端知识体系！

前言见解有限，如有描述不当之处，请帮忙指出，如有错误，会及时修正。为什么要梳理这篇文章？最近恰好被问到这方面的问题，尝试整理后发现，这道题的覆盖面可以非常广，很适合作为一道承载知识体系的题目。关于这道题目的吐槽暂且不提（这是一道被提到无数次的题，得到不少人的赞同，也被很多人反感），本文的目的

缓存

服务端

服务器

转载 2022-12-09 10:32:20 37 阅读

H5 直播的疯狂点赞动画是如何实现的？(附完整源码)

直播有一个很重要的互动：点赞。为了烘托直播间的氛围，直播相对于普通视频或者文本内容，点赞通常有两个特殊

Time

Math

4s

转载 2022-12-09 10:26:16 185 阅读

使用require.context实现前端自动化

require.context是什么一个webpack的api,通过执行require.context函数获取一个特定的上下文,主要用来实现自动化导入模块,在前端工程中,如果遇到从一个文件夹引入很多模块的情况,可以使用这个api,它会遍历文件夹中的指定文件,然后自动导入,使得不需要每次显式的调用i

数组

相对路径

文件名

转载 2022-12-09 10:25:11 154 阅读

websocket(二)——基于node js 的同步聊天应用

https://github.com/sitegui/nodejs-websocket1.用node搭建本地服务npm install nodejs-websocket var ws = require("nodejs-websocket"); var server = ws.createServer(function(conn){ console.log('Ne

客户端

服务端

字符串

原创 2022-12-09 10:21:51 70 阅读

window.external的使用

由于工作中有很多时候需要用到window.external，以前一直稀里糊涂的，今天又被人问到，于是突击学习了一下，记下备忘。我们在js中可以通过window.external.myfunc()来调用浏览器提供的外部方法myfunc。可以让网页内的js脚本中能调用C++代码。IE的已默认实现了一些

收藏夹

.net

ide

原创 2022-12-09 10:19:16 209 阅读

一个http请求发送到后端的详细过程

我们来看当我们在浏览器输入http://www.mycompany.com:8080/mydir/index.html,幕后所发生的一切。首先http是一个应用层的协议，在这个层的协议，只是一种通讯规范，也就是因为双方要进行通讯，大家要事先约定一个规范。1.连接当我们输入这样一个请求时，首先要建立一个socket连接，因为socket是通过ip和端口建立的，所以之前还有一个DNS解析过程

数据

HTTP

端口号

原创 2022-12-09 10:18:12 287 阅读

实现一个大文件上传和断点续传

前言这段时间面试官都挺忙的，频频出现在博客文章标题，虽然我不是特别想蹭热度，但是实在想不到好的标题了-。-，蹭蹭就蹭蹭 :) 事实上我在面试的时候确实被问到了这个问题，而且是一道在线 coding 的编程题，当时虽然思路正确，可惜最终也并不算完全答对结束后花了一段时间整理了下思路，那么究竟该如何

上传

Data

服务端

转载 2022-12-09 09:56:02 344 阅读

「前端进阶」高性能渲染十万条数据(虚拟列表)

前言在工作中，有时会遇到需要一些不能使用分页方式来加载列表数据的业务情况，对于此，我们称这种列表叫做长列表。比如，在一些外汇交易系统中，前端会实时的展示用户的持仓情况(收益、亏损、手数等)，此时对于用户的持仓列表一般是不能分页的。在高性能渲染十万条数据(时间分片)一文中，提到了可以使用时间分片的

数据

Data

Math

转载 2022-12-09 09:54:42 261 阅读

JS中各种宽度距离小结

js中获取各种宽度和距离，常常让我们混淆，各种浏览器的不兼容让我们很头疼，现在就在说说js中有哪些宽度和距离。 1、名词解释 screen：屏幕。这一类取到的是关于屏幕的宽度和距离，与浏览器无关，应该是获取window对象的属性。 client：使用区、客户区。指的是客户区，当然是指浏览器区域。 o

chrome

firefox

内边距

原创 2022-12-09 09:52:18 125 阅读

深入理解JavaScript函数参数

前面的话 javascript函数的参数与大多数其他语言的函数的参数有所不同。函数不介意传递进来多少个参数，也不在乎传进来的参数是什么数据类型，甚至可以不传参数。 arguments javascript中的函数定义并未指定函数形参的类型，函数调用也未对传入的实参值做任何类型检查。实际上，javas

javascript

严格模式

数组

原创 2022-12-09 09:50:32 67 阅读

Websocket(一)——原理及基本属性和方法

初次接触 WebSocket 的人，都会问同样的问题：我们已经有了 HTTP 协议，为什么还需要另一个协议？它能带来什么好处？答案很

客户端

服务端

服务器

原创 2022-12-09 09:39:12 142 阅读

MutationObserver

MutationObserver接口提供了监视对DOM树所做更改的能力。它被设计为旧的Mutation Events功能的替代品，该功能是DOM3 Events规范的一部分。构造函数MutationObserver()创建并返回一个新的 MutationObserver 它会在指定的DOM发生变化时被调用。方法disconnect()阻止&n

回调函数

构造函数

转载 2022-12-01 11:01:21 66 阅读

详解浏览器分段请求基础——Range，助你了解断点续传基础

今天这篇文章和大家聊一聊如何做到只请求资源的一部分，这里需要用到几个http头——range、if-range、content-range、accept-range。Range头信息介绍Range主要用来设置获取数据的范围，格式如下：Range: <unit>=<range-start>-<range-end>Range: <unit>=<ra

数据

代码实现

客户端

原创 2022-12-01 10:59:31 741 阅读

HTML5：给汉字加拼音？收起展开组件？

来看看 HTML 的历史和规范常识。HTML 规范是 W3C 与 WHATWG 合作共同产出的，HTML5 因此也不例外。其中：W3C 指 World Wide Web ConsortiumWHATWG 指 Web Hypertext Application Technology Working Group说好听了是“合作产出”，但其实更像是“HTML5 有两套规范”。但话说天下大势合久必分，分久

html

公众号

html5

转载 2022-12-01 10:58:59 107 阅读

url的三个js编码函数escape(),encodeURI(),encodeURIComponent()简介【转】

引子浏览器URl地址，

ico

javascript

url编码

转载 2022-11-29 10:07:57 191 阅读

JavaScript常见原生DOM操作API总结

用惯了各种各样的前端框架，是时候对原生的操作DOM的api总结和回顾一下了。 1.几种对象 1.1. Node Node是一个接口，中文叫节点，很多类型的DOM元素都是继承于它，都共享着相同的基本属性和方法。常见的Node有element，text，attribute，comment，documen

html

子节点

元素节点

转载 2022-11-29 10:04:57 61 阅读

vue2.0之axios使用详解

axios 基于 Promise 的 HTTP 请求客户端，可同时在浏览器和 node.js 中使用功能特性在浏览器中发送 XMLHttpRequests 请求在 node.js 中发送 http请求支持 Promise API 拦截请求和响应转换请求和响应数据自动转换 JSON 数据

ios

ide

拦截器

原创 2022-11-29 10:03:03 355 阅读

clipboard.js 介绍

这是著名开源项目 clipboard.js 的 README.md，我把它翻译成中文。发出来，方便自己和他人阅读。项目地址：https://github.com/zenorocha/clipboard.js现代化的“复制到剪切板”插件。不包含 Flash。gzip 压缩后仅 3kb。为什么使用它复制文字到剪切板不应该很难去实现。它不需要配置几十个步骤或者加载几百 KB 的

github

选择器

html

原创 2022-11-29 09:54:32 137 阅读

一步步从零开始用 webpack 搭建一个大型项目

开篇很多人都或多或少使用过 webpack，但是很少有人能够系统的学习 webpack 配置，遇到错误的时候就会一脸懵，不知道从哪查起？性能优化时也不知道能做什么，网上的优化教程是不是符合自己的项目？等一系列问题！本文从最基础配置一步步到一个完善的大型项目的过程。让你对 webpack 再也不会畏

css

json

bundle

转载 2022-11-29 09:36:38 99 阅读

颜值即正义！这几个库颠覆你对数据交互的想象

前言作为一个对UI和动画敏感的切图仔，在日常开发之余，也会关注一些贼好看的图表库和插件。接下来，我将给大家介绍几款web/python/vue/react里漂亮得不行的开源库/实现。 1. 手绘风图表库：roughViz.js 基于D3(v5), roughjs, 和handy。 1.1 衡量方

3d

github

扫一扫

转载 2022-11-29 09:33:19 95 阅读

富文本原理

前置知识好了，交代完了背景，让我们先补充一些基础知识吧，不懂的请务必不要跳过！ contenteditable 属性假如我们给一个标签加上 contenteditable="true" 的属性，就像这样： <div contenteditable="true"></div> 那么在这个 div

插入图片

富文本

可编辑

转载 2022-11-29 09:26:59 85 阅读

js模块化编程之彻底弄懂CommonJS和AMD/CMD！

先回答我：为什么模块很重要？答：因为有了模块，我们就可以更方便地

加载

jquery

回调函数

原创 2022-11-22 09:01:11 148 阅读

原生 JavaScript 实现 AJAX、JSONP

相信大多数前端开发者在需要与后端进行数据交互时，为了方便快捷，都

json

ajax

回调函数

原创 2022-11-22 09:00:21 406 阅读

Web全景图的原理及实现

全景图的基本原理全景图是一种广角图。通过全景播放器可以让观

3d

css

2d

原创 2022-11-22 08:57:58 300 阅读

CommonJS规范

目录概述 module对象 module.exports属性 exports变量 AMD规范与Comm

加载

缓存

json

原创 2022-11-22 08:57:37 70 阅读

前端如何让服务器主动向浏览器推送数据

前言前面我们已经聊了ajax，它的特点是浏览器必须先发起请求，服务器才能给出对应的响应，想一想能不能让服务器主动向浏览器推送数据呢？那么这篇文章我们来聊一聊服务器推送功能。轮询假设你现在需要去做一个球赛直播页面，一个主播在后台文字直播比赛，那么这就要求解说数据尽可能的实时到达浏览器，那么我们如

服务器

推送

数据

转载 2022-11-16 18:40:44 193 阅读

前端最全图片优化技巧

前言：对于大多数前端工程师来说，图片就是UI设计师(或者自己)切好的图，你要做的只是把图片丢进项目中，然后用以链接的

加载

chrome

数据

转载 2022-10-13 15:44:15 772 阅读

实现Web端自定义截屏

前言当客户在使用我们的产品过程中，遇到问题需要向我们反馈时，如果用纯文字的形式描述，我们很难懂客户的意思，要是能配上问题截图，这样我们

html

php

拖拽

转载 2022-10-13 15:43:31 161 阅读

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯

51CTO博客

苍青浪的博客

使用fabric.js 快速开发一个图片编辑器

从浏览器多进程到JS单线程，JS运行机制最全面的一次梳理

从输入URL到页面加载的过程？如何由一道题完善自己的前端知识体系！

H5 直播的疯狂点赞动画是如何实现的？(附完整源码)

使用require.context实现前端自动化

websocket(二)——基于node js 的同步聊天应用

window.external的使用

一个http请求发送到后端的详细过程

实现一个大文件上传和断点续传

「前端进阶」高性能渲染十万条数据(虚拟列表)

JS中各种宽度距离小结

深入理解JavaScript函数参数

Websocket(一)——原理及基本属性和方法

MutationObserver

详解浏览器分段请求基础——Range，助你了解断点续传基础

HTML5：给汉字加拼音？收起展开组件？

url的三个js编码函数escape(),encodeURI(),encodeURIComponent()简介【转】

JavaScript常见原生DOM操作API总结

vue2.0之axios使用详解

clipboard.js 介绍

一步步从零开始用 webpack 搭建一个大型项目

颜值即正义！这几个库颠覆你对数据交互的想象

富文本原理

js模块化编程之彻底弄懂CommonJS和AMD/CMD！

原生 JavaScript 实现 AJAX、JSONP

Web全景图的原理及实现

CommonJS规范

前端如何让服务器主动向浏览器推送数据

前端最全图片优化技巧

实现Web端自定义截屏