《JavaScript核心概念及实践》——1.3 JavaScript应用范围

最新推荐文章于 2024-10-15 14:00:48 发布

weixin_33869377

最新推荐文章于 2024-10-15 14:00:48 发布

阅读量177

点赞数

文章标签： javascript 数据库 ui ViewUI

原文链接：https://yq.aliyun.com/articles/97483

版权

本节书摘来自异步社区《JavaScript核心概念及实践》一书中的第1章，第1.3节，作者：邱俊涛著，更多章节内容可以访问云栖社区“异步社区”公众号查看

1.3 JavaScript应用范围

当JavaScript第一次出现的时候，是为了给页面带来更多的动态，使用户可以与页面进行交互。虽然JavaScript在Web客户端取得了很大的成功，但是ECMA标准并没有局限其应用范围。事实上，现在的JavaScript大多运行于客户端，但是仍有部分运行于服务器端，如Servlet、ASP等。当然，JavaScript作为一个独立的语言，同样可以运行在其他的应用程序中，比如Java版的JavaScript引擎Rhino、C语言版的SpiderMonkey等，使用这些引擎，可以将JavaScript应用在任何应用之中。

1.3.1 客户端JavaScript
客户端的JavaScript随着Ajax技术的复兴，越来越凸显了JavaScript的特点，也有越来越多的开发人员开始进行JavaScript的学习。使用JavaScript，你可以使你的Web页面更加生动，通过Ajax，无刷新地更新页面内容，可以大大提高用户体验。随着大量的JavaScript库和框架如jQuery、ExtJS、Backbone.js、Mootools等的涌现，越来越多的绚丽、高体验的Web应用被开发出来，这些都离不开幕后的JavaScript的支持，如图1-1所示。
screenshot

浏览器中的JavaScript引擎也有了长足的发展，比如FireFox 3，当时一个宣传的重点就是速度比IE快。这个速度一方面体现在页面渲染上，另一方面则体现在JavaScript引擎上。而Google的Chrome的JavaScript引擎V8更是将速度发展到了极致。很难想象，如果没有JavaScript，如今的大量网站和Web应用会成为什么样子。

我们可以看几个例子，来说明客户端的JavaScript的应用程度，图1-2和图1-3使用了ExtJS，它是一个非常优秀的JavaScript库。

screenshot

当然，客户端的JavaScript各有侧重，jQuery以功能见长，通过选择器以及对选择起的操作，可以快速高效地完成大部分前端开发工作，另一方面，jQuery并且提供灵活、强大的插件机制，图1-4为jQuery的UI插件。

screenshot

基于jQuery的插件非常丰富，开发者也可以很容易地开发出适应各种场景的插件供项目使用。

总之，随着Ajax的复兴，客户端的JavaScript得到了很大的发展，网络上流行着大量的优秀的JavaScript库，现在有一个感性的认识即可，我们在后边的章节会择其优者进行详细讨论。

1.3.2 服务器端JavaScript
相对客户端而言，服务器端的JavaScript相对平淡很多，但是随着JavaScript被更多的开发人员重视，JavaScript在服务器端也开始迅速发展起来：Node.js，Helma，Apache Sling等。在服务器端的JavaScript比客户端少了许多限制，如对本地文件的访问，对网络、数据库资源的访问等。

一个比较有意思的服务器端JavaScript的例子是Aptana的Jaxer。Jaxer是一个服务器端的Ajax框架，我们可以看这样一个例子（例子来源于jQuery的设计与实现者John Resig）。

<html>
<head>
  <script src="http://code.jquery.com/jquery.js" runat="both"></script>
  <script>
    jQuery(function($){
      $("form").submit(function(){
        save( $("textarea").val() );
        return false;
      });
    });
  </script>
  <script runat="server">
    function save( text ){
      Jaxer.File.write("tmp.txt", text);
    }
    save.proxy = true;

    function load(){
      $("textarea").val(
        Jaxer.File.exists("tmp.txt") ? Jaxer.File.read("tmp.txt") : "");
    }
  </script>
</head>
<body onserverload="load()">
  <form action="" method="post">
    <textarea></textarea>
    <input type="submit"/>
  </form>
</body>
</html>

runat属性说明脚本运行在客户端还是服务器端，client表示运行在客户端，server表示运行在服务器端，而both表示可以运行在客户端和服务器端，这个脚本可以访问文件，并将文件加载到一个textarea的DOM元素中，还可以将textarea的内容通过Form表单提交给服务器并保存。

再来看另一个例子，通过Jaxer对数据库进行访问。

<script runat="server">
    var rs = Jaxer.DB.execute("SELECT * FROM table");
    var field = rs.rows[0].field;
</script>

通过动态、灵活的语法，再加上对原生的资源(如数据库、文件、网络等)操作的支持，服务器端的JavaScript应用将会越来越广泛。

当Google的JavaScript引擎V8出现以后，有很多基于V8引擎的应用也出现了，其中最著名、最有前景的当算node.js了。下面我们来看一下node.js的例子。

var sys = require('sys'), 
    http = require('http');

http.createServer(function (req, res) {
  setTimeout(function () {
    res.sendHeader(200, {'Content-Type': 'text/plain'});
    res.sendBody('Hello World');
    res.finish();
  }, 2000);
}).listen(8000);

sys.puts('Server running at <a>http://127.0.0.1:8000/</a>
');

保存这个脚本为sayHello.js，然后运行：

node sayHello.js
程序将会在控制台上打印：

Server running at http://127.0.0.1:8000/
访问http://127.0.0.1:8000 ，两秒钟之后页面会响应：Hello, World。

再来看另一个官方提供的例子。

var tcp = require('tcp');

var server = tcp.createServer(function (socket) {
  socket.setEncoding("utf8");
  socket.addListener("connect", function () {
    socket.send("hello\r\n");
  });
  socket.addListener("receive", function (data) {
    socket.send(data);
  });
  socket.addListener("eof", function () {
    socket.send("goodbye\r\n");
    socket.close();
  });
});

server.listen(7000, "localhost");

访问localhost的7000端口，将建立一个TCP连接，编码方式为utf-8，当客户端连接到来时，程序在控制台上打印：

hello
当接收到新的数据时，会将接收到的数据原样返回给客户端，如果客户端断开连接，则向控制台打印：

goodbay
Node提供了丰富的API来简化服务器端的网络编程。由于Node是基于JavaScript语言，因此天生就具有很好的动态性和可扩展性，特别时JavaScript在函数式编程方面的一些模式，对于网络程序的异步模式非常匹配。因此在开发网络程序上，这确实是一个不错的选择。

Node.js运行实现了JavaScript的模块规范CommonJS，使得大规模的JavaScript开发成为可能，一个模块可以使用其他的任何模块，或者将自己需要公开的函数导出，提供给别的模块使用（本书的第16章讨论了Node.js的一些设计初衷，并提供了一个实例）。

1.3.3 其他应用中的JavaScript
通过使用JavaScript的引擎的独立实现，比如Rhino、SpliderMonkey、V8等，可以将JavaScript应用到几乎所有的领域，比如应用程序的插件机制，高级的配置文件分析，用户可定制功能的应用，以及一些类似于浏览器场景的比如Mozilla的ThunderBrid，Mozilla的UI框架XUL，笔者开发的一个Todo管理器sTodo（在第15章详细讨论）等，如图1-5所示。

Java版的JavaScript引擎原生地可以通过使用Java对象，大大提高JavaScript的应用范围，如数据库操作、服务器内部数据处理等。当然，JavaScript这种动态语言，在UI方面的应用最为广泛。

著名的Adobe Reader也支持JavaScript扩展，并提供JavaScript的API来访问PDF文档内容，可以通过JavaScript来定制Adobe Reader的界面以及功能等。

screenshot

app.addMenuItem({
    cName: "-",
    // menu divider
    cParent: "View",
    // append to the View menu
    cExec: "void(0);"
});

app.addMenuItem({
    cName: "Bookmark This Page &5",
    cParent: "View",
    cExec: "AddBookmark();",
    cEnable: "event.rc= (event.target != null);"
});

app.addMenuItem({
    cName: "Go To Bookmark &6",
    cParent: "View",
    cExec: "ShowBookmarks();",
    cEnable: "event.rc= (event.target != null);"
});

app.addMenuItem({
    cName: "Remove a Bookmark",
    cParent: "View",
    cExec: "DropBookmark();",
    cEnable: "event.rc= (event.target != null);"
});

app.addMenuItem({
    cName: "Clear Bookmarks",
    cParent: "View",
    cExec: "ClearBookmarks();",
    cEnable: "event.rc= true;"
});

为Adobe Reader添加了4个菜单项，如图1-6所示。

screenshot