JavaScript大杂烩11 - 理解事件驱动

前面我们回顾了前端JavaScript只干的两件事:操作BOM与操作DOM,那么什么时候去干这些事呢?答案是需要干的时候去干.那么什么时候是需要干的时候呢?答案是事件被触发的时候.这就是通常所说的“事件驱动开发”.在事件被触发之前,所有的结构被静态的呈现出来,在事件触发滞后,动态的行为发生,重新产生新的静态结构,事件与状态构成了事件驱动开发的基本要素.下面我们来看看JavaScript中事件的方方面面. 事件的类型事件指由用户直接触发的行为,通常包括下列各种事件: 鼠标事件: 鼠标单击(c…

JavaScript大杂烩12 - 理解Ajax

AJAX缘由再次谈起这个话题,我深深的记得就在前几年,AJAX被炒的如火如荼,就好像不懂AJAX,就不会Web开发一样.要理解AJAX为什么会出现,就要先了解Web开发面临的问题. 我们先来回忆一下Web页面的申请过程,这个咱们在第一篇中就介绍过了:Web页面开发就是在无连接和无状态的HTTP协议上管理页面的状态.每次申请页面的时候,服务器都会返回完整的HTML文本(当然还有其他的文本文件),浏览器就负责解析这个文本并在浏览器中显示. 在这个过程中,不管当前页面的内容是不是都变化了,服务器都会…

JavaScript大杂烩3 - 理解JavaScript对象的封装性

JavaScript是面向对象的 JavaScript是一种基于对象的语言,你遇到的所有东西,包括字符串,数字,数组,函数等等,都是对象. 面向过程还是面向对象? JavaScript同时兼有的面向过程(函数)的编程体验和面向对象的编程风格,其实对于很多人来说,完全的函数式编程可以很好的解决相关问题,比如荷兰的ppk(著有<ppk谈JavaScript>一书,是JavaScript经典的著作之一)就很擅长使用面向函数的方式解决问题,而对与面向对象编程,使用的反而少了一点:其实对于大多数的页面来…

JavaScript大杂烩1 - 理解JavaScript的类型系统

随着硬件水平的逐渐提高,浏览器的处理能力越来越强大,本人坚信,客户端会越来越瘦,瘦到只用浏览器就够了,服务端会越来越丰满:虽然很多大型的程序,比如3D软件,客户端仍然会存在,但是未来的主流必将是浏览器,也就是Web程序/网站. Web前端开发模式:Thinking in "DIV + CSS + JS (JavaScript)" 任何面向用户的程序,最终都表现为3个部分:界面,逻辑,数据.而经过几十年的编程实践,大家都发现,当把这3个部分以弱耦合的形式结合起来的时候,开发的灵活性和效率…

JavaScript大杂烩10 - 理解DOM

操作DOM 终于到了JavaScript最为核心的部分了,通常来说,操作DOM,为页面提供更为友好的行为是JavaScript根本目标. DOM树 - HTML结构的抽象既然DOM是操纵HTML文档的,那么必然是先要将HTML文档抽象成JavaScript的对象,这样才能使用JavaScript去操作它们. HTML文档抽象的结果是DOM树 - 一棵与HTML结构对应的JavaScript对象组成的树. 先看一个简单的HTML页面: <!doctype html> <html>…

JavaScript大杂烩9 - 理解BOM

毫无疑问,我们学习JavaScript是为了完成特定的功能.在最初的JavaScript类型系统中,我们已经分析过JavaScript在页面开发中充当着添加逻辑的角色,而且我们知道JavaScript不仅仅包含基本的语法规范.下面我们就重点看一下JavaScript在页面中干的那些事.总的来说,JavaScript在页面端就干两件事:操作DOM与操作BOM (当然了向Server获取数据也是它的工作,不过获取到数据后还是回来干这两件事,大家对JavaScript最直接的印象应该就是各种光怪陆离的…

JavaScript大杂烩8 - 理解文本解析的"黄金搭档"

文本解析"黄金搭档" - String与RegExp对象文本解析是任何语言中最常用的功能,JavaScript中也是一样,而正则表达式作为最常用的方式,JavaScript也同样是支持的,下面就来看看字符串对象与正则表达式对象的配合. 字符串的恒定性在正式开始讨论字符串对象的成员之前,我们需要了解一点,那就是:与C#一样,JavaScript 的字符串是不可变的(immutable),String对象定义的方法都不会改变字符串的内容.像toUpperCase这样的方法,返回的是…

JavaScript大杂烩7 - 理解内置集合

JavaScript内置了很多对象,简单的类型如String,Number,Boolean (相应的"值类型"拥有相同的方法),复杂一点的如Function,Object,Array,它们支撑起来JavaScript编程的基石.由于Number与Boolean很简单,这里就不多说了,下面着重介绍其他的内置对象. 万物之源 - Object对象 JavaScript是单根的,唯一的根就是Object对象,这个对象提供了几个还是不错的方法,值得了解一下. 1. hasOwnProper…

JavaScript大杂烩6 - 理解JavaScript中的this

在JavaScript开发中,this是很常用的一个关键字,但同时也是一个很容易引入bug的一个关键字,在这里我们就专门总结一下页面中可能出现的this关键字(包括几种在其他页面文件中出现的this). JavaScript中的this关键字通常只使用在函数中,它指向当前函数的调用者,这是this关键字的本质,所有的使用方式都是围绕这个展开的,让我们来看一下在各种性质的函数中this的用法.1. 在对象的函数中使用this var person = { name: 'Frank', say: f…

JavaScript大杂烩4 - 理解JavaScript对象的继承机制

JavaScript是单根的完全面向对象的语言 JavaScript是单根的面向对象语言,它只有单一的根Object,所有的其他对象都是直接或者间接的从Object对象继承.而在JavaScript的众多讨论中,JavaScript的继承机制也是最让人津津乐道的,在了解它的机制之前,先让我们温习一下继承的本质. 继承的本质继承的本质是重用,就是这么简单,重用是软件编程技术向前发展最原始的动力.从语法上来讲,继承就是"D是B"的描述,其中B是基类,描述共性,D是子类,描述特性.例如&q…

JavaScript大杂烩2 - 理解JavaScript的函数

JavaScript中的字面量书接上回,我们已经知道在JavaScript中存在轻量级的string,number,boolean与重量级的String,Number,Boolean,而且也知道了之间的区别.这里补充一点,直接使用字面量定义的变量都是属于前一种类型,例如: var name = 'Frank'; 此外大多数的内置操作返回的也都是前一种类型,这是必须的. function是第一等公民与别的语言不同,在JavaScript中,函数是作为数据类型存在的,所以函数具有数据的静态行为.…

JavaScript学习11 数组排序实例

JavaScript学习11 数组排序实例数组声明关于数组对象的声明,以前说过:http://www.cnblogs.com/mengdd/p/3680649.html 数组声明的一种方式: var array = new Array(); array.push(1); array.push(2); array.push(3); alert(array.length) 数组声明的第二种方式,并排序: var array = [1, 3, 25]; array.sort(); //对数组排序,…

javascript单例模式的理解

javascript单例模式的理解阅读目录理解单例模式使用代理实现单例模式理解惰性单例编写通用的惰性单例单例模式使用场景回到顶部理解单例模式单例模式的含义是: 保证一个类只有一个实例,并提供一个访问它的全局访问点.实现的方法是:使用一个变量来标志当前是否已经为某个类创建过对象,如果创建了,则在下一次获取该类的实例时,直接返回之前创建的对象,否则就创建一个对象.这就确保了一个类只有一个实例对象. 比如如下代码是一个简单的单例模式代码实例: var Singleton = func…

JavaScript面向对象的理解

JavaScript面向对象的理解笔记链接: http://pan.baidu.com/s/1c0hivuS 1:JavaScript 中分两种对象,函数对象和普通对象new Function() 创建的对象都是函数对象.其他的都是普通对象.函数对象例: function f1(){}; var f2 = function(){}; var f3 = new Function('str','console.log(str)'); 普通对象例: var o3 = new f1(); var…

JavaScript设计模式-11.桥梁模式

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Javascript高级语法11-桥梁模式</title> </head> <body> <script> /*桥梁模式:把将抽象与实现隔离开来,以便两者单独的变化. * 这种模式对于javascript中常见的事件驱动编程有很大好处. */ //自己的类库 f…

javascript javascript面向对象的理解及简单的示例

javascript面向对象的理解及简单的示例零.本节重点: 1.封装: 2.继承: 壹.下面理解: 一. javascript面向对象概念: 为了说明 JavaScript 是一门彻底的面向对象的语言,首先有必要从面向对象的概念着手 , 探讨一下面向对象中的几个概念: 1.一切事物皆对象 2.对象具有封装和继承特性 3.对象与对象之间使用消息通信,各自存在信息隐藏以这三点做为依据,C++ 是半面向对象半面向过程语言,因为,虽然他实现了类的封装.继承和多态,但存在非对象性质的全局函数和变量.…

Javascript：必须知道的Javascript知识点之“单线程事件驱动”

heiboard: Javascript:必须知道的Javascript知识点之“单线程事件驱动”…

javaScript深入浅出之理解闭包

javaScript深入浅出之理解闭包引言闭包是个老生长谈的话题了,对于闭包网上也有很多不同的看法 <你不知道的javaScript>对于闭包是这么定义的:函数创建和函数执行不在同一个作用域下就会形成闭包. MDN对于闭包的定义为:闭包是指那些能够访问自由变量的函数. <JS高级程序设计-第3版>对于闭包的定义: 闭包是指有权访问另外一个函数作用域中的变量的函数好,现在你不用着急去搞明白它们的意思,我们先来讲下自由变量这个是个什么东西. 自由变量自由变量:是指在函数中使用的…

JavaScript大杂烩17 - 性能优化

在上一节推荐实践中其实很多方面是与效率有关的,但那些都是语言层次的优化,这一节偏重学习大的方面的优化,比如JavaScript脚本的组织,加载,压缩等等. 当然在此之前,分析一下浏览器的特征还是很有意义的. 浏览器的特征1. 浏览器的渲染过程在详细讨论脚本文件的优化前,我们先来看一下浏览器是如何渲染一个HTML页面的. 当浏览器渲染一个HTML页面的时候,它总是从页面的开始位置按顺序向页面末尾依次渲染,当页面遇到引用外部文件的时候(JavaScript脚本,CSS文件等),页面渲染就会停下来等…

加深对 JavaScript This 的理解

我相信你已经看过很多关于 JavaScript 的 this 的谈论了,既然你点进来了,不妨继续看下去,看是否能帮你加深对 this 的理解. 最近在看 <You Dont Know JS> 这本书,不得感叹,就算用了 JS 很多年的老前端来看这本书,我觉得还是会有不少的收获. 其中关于 this 的讲解,更是加深了我对 this 的理解,故整理知识点,再加上自身的理解,以自己的语言来描述. 对读者来说,算是二手知识,这本书是开源的,可以到本书的 Github 项目地址学习一手的知识. 首先有…

JavaScript this的理解

一直对js的this不怎么理解,最近看了JavaScript 语言精髓的相关章节,有点清晰的理解了,记录记录 /* 来自: JavaScript 语言精髓方法:当一个函数被定义为对象的一个属性时,我们称它为一个方法. this : 在函数访问this时,this被绑定到了全局对象. */ //全局函数 var log = function(msg){ document.writeln("<br>" + msg + "<br>"); };…

JavaScript：彻底理解同步、异步和事件循环(Event Loop) （转）

原文出处:https://segmentfault.com/a/1190000004322358 一. 单线程我们常说"JavaScript是单线程的". 所谓单线程,是指在JS引擎中负责解释和执行JavaScript代码的线程只有一个.不妨叫它主线程. 但是实际上还存在其他的线程.例如:处理AJAX请求的线程.处理DOM事件的线程.定时器线程.读写文件的线程(例如在Node.js中)等等.这些线程可能存在于JS引擎之内,也可能存在于JS引擎之外,在此我们不做区分.不妨叫它们工作线程…

通过JavaScript原型链理解基于原型的编程

零.此文动机用了一段时间的Lua,用惯了Java C++等有Class关键字的语言,一直对Lua的中的面向对象技术感到费解,一个开源的objectlua更是看了n遍也没理解其中的原理,直到看到了Prototype-based programming 一.什么是基于原型的编程基于原型的编程是面向对象编程的一种形式,通过复制已经存在的原型对象来实现面向对象,无与基于类的编程较大的区别是没有Class关键字,但是有类的概念.基于原型的编程也可以理解成基于实例的编程. 基于原型的系统可以在程序运行时…

细心看完这篇文章，刷新对Javascript Prototype的理解

var person={name:'ninja'}; person.prototype.sayName=function(){ return this.name; } 分析上面这段代码,看看有没有问题? 没错,这段代码是有问题的,我们可以通过Chrome看一下执行结果: 错误提示说找不到sayName 属性,不是记得说Javascript可以随时新增属性的吗?没错,Javascript确实可以添加属性,但是不是针对对象实例本身的,而是针对其对实例对象所属的类型的对象的.是不是听起来有些别扭,没错…

【JavaScript】深入理解JavaScript之强大的原型和原型链

由于JavaScript是唯一一个被广泛使用的基于原型继承的语言,所以理解两种继承模式的差异是需要一定时间的,今天我们就来了解一下原型和原型链. AD: hasOwnProperty函数: hasOwnProperty是Object.prototype的一个方法,它可是个好东西,他能判断一个对象是否包含自定义属性而不是原型链上的属性,因为hasOwnProperty 是 JavaScript 中唯一一个处理属性但是不查找原型链的函数. // 修改Object.prototype Object.p…

对javascript this的理解

对于this的理解,大部分时间都比较模糊,最近几天做了一些研究,记录一下首先应该明白,this是执行上下文的一个属性,它的值取决于执行上下文,执行上下文和函数调用方式相关,定义一个function的时候会激活一个上下文,关于上下文的介绍,参考<对javascript执行上下文的理解>一文. this的几种使用场景: 一 .全局代码中的this 在全局的上下文中,this始终是全局对象本身,看代码: this.a = 10; alert(window.a); b = 20; alert( va…

javascript基础之客户端事件驱动

我们知道,面向对象发展起来后,“一夜之间”,几乎所有的语言都能基于对象了,JavaScript也是基于对象的语言.用户在浏览器上的行为称作“事件”,之后引发的一系列动作,比如弹窗啦,改变浏览器大小啦,验证啦,balabala,都叫做“事件驱动”.当然,这次我主要介绍几个常常发生的事件. ps:对于js脚本的支持以浏览器而定!!!有的低版本的浏览器可能不支持!!! 1.单击事件(onClick) 啥叫单击事件呢?当用户单击鼠标按钮是,就会产生单击事件.同时onclick指定的事件处理程序将会被调用…