深入探索HTML5编程实战

需积分: 10 25 浏览量更新于2024-07-29 收藏 1.38MB PDF 举报

"Programming HTML5 Applications" 由 Zachary Kessin 撰写，深入探讨了 HTML5 在构建网络应用程序中的应用，同时结合 JavaScript 的强大功能，提供了丰富的编程实践指导。在HTML5的世界中，Web不再仅仅是静态内容的展示平台，而是演变为一个功能强大的应用平台。描述中提到的“Developing Web Applications”章节阐述了如何利用HTML5来开发动态、交互式的网络应用，通过引入新的API和元素，使得Web应用能够提供更丰富的用户体验和离线支持。 “Adding Power to Web Applications”部分可能涉及HTML5的新特性，如Canvas用于图形绘制，SVG用于矢量图，WebSocket实现双向实时通信，以及Geolocation API用于获取用户的地理位置信息等，这些都极大地增强了Web应用的能力。 JavaScript是HTML5应用程序的核心，书中的“2. The Power of JavaScript”章节深入讨论了JavaScript的重要地位和其独特功能。JavaScript的非阻塞I/O和回调函数机制是现代Web应用高性能的关键。Lambda（或匿名）函数的使用提高了代码的灵活性，而闭包则允许函数访问和操作外部作用域的变量，实现数据封装。书中还提到了函数式编程的概念，它强调通过组合函数而不是改变状态来解决问题，以及原型和对象扩展，这是JavaScript继承机制的基础。此外，还介绍了如何使用currying（柯里化）和对象参数，以及数组迭代操作来优化代码。测试是任何软件开发过程中的重要环节，"3. Testing JavaScript applications"章节涵盖了JavaScript应用的测试策略。QUnit是一个流行的JavaScript单元测试框架，书中提供了一个简单的示例并演示了如何使用QUnit进行测试。同时，书中也提及了Selenium，这是一个自动化测试工具，可以模拟用户在浏览器上的行为，用于端到端的测试。通过Selenium IDE可以构造测试用例，而Selenium RC可以实现跨浏览器测试，甚至可以与测试农场结合，进行大规模的自动化测试。 "4. LocalStorage"章节关注的是HTML5的本地存储功能，包括localStorage和sessionStorage对象，它们允许Web应用在用户浏览器上持久化存储数据，无需Cookie。这一特性对于创建离线应用或者需要保存用户数据的应用场景特别有用。这本书详细介绍了如何利用HTML5和JavaScript的特性构建现代Web应用程序，并提供了测试和优化代码的实用技巧，是一本全面的HTML5编程指南。

few things, and have something that mostly works. Unfortunately, maintaining such

code becomes more and more difficult over time.

With the Ajax revival, developers took a new look at JavaScript. Some of those devel-

opers worked on improving the engines interpreting and running JavaScript code,

leading to substantial speed improvements. Others focused on the language itself, re-

alizing that it had some very nice features and were able to develop best practices like

those outlined in Douglas Crockford's JavaScript: The Good Parts (O'Reilly, 2008).

Beyond the core language, developers built tools that made debugging JavaScript much

easier. Although Venkman, an early debugger had appeared in 1998, the 2006 release

of Firebug became the gold standard of javascript debuggers. It allows the developer

to track Ajax calls, view the state of the DOM and CSS, as well as single stepping code

and much more. Browsers built on WebKit, notably Apple's Safari and Google Chrome,

offer similar functionality built in, and Opera Dragonfly provides support for Opera.

Even developers working in the confined spaces of mobile devices can now get Firebug-

like debugging with weinre, Web Inspector Remote.

The final key component in this massive recent investment in JavaScript was libraries.

Developers still might not understand all the code they were using, but organizing that

code into readily upgradeable and sometimes even interchangeable libraries simplified

code management.

jQuery

If anything can be described as the Gold Standard of JavaScript libraries it would

have to be John Resig's jQuery library which forms a wrapper around the DOM

and other Javascript objects such as the XMLHttpRequest object and makes doing

all sorts of things in JavaScript a lot easier and a lot more fun. In many ways jQuery

is the essential JavaScript library that every JavaScript programmer should know.

To learn jQuery see the jQuery website http://jquery.org, or a number of good

books on the subject such as "Head First jQuery" or the "jQuery Cookbook" both

published by O'Reilly. Many examples in this book are written using jQuery.

ExtJS

Whereas jQuery forms a wrapper around the DOM, ExtJS, from Sencha http://

sencha.com tries to abstract it away as much as possible. ExtJS features a rich

widget set that can live in a web page and provide many of the widgets, such as

trees, grids, forms, buttons and so on that desktop developers are familar with.

The entire system is very well thought out and fits together well and makes devel-

oping many kinds of applications a joy. While ExtJS tends to be heavy in terms of

the size of the library it is a good fit for some kinds of application development.

On nice feature of ExtJS is that many of its objects know how to save their state.

So if a user takes a grid and reorganizes the columns the next time the user views

that grid it is possible to set it up so that this state is saved. How to use the HTML5

localStorage to enhance this will be shown in “Using localStorage in

ExtJS” on page 51.

6 | Chapter 2: The Power of JavaScript

Others

Tools such as GWT allow the programmer to write Java code, which is then com-

piled down to JavaScript and then can be run on the browser.

Non-blocking I/O and Callbacks

The first key to JavaScript, past the language itself, is to understand event-driven pro-

gramming. In the environment where JavaScript runs, operations tend to be asynchro-

nous, which is to say that they are set up in one place and will execute later after some

external event happens.

This can represent a major change from the way I/O happens in traditional languages.

Take Example 2-1 as a typical example of I/O in a traditional language, in this case

PHP. The line $db->getAll($query); will require that the database access the disk, and

therefore will take orders of mangitude more time to run than the rest of the function.

While the program is waiting for the server to execute the query statement is blocked

and the program is doing nothing. In a server side language like PHP, where there can

be many parallel threads or processes of execution, this isn't usually a problem.

Example 2-1. Blocking I/O in PHP

function getFromDatabase()

{

$db = getDatabase();

$query = "SELECT name FROM countries";

$result = $db->getAll($query);

return $result;

}

In JavaScript, however, there is only one thread of execution, so if the function is

blocked nothing else happens and the user interface is frozen. As such, JavaScript must

find a different way to handle I/O (including all network operations). What JavaScript

does is return right away from a method that might be perceived as slow, leaving behind

a function that gets called when the operation (say, downloading new data from the

web server) is done. The function is known as a callback. When making an Ajax call

to the server the Javascript launches the request then goes on to do something else. It

then provides a function that is called when the server call is finished. This function is

called (Hence the name callback) with the data that is returned from the server at the

time when the data is ready.

As an analogy, consider two ways of buying an item at a grocery store. Some stores

leave items behind the counter, so you have to ask a salesperson for it and wait while

she retrieves it. That's like the PHP program just shown. On the other hand, some stores

have a deli counter where you can request an order and get a number. You can go off

Non-blocking I/O and Callbacks | 7

to do other shopping, and when your order is ready, you can pick it up. That situation

is like a callback.

In general, a fast operation can be blocking, because it should return the data requested

right away. A slow operation, such as a call to a server that may take several seconds,

should be non-blocking and should return its data via a callback function. The presense

of a callback option in a function will provide a good clue on the relative time it will

take for an operation to run. In a single threaded language like JavaScript a function

can not block to wait for the network or user without locking up the browser.

So a major step to JavaScript mastery involves using callbacks strategically and knowing

when they'll be triggered. When you use a datastore object with Ajax, for example, the

data will not be there for a second or two. Using a closure (“Closure” on page 10) to

create a callback is the correct way to handle data loading. All such external I/O (da-

tabases, calls to the server) should be non-blocking in JavaScript, so learning to use

closures and callbacks is critical.

With a few exceptions that should probably be avoided, JavaScript I/O does not block.

The three major exceptions to this rule are the window methods alert(), confirm(),

and prompt(). These three methods do in fact block all JavaScript on the page from the

moment when they are called to the moment when the user dismisses the dialog. In

addition the XHR object can make an Ajax call to the server in a syncrous mode, this

can be used in a web worker but in the main window will cause the browser UI to lock

up. It should be avoided.

Lambda Functions Are Powerful

Programmers who have come to JavaScript from PHP or other procedural languages

will tend to treat JavaScript functions like those in the languages that they have already

used. While it is possible to use JavaScript functions in this way, it is missing a large

chunk of what makes JavaScript functions so powerful.

JavaScript functions can be created with the function statement (Example 2-2) or the

function expression (Example 2-3). These two forms look pretty similar, and both ex-

amples produce a function called square that will square a number. However, there are

some key differences. The first form is subject to hoisting, which is to say that the

function will be created at the start of the enclosing scope. So you can't use a function

statement when you want the function defined conditionally, because JavaScript won't

wait for the conditional statement to be executed before deciding whether to create the

function. In practice, most browsers allow you to put a function inside an if, but it is

not a good idea, as what browsers will do in this case can vary. It is much better to use

a function statement if the definition of a function should be conditional.

Example 2-2. Function declaration

function square(x) {

return x * x;

8 | Chapter 2: The Power of JavaScript

剩余131页未读，继续阅读

VennyLee

粉丝: 0

深入探索HTML5编程实战

Programming HTML5 Applications 无水印原版pdf

HTML5经典教材（Programming.HTML5.Applications）

Programming 3D Applications with HTML5 and WebGL

programming web applications with node, express and pug

html css js MYSQL PHP

javascript DOM

h5umodbustcp.ui

javaweb的英文文档

qt5webkitwidgets wowocpp

PLC程序模板哪里可以下载

最新资源