学习一下Retweet Button的代码

最新推荐文章于 2025-08-21 08:29:25 发布

最新推荐文章于 2025-08-21 08:29:25 发布 · 192 阅读

文章标签：

#正则表达式 #JavaScript #CSS #Dojo #Twitter #ViewUI

Web 2.0 专栏收录该内容

27 篇文章

订阅专栏

本文介绍了一个由John Resig编写的简单JS脚本RetweetButton，它能将指定URL缩短并通过Twitter分享。文章深入剖析了该脚本的实现方式，包括如何动态加载外部JavaScript文件、处理页面加载事件及动态添加CSS样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Retweet Button是John Resig写的一个简单的JS，用来把某个URL通过bit.ly的服务变短之后，发送到Twitter上去。这个东西本来是比较简单的，代码也比较少，不过从中还是可以学到一些比较好的做法。

(function(){})()，创建一个匿名方法并马上执行，用来解决命名冲突的典型做法了。window.RetweetJS暴露一个惟一的全局变量作为入口点。
通过<script>标签动态加载JavaScript文件。

var head = document.getElementsByTagName("head")[0] ||
		document.documentElement;
var script = document.createElement("script");
	script.src = "http://bit.ly/javascript-api.js?version=latest&login=" +
		RetweetJS.bitly_user + "&apiKey=" + RetweetJS.bitly_key;
	script.charSet = "utf-8";
	head.appendChild( script );

这种做法也非常常见了，与我之前的做法不同的是，如果没有head元素的话，就使用文档的根元素。

对于onload的处理，自己习惯了dojo.addOnLoad，已经不记得背后的细节了。

if ( document.addEventListener ) {
	document.addEventListener("DOMContentLoaded", loaded, false);

} else if ( window.attachEvent ) {
	window.attachEvent("onload", loaded);
}

insertBefore，从来没用过这个DOM方法。var insertedElement = parentElement.insertBefore(newElement, referenceElem
getElementsByClassName，如果有这个方法的话，就用之；没有的话，就取到元素列表，用正则表达式过滤元素的className。
动态添加CSS样式。

var style = document.createElement("style");
		style.type = "text/css";

		try {
			style.appendChild( document.createTextNode( RetweetJS.styling ) );
		} catch (e) {
			if ( style.styleSheet ) {
				style.styleSheet.cssText = RetweetJS.styling;
			}
		}

		document.body.appendChild( style );