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

时间:2013-05-29 07:22:39

标签: javascript jquery namespaces javascript-namespaces

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

main.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" 非常感谢任何帮助。

3 个答案:

答案 0 :(得分:3)

注意:line 63script.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()

答案 1 :(得分: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()

这是最简单的方法!

你喜欢使用多个文件,所以让我们试试:

<强> mains.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();
})

答案 2 :(得分:1)

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

的jsfiddle:      http://jsfiddle.net/R927K/

示例:

    var Accordian = (function() {

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

         return Accordian;
}());

Accordian.slide();