标签：: JavaScript

2017

Ajax文件上传

为了避免在实现简单的异步文件上传功能时候引入一个第三方库文件的尴尬情形（库文件可能造成多余的开销，拉低应用加载速度，尤其是在引入库文件之后仅使用其中一两个功能的情况下，性价比极低），最近了解了一下文件异步上传的实现原理，顺带看了看进度条、图片预览等功能的实现，做一点简单的整理。本文所用的代码示例可以从github仓库 file-upload-demo 中找到。文件上传HTML结构如下，一个file

Ajax和Comet相关技术总结

Ajax是一种技术，一种能够向服务器请求额外的数据而无需卸载页面的技术，能够使网页具备更优的用户体验。Ajax技术的核心是XMLHttpRequest对象（XHR）。本文从XHR开始谈起，理解Ajax技术的特点，再对跨域以及Comet等技术进行简要理解和总结。XMLHttpRequest基本用法XHR对象有两个常用的方法open和send。open方法用户启动一个HTTP请求，不过它不会真的发送H

2016

JavaScript-事件流、事件处理程序及事件对象总结

JS与HTML之间的交互通过事件实现。事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。可以使用监听器(或处理程序)来预定事件，以便事件发生时执行相应的代码。这种在传统软件工程中被称为观察员模式，支持页面的行为与页面的外观之间的松散耦合。本文将介绍JS事件相关的基础知识。一、事件流事件流描述的是从页面中接受事件的顺序。事件冒泡事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收，然后逐级

JavaScript-DOM扩展

一、选择符API扩展querySelector()该方法接受一个CSS选择符，返回与该模式匹配的第一个元素。没有匹配的元素则返回null。在Document类型调用该方法会在文档元素的范围内查找匹配元素，在Element类型调用该方法会在该元素的后代范围内查找匹配元素。传入非法的选择符时会抛出错误。123var div = document.querySelector("div");var myD

JavaScript-DOM基础知识总结（二）

一、动态脚本动态脚本是指页面加载时不存在，但将来某一时刻通过修改DOM动态添加的脚本。创建动态脚本有以下两种方法：插入外部文件和直接插入JS代码。如下面代码示例，两种方法都需要等到"document.body.appendChild(script);"这句代码执行完之后才会将脚本引入。第二种方法中使用异常处理的目的是要兼容IE浏览器。1234567891011121314151

JavaScript-DOM基础知识总结

DOM(文档对象模型)是针对HTML和XML文档的一个API。DOM描绘了一个层次化的节点树，允许开发人员添加、删除和修改页面的某一部分。一、Node类型DOM1级定义了一个Node接口，该接口将由DOM中的所有节点类型实现。这个Node接口在JavaScript中是作为Node类型实现的。JS中的所有节点类型都继承自Node类型，共享着相同的基本属性和方法。每个节点都有一个nodeType属性表

JavaScript-window、location对象基础知识整理

一、window对象window是BOM的核心对象，表示浏览器的一个实例。在浏览器中，window对象有双重角色，它是通过JS访问浏览器窗口的一个接口，也是Global对象。任何在全局作用域中声明的变量和函数都会变成window对象的属性和方法。虽然全局变量也是window对象的属性，但是与直接在window上定义的属性也是有点不同。全局变量不能通过delete操作符删除，而直接在window上定

JavaScript模仿块级作用域与私有变量

一、块级作用域JS没有块级作用域的概念，定义在块语句中的变量，实际上是在包含函数中而非语句中创建的，如下面例子，变量i和j创建之后即便离开了块语句，只要还在包含函数func中，就可以访问到这两个变量。必须等到函数func执行完毕销毁作用域之后，变量i和j才会被销毁。123456789101112function func(count) { for (var i = 0; i <

JavaScript闭包的原理与缺陷

闭包的原理闭包是指有权访问另一个函数作用域中的变量的函数。根据下面的代码示例来理解什么是闭包，在add函数内部的匿名函数中，访问到外部函数的变量outerArg，在执行add(10)之后外部函数返回了，并且将内部的匿名函数赋值给了变量addTen，此时通过addTen调用函数，依然可以访问到outerArg，也就是10。这个闭包中的变量，只能通过调用addTen函数访问，无法通过其他渠道访问到，下

JavaScript-OOP常见模式总结（二）

前言：之前我总结了JavaScript OOP常见的几种模式，今天继续把剩下的几种模式整理总结一遍。这几种模式相对于之前的工厂模式，构造函数模式等基础模式来说算是进阶版，有兴趣可以先看之前那篇博文熟悉一下几种基础的OOP模式，《JavaScript OOP常见模式总结》一、创建对象模式1. 动态原型模式该模式将所有信息都封装在构造函数中，可以在构造函数中初始化原型，并且保持了同时使用构造函数和原型