Vue自定义铃声提示音组件的实现
目录
背景/前言
组件的使用
安装
加载
组件生效
组件参数
使用默认音效
关于open参数的解释
项目地址
背景/前言
之前的一个功能需求，需要在页面接收消息，一旦有了新消息之后，需要用铃声进行提醒。
因为没有找到类似的比较便捷的组件，所以就自己写了一个。然后想着能不能尝试下做成一个公共的组件，发布出去让其他开发者也用用？于是就试着写了一个项目（项目地址在最后），发布成了npm包。
目前这个组件已经发布到了npm上，欢迎大家试用。如果有好的建
2022-01-22
5
JavaScript实例 ODO List分析
目录
一、实例代码
HTML
CSS
JavaScript
二、实例演示
三、实例剖析
一、实例代码
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" co
2022-01-22
5
JavaScript ES6的函数拓展
目录
ES6函数拓展
函数的默认参数
reset参数
name属性
箭头函数
ES6函数拓展
函数的默认参数
之前的写法:
function count(x, y) {
return x + y;
}
count(3);//因为只传递了参数x,y的默认值为undefined
//undefined + 3返回NaN
function count(x, y) {
x = x || 0;
y = y || 0;
return x +
2022-01-18
12
Vue提供的三种调试方式你知道吗
目录
一、在 VS Code 中配置调试
二、debugger语句
三、Vue Devtools
总结
一、在 VS Code 中配置调试
使用 Vue CLI 2搭建项目时：
更新 config/index.js 内的 devtool property：
devtool: 'source-map',
点击在 Activity Bar 里的 Debugger 图标来到 Debug 视图：
选择Chrome/Firefox：Launch 环境。将 launch.json 的内容替换为：
{
2022-01-18
6
详解Vue项目的打包方式(生成dist文件)
目录
一、相关配置
情况一（使用的工具是 vue-cil）
情况二（使用的工具是 webpack）
二、打包
一、相关配置
情况一（使用的工具是 vue-cil）
如果是用 vue-cli 创建的项目，则项目目录中没有 config 文件夹，所以我们需要自建一个配置文件；在根目录 sr
2022-01-18
6
html5调用摄像头截图功能
关于html5调用音视频等多媒体硬件的API已经很成熟，不过一直找不到机会把这些硬件转化为实际的应用场景，不过近年来随着iot和AI的浪潮，我觉得软硬结合的时机已经成熟。那我们就提前熟悉下怎么操作这些多媒体硬件吧，首先图像识别是其中最热门的应用场景，首先实现调用摄像头以及截图。
demo的效果请看：摄像头截图
API兼容性
核心的api就是navigator.MediaDevices，从caniuse可看出，PC端除了IE，已经没多大问题。移动端新版本浏览器也支持，同时很多项目都已经转向小程序，加上移动端一向紧跟最新标准，问题也不大。接着就是支持度就更好的video标签。最后
2022-01-18
5
在 HTML 页面中使用 React的场景分析
该方案使用场景：在html页面中使用react，主js文件index.js和其它非react功能使用js模块化的方式开发，适合轻量级中小型应用
index.html代码：
引入react、react-dom、babel、moment、antd等
<!DOCTYPE html>
<html lang='zh-CN'>
<head>
<title>React in HTML</title>
<
2022-01-18
5
Element-ui Layout布局(Row和Col组件)的实现
目录
基本说明以及用法
Row组件的分析
render函数
源码分析
Col组件的分析
组件分析
响应式布局
我们在实际开发中遇到一些布局的时候会用到Layout布局，这个布局只要配置一些参数就能够达到很好的布局效果甚至可以响应式，那里面的具体是怎么实现的呢，让我们去剖开Element-UI的源码，学习里面的一些细节吧。
基本说明以及用法
Element-UI的Layout布局是通过基础的24分栏，迅速简便地创建布局。根据不同的组合，很快的就能够生成一个很美观的响应式布局。具
2021-12-06
66
浅谈JavaScript作用域
目录
一、作用域
1、全局作用域
2、局部作用域
二、变量的作用域
1、全局变量
2、局部变量
3、全局变量和局部变量的区别
三、作用域链
一、作用域
通常来说，一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域。作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突。
JavaScript（es6前）中的作用域有两种：
全局作用域
局部作用域（函数作用域）
2021-12-06
21
JavaScript流程控制(循环)
目录
一、for 循环
二、双重 for 循环
三、while 循环
四、do while 循环
五、循环小结
六、continue break
1、continue关键字
2、break关键字
一、for 循环
在程序中，一组被重复执行的语句被称之为循环体，能否继续重复执行，取决于循环的终止条件。由循环体及循环的终止条件组成的语句，被称之为循环语句。
for 循环主要用于把某些代码循环若干次，通常跟计数有关系。
其语法结构如下：
for(初始化变量; 条件表达式; 操作表
2021-12-06
65
JavaScript流程控制（分支）
目录
一、流程控制
二、顺序流程控制
三、分支流程控制 if 语句
1、分支结构
2、 if 语句
3、 if else语句（双分支语句）
4、if else if 语句(多分支语句)
四、三元表达式
五、分支流程控制 switch 语句
1、语法结构
2、switch 语句和 if else if 语句的区别
一、流程控制
流程控制主要有三种结构:
分别是顺序结构
分支结构
循环结构
这三种结构代表三种代
2021-12-06
22
JavaScript实现队列结构过程
目录
一、认识队列
二、封装队列
三、击鼓传花案列
一、认识队列
前面的博客已经讲了受限的数据结构—栈，现在，我们再来看看队列（Queue）。
它是受限的线性表，先进先出（FIFO）,即first in first out。
受限之处在于它只允许在表的前端（front）进行删除操作。
而在表的后端（rear）进行插入操作。
其结构图可以表示为：
生活中类似于队列的：例如：当我们在排队买东西的时候，先到先买一样。
二、封装队列
这里也采用数组的方式实现队列结构，首先，
2021-12-06
64
JavaScript实现栈结构详细过程
目录
一、认识栈结构
二、栈结构封装
三、十进制转化为二进制
一、认识栈结构
我们知道数组是一种常见的数据结构，并且可以在数组的任意位置插入和删除数据，但是有时候，我们为了实现某些功能，必须对这种任意性加以限制，而栈和队列就是比较常见的受限的数据结构，我们先来看看栈。
栈（stack),它是一种受限的线性表，后进先出（LIFO）
其限制性是允许在表的一端进行插入和删除运算。这一端被称为栈顶，相对的，把另一端，称为栈底。
LIFO（last in first out）表示就是后进入的元素，第一个弹出栈空间。
向一个栈
2021-12-06
22
JavaScript实现优先级队列
目录
一、优先级队列介绍
二、优先级队列封装
一、优先级队列介绍
我们知道，普通的队列插入一个元素，数据会被放在后端，并且需要前面所有的元素都处理完成后才会处理前面的数据。但是优先级队列，在插入一个元素的时候会考虑该数据的优先级，和其他数据的优先级进行比较。比较完成后，可以得出这个元素在队列中的正确位置，其他的处理方式，和基本队列的处理方式基本一样。
优先级队列主要考虑的问题：
每个元素不再只是一个数据，而且包含数据的优先级；
在添加方式中，根据优先级放入正确的位置。
在日常中也有用到优先级队列的例子，比如说医
2021-12-06
24
JavaScript阻止事件冒泡的方法
我们需要注意的是：事件冒泡本身的特性，会带来的坏处，也会带来的好处，在后续的博客我会详细说明。
所以我们在这里将论述一下如何阻止事件冒泡。
比如现在有一个子盒子和一个父盒子，子盒子和父盒子二者都有点击事件，但是此时，当我们点击子盒子时，只想让子盒子显示点击事件。这里我们就要用到阻止事件冒泡的方法来隔断父盒子的事件显示。
先创建两个盒子，并给他们添加点击事件，如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
&am
2021-12-06
20
详解gantt甘特图可拖拽、编辑(vue、react都可用 highcharts)
前言
Excel功能强大，应用广泛。随着web应用的兴起和完善，用户的要求也越来越高。很多Excel的功能都搬到了sass里面。恨不得给他们做个Excel出来。。。程序员太难了。。。
去年我遇到了一个甘特图的需求，做了很多工作，也写了两篇博客。一篇是用 GSTC 这个包做的甘特图，另一篇是自己手写了一个简易的甘特图。两个的效果都不理想，特别是GSTC，问题很多，好多道友看了博客遇到了问题，惭愧，没能帮大家解决这个问题。之前太忙了，这个甘特图就再没搞，直到今天发现了新的包，几乎是完全符合我们的需求。
首先，我们用的是 highcharts；其次，大团队的产品，后期维护
2021-11-27
39
JavaScript利用html5新方法操作元素类名详解
目录
1、classList属性
2、实务应用
早先JavaScript处理起来特别不方便，需要先取到class属性，然后对字符串进行处理。
现在html5给所有元素增加了classList属性来操作类属性，非常方便。
1、classList属性
先看如下代码：
<ul class="nav">
<li class="active">栏目1</li>
<li>栏目2</li
2021-11-27
50
一文了解JavaScript用Element Traversal新属性遍历子元素
目录
1、childNodes属性遍历
2、Element系列属性遍历
之前遍历子元素可以用childNodes属性或者firstChild进行遍历，但是要判断子元素是否是ELement元素。
后来W3C通过Element Traversal规定定义了一组新的属性来进行遍历，就不用判断了，非常方便。
1、childNodes属性遍历
遍历子元素通常是通过childNodes属性进行遍历，但是这个属性会包含空白节点，如果只是要遍历Element元素就特别不方便。
请看如下代码示例：
<div class="
2021-11-27
27
JavaScript选择器函数querySelector和querySelectorAll
目录
一、querySelector查询单个元素
1. Document实例调用
2. Element实例调用
二、querySelectorAll查询所有元素
1、for in遍历的问题
2、快照而非实时的问题
三、小结
选择器是Css非常强大的功能，早先一般是通过getElementById和getElementsByTagName来获取页面元素，在一些场景下就很不方便。
后来DOM扩展出了Selector API标准，其中 Selector API Level 1
2021-11-27
29
