JavaScript 异常处理
程序异常
程序异常可分为逻辑异常和语法异常，对于初学者而言语法异常居多，随着不断的学习对语言越来越熟悉后语法异常减少逻辑异常增多。
在JavaScript中提供了对异常进行处理的语句，在适当的时候使用它们能够使程序变得更加健壮。
但是要注意不要滥用异常处理，它会使程序的可读性变差。
异常对象
所有 ...
《JavaScript语言入门教程》记录整理：面向对象
目录实例对象与 new 命令this关键字对象的继承Object对象的方法严格模式(strict mode)
本系列基于阮一峰老师的《JavaScrip语言入门教程》或《JavaScript教程》记录整理，教程采用知识共享 署名-相同方式共享 3.0协议。这几乎是学习js最好的教程之一(去掉之一都不过分)
最好的教程而阮一峰老师又采用开源方式共享出来，之所 ...
JavaScript 模块封装
前言介绍
在最早的时候JavaScript这门语言其实是并没有模块这一概念，但是随着时间的推移与技术的发展将一些复用性较强的代码封装成模块变成了必要的趋势。
在这篇文章中主要介绍原生的 JavaScript封装的几种手段以及新增的 ES6 Module的语法，来实现模块封装。
并且会简单的使用Webpack让Es6代码向后兼容。 ...
JavaScript Function
前言
Js中的函数其实相较于其他语言是比较复杂的，光函数类型就分了好几种，其中this指向更是让很多初学者摸不到头脑。
那么本篇文章将着重介绍一下函数的基本使用，关于this指向的详解将放在下一章。
函数的作用其实就是将一段可重复利用的代码进行整合，方便多次使用。
一定要注意，先声明定义函数 ...
Javascript设置对象属性为"只读"
有时为了保护某些属性，让其无法被更改，我们会把他们设置为常量。
在某些语言里面，也许会用const来实现这样的功能。本文讲述如何在Javascript中实现这样的功能。
方法一:
var myObject = {
get readOnlyProperty() { return 1024; }
};
alert(myObject.readOnlyProperty); // 1024
myObject.readOnlyProper ...
javascript 通信协议
简介
javascript 通信协议是一个伪协议[1], 用于指定 URL 为 JavaScript 代码
语法:
javascript:someScript;
someScript 是一个或多个使用 ; 分隔的 JavaScript 语句.
示例
<a href="javascript:alert('JavaScript Link!');">JavaScript Link</a>
特点
返回值会替换当前文档
对于 Chrome 浏览器来说, 如果最 ...
JavaScript监听属性改变
参考：https://www.softwhy.com/HTML5/MutationObserver_course/
JavaScript监听属性改变
2018-8-18 01:34| 作者: admin| 查看: 3639| 评论: 0|来自: 蚂蚁部落
原创作品，转载需得到原作者书面许可，同时保留原作者和出处，否则将追究法律责任。
关于Mutation Observer基本知识可以参阅以下两 ...
原生JavaScript写出Tabs标签页
最近在重新学习JavaScript，手写了一个tabs标签页。
话不多说，直接开始。
首先，是前端页面。
图1 tabs
先来把tabs分解一下：图2 tabs分解
首先，一个大的框div，上面红色的框是导航栏nav，导航栏里是一个无序列表ul，里面三个li标签（黄色的框），li标签里两个绿色标签是两个sp ...
JavaScript处理后端返回PDF文件流，在线预览下载PDF文件
在实际开发业务中，遇到这一需求，即后端返回的pdf文件，是以base64文件流的方式，在此不便操作接口响应等操作，便以上传一个文件转化为文件流的形式模拟
实际应用时，base64Img = res.data 即可，以下方法为不使用其他插件可快速实现文件流转pdf，在线预览和下载，如需pdf文件流转图片预览且不可下载
请参考此篇随笔 pdf.j ...
Babel：下一代Javascript语法编译器
定义
Babel是一个Javascript的编译器，通过它你可以将一些新版本的ECMAScript语法转换成低版本的语法。以便能够在低版本的浏览器或者其它环境平稳运行。
截至目前笔者写这篇文章的时候，babel的版本是7.10.0
实践
第一步：创建项目
mkdir babel-study && cd babel-study
第二步：初始化项目，并安装相关依赖包
npm init -y
...
JavaScript图形实例：平面镶嵌图案
用形状、大小完全相同的一种或几种平面图形进行拼接，彼此之间不留空隙、不重叠地铺成一片，就叫做这几种图形的平面镶嵌。
1．用一种多边形实现的平面镶嵌图案
我们可以采用正三角形、正方形或正六边形实现平面镶嵌。
（1）用正方形平铺。
用正方形进行平面镶嵌比较简单，编写如 ...
JavaScript动画基础：canvas绘制简单动画
动画是将静止的画面变为动态的艺术．实现由静止到动态，主要是靠人眼的视觉残留效应。视觉残留也叫视觉暂留现象，物体在快速运动时, 当人眼所看到的影像消失后，人眼仍能继续保留其影像0.1~0.4秒左右的图像，这种现象被称为视觉暂留现象。利用人的这种视觉生理特性可制作出具有高度想象力和表现力的动 ...
JavaScript图形实例：Canvas API
1．Canvas概述
Canvas API（画布）用于在网页实时生成图像，并且可以操作图像内容，基本上它是一个可以用JavaScript操作的位图（bitmap）。
要使用HTML5在浏览器窗口中绘制图形，首先需要在HTML文档中新建一个canvas网页元素。一般方法如下：
<canva ...
JavaScript图形实例：Hilbert曲线
德国数学家David Hilbert在1891年构造了一种曲线，首先把一个正方形等分成四个小正方形，依次从西北角的正方形中心出发往南到西南正方形中心，再往东到东南角的正方形中心，再往北到东北角正方形中心，这是一次迭代；如果对四个小正方形继续上述过程，往下划分，反复进行，最终就得到一条可以填满整个 ...
Electron JavaScript 桌面应用打包、自动升级
1. 应用打包
使用electron builder打包只需要在vue.config.js中配置即可，这里需要注意的是，默认情况下electron builder打包出来的安装程序是不能修改安装目录的，需要allowToChangeInstallationDirectory这个配置设置为true。
// see https://cli.vuejs.org/config
module.exports = {
productionSourceMap: false,
p ...
JavaScript图形实例：递归生成树
观察自然界中树的分叉，一根主干生长出两个侧干，每个侧干又长出两个侧干，以此类推，便生长出疏密有致的结构。这样的生长结构，使用递归算法可以模拟出来。
例如，分叉的侧干按45°的偏转角度进行生长的递归示意图如图1所示。
图1 生成树的递归示意图
按照树分叉 ...
只需几行 JavaScript 代码，网页瞬间有气质了！
最近在网上闲逛，发现一个特别好玩的 JavaScript 库，叫 RoughNotation。干嘛用的呢？就是在网页上给文字加标注，比如下划线、方框、高亮文字背景等，不过是手写风格的！截图给大家感受下：
怎么样？是不是感觉网页瞬间就生动了？是不是有种手捧纸质书，用彩笔在纸上做笔记的感觉？满满的文艺范！
它支持多种标注形式，除 ...
JavaScript图形实例：黄金螺旋线
黄金螺旋线是根据斐波那契数列画出来的螺旋曲线。自然界中存在许多黄金螺旋线的图案，是自然界最完美的经典黄金比例。例如，如图1所示的海螺身上的曲线，图2所示的漩涡，图3所示的人耳。
图1 海螺
图2 漩涡
图3 人耳
又如，名画蒙娜丽莎的微笑整个画面所呈 ...
JavaScript图形实例：曲线方程
在HTML5 Canvas画布中，我们可以根据曲线的方程绘制出曲线。例如，在笛卡尔坐标系中，圆的方程为：
x=r*cos(θ)
y=r*sin(θ) （0≤θ≤2π）
编写如下的HTML代码。
<!DOCTYPE html>
<head>
<title>圆</title>
<script type="text/javascript">
function draw(id)
&nbs ...
JavaScript中的Fetch函数
JavaScript中的Fetch函数
Fetch API提供了一个JavaScript接口，用于访问和操作Http管道的一些具体的部分，例如请求和响应。还提供一个fetch()方法，该方法提供一种简单，合理的方式来跨网络异步获取资源。
这种功能以前是使用XMLHttpRequest实现的。Fetch挺了一个更理想的替代方案，可以很容易的被其他技术使用。例如Servic ...
