主页

JavaScript 闭包

1. 概述 闭包(closures),在 MDN 解释为: Closures are functions that refer to independent (free) variables (variables that are used locally, but defined in an enclosing scope). In other words, these functions ‘remember’ the environment in which they were created. 闭包是指那些能够访问独立(自由)变量的函数 (变量在本地使用,但定义在一个封闭的作用域中)。换句话说,这些函数可以“记忆”它被创建时候的环境。 闭包是 JavaScript...

阅读更多

JavaScript 面向对象之继承

1. 概述 JavaScript 是一门非常灵活的语言,对于同一个问题的解决,往往有多种方法来实现。 继承是面向对象特性之一,它实现了代码的复用性与可维护性,可缩短开发周期,降低开发成本。继承易于维护管理,它避免了在一般类和特殊类之间共同特征的重复描述。 比如学生(一般类)具有学号、姓名、年龄、性别的特征,小学生、大学生(特殊类)都是学生,也都具备学生的特征,这时,我们就可以让小学生、大学生继承自学生,重用在学生描述部分的信息。 JavaScript 也可使用继承实现代码复用,在很多资料中对 JavaScript 的继承细致的分了许多种类与实现的方式,但无外乎两种方式:对象冒充、原型继承。本文介绍这两种实现继承的方式。 2. 对象冒充 2.1 普通对象冒充 对象冒充的实现...

阅读更多

JavaScript 对象初识

1. 概述 在 JavaScript 中,数据类型分为:number、string、boolean、undefined、null、object,其中 number、string、boolean、undefined、null 也称为基本数据类型,而 object 称为引用数据类型。 之所以 object 和其它数据类型不同,是因为对象是一种复合值,它将若干值以 key-value 键值对的形式聚合在一起。我们可以将对象看作是一系列无序的数据集合,通过 key 关键字可以访问到其关联的 value 值。 2. 对象创建 对象创建有三种方式:对象直接量方式、new 调用构造函数方式与 Object.create() 方式。 2.1 对象直接量 直接量也称为字面量,对象直接量由若干...

阅读更多

JavaScript 中的运动

1. 概述 JavaScript 中的运动效果使用非常多,比如页面中常见的轮播图效果、图片淡入淡出效果、广告图片展开隐藏效果等等,都涉及到运动。 我们可以使用各种运动框架去完成运动效果,当然也可以先自己来实现一套运动框架。 2. 算法实现 2.1 基本的水平匀速运动效果 在实现元素水平匀速运动前,选将页面元素定位方式设置为 “absolute” 绝对定位,我们在 JS 代码中将元素 CSS 属性 left 值定时修改即可。要实现实时修改操作,又需要使用到定时器来完成功能,这里使用 setInterval() 方法: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 <scri...

阅读更多

解构赋值

1. 简述 解构赋值(destructuring assignment)语法是一个 JavaScript 表达式,它使得从数组或者对象中提取数据赋值给不同的变量成为可能。 对象字面量和数组字面量提供了一种简单的定义一个特定的数据组的方法。一旦你创建了这类数据组,你可以用任意的方法使用这些数据组,甚至从函数中返回它们。 以前,要给变量赋值,只能直接使用赋值运算符指定,如: 1 var name = "张三"; 但在 ES6 中,我们可以使用解构赋值来为变量赋值。解构赋值的一个特别有用的功能是:你可以用一个表达式读取整个结构。 2. 解构数组 语法: 1 var [a, b, ...rest] = [value1, value2, ... valueN] 2.1 简单...

阅读更多

let 与 const 命令

1. 块级作用域 在 ES6 之前,作用域有两种:全局作用域和函数作用域。正是因为这两种作用域,JavaScript 中出现了 “变量提升(hoisting)” 这一概念。如: 1 2 3 4 5 6 7 8 <script type="text/javascript"> function test(){ console.log(i); var i = 5; } test(); </script> 执行结果显示:undefined 。之所以为 undefined 是因为变量提升的关系:进入函数执行前,先将所有 var 声明的变量名称提升到顶部,即相当于先声明了变量,然后再执行向控制台输出的操作,由于仅只提升了变量的声明名称部分,赋值部分仍...

阅读更多

ES5 新特性

ECMAScript 5.0 的标准于 2009 年 12 月推出,ECMAScript 5.1 的标准于 2011 年 6 月发布,并且成为 ISO 国际标准,现在已经被几乎所有的主流浏览器支持,本文将简单列举 ES5 的核心特性。 1. 对象/数组字面量扩展 1.1 支持 getter/setter 访问器 getter/setter 主要用于获取/设置属性值,可以对属性值进行预处理: 1 2 3 4 5 6 7 8 9 10 11 12 13 <script type="text/javascript"> var obj = { get age(){ return this._age; }, set age(_age) { this....

阅读更多

ES5 严格模式

1. 概述 严格模式,顾名思义,就是使 JavaScript 在更严格的条件下运行,这是在 ECMAScrpit 5 中提出的新标准。 设立严格模式主要的目的有以下几个: 消除 JavaScript 语法的一些不合理、不严谨之处,减少一些怪异行为; 消除代码运行的一些不安全之处,保证代码运行的安全; 提高编译器效率,增加运行速度; 为未来新版本的 JavaScript 做好铺垫。 严格模式体现了 JavaScript 更合理、更安全、更严谨的发展方向。目前,除了 IE6-9 外,其它浏览器均已支持 ES5 严格模式。 ES5 严格模式是限制性更强的 JavaScript 变体,它与常规 JavaScript 的语义不同,其分析更为严格。同样的代码,在正常模...

阅读更多

JavaScript Promise 模式

1. 简介 在介绍 Promise 对象之前,我们先来看一个例子: 1 2 3 4 5 6 7 8 9 step1(function (value1) { step2(value1, function(value2) { step3(value2, function(value3) { step4(value3, function(value4) { // ... }); }); }); }); 如果我们要执行的任务是一个异步任务,并且有多个步骤,后一个步骤的执行需要使用到前一个步骤的执行结果,那么就极有可能出现上述的情况,即多层嵌套回调函数的书写方式。 这种写法当然在一定程度上也会给我们造成困扰,因为嵌套层次太多,对于代码的阅读来说也变得更加困...

阅读更多

PHP 流程控制语句

编程语言中的流程控制语句大都主要分为以下几类: 顺序结构 条件结构 循环结构 跳转语句 顺序结构是最基本的流程控制语句,按照书写顺序从上向下依次执行,不过多赘述。 1. 条件结构 PHP 中的条件结构主要有以下几种: 简单 if 语句 if-else if-else if-else switch 和大多数其它编程语言类似,先来看看条件结构的语法。 1.1 简单 if 语法: 1 2 3 if (expr) { // statement; } 如果 expr 表达式为真,则执行 statement 语句块,否则,跳过该结构继续向后执行。 1 2 3 4 5 6 7 $num1 = 34; $num2 = 10; if ($...

阅读更多

PHP 语言基础

1. PHP 标记 PHP 文件的默认扩展名为 .php,在 PHP 文件中通常包含 HTML 标签和一些 PHP 脚本代码。我们可以将 PHP 脚本放在文档的任何位置,但为了与 HTML 元素区分开,需要使用一些特殊的标记来进行区分。 1.1 标准风格 将 PHP 脚本用 <?php ?> 的标记包含起来: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>第一个 PHP 页面</title> </head> <body> <h1>第一个 PHP 页面</h...

阅读更多

PHP 集成环境搭建

俗话说,工欲善其事,必先利其器。要学习 PHP 开发,也必须先搭建能够运行 PHP 的环境。 作为入门介绍,不推荐完全自己配置并搭建环境,因为自己搭建环境就得独立安装 apache、php、mysql及各种管理工具,然后再进行相关配置,这无疑增加了入门难度。 推荐使用 PHP 集成环境来学习 PHP 开发,下面以 wampserver 集成开发环境为例在 32 位 windows 操作系统中介绍 PHP 环境安装。 下载 wampserver 官方网站为 http://www.wampserver.com/en/,点击导航中 DOWNLOAD 下载,根据操作系统位数选取 32 位或 64 位版本下载。 下载完毕后不能立刻安装,因为要安装 wmap 还需要 VC++ 运行库...

阅读更多

JavaScript 中 offsetTop、offsetLeft 与 offsetParent 的使用

相对整个文档来说,某一个 DOM 元素定位位置我们该如何获取呢。我们可以使用 offsetTop、offsetLeft 与 offsetParent 这几个属性来解决。 1. offsetParent offsetParent 是一个只读属性,返回一个指向最近的(closest,指包含层级上的最近)包含该元素的定位元素。如果没有定位的元素,则 offsetParent 为最近的 table 元素对象或根元素(标准模式下为 html;quirks 模式(怪异模式/兼容模式)下为 body)。当元素的 style.display 设置为 “none” 时,offsetParent 返回 null。 语法: 1 parentObj = element.offsetParent; ...

阅读更多

JavaScript 事件

1. 关于事件驱动 当用户通过浏览器与页面实现交互体验时,鼠标键盘的操作完成后,如何使得页面能够响应用户的操作,事件驱动这一概念就由此而来。 当然事件驱动不仅体现在用户与页面间的交互,也体现在使用操作系统的时时刻刻。比如双击 window 系统桌面“我的电脑”图标,操作系统打开一个窗口供我们查看各盘符信息。 我们首先来简单的说明一下什么是事件与事件响应程序。 用户通过鼠标或键盘(不仅限于这两种设备)执行的操作就称为事件,当事件发生后,系统做出响应,这段响应的代码就称为是事件响应程序(或事件处理程序),主要是完成具体的响应任务。 事件的发生使得相应的事件处理程序被执行就称为事件驱动。 下面再简单的说一说事件驱动模型。事件驱动模型的三要素主要为: 事件源:即能够接收外部...

阅读更多

JavaScript 中的 HTML DOM 操作

1. 简介 DOM(Document Object Model,文档对象模型),是一个 HTML、XML 和 SVG 的编程接口,它将结构化表示的文档映射为一棵树。DOM 定义了一些允许访问这棵树的方法,因此这些方法可以改变文档结构、样式以及内容。 DOM 以节点和对象的结构化组提供文档的结构化表现,拥有各种属性和方法。节点也可以绑定事件句柄,一旦事件被触发,事件句柄将被调用执行。本质上它是将网页链接到脚本或是编程语言上。 尽管通常会使用 JavaScript 来访问 DOM, 但它并不是 JavaScript 的一部分,它也可以被其他语言使用。DOM被设计成独立于任何编程语言,通过单一的、一致的 API,可以访问结构化表现的文档。 2. HTML DOM 树 HTML 文档...

阅读更多

JavaScript 定时器

1. 简介 我们经常能够在页面中见到这样的效果:打开页面时,自动在页面中打开一张广告图片,广告显示一段时间后又自动关闭了。 要达到这样的效果,JavaScript 提供定时执行代码的功能,叫做定时器(timer),主要由 setTimeout() 和 setInterval() 这两个函数来完成。 2. setTimeout() setTimeout() 函数用来指定某个函数或某段代码,在延迟指定的毫秒之后被执行。它返回一个整数,表示定时器的编号,以后可以用来取消这个定时器。 语法结构如下: 1 2 var timeoutID = window.setTimeout(func[, delay, param1, param2, ...]); var timeoutID = w...

阅读更多

JavaScript 运行机制之 Event Loop

1. 单线程的 JavaScript JavaScript 语言的一大特点就是单线程。所谓单线程,就是在程序执行时,所走的程序路径按照连续顺序排下来,前面的必须处理好,后面的才会执行,也就是说,同一个时间只能做一件事。 那么,为什么 JavaScript 不能有多个线程呢?那样就能提高效率了啊。 这大概跟历史有关系吧,JavaScript 从诞生之初就是单线程,当然也与它的用途有关。作为浏览器的脚本语言,JavaScript 的主要用途是与用户互动,以及操作 DOM。如果使用多线程,则需要在各线程间共享资源,就极有可能修改彼此的运行结果,对于一种网页脚本语言来说,这就太复杂了。比如,假定 JavaScript 同时有两个线程,一个线程在某个 DOM 节点上添加内容,另一个线程删除...

阅读更多

JavaScript 内存管理

1. 简介 诸如 C 语言这般的低级语言一般都有低级的内存管理接口,比如 malloc() 和 free()。而另外一些高级语言,比如 JavaScript,其在变量(对象,字符串等等)创建时分配内存,然后在它们不再使用时“自动”释放。后者被称为垃圾回收。“自动”是容易让人混淆,迷惑的,并给 JavaScript(和其他高级语言)开发者一个印象:他们可以不用关心内存管理。然而这是错误的。 2. 内存生命周期 不管什么程序语言,内存生命周期基本是一致的: 分配你所需要的内存 使用分配到的内存(读、写) 不需要时将其释放/归还 在所有语言中第一和第二部分都很清晰,最后一步在低级语言中很清晰,但是在像 JavaScript 等高级语言中,这一步是隐藏的、透明的。 ...

阅读更多

JavaScript 排序算法

关于排序 维基百科关于排序算法的描述如下: 在计算机科学与数学中,一个排序算法(英语:Sorting algorithm)是一种能将一串数据依照特定排序方式进行排列的一种算法。最常用到的排序方式是数值顺序以及字典顺序。有效的排序算法在一些算法(例如搜索算法与合并算法)中是重要的,如此这些算法才能得到正确解答。排序算法也用在处理文字数据以及产生人类可读的输出结果。基本上,排序算法的输出必须遵守下列两个原则: 输出结果为递增序列(递增是针对所需的排序顺序而言) 输出结果是原输入的一种排列、或是重组 虽然排序算法是一个简单的问题,但是从计算机科学发展以来,在此问题上已经有大量的研究。举例而言,冒泡排序在1956年就已经被研究。虽然大部分人认为这是一个已经被解决的问...

阅读更多

ES5 新特性之 Array 增强 API

1. 简介 ECMAScript 1.0 是 1997 年发布的,接下来的两年,连续发布了 ECMAScript 2.0(1998年6月)和 ECMAScript 3.0(1999年12月)。3.0版是一个巨大的成功,在业界得到广泛支持,成为通行标准,奠定了 JavaScript 语言的基本语法,以后的版本完全继承。直到今天,初学者一开始学习 JavaScript,其实就是在学 3.0 版的语法。 2008 年 7 月,ECMA 发布 ECMAScript 3.1,不久又将 ECMAScript 3.1 改名为 ECMAScript 5。 ES5 中新增的不少内容,了解这些对我们编写 JavaScript 会有不少帮助。就数组这块,ES5 对 Array 新增了9个方法,比如要实...

阅读更多