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

为了组织代码，我碰巧为我的主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');
         });
    }
});

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

/*$*/( 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 || {} );

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

我在下面的script.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');
         });
    }
});

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

/*$*/( 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 || {} );

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

更新：

以下是链接：

出现错误消息“ReferenceError:Accordian未定义”

---

非常感谢您的帮助。

您无法访问名称空间，因为它封装在函数中。 我建议你仔细阅读这本书

JSFiddle：

例如：

    var Accordian = (function() {

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

         return Accordian;
}());

Accordian.slide();

---

首先，必须创建一个唯一的根命名空间，如下所示：

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() {
    "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');
         });
    }
});

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

/*$*/( 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 || {} );

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

script.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');
         });
    }
});

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

/*$*/( 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 || {} );

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

---

注意：

script.js

中第63行缺少分号

由于修改站点以使用此代码有效：

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

进入

---

（如@anonyme Suggered）与您最初调用的

Accordian.slide（）

谢谢你的回答，但是我怎样才能访问script.js文件的方法呢？就像你在例子中所做的那样（我希望，如果我是正确的话：）。假设main.js和script.js都正确地加载到了页面中。实际上，我没有让它工作，我尝试了

Acordian.slide（）

，它说“TypeError:Acordian.slide不是函数”，然后我尝试了一个cordian.slide，但是没有发生任何事情，没有错误消息和操作本身。让我们感谢您的回答，但它仍然不起作用。这是我的测试链接，当我尝试访问该网站时，我得到以下信息，然后是一些停车广告：该网站已设置为被www.000webhost.com删除，不活动。如果您拥有此网站，请单击此处进行保护。关于你的问题，你只是引用了HTML文件中的两个脚本，还是你正在使用另一种方法？啊，这个链接刚刚被删除。我三天前加的。我会再上传一次。在这里它又起作用了。