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 对象上。
规则:
-
隔离应用逻辑
-
不要分发事件对象
【第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。
相关推荐
TypeScript提供了静态类型检查、类、接口、泛型等面向对象编程特性,可以帮助开发人员编写更加健壮、可维护的代码。TypeScript还提供了丰富的工具和编辑器支持,如Visual Studio Code、WebStorm等,可以提高开发效率...
功能性:对数据的操作,表现为数据计算、输⼊输出处理和结果储存等 可编程性:根据⼀系列指令⾃动地、可预测地、准确地完成操作者的意图 源代码:采⽤某种编程语⾔编写的计算机程序,⼈类可读 ⽬标代码:计算机可以...
但是并非所有的对象字面量都是单体,比如说模拟数组或容纳数据的话,那么它就不是单体,但是如果是组织一批相关的属性和方法在一起的话,那么它有可能是单体模式,所以这需要看开发者编写代码的意图; 下面我们来看...
我的笔记记录器应用程序包括可读,可靠且可维护的所有必需代码,这些代码通常为timetimes,node_modules,主要自述文件,屏幕快照图像。 我把我的LinkedIn个人资料,我的github URL存储库,heroku url和电子邮件...
插件使用及编写注意: 配合为知笔记PC端使用 PC端教程中本身要求js为Unicode,ini为Unicode,但git把Unicode作为二进制文件,不利于代码维护。 本处保留js代码为UTF-8形式(需要提示时尽量使用英语,其他语言会导致...
MD文档与操作手册:为了方便他人理解和使用我的作品,我编写了详细的操作手册和使用说明,同时提供了一份Markdown格式的文档,概述了项目的主要功能和特点。 学习笔记:在项目开发过程中,我记录了大量的学习笔记和...
( 1)实现js文件的异步加载,避免网页失去响应 (2)管理模块之间的依赖性,便于代码的编写和维护 (2)deps数组,表明该模块的依赖性
解释执行:Python、JavaScript、PHP,维护灵活程序的基本编写方法:IPO Input输入、Process处理、Output输出 1.3温度转化实例 #TempConvert.py TempStr = input(“请输入带有符号的温度值;”) if TempStr[-1] in [...
电子学习笔记 什么是电子? 您可以使用 node.js (io.js) + Chromium 使用 web 技术 (html + css + javascript) 创建桌面应用程序 → 您可以使用浏览器 API 和节点 API 的组合 跨平台(mac、windows、Linux)兼容 ...
这些扩展名大部分是用Javascript编写的,并将在您的浏览器中本地加载。 IPython-contrib存储库由一组用户和开发人员独立维护,与IPython开发团队没有正式关系。 提供的扩展的成熟度各不相同,因此,如果遇到任何...
笔记 声明 本项目不是 Google 官方项目,而是由国内会计师事务所热情创建和维护。 如果你关注的是 Google 官方中文版,请移步Google 风格指南。 每个越来越大的开源项目都有自己的风格指南:关于如何为该项目...
多语言支持:尽管OpenCV主要使用C++编写,但它提供了丰富的API绑定,支持包括C、Python、Java、MATLAB、JavaScript等多种编程语言,方便不同领域的开发者使用。 开源与免费:OpenCV遵循BSD开源许可证发布,用户...
该产品是Saxon-Java代码的精简版本,可使用Google的GWT Transpiler交叉编译为Javascript。 此后,它已被用纯Javascript编写的Saxon-JS取代,但保留了交互式XSLT扩展。 不再维护或支持Saxon-CE,因此不应将其用于新...
深入剖析ASP.NET组件设计]一书第三章关于ASP.NET运行原理讲述的补白 asp.net 运行机制初探(httpModule加载) 利用反射来查看对象中的私有变量 关于反射中创建类型实例的两种方法 ASP.Net应用程序的多进程模型 NET委托...
转变为成熟的可编写脚本的 Web 平台 - 《自学编程语言》源代码镜像 - 如何用 C++ 制作计算机操作系统 - Redis 的 PHP 扩展 - 一个用 c 编写的快速 php 框架,内置在 php-ext - 一个集审核、执行、备份及生成回滚语句...
转变为成熟的可编写脚本的 Web 平台 - 《自学编程语言》源代码镜像 - 如何用 C++ 制作计算机操作系统 - Redis 的 PHP 扩展 - 一个用 c 编写的快速 php 框架,内置在 php-ext - 一个集审核、执行、备份及生成回滚语句...
React 夏季培训课程Web 开发简介本课程将帮助您学习如何可靠地... 在我们的第 1 个 React 会议中,我们将重点关注 React、JavaScript 和 TypeScript 中的更多概念如何帮助我们编写更清晰、更高效且更易于维护的代码!
笔记该机器人最近已被重写,目前正在维护和进一步开发中。 某些以前的功能可能无法像以前一样工作,因为它们已被更改并添加了其他功能。安装要安装Davis Bot,请运行以下命令(类似unix的OS'): git clone ...
百科全书是一种工具,可以帮助您编写和维护私有超媒体百科全书。 好处 通过消除冗余来节省时间 关于同一主题的文档通常大多是多余的。 通过编写超链接笔记,您可以消除这种冗余,以便将来的查询直接进行。 对您所...
安装python(建议Python3,Python2.7版本不再维护) 安装依赖的软件包 Mac/Linux执行 python -m pip install -r requirements.txt Windows执行 python -m pip install -r requirements.win.txt 启动服务器python app...