百度JavaScript项目Tangram 入门指南 - 初级篇

来源：互联网发布：网络推广水果编辑：程序博客网时间：2024/06/06 00:50

原文：http://tangram.baidu.com/tangram/tutorial.html

入门

Tangram是一个简单可依赖的开源js框架。它使用简单，功能丰富，容易扩展。它经过了Baidu专业QA的测试和百度各产品线巨大流量的考验，质量有充分的保障。使用它进行开发，除了能提高开发效率，减少工作量，还能减少bug数，提高代码质量。下面让我们开始tangram框架的入门之旅。

建立一个测试页面

在我们开始一切工作之前，要有页面；你可以创建一个新的html，也可以在你已有的页面里面加上一句引入tangram的标签：

<script src="http://img.baidu.com/js/tangram-1.3.2.js"></script> ;

Tangram框架可以和任何已有的框架集成在一起，Tangram是友好的，不用担心它们发生冲突，让你已有的功能失效。
现在，假设你已经建立了下面这样的一个页面：

<!doctype html>
<html>
  <head>
  <script  src="http://img.baidu.com/js/tagram-1.3.2.js"></script>
  </head>
  <body>
  <div  id="byG">
        <div  class="byQ">
                <h2>Tangram是个简单可依赖的框架。</h2>
        </div>
  </div>
  </body>
</html>

获取一个dom节点

通常我们对页面上DOM节点的操作，都是从获取该节点的引用开始。 Tangram提供了常用的节点获取方法的封装。

如果想获得id为byG的DOM节点，那么你可以使用 baidu.dom.g("byG")。
如果想获得class为byQ的DOM节点集合，那么你可以使用 baidu.dom.q(".byQ")。
如果想获得class为byQ下的H2节点，那么你可以使用 baidu.dom.query(".byQ>h2")。

baidu.dom.query支持通过css选择符的方式获取节点，当然，如果是对有id或class的节点而言，用baidu.dom.g或baidu.dom.q会更快些。

节点样式设置

设置节点的样式也是我们经常做的操作，tangram也提供了支持；如果我们想把id为 byG的节点设置多种样式，那么我们可以直接使用：
baidu.dom.setStyles("byG",{ position:"absolute", top:50, left:100, opacity:.5 });
px值、透明度的设置，直接使用数字就可以了，tangram会帮你处理好浏览器的差异。

节点class名增删

除了直接设置节点样式，我们还可以通过添加class的方法来让节点一次性更改多种样式。这会让我们的代码更加精简，同时也会提高性能。
我们在页面上添加一个样式
<style> .blue{ color:blue } </style>
然后我们调用
baidu.dom.addClass("byG","blue");
怎么样？有点难看？那好吧：
baidu.dom.removeClass("byG","blue");

绑定事件

万事俱备，只欠东风！现在开始，我们就让页面动起来吧。
baidu.event.on("byG", "click",function(event){ alert(this.innerHTML);});
除了标准的事件，tangram还支持一些特殊的事件，比如IE的mouseenter：
baidu.event.on("byG", "mouseenter",function(){ alert("在我地盘这你就得听我的");});

插入HTML

除了对已有节点的操作，我们也经常需要插入新的节点到DOM树里；方式有两种，一种是插入HTML字符串，另外就是创建DOM节点。这里先说第一种，
现在有这样一段文本：
var htmlString = "<strong>我是插班生</strong>";
我们把它插入id为byG的节点内部末尾，类似appendChild，那么我们可以这样：
baidu.dom.insertHTML("byG", "beforeEnd", htmlString);
那么如果想插入到内部开头呢？将"beforeEnd"替换成"afterBegin"；插在外部前面？换成"beforeBegin"；外部后面？ "afterEnd"；如果你熟悉IE的insertAdjacentHTML，那么这就是这个方法的浏览器兼容版。

创建DOM节点并插入

再说第二种方式，创建dom节点。同样，浏览baidu.dom包下的方法，你能大致猜出来实现这个功能的就是那个 baidu.dom.create。
var ifram=baidu.dom.create("IFRAME",{ id:"newDIV", class:"myClass", frameborder:"none", src:"http://www.baidu.com" });
如此，再使用
baidu.dom.insertAfter(iframe,"byG");
就可以将它插入到页面中了。
当然，也可以选择baidu.dom.insertBefore，如果不清楚差别，请参考各自文档。

Ajax请求

到此为止，对于如何渲染当前页面，我们已经有了大概的了解。接下来我们了解一下如何进行AJAX请求。
baidu.ajax.get("http://yourDomain.com/yourAjaxUrl",function(response){ alert("成功获取如下文本: " + response); });
如果是post请求，那么在上面搜索框中搜索post， baidu.ajax.post就是你要的方法。如果需要复杂的处理，比如设置header，添加错误响应，甚至添加安全认证，那么可以直接使用 baidu.ajax.request，具体使用方法请参考文档页面描述。
到此，你已经基本了解了tangram在DOM节点操作上的主要的方法，也可以使用进行一些页面的辅助编程了。下面，我们来了解一些更高级的应用，看看tangram还能做些什么。