`
zoutuo1986
  • 浏览: 178940 次
  • 性别: Icon_minigender_1
  • 来自: 长沙
社区版块
存档分类
最新评论

《编写可维护的 JavaScript》笔记三

 
阅读更多

copy from  小叉  http://ciaoca.com/#!diary?id=233

 

 

-----------------------------------------------------------------------------

【第5章 UI层的松耦合】

在 Web 开发中,用户界面(User Interfaoe, UI)是由三个彼此隔离又相互作用的层定义的。

  • HTML 用来定义页面的数据和语义。

  • CSS 用来给页面添加样式,创建视觉特征。

  • JavaScript 用来给页面添加行为,使其更具交互性。

 

5.1 将 JavaScript 从 CSS 中抽离

避免使用 CSS 表达式(CSS Expression)

※ IE9 不再支持 CSS 表达式

 

5.2 将 CSS 从JavaScript 中抽离

修改 DOM 元素的 className,而不是修改 DOM 元素的 style

// 原生方法 
element.className += "newclass"; 
 
// HTML5 
element.classList.add("newclass"); 
 
// YUI 
Y.one(element).addClass("newclass"); 
 
// jQuery 
$(element).addClass("newclass"); 
 
// Dojo 
dojo.addClass(element, "newclass");

※ 在重新给元素定位时,可以直接修改 style 的 top、left、bottom、right 属性,因为在 CSS 中无法完成。可以在 CSS 中定义元素的默认属性,而在 JavaScript 中修改这些默认属性。

 

5.3 将 JavaScript 从 HTML 中抽离

避免使用 on 属性(例如 onclick)来绑定事件处理程序:

// 不好的写法 
<botton onclick="doSomething()" id="action-btn">Click Me</button>

使用 JavaScript 方法来添加事件处理程序,更好的方法:

function addListener(target, type, handler) { 
    if (target.addEventListener) { 
        target.addEventListener(target, type, handler); 
    } else if (target.attachEvent) { 
        target.attachEvent("on" + type, handler); 
    } else { 
        target["on" + type] = handler; 
    } 
} 
 
function doSomething(){ 
    // 代码 
} 
var btn = document.getElementById("action-btn"); 
addListener(btn, "click", doSomething);

一些常见类库的方法:

// YUI 
Y.one("#action-btn").on("click", doSomething); 
 
// jQuery 
$("#action-btn").on("click", doSomething); 
 
// Dojo 
var btn = dojo.byId("action-btn"); 
dojo.connect(btn, "click", doSomething);)

 

5.4 将 HTML 从 JavaScript 中抽离

方法 1:从服务器加载

将模板放在服务器,通过 Ajax 方法从服务器读取模板。

 

方法 2:简单客户端模板

通过一些标识,通过 JavaScript 替换内容。

 

方法 3:复杂客户端模板

使用模板引擎,如:Handlebars(http://handlebarsjs.com)。

 

 

【第6章 避免使用全局变量】

在浏览器中, window 对象往往重载并等同于全局对象,因此任何在全局作用域中声明的变量和函数都是 window 对象的属性。

  • 始终使用 var 声明变量

  • 使用命名空间

  • 使用模块

 

“异步模块定义”(AMD)

AMD 规范:https://github.com/amdjs/amdjs-api/wiki/AMD

 

零全局变量(匿名函数)

(function(win){ 
    var doc=win.document; 
    // 在这里定义其他的变量 
    // 其他相关代码 
})(window);

 

 

【第7章 事件处理】

当事件触发时,事件对象(event 对象)会作为回调参数传入事件处理程序中。event 对象包含所有和事件相关的信息,包括事件的宿主(target)以及其他和事件类型相关的数据。

  • 鼠标事件会将其位置信息暴露在 event 对象上;

  • 键盘事件会将按键的信息暴露在 event 对象上;

  • 触屏事件会将触摸位置和持续时间(duration)暴露在 event 对象上。

 

规则:

  1. 隔离应用逻辑

  2. 不要分发事件对象

 

 

【第8章 避免“空比较”】

8.1 检测原始值

检测字符串、数字、布尔值或 undefine,最佳选择是使用 typeof 运算符。

  • 对于字符串,typeof 返回“string”

  • 对于数字,typeof 返回“number”

  • 对于布尔值,typeof 返回“boolean”

  • 对于 undefined,typeof 返回“undefined”

 

8.2 检测引用值

引用值也称作对象(object)。

在 JavaScript 中除了原始值之外的值都是引用。

内置的引用类型:Object、Array、Date 和 Error。

typeof 运算符在判断这些引用类型时都会返回“object”。

检测某个引用值的类型的最好方法是使用 instanceof 运算符。instanceof 的基本语法是:

value instanceof constructor 
 
// 例子:检测日期 
if (value instanceof Date{ // 代码 } 
 
// 例子:检测正则表达式 
if (value instanceof RegExp{ // 代码 } 
 
// 例子:检测 Error 
if (value instanceof Error{ // 代码 }

instanceof 不仅检测对象的构造器,还检测原型链。默认情况下,每个对象都继承自 Object,因此每个对象的 value instanceof Object 都会返回 true。

※ instanceof 不支持跨 frame

 

8.2.1 检测函数

检测函数最好的方法是使用 typeof 运算符。

对于函数,typeof 返回“function”。

※ 在 IE 8 及以下的 IE 中,使用 typeof 来检测 DOM 节点(比如:document.getElementById())中的函数都会返回“object”而不是“function”。

 

8.2.2 检测数组

ECMAScript5 将 Array.isArray() 正式引入 JavaScript。

// 兼容旧浏览器的方法 
function isArray(value) { 
    if (typeof Array.isArray === "function"{ 
        return Array.isArray(value); 
    } else { 
        return Object.prototype.toString.call(value) === "[object Array]"; 
    } 
}

※ IE 9+、Firefox 4+、Safari 5+、Opera 10.5+ 和 Chrome 都实现了 Array.isArray() 方法。

 

8.3 检测属性

判断属性是否存在的最好的方法是使用 in 运算符。

in 运算符仅仅会简单的判断属性是否存在,而不会去读属性的值。如果对象的属性存在,或者继承自对线的原型,in 运算符都会返回 true。

 

如果你只想检查实例对象的某个属性是否存在,则使用 hasOwnProperty() 方法。如果实例中存在这个属性则返回 true(如果这属性值存在于原型里,则返回 false)。

※ 在 IE 8 及以下的 IE 中,DOM 对象并非继承自 Object。

分享到:
评论

相关推荐

    《李炎恢Javascript笔记》+源码

    《李炎恢Javascript笔记》是一本深入浅出的JavaScript学习资料,它涵盖了JavaScript的基础到实践应用的诸多方面。这本书的特点是将复杂的编程概念分解为易于理解的小知识点,并且提供了源码示例,使得读者能够更好地...

    JavaScript 笔记

    外部JavaScript文件的引用是提高代码可维护性和减少页面加载时间的有效手段。通过使用`&lt;script src="xxx.js"&gt;&lt;/script&gt;`标签,你可以链接到一个单独的.js文件,这个文件包含所有必要的JavaScript代码。注意,外部...

    韩顺平javascript笔记(最全整理 dom编程 oop 基础语法)

    理解这些基本概念有助于编写出高效、可维护的代码。 其次,面向对象编程(OOP)是JavaScript进阶的关键。JavaScript虽然是一种基于原型的面向对象语言,但它同样支持类的概念。对象可以通过构造函数创建,通过原型...

    JavaScript总结笔记

    ### JavaScript总结笔记 #### JavaScript简介 JavaScript是一种广泛使用的、基于对象和事件驱动的脚本语言。...无论是前端交互逻辑的编写还是后端服务器端的开发,JavaScript都是不可或缺的技术之一。

    JavaScript_Demo,文章《JavaScript笔记》配套代码

    这篇文章《JavaScript笔记》的配套代码提供了丰富的实例,旨在帮助读者深入理解和掌握JavaScript的基本概念、语法以及应用技巧。 首先,我们来看看“JS笔记”部分。在学习JavaScript时,理解变量的声明、数据类型...

    javascript学习笔记

    ### JavaScript学习笔记精要 #### JavaScript简介 JavaScript是一种强大的、多用途的脚本语言,用于增强网站的交互性和用户体验。它是由Netscape公司的Brendan Eich在1995年发明的,并且迅速成为了Web开发的标准之...

    javascript 高级程序设计 读书笔记(3)

    《JavaScript高级程序...通过对这些概念的深入理解和实践,开发者可以编写出更加高效、可维护的代码。"listutil.js"文件可能展示了如何使用JavaScript实现实用的工具函数,这也是提升代码复用性和效率的一个关键实践。

    javascript读书笔记

    JavaScript是Web开发中不可...良好的变量命名习惯、类型理解和转换技巧能帮助编写更清晰、易于维护的代码。继续深入学习,你将掌握更多高级特性,如作用域、闭包、原型链、异步编程等,进一步提升你的JavaScript技能。

    JavaScript心得笔记

    这样,可以将JavaScript代码组织到单独的文件中,提高代码的可维护性和复用性。需要注意的是,导入的JavaScript文件中无需包含`&lt;script&gt;`标签。 在导入外部文件时可能出现的问题是,如果JavaScript文件未正确加载或...

    JavaScript笔记

    总的来说,这份JavaScript笔记涵盖了从基础语法到高级特性的全面内容,通过实例和代码示例,帮助学习者逐步理解并掌握JavaScript,从而能够编写出功能丰富的网页交互效果。无论你是初学者还是有经验的开发者,都能...

    面向对象javascript笔记

    面向对象的JavaScript编程是JavaScript开发中的重要概念,它允许我们以类和对象的...以上就是对"面向对象javascript笔记"所涵盖知识点的详细解析。理解并掌握这些概念对于深入理解和高效地编写JavaScript代码至关重要。

    JavaScript笔记精华

    这份“JavaScript笔记精华”集合了JavaScript的核心概念、语法和实践技巧,对于初学者和寻求提升的开发者来说是一份宝贵的资源。 笔记首先可能涵盖了基础概念,如变量、数据类型和操作符。JavaScript支持动态数据...

    JavaScript入门课件与笔记

    5. **闭包与作用域**:这是JavaScript中的重要概念,理解它们可以帮助你编写更高效、更易于维护的代码。 6. **原型与继承**:JavaScript的面向对象特性主要通过原型链来实现,理解原型、构造函数、实例、继承等概念...

    javaScript笔记

    这份“JavaScript笔记”包含了JS的基础知识,旨在帮助开发者更好地理解和运用这门语言,避免编程过程中的常见问题。以下是笔记中可能涵盖的一些关键知识点: 1. **变量与数据类型**: - JavaScript支持var、let和...

    javascript高级 笔记

    JavaScript,作为一种广泛应用于Web开发的脚本语言,是...这份"javascript高级 笔记"将带你深入探索JavaScript的世界,通过学习这些知识点,你将能够编写出更高效、可维护的代码,为成为专业前端开发者奠定坚实的基础。

    JavaScript高级编程笔记

    ### JavaScript高级编程笔记 #### 一、对象 在JavaScript中,对象是一种非常重要的数据类型,它允许我们组织和处理复杂的数据结构。理解对象的概念对于掌握这门语言至关重要。 ##### 1. 什么是对象? 对象可以被...

    javascript笔记整理

    JavaScript是一种广泛应用于网页和网络应用开发的脚本语言,由Netscape公司在1995年与Sun公司合作开发,并首次在Netscape Navigator 2.0中...随着技术的发展,JavaScript已经成为构建现代网络应用不可或缺的一部分。

    Javascript学习笔记.docx

    了解这些基本概念对于编写高效、可维护的JavaScript代码至关重要。 总的来说,JavaScript是一门强大的脚本语言,它与HTML、CSS紧密配合,为网页提供丰富的交互体验。熟练掌握JavaScript的基本概念和高级特性,将有...

    Javascript高级笔记总结.pdf

    JavaScript是Web开发中不可或缺的一部分,它负责为网页添加动态效果和交互性。在JavaScript中,ES6(ECMAScript 2015)引入了许多新特性,极大地提升了开发效率和代码质量。本篇笔记主要围绕ES6中创建变量的新方法...

Global site tag (gtag.js) - Google Analytics