全部文章
JavaScript
CSS
Vue.js
npm
Node.js
Webpack
Apache
PHP
MySQL
App开发
HTTP
RESTful API
Git
数据结构和算法
正则表达式
Windows
CentOS
macOS
微信支付宝
FFmpeg
UI 设计
PS 手绘
Adobe 全家桶
大杂烩
函数限流，防止多次触发函数 Debounce 和 Throttle 的原理及实现
场景1，有些用户很调皮，快速多次点击一个按钮。2，用户不必特地捣乱，他在一个正常的操作中，都有可能在一个短的时间内触发非常多次事件绑定程序。比如页面绑定的 resize 事件。分析怎么解决？函数节流就是一种办法。函数节流，简单地讲，就是让一个函数无法在很短的时间间隔内连续调用，只有当上一次函数执行后过了你规定的时间间隔，才能进行下一次该函数的调用。函数节流的原理挺简单的，估计大家都想到了，那就是定时器。当我触发一个时间时，先 setTimout 让这个事件延迟一会再执行，如果在这个时间间隔内又触发了事件，那我们就 clear 掉原来的定时器，再 setTimeout 一个新的定时器延迟一会执行
Workerman 实现 WebSocket IM 聊天系统 【前端篇】
后端篇地址：https://javascript.net.cn/article?id=649相关文档：https://restfulapi.cn/d/271前端代码主要功能是，连接服务器，发送心跳，断开服务器后自动连接。/**
* JSSDK 对象
*/
var PigIM = {
config: {}, // 配置
fromId: {}, // 发送者 ID
ws: {}, // Websocket 对象
connection: {},
listen: {},
heartbeatTimer: {},
三点运算符
作用：将一个数组转为用逗号分隔的参数序列。//该运算符主要用于函数调用。function push(array, ...items) {array.push(...items);}function add(x, y) {return x + y;}var numbers = [4, 38];add(...numbers) // 42//扩展运算符取代apply方法的一个实际的例子，应用Math.max方法，简化求出一个数组最大元素的写法。// ES5 的写法Math.max.apply(null, [14, 3, 77])// ES6 的写法Math.max(...[14, 3, 77])//
前端生成验证码
var numArr = []
var canvas = document.querySelector('#canvas');
var ctx = canvas.getContext('2d');
draw();
canvas.onclick = function () {
ctx.clearRect(0, 0, 120, 30);
draw();
}
function draw() {
/*绘制一个矩形颜色随机*/
ctx.fillStyle = randColor(170, 250);
ctx.fillRect(0, 0, 120, 50);
v
JavaScript 连等赋值
最近探究js原理的过程中遇到了这个挺有趣的问题。先贴代码：var a = {n:1}a.x = a = {n:2}alert(a.x) //undefined在弄懂这个之前，我们先普及一个知识点，就是在javascript运算符中，属性运算符的优先级高于赋值运算符的优先级。因此，a.x是先于赋值之前就进行的。就是说，a.x刚开始是undefined的，这是没错的。接下来我们探究一下连等赋值的赋值顺序：1、从左往右a.x赋值为{n:2};然后a赋值为{n:2};a的重新指向重写了a.x,即.x属性不存在，因此a.x输出为undefined。2、从右往左a赋值为{n:2};直接限制了a.x的赋值，
input上选择同一文件change事件不生效
在文件上传的时候我们我们选择监控change事件来获取文件，如果第一次如果选择了A文件，当再次点开选择A 文件时，change事件没有触发，这时可以用如下方式处理.1. vue项目处理方式：this.$refs.uploadExcelId.value=null;复制该代码到项目中，并且把uploadExcelId换成自己input的ref即可。2. 普通js处理方式：event.target.value=”;尽量不要用删除dom元素，再添加这种操作方式，因为还需要在做事件绑定比较麻烦。
当async/await遇上forEach
for和forEach的差别是后者不能正常的跳出循环（return、break等），其它的差别不大，把forEach转成for的写法就知道为什么你的for写法可以顺序执行而forEach不能：for:const report = async () => {
for (let i = 0, len = arr.length; i forEach:const report = async () => {
arr.forEach(async (item) => {
await asyncFn(item);
});
};
上述forEach的写法相当
Axios 文档摘要
axios API可以通过向 axios 传递相关配置来创建请求axios(config)// 发送 POST 请求
axios({
method: 'post',
url: '/user/12345',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
}
});
// 获取远端图片
axios({
method:'get',
url:'http://bit.ly/2mTM3nY',
responseType:'stream'
})
.then(function(response) {
DOM、DOM0、DOM1、DOM2和DOM3的关系
DOM由来
因为Internet Explorer4和Netscape Navigation4分别支持不同的DHTML（动态HTML）,为了统一标准，负责制定web通信标准的W3C(World Wide Web Consortium,万维网联盟)开始制定DOM.
DOM0
Netscape Navigator 4和IE4分别发布于1997年的6月和10月发布的DHTML，他们是未形成标准的试验性质的初级阶段的DOM，称为dom0,并不是标准。
DOM1
DOM1是W3C在1998年制定的标准，DOM1级主要定义了HTML和XML文档的底层结构。在DOM1中，DOM由两个模块组成：
JavaScript 代码保护技术 混淆和加密
『前端代码无秘密』这句话好似一个业界共识一般在前端领域传播。但在日常的开发过程中，我们又会涉及以及需要相当强度的前端核心代码的加密，特别是在于与后端的数据通信上面（包括HTTP、HTTPS请求以及WebSocket的数据交换）。
比如一个场景，在视频相关的产品中，我们通常需要增加相关的安全逻辑防止被直接盗流或是盗播。特别是对于直播来说，我们的直播视频流文件通常会被划分为分片然后通过协商的算法生成对应的URL参数并逐次请求。分片通常以5至10秒一个间隔，如果将分片URL的获取作为接口完全放置于后端，那么不仅会给后端带来极大的压力外还会带来直播播放请求的延迟，因此我们通常会将部分实现放置于前端
原生JS判断页面滚动到底部
//获取滚动条当前的位置
function getScrollTop() {
//在标准w3c下，document.body.scrollTop恒为0，需要用document.documentElement.scrollTop来代替;
var scrollTop = 0;
if (document.documentElement && document.documentElement.scrollTop) {
scrollTop = document.documentElement.scrollTop;
}else if (
base64格式图片转换为FormData对象进行上传
var base64String = /*base64图片串*/;
//这里对base64串进行操作，去掉url头，并转换为byte
var bytes = window.atob(base64String.split(',')[1]);//处理异常，将ASCII码小于0的转换为大于0，这里有两种写法
第一种：
var ab = new ArrayBuffer(bytes.length);
var ia = new Uint8Array(ab);
for(var i = 0; i
第二种：
var array = [];
for(var i = 0;
javascript加载顺序LABjs
最基本的动态加载js程序如下：
function loadScript(url){
var script = document.createElement("script");
script.type = "text/javascript";
script.src = url;
document.body.appendChild(script);
}
也可以添加回调函数：
function loadScript(url, callback){
var script = document.createElement("script");
scri
Quill.js富文本编辑器，初始化和自定义图片上传
window.onload = function () {
//初始化编辑器
var toolbarOptions = [
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
['bold', 'italic', 'underline', 'strike'],
['blockquote', 'code-block'],
[{ 'color': [] }, { 'background': [] }],
[{ 'align': [] }],
['image'],
['clean'
defer和async的区别
当浏览器碰到 script 脚本的时候：
没有 defer 或 async，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该 script 标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。
有 async，加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）。
有 defer，加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但是 script.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。
然后从实用角度来说呢，首先把所有
