从命名空间调用方法以在另一个 javascript 文件中使用

Posted 2023-02-22

【中文标题】从命名空间调用方法以在另一个 javascript 文件中使用

【英文标题】：Calling a method from a namespace to use in another javascript file

【发布时间】：2013-05-24 08:31:15

【问题描述】：

为了组织我的代码，我碰巧为我的主要 javascript 文件编写了命名空间。然后我想将该文件的一些函数调用到我的自定义 javascript 文件中，比如说script.js。问题是我无法访问命名空间的方法。这是我的示例代码：

ma​​in.js

$( function() 
    "use strict"
     var Accordian = 
     slide : function() 
         $('h3').click( function() 
             $(this).next('div').slideToggle('1000');
             $(this).toggleClass('toggled');
         );
    ,

    slideEaseOutBounce: function() 
         $('h3').click( function() 
              $(this).next().animate(
                  'height' : 'toggle', 1000, 'easeOutBounce'
               );
               $(this).toggleClass('toggled');
         );
    ,

    slideEaseInOutExpo: function() 
         $('h3').click( function() 
             $(this).next().animate(
                  'height' : 'toggle', 1000, 'easeInOutExpo'
             );
             $(this).toggleClass('toggled');
         );
    
);

我已经尝试如下 script.js

$(document).ready( function() 
    Accordian.slide();
);

更新：

这是链接： http://jsnamespace.comyr.com/using-accordian.html

并且出现错误信息"ReferenceError: Accordian is not defined" 任何帮助将不胜感激。

【问题讨论】：

当我尝试访问该网站时，我得到以下信息，然后是一些停车广告：该网站已被 www.000webhost.com 设置为因不活动而被删除。如果您拥有此网站，请单击此处以保护它。 关于您的问题，您只是在 HTML 文件中引用了这两个脚本，还是您正在使用其他方法？

啊，这个链接刚刚被删除。我是 3 天前添加的。我再上传一次。在这里它再次起作用。 jsnamespace.comyr.com/using-accordian.html

【参考方案1】：

注意：line 63 在script.js 中缺少分号。

因为修改您的网站以使用此代码有效：

<script type="text/javascript">
    $(document).ready( function() 
        Accordian[0].slide();
    );
</script> 

FIDDLE DEMO

似乎将您的“Accoridian”包装在 jQuery 函数中需要将其作为子元素取消引用。

当你去掉$line 1的script.js转向时

var Accordian = $(function () 

进入

var Accordian = (function () 

（就像@anonyme 建议的那样）it works 与您最初对Accordian.slide() 的呼叫。

【参考方案2】：

首先你必须像这样创建一个独特的根命名空间：

window.Accordian = window.Accordian || ;

这部分必须在接下来的所有部分之上完成！ 可以在html页面头部的脚本标签中完成。

在你可以使用你的对象之后：

//creating a function :
Accordian.slide = function() 
     $('h3').click( function() 
         $(this).next('div').slideToggle('1000');
         $(this).toggleClass('toggled');
     );


//and later using it :
Accordian.slide()

这是最简单的方法！

您更喜欢使用多个文件，所以让我们试试吧：

ma​​ins.js

/*$*/( function(globalAccordian) 
    "use strict"
     /* var Accordian =  */
     globalAccordian = 
     // doing like this will override your globalAccordian
     // if it was already generated by another script
     slide : function() 
         $('h3').click( function() 
             $(this).next('div').slideToggle('1000');
             $(this).toggleClass('toggled');
         );
    ,

    slideEaseOutBounce: function() 
         $('h3').click( function() 
              $(this).next().animate(
                  'height' : 'toggle', 1000, 'easeOutBounce'
               );
               $(this).toggleClass('toggled');
         );
    ,

    slideEaseInOutExpo: function() 
         $('h3').click( function() 
             $(this).next().animate(
                  'height' : 'toggle', 1000, 'easeInOutExpo'
             );
             $(this).toggleClass('toggled');
         );
    
)( window.Accordian ||  );

script.js

$(document).ready( function() 
    Accordian.slide();
)

【讨论】：

感谢您的回答，但还是不行。这是我的测试链接jsnamespace.comyr.com/using-accordian.html

【参考方案3】：

您无法访问命名空间，因为它被封装在一个函数中。 我建议阅读revealing module pattern。

JSFiddle： http://jsfiddle.net/R927K/

例子：

    var Accordian = (function() 

     var Accordian = 
     slide : function() 
         alert('sliding');
         
     ;

         return Accordian;
());

Accordian.slide();

【讨论】：

感谢您的回答，但我如何才能将其方法访问到我的 script.js 文件？

就像您在示例中所做的那样（我希望，如果我是正确的:)）。

假设 main.js 和 script.js 都正确加载到页面中。

我实际上并没有让它工作，我尝试了Acordian.slide()，它说'TypeError：Acordian.slide不是一个函数'，然后我尝试了Acordian.slide并且没有任何错误消息发生以及动作本身。

让我们continue this discussion in chat