JavaScript
文章平均质量分 71
Deniro Lee
这个作者很懒,什么都没留下…
展开
-
说说 JavaScript 中的冒泡与捕获过程
W3C 规范中定义了3个事件阶段,依次是捕获阶段 、 目标阶段 、 冒泡阶段。先捕获,后冒泡,捕获从上到下,就像石沉大海;而冒泡从下到上就像气泡冒出水面。先看个示例:html 页面:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>冒泡与捕获</title></head><body style="bor原创 2020-05-31 16:06:31 · 373 阅读 · 0 评论 -
说说 JavaScript 中的 “!!” 语法
JavaScript 中的 ! 会将变量转换成 boolean 类型,而 null、undefined 和空字符串会被转换为 false,其它转换为 true。console.log(!null);//trueconsole.log(!undefined);//trueconsole.log(!'');//trueconsole.log(!'deniro');//falseconsole.log(!1);//false运行结果:truetruetruefalsefalse!原创 2020-05-24 15:23:10 · 783 阅读 · 1 评论 -
探索 JavaScript 作用域
JavaScript 是实际上是一门编译语言。但 JavaScript 并没有多少时间可供编译,在大部分情况下,编译会发生在 JavaScript 代码执行前的几微秒时间内。所以 JavaScript 引擎用了各种办法(比如 JIT)来保证性能。JIT是“Just In Time”的首字母缩写。每当一个程序在运行时创建并运行一些新的可执行代码,而这些代码在存储于磁盘上时并不属于该程序的一部分...原创 2020-05-02 16:30:28 · 185 阅读 · 0 评论 -
说说如何使用 JavaScript 实现返回上一页时,跳转到之前浏览位置的功能
具体功能描述如下:点击列表中的某一条记录(数据比较多,列表较长),会打开地图导航页,导航页返回时,需要跳到当时所在的记录行。本功能应用于微信公众号场景,相当于移动端领域。实现该功能,需要用到浏览器的 Window localStorage 属性。localStorage 和 sessionStorage 属性允许在浏览器中存储 key/value 对的数据。localStorage 用于长久...原创 2020-02-09 17:51:20 · 1497 阅读 · 2 评论 -
说说 JavaScript 遍历对象的方法
假设需要遍历对象的具体内容为: {"未开始":2,"已完成":3,"进行中":5}。let task_type_count = {"未开始":2,"已完成":3,"进行中":5}1 Object.keys() 方法**Object.keys() ** 方法会返回一个由给定对象的自身可枚举属性组成的数组,数组中属性名的排列顺序和使用 for...in 语句循环遍历该对象时返回...原创 2019-10-13 11:38:36 · 264 阅读 · 0 评论 -
说说 ES6 的 const 指令
1 用法const 用于声明一个只读常量,即声明之后就不能修改其值。const MIN = 3;MIN = 1;运行结果:MIN = 1;^TypeError: Assignment to constant variable.这也就意味着,一旦使用 const 声明了常量,就必须立即赋值,否则会抛错:const MIN;运行结果:SyntaxError: Miss...原创 2019-08-03 16:24:48 · 269 阅读 · 0 评论 -
说说 ES6 的块级作用域
1 问题先说说没有块级作用域,可能产生的问题。1.1 内层变量覆盖外层变量var temp=1;function f(){ console.log(temp); if(false){ var temp='字符串变量'; }}f()运行结果:undefined因为变量提升,导致 if 语句体中的变量 temp 覆盖了外层变量 tem...原创 2019-08-03 15:46:05 · 287 阅读 · 0 评论 -
说说 ES6 的 let 指令
let 指令用法类似于 var,也是用来声明变量 ,但是它所声明的变量,只能在 let 指令所在的代码块内有效 。{ let a = 1; var b = 1;}console.log(b);console.log(a);运行结果:1console.log(a); ^ReferenceError: a is not defined...原创 2019-06-16 17:29:07 · 483 阅读 · 0 评论 -
说说 Babel 的 babel-node 工具
babel-node 工具提供了一个支持 ES6 的 REPL 交互式运行环境。在此环境中,我们可以做一些简单的代码调试。babel-node 是 babel-cli 的附带工具,所以只要安装了 babel-cli ,就可以直接使用 babel-node 啦O(∩_∩)O~执行 babel-node,即可进入 REPL 环境:> ((x,y) => {return x*y}...原创 2019-06-08 20:34:41 · 4561 阅读 · 0 评论 -
说说 Babel 的命令行转码器 babel-cli
假设有这样一个 js 文件(babel_test.js),使用了 ES6 所特有的箭头函数:var elements = [ 'Hydrogen', 'Helium', 'Lithium', 'Beryllium'];elements.map((element) => { return element.length;});1 全局安装b...原创 2019-06-08 16:36:54 · 1053 阅读 · 0 评论 -
JavaScript 开发框架横向比对(Vue、React 和 Angular)
1 背景比对 比对 Vue React Angular 出现年月 2013-7 2013-3 2010-1 框架类型 MVVM MVC MVW 开源许可 MIT license BSD3-license MIT license* MIT license 与 BSD-license 之间的区别是:MIT...原创 2018-05-30 11:36:18 · 12836 阅读 · 1 评论 -
每个 JavaScript 工程师都应当知道的 10 个面试题
1 能说出来两种对于 JavaScript 工程师很重要的编程范式么?JavaScript 是一门多范式(multi-paradigm)的编程语言,它既支持命令式(imperative)/面向过程(procedural)编程,也支持面向对象编程(OOP,Object-Oriented Programming),还支持函数式编程(functional programming)。JavaScrip...转载 2018-05-21 10:07:04 · 581 阅读 · 0 评论 -
深入理解 JavaScript 方法集的特性与最佳实践
JavaScript 包含了一套小型的、可用在标准类型上的方法集。下面我们对这些方法一一进行分析。1 Array1.1 array.concat(item…)concat 方法会产生一个新数组,它是数组的浅复制,并把一个或多个 item 附加在其后。如果 item 是一个数组,那么它的每一个元素都会被添加:var a = ['a', 'b', 'c'];var b = ['x', 'y', 'z'原创 2017-10-12 16:35:22 · 1022 阅读 · 0 评论 -
手把手教你为百度地图的多个覆盖物(每个覆盖物拥有各自的参数),绑定事件处理函数
百度地图的覆盖物有很多种,比如点、折线等等。项目要求在地图上划出多个折线,并需要对这些折线绑定事件处理函数(弹出一个信息窗口)。折线与信息窗口的定义代码如下:var DeniroMap = { lines: [],//存储已创建好的折线对象数组 //折线样式 lineStyle: {strokeColor: "blue", strokeWeight: 6原创 2017-09-30 17:53:01 · 6081 阅读 · 0 评论 -
深入理解 JavaScript 正则表达式的特性与最佳实践
JavaScript 的正则表达式借鉴自 Perl。正则表达式是一种语法规范,它能够对字符串中的信息进行查找、替换与提取操作。JavaScript 的正则表达式比等效的字符串处理有着显著的性能优势。正则表达式起源于对形式语言的数学研究,Ken Thompson 写出了一个切实可行的模式匹配器,它能被嵌入到编程语言中。JavaScript 正则表达式的语法对 Perl 进行了改进与扩张。但它的书写规则原创 2017-09-28 15:48:32 · 781 阅读 · 0 评论 -
Uncaught DOMException: Failed to read the 'contentDocument' property from 'HTMLIFrameElement' 的解决办法
1 发现问题最近开发了 Excel 导入、导出工具,极大地提升了工作效率,沾沾自喜中。然而把项目部署在测试环境上,却发现在 chrome 中无法上传文件,日志报了以下错误:Uncaught DOMException: Failed to read the 'contentDocument' property from 'HTMLIFrameElement': Blocked a frame with原创 2017-09-28 11:44:54 · 13402 阅读 · 2 评论 -
深入理解 JavaScript 数组的特性与最佳实践
JavaScript 提供了一种类似数组特性的对象,它把数组的下标变为字符串,作为对象的属性。虽然它比一个真正的数组来的慢,但是使用起来很方便。1 数组字面量数组字面量是在一对方括号中包围零个或多个用逗号分隔的值的表达式:var empty = [];var numbers = [ 'zero', 'one', 'two', 'three'];console.log(empty[1])原创 2017-09-21 15:11:19 · 630 阅读 · 0 评论 -
深入理解 JavaScript 继承的特性与最佳实践
继承是代码重用的模式。JavaScript 可以模拟基于类的模式,还支持其它更具表现力的模式。但保持简单通常是最好的策略。JavaScript 是基于原型的语言,也就是说它可以直接继承其他对象。1 伪类JavaScript 的原型不是直接让对象从其他对象继承,而是插入一个多余的间接层:通过构造函数来产生对象。当一个函数被创建时,Function 构造器产生的函数对象会运行这样类似的代码:this.p原创 2017-09-19 16:01:52 · 683 阅读 · 0 评论 -
深入理解 JavaScript 函数的特性与最佳实践
函数用于指定对象的行为。所谓的编程,就是将一组需求分解为一组函数和数据结构的技能。1 函数对象JavaScript 函数就是对象。对象是名值对的集合,它还拥有一个连接到原型对象的链接。对象字面量产生的对象连接到 Object.prototype,而函数对象连接到 Function.prototype(这个对象本身连接到 Object.prototype)。每个函数在创建时会附加两个隐藏属性:函数的上原创 2017-09-14 15:05:57 · 754 阅读 · 0 评论 -
深入理解 JavaScript 对象的特性与最佳实践
JavaScript 的简单数据类型是数字、字符串、布尔值(true/false)、null 以及 undefined,其它所有的值都是对象。这些对象是可变的键值对集合。对象是属性的容器,每个属性都有名字和值。属性的名字可以是包含空字符串在内的任何字符串,而属性值是除 undefined 值之外的任意值。对象是无类型的,它对属性的名字和值没有类型限制。所以对象很适合汇集和管理数据。对象可以包含其他对原创 2017-09-07 14:38:26 · 863 阅读 · 0 评论 -
说说如何对 JavaScript 进行部署
1 构建过程JavaScript 代码不能直接放在浏览器中,原因如下:知识产权 - 如果把带有完整注释的代码放在 web 上,那么别人就更容易知道你的意图,对它进行利用,甚至发现安全漏洞!文件大小 - 开发的代码要容易阅读,这样才能更好地进行维护,但这对性能不利。代码组织 - 编码代码时要考虑到可维护性,但对性能不利。所以我们要定义一个构建过程。JavaScript 代码编写时,也要遵循面向原创 2017-09-05 15:21:39 · 1689 阅读 · 0 评论 -
JavaScript 最佳实践之性能篇
最初的 JavaScript 是一种解释型的语言,所以在执行速度上比编译型语言慢得多。后面有了 Chrome,它内置了优化引擎,把 JavaScript 编译为本地代码再执行,很多浏览器纷纷效仿,所以现在的 JavaScript 已经是编译型的语言咯O(∩_∩)O~1 注意作用域1.1 for 循环中的全局变量使用全局变量或函数的查找开销比局部变量或函数大得多,因为这会涉及到作用域链上的查找://避原创 2017-08-31 15:43:20 · 751 阅读 · 0 评论 -
JavaScript 最佳实践之可维护篇
编写可维护的 JavaScript 很重要,因为大部分的开发者都花费了大量的时间来维护他人编写的代码,因为一般情况下,我们都是以他人的工作成果为基础,开始开发新代码的。这里的很多概念也适用于其他编程语言哦O(∩_∩)O~1 什么是可维护代码?可维护代码有这些特点:可理解性——其他开发者可以接手源代码,并无需原代码者的完整解释的情况下,理解它的意图。直观性——代码一看就能明白。可适应性——能够适原创 2017-08-24 15:28:16 · 557 阅读 · 0 评论 -
说说如何使用 JavaScript 实现拖放功能
拖放指的是:鼠标点击某个对象并按住不放,然后移动到另一个区域,释放鼠标按键将对象放在这个地方。创建一个绝对定位的元素,然后让它可以在页面上跟着鼠标指针移动,这种技术源自“鼠标拖尾”的经典技巧。单元素的鼠标拖尾是使用 onmousemove 事件来实现的,它总是将指定的元素移动到鼠标指针的位置:<script type="text/javascript"> EventUtil.addHandle原创 2017-08-22 14:50:24 · 801 阅读 · 0 评论 -
说说如何使用 JavaScript 实现自定义事件
事件是 JavaScript 与浏览器交互的主要方式,是使用观察者模式实现的。对象发布事件,然后其他对象可以观察这个对象,在需要的时候进行代码响应。观察者模式是由主体和观察者组成的。主体发布事件,而观察者通过订阅事件来观察这个主体。这个模式中的主体并不知道谁是观察者以及它们做了什么,主体可以独立存在并正常运行。而观察者知道主体并能注册事件的回调函数。比如,DOM 元素就是主体,而那些事件处理程序就是原创 2017-08-17 14:52:03 · 714 阅读 · 0 评论 -
说说使用 JavaScript 定时器的正确姿势
JavaScript 是运行于单线程的环境中,所以 JavaScript 中的定时器只是计划代码在未来的执行时间。像是页面下载完成后的代码运行、事件处理程序、AJAX 回调函数都是使用这个单线程运行的哦O(∩_∩)O~。实际上,浏览器会对这些代码进行排序,指定它们的运行优先级。比如点击了某个按钮,如果这时的 JavaScript 进程只要处于空闲状态下,那么 onclick 事件处理程序会立即执行,原创 2017-08-15 15:05:55 · 1446 阅读 · 0 评论 -
说说如何使用 JavaScript 创建防篡改对象
之前的 JavaScript,开发人员可能会意外修改了别人的代码,甚至重写原生对象!现在,在 ECMAScript 5 中可以定义防篡改对象啦O(∩_∩)O~不过,一旦把对象定义为防篡改之后,就无法撤销了哦。1 不可扩展对象默认情况下,所有的对象都是可扩展的,即可以随意地添加属性和方法。现在,使用 Object.preventExtensions(person) 方法后,对象就不可以扩展咯:<s原创 2017-08-10 14:33:03 · 881 阅读 · 0 评论 -
说说 JavaScript 中那些有趣而且强大的高级函数
1 安全的类型检测JavaScript 内置的类型检测机制并非完全可靠。比如 typeof 操作符,它会导致检测数据类型时得到不靠谱的结果(Safari 4 以及之前的版本,正则表达式会返回 function!)。instanceof 操作符在存在多个全局作用域(比如一个页面包含多个框架)的情况下,很难使用。比如下面这行代码:var isArray = value instanceof Array;原创 2017-08-08 15:39:43 · 464 阅读 · 0 评论 -
说说使用 JavaScript 解析以及序列化 JSON 的方法
JSON 之所以这么流行,是因为 JSON 数据结构可以被解析为 JavaScript 对象。JSON 之前的 XML 数据结构要被解析,需要先解析成 DOM 文档,然后再从中提取出数据。相比之下,JSON 数据结构方便多咯O(∩_∩)O~所以 JSON 就成为 web 开发中,用于数据交换的事实标准。1 JSON 对象早期的 JSON 解析器是使用 JavaScript 的 eval() 函数。因原创 2017-08-03 15:24:11 · 571 阅读 · 0 评论 -
说说 JSON 的基本语法以及与 JavaScript 的异同
JSON 的语法可以表达三种类型的值。简单值:与 JavaScript 语法相同,可以表示字符串、数值、布尔值以及 null,但不支持 JavaScript 的 undefined。对象(复杂数据类型):是一组有序的键值对,每个键值对中的键可以是简单值,也可以是 复杂数据类型的值。数组(复杂数据类型):是一组有序的值的列表,可以使用数值索引来访问其中的值,这个值可以是任意类型(简单值、对象或原创 2017-08-03 14:29:53 · 426 阅读 · 0 评论 -
说说如何使用 JavaScript 进行代码调试
1 把消息记录到控制台IE8、Firefox、Chrome 和 Safari 中可以使用 console 对象向 JavaScript 控制台写入消息,它有这些方法:error(message):错误性消息。info(message):信息性消息。log(message):一般性消息。warn(message):警告性消息。Opera 10.5 之前的版本,是使用 opera.postEr原创 2017-08-01 15:30:46 · 471 阅读 · 0 评论 -
说说如何使用 JavaScript 进行错误处理
良好的错误处理机制可以让用户得到及时的提醒,所以让我们来看看 JavaScript 提供了哪些针对错误处理的工具和方法吧O(∩_∩)O~1 try-catch 语句ECMA-262 第 3 版引入了 try-catch 语句,这时 JavaScript 处理异常的标准方式:try{ //可能会导致错误的代码} catch (error){ //错误处理}如果 try 块中的代码原创 2017-08-01 15:02:26 · 573 阅读 · 0 评论 -
说说如何使用 HTML5 对浏览器的历史状态进行管理
现代的 Web 应用,几乎都是 AJAX 的局部刷新,所以导致浏览器的“后退”和“前进”失去了意义。在 HTML5 中可以通过更新 history 对象来管理这些历史状态。首先通过 haschange 事件,可以获知 URL 的参数发生了什么变化。然后通过状态管理 API,可以在不加载新页面的情况下改变浏览器的 URL。history.pushState() 方法接收 3 个参数:状态对象、新状态的原创 2017-07-25 15:52:30 · 925 阅读 · 0 评论 -
说说如何使用 HTML5 嵌入音频和视频(媒体标签)
HTML5 使用 audio 和 video 元素来嵌入音频和视频内容。另外还提供了与这两个标签相关的 JavaScript API,这样就可以创建我们自己的音视频控件咯:<!-- 嵌入视频 --><video id="player" src="xxx.ogg" poster="mymovie.jpg" width="300" height="200">原创 2017-07-25 15:28:45 · 11093 阅读 · 0 评论 -
说说如何使用 HTML5 实现拖放功能(使用原生 API)
拖放指的是在框架间、窗口间或者应用间拖放网页元素。1 拖放事件拖放事件分为两种:被拖动的元素上触发的事件以及放置目标上触发的事件。拖动某元素时,将依次触发以下事件:dragstartdragdragend按下鼠标键并开始移动鼠标时,在被拖动的元素上触发 dragstart 事件。光标变为不能放的符号(因为不能拖放到自己身上)。在元素被拖动期间会持续触发 drag 事件。这与 mousemov原创 2017-07-20 15:31:13 · 832 阅读 · 0 评论 -
说说如何使用 canvas 进行 2D 绘图
canvas 的 2D context 可以绘制简单的 2D 图形。它的 2D context 坐标开始于 <canvas> 元素的左上角,原点坐标是(0,0)。所有的坐标值都基于这个原点,x 值越大表示越靠右,y 值越大表示越靠下。width 和 height 表示水平和垂直方向上可用的像素数。1 填充和描边填充就是用指定的样式填充图形;而描边就是给图形的边缘画线。它们分别对应两个属性:fillS原创 2017-07-18 16:00:26 · 3082 阅读 · 18 评论 -
说说 canvas 的基本用法
要使用 <canvas> 元素,要先设置 width 和 height,它们决定了绘图的区域大小。在开始和结束标签中是后备信息,如果浏览器不支持 canvas,就会显示这些信息:<canvas id="drawing" width="200" height="200">A drawing of something.</canvas>也可以为 canvas 元素添加 CSS 样式,如果不添加样式或者不原创 2017-07-13 14:26:44 · 769 阅读 · 0 评论 -
说说 JavaScript 表单脚本之富文本编辑功能
富文本编辑,即所见即所得(What You See Is What You Get)。这个技术的本质是在页面中嵌入一个包含空 HTML 页面的 iframe。通过 designMode 属性(设置为 on),这个页面就可以被编辑,编辑对象是这个页面的 <body> 元素的 HTML 代码。iframe 中使用一个简单的 HTML 页面就可以作为内容:<!DOCTYPE html><html><原创 2017-07-11 15:39:03 · 1927 阅读 · 0 评论 -
说说 JavaScript 实现表单序列化的解决方案(附源码)
Ajax 的流行,导致了表单序列化需求非常普遍。表单提交时,浏览器是这样把数据发送给服务器的:对表单字段的名称和值进行 URL 编码,使用 & 分隔。不发送禁用的表单字段。只发送勾选的复选框和单选按钮。不发送 type 为 “reset” 和 “button” 的按钮。多选的选择框的每一个选中的值会单独列一个条目。只有在单击提交按钮(包括 type 为 image 的 <input> 元原创 2017-07-06 15:41:51 · 526 阅读 · 0 评论 -
说说 JavaScript 表单的选择框脚本
选择框通过 <select> 和 <option> 元素创建的。HTMLSelectElement 除了具有所有表单字段所共有的属性和方法外,还有这些: 属性或方法 说明 add(newOption, relOption) 在 relOption 之前插入新的 <option> 元素。 multiple 布尔值,是否允许多选,等价于 HTML 的 multiple 属性。原创 2017-07-06 15:15:58 · 576 阅读 · 0 评论