什么是javascript模块化

2017年02月06日 8 阅读

什么是javascript模块化2014-09-12如今backbone、emberjs、spinejs、batmanjs 等MVC框架侵袭而来。CommonJS、AMD、NodeJS、RequireJS、SeaJS、curljs等模块化的JavaScript扑面而来。web前端已经演变成大前端，web前端的发展速度之快。1）我们来看看什么是模块化？模块化是一种将系统分离成独立功能部分的方法，可将系统分割成独立的功能部分，严格定义模块接口、模块间具有透明性...

简介Javascript的10个设计缺陷

2017年02月06日 8 阅读

简介Javascript的10个设计缺陷2014-09-12 阮一峰 前几篇文章，我经常说Javascript的设计不够严谨，有很多失误。今天的这一篇，前半部分就谈为什么会这样，后半部分将列举Javascript的10个设计缺陷。我参考的文献主要是Douglas Crockford的专著《Javascript语言精粹》（JavaScript: The Good Parts）和Fredrik Holmstrm的文章《我对Javascript的抱怨》（My g...

Javascript继承机制的设计思想

2017年02月06日 8 阅读

Javascript继承机制的设计思想2014-09-12 阮一峰 我一直很难理解Javascript语言的继承机制。它没有"子类"和"父类"的概念，也没有"类"（class）和"实例"（instance）的区分，全靠一种很奇特的"原型链"（prototype chain）模式，来实现继承。我花了很多时间，学习这个部分，还做了很多笔记。但是都属于强行记忆，无...

如何判断Javascript对象是否存在

2017年02月06日 8 阅读

如何判断Javascript对象是否存在2014-09-12 阮一峰 Javascript语言的设计不够严谨，很多地方一不小心就会出错。举例来说，请考虑以下情况。现在，我们要判断一个全局对象myObj是否存在，如果不存在，就对它进行声明。用自然语言描述的算法如下：if （myObj不存在）{声明myObj;}你可能会觉得，写出这段代码很容易。但是实际上，它涉及的语法问题，远比我们想象的复杂。Juriy Zaytsev指出，判断一个Javascript对象是...

快速排序（Quicksort）的Javascript实现

2017年02月06日 8 阅读

快速排序（Quicksort）的Javascript实现2014-09-12 阮一峰 日本程序员norahiko，写了一个排序算法的动画演示，非常有趣。这个周末，我就用它当做教材，好好学习了一下各种排序算法。排序算法（Sorting algorithm）是计算机科学最古老、最基本的课题之一。要想成为合格的程序员，就必须理解和掌握各种排序算法。目前，最常见的排序算法大概有七八种，其中"快速排序"（Quicksort）使用得最广泛，速度也较...

Javascript 面向对象编程（一）封装

2017年02月06日 8 阅读

Javascript 面向对象编程（一）封装2014-09-12 阮一峰 学习Javascript，最难的地方是什么？我觉得，Object（对象）最难。因为Javascript的Object模型很独特，和其他语言都不一样，初学者不容易掌握。下面就是我的学习笔记，希望对大家学习这个部分有所帮助。我主要参考了以下两本书籍：《面向对象的Javascript》（Object-Oriented JavaScript）《Javascript高级程序设计（第二版）》（P...

Javascript面向对象编程（二） 构造函数的继承

2017年02月06日 8 阅读

Javascript面向对象编程（二） 构造函数的继承2014-09-12这个系列的第一部分，主要介绍了如何"封装"数据和方法，以及如何从原型对象生成实例。今天要介绍的是，对象之间的"继承"的五种方法。比如，现在有一个"动物"对象的构造函数。function Animal（）{this.species = "动物";}还有一个"猫"对象的构造函数。funct...

Javascript面向对象编程（三） 非构造函数的继承

2017年02月06日 8 阅读

Javascript面向对象编程（三） 非构造函数的继承2014-09-12 阮一峰 这个系列的第一部分介绍了"封装"，第二部分介绍了使用构造函数实现"继承"。今天是最后一个部分，介绍不使用构造函数实现"继承"。一、什么是"非构造函数"的继承？比如，现在有一个对象，叫做"中国人"。var Chinese = { nation:"中国" };还有一个对...

Javascript中this的用法

2017年02月06日 8 阅读

Javascript中this的用法2014-09-12 阮一峰 this是Javascript语言的一个关键字。它代表函数运行时，自动生成的一个内部对象，只能在函数内部使用。比如，function test（）{ this.x = 1;}随着函数使用场合的不同，this的值会发生变化。但是有一个总的原则，那就是this指的是，调用函数的那个对象。下面分四种情况，详细讨论this的用法。情况一：纯粹的函数调用这是函数的最通常用法，属于全局性调用，因此th...

如何用Javascript获取页面元素的位置

2017年02月06日 8 阅读

如何用Javascript获取页面元素的位置2014-09-12 阮一峰 制作网页的过程中，你有时候需要知道某个元素在网页上的确切位置。下面的教程总结了Javascript在网页定位方面的相关知识。一、网页的大小和浏览器窗口的大小首先，要明确两个基本概念。一张网页的全部面积，就是它的大小。通常情况下，网页的大小由内容和CSS样式表决定。浏览器窗口的大小，则是指在浏览器窗口中看到的那部分网页面积，又叫做viewport（视口）。很显然，如果网页的内容能够在浏...

Javascript闭包（Closure）知识学习

2017年02月06日 8 阅读

Javascript闭包（Closure）知识学习2014-09-15 阮一峰 闭包（closure）是Javascript语言的一个难点，也是它的特色，很多高级应用都要依靠闭包实现。下面就是我的学习笔记，对于Javascript初学者应该是很有用的。一、变量的作用域要理解闭包，首先必须理解Javascript特殊的变量作用域。变量的作用域无非就是两种：全局变量和局部变量。Javascript语言的特殊之处，就在于函数内部可以直接读取全局变量。var n=...

JavaScript与有限状态机学习

2017年02月06日 8 阅读

JavaScript与有限状态机学习2014-09-15 阮一峰 有限状态机（Finite-state machine）是一个非常有用的模型，可以模拟世界上大部分事物。简单说，它有三个特征：* 状态总数（state）是有限的。* 任一时刻，只处在一种状态之中。* 某种条件下，会从一种状态转变（transition）到另一种状态。它对JavaScript的意义在于，很多对象可以写成有限状态机。举例来说，网页上有一个菜单元素。鼠标悬停的时候，菜单显示；鼠标移开...

JavaScript Source Map知识详解

2017年02月06日 8 阅读

JavaScript Source Map知识详解2014-09-15 阮一峰 这是2.0版之前的最后一个新版本，有很多新功能，其中一个就是支持Source Map。访问 http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js，打开压缩后的版本，滚动到底部，你可以看到最后一行是这样的：//@ sourceMappingURL=jquery.min.map这就是Source Map。它是...

Javascript的严格模式详解

2017年02月06日 8 阅读

Javascript的严格模式详解2014-09-15 阮一峰 一、概述除了正常运行模式，ECMAscript 5添加了第二种运行模式："严格模式"（strict mode）。顾名思义，这种模式使得Javascript在更严格的条件下运行。设立"严格模式"的目的，主要有以下几个：- 消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;- 消除代码运行的一些不安全之处，保证代码运行的安全；- 提高编...

Javascript如何实现异步编程

2017年02月06日 8 阅读

Javascript如何实现异步编程2014-09-15 阮一峰 你可能知道，Javascript语言的执行环境是"单线程"（single thread）。所谓"单线程"，就是指一次只能完成一件任务。如果有多个任务，就必须排队，前面一个任务完成，再执行后面一个任务，以此类推。这种模式的好处是实现起来比较简单，执行环境相对单纯；坏处是只要有一个任务耗时很长，后面的任务都必须排队等着，会拖延整个程序的执行。常见的浏览器无...

Javascript模块化编程（一）模块的写法

2017年02月06日 8 阅读

Javascript模块化编程（一）模块的写法2014-09-15 阮一峰 随着网站逐渐变成"互联网应用程序"，嵌入网页的Javascript代码越来越庞大，越来越复杂。网页越来越像桌面程序，需要一个团队分工协作、进度管理、单元测试等等......开发者不得不使用软件工程的方法，管理网页的业务逻辑。Javascript模块化编程，已经成为一个迫切的需求。理想情况下，开发者只需要实现核心的业务逻辑，其他都可以加载别人已经写好的模块。但是，...

Javascript模块化编程（二）AMD规范

2017年02月06日 8 阅读

Javascript模块化编程（二）AMD规范2014-09-15 阮一峰 这个系列的第一部分介绍了Javascript模块的基本写法，今天介绍如何规范地使用模块。（接上文）七、模块的规范先想一想，为什么模块很重要？因为有了模块，我们就可以更方便地使用别人的代码，想要什么功能，就加载什么模块。但是，这样做有一个前提，那就是大家必须以同样的方式编写模块，否则你有你的写法，我有我的写法，岂不是乱了套！考虑到Javascript模块现在还没有官方规范，这一点就更...

Javascript模块化编程（三）require.js的用法

2017年02月06日 8 阅读

Javascript模块化编程（三）require.js的用法2014-09-15 阮一峰 这个系列的第一部分和第二部分，介绍了Javascript模块原型和理论概念，今天介绍如何将它们用于实战。我采用的是一个非常流行的库require.js。一、为什么要用require.js？最早的时候，所有Javascript代码都写在一个文件里面，只要加载这一个文件就够了。后来，代码越来越多，一个文件不够了，必须分成多个文件，依次加载。下面的网页代码，相信很多人都见...

Javascript中如何定义类（class）

2017年02月06日 8 阅读

Javascript中如何定义类（class）2014-09-15 阮一峰 将近20年前，Javascript诞生的时候，只是一种简单的网页脚本语言。如果你忘了填写用户名，它就跳出一个警告。如今，它变得几乎无所不能，从前端到后端，有着各种匪夷所思的用途。程序员用它完成越来越庞大的项目。Javascript代码的复杂度也直线上升。单个网页包含10000行Javascript代码，早就司空见惯。2010年，一个工程师透露，Gmail的代码长度是443000行！...

Javascript文件加载：LABjs和RequireJS简介

2017年02月06日 9 阅读

Javascript文件加载：LABjs和RequireJS简介2014-09-15 阮一峰 传统上，加载Javascript文件都是使用<script>标签。就像下面这样：<script type="text/javascript" src="example.js"></script><script>标签很方便，只要加入网页，浏览器就会读取并运行。但是，它存在一些严重...