深入浅出React和Redux
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

1.4.1 jQuery如何工作

假设我们用jQuery来实现ClickCounter的功能，该怎么做呢？首先，我们要产生一个网页的HTML，写一个index.html文件如下所示：

<! doctype html>
<html>
  <body>
    <div>
      <button id="clickMe">Click Me</button>
      <div>
        Click Count: <span id="clickCount">0</span>
      </div>
    </div>
    <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
    <script src="./clickCounter.js"></script>
  </body>
</html>

实际产品中，产生这样的HTML可以用PHP、Java、Ruby on Rails或者任何一种服务器端语言和框架来做，也可以在浏览器中用Mustache、Hogan这样的模板产生，这里我们只是把问题简化，直接书写HTML。

jQuery已经发展到3.x版，但已经不支持比较老的浏览器了，我们这里使用1.9.1的jQuery只是为了让这个网页在IE8上也能够运行。

上面的HTML只是展示样式，并没有任何交互功能，现在我们用jQuery来实现交互功能，和jQuery的传统一样，我们把JavaScript代码写在一个独立的文件clickCounter.js里面，如下所示：

$(function() {
  $('#clickMe').click(function() {
    var clickCounter = $('#clickCount');
    var count = parseInt(clickCounter.text(), 10);
    clickCounter.text(count+1);
  })
})

用浏览器打开上面创造的index.html，可以看到实际效果和我们写的React应用一模一样，但是对比这两段程序可以看出差异。

在jQuery的解决方案中，首先根据CSS规则找到id为clickCount的按钮，挂上一个匿名事件处理函数，在事件处理函数中，选中那个需要被修改的DOM元素，读取其中的文本值，加以修改，然后修改这个DOM元素。

选中一些DOM元素，然后对这些元素做一些操作，这是一种最容易理解的开发模式。jQuery的发明人John Resig就是发现了网页应用开发者的这个编程模式，才创造出了jQuery，其一问世就得到普遍认可，因为这种模式直观易懂。但是，对于庞大的项目，这种模式会造成代码结构复杂，难以维护，每个jQuery的使用者都会有这种体会。

上一章目录下一章