类似 jQuery 的自定义函数

Question

我一直想知道如何创建像 jQuery 这样的函数。例如： $(ID).function()

其中 ID 是 HTML 元素的 id，$ 是返回元素的 document.getElementById 引用的函数 " ID”和函数是自定义 JavaScript 函数。

我正在创建一个实现一些功能的小库。我想在不使用 jQuery 的情况下使用该语法。

现在，我的问题是：我该如何实施？允许这样做的技术的名称是什么？

编辑：

我想做的是这样的：

HTMLElement.prototype.alertMe = function() {alert(this.value);}

然后，当我调用 document.getElementById('html_input_id').alertMe() 时，它必须显示一个带有以下内容的警报框：输入值。但是 HTMLElement.prototype 在 IE 中不起作用。

Answer 1

$ = function(id) {
    return document.getElementById(id);
}

Answer 2

好吧，你看，你问的问题有很多细节和含义。 jQuery的代码是开源的，您可以阅读它来了解详细信息；你也最好找到一本很好的 Javascript 书，《O'Reilly Definitive Guide》。

$ 只是 JS 中名称的一个字符，因此正如其他一些答案所示，您没有理由不能只编写具有该名称的函数：

var $ = function(args){...}

因为每个人和他的兄弟都使用该技巧，你也想要一个更长的名字，这样你就可以混合使用。

var EstebansLibrary = function(args){...}
var $ = EstebansLibrary; // make an alias

由于您最终会使用入口点函数执行不同的操作，因此您需要了解 JS 如何使用参数 - 查找 arguments 对象。

您需要将其打包，以便您的内部结构不会污染名称空间；您需要模块模式的一些变体，这将使它类似于

var EstebansLibrary = (function(){
    // process the arguments object
    // do stuff
    return {
       opname : implementation,...
    }
})();

你最终会想要为继承做好准备，这意味着将这些函数放入 prototype 对象中。

Answer 3

您可以使用prototype将新函数分配给Element原型。

Element.prototype.testFunction=function(str){alert(str)};

这将为所有 HTML 元素提供函数“testFunction”。

您可以通过这种方式扩展任何基本对象，即数组、字符串等。

这将在没有任何插件的情况下工作 - 尽管我不认为它在 IE 中工作。我相信 MooTools 和 jQquery 等库会使用 DOM 元素创建自己的继承，以确保跨浏览器兼容性，尽管不要引用我的观点。