Question

我正在尝试创建一个简单，小巧且基本的JavaScript框架，仅用于学习目的。但问题是我已经完全陷入了基础。

我正在尝试做这样的事情：

$('testdiv').testFunction();

我为此写的代码：

var elementID;
var smallFramework = {

  $:function(id) {
    this.elementID = id;
  },

  testFunction:function() {
    alert(this.elementID);
  }

};
window.$ = smallFramework.$;

但作为回报，我得到了：

$('testdiv) is undefined

任何人都可以帮我解决这个小而且希望简单的问题吗？

Answer 1

要获得您期望的行为，您需要使用$函数返回一个名为testFunction的方法的对象。尝试：

var smallFramework = // an object for namespacing
{
  $:function(id) // the core function - returns an object wrapping the id
  {
    return {                    // return an object literal
      elementID: id,            // holding the id passed in
      testFunction: function()  // and a simple method
      {
         alert(this.elementID);
      }
    };
  }
};

当然，有many other ways来实现你想要的行为。

Answer 2

如果您正在尝试向HTML元素添加方法，则可以按照以下方式执行操作。

$ = function( elementId ) {
    var element = document.getElementById( elementId );
    element.testFunction = function(){
        alert( this.id );
        return this; // for chaining
    }
    return element;
}

$('test').testFunction();

Answer 3

试

smallFramework.$('testdiv');

代替。根据您发布的代码，这就是您的$函数结束的地方。

或者，看起来你正试图复制像jquery这样的东西。你可能想尝试这样的事情。

var $ = smallFramework = (function () {
   var f = 
   {

     find:function(id) {
       f.elementID = id;
       return f;  //every function should return f, for chaining to work
     },

     testFunction:function() {
       alert(f.elementID);
       return f;
     }

   }

return f.find  //the find function will be assigned to $. 
//and also assigned to smallFramework.
//the find function returns f, so you get access to testFunction via chaining
// like $("blah").testFunction()

})() //note this function gets called immediately.

这个代码看起来可能会让一些刚接触javascript的人感到困惑，因为它很大程度上取决于闭包的概念。我建议如果这没有意义，花一些时间在Douglas Crockford的javascript网站上。这很重要，因为如果您碰巧在find函数中使用“this”，上面的代码会咬人，因为当您从$或者使用它时，“this”将不会被绑定到f，正如您所期望的那样smallFramework。

如何为HTML元素创建方法？

3 个答案: