Question

我有一个问题，也许你可以帮助我。我有一个页面（index.php）： ...

<head>
<script src="site/js/mootools-core.js" /></script>      
<script src="site/js/mootools-more.js" /></script>
<script type="text/javascript" src="site/js/router.js" /></script>
<script type="text/javascript" src="site/js/app.js" /></script>
</head>
<body></body>

...

router.js项目：https://github.com/xrado/Router/blob/master/Demo/index.html

app.js：

window.addEvent('domready',function(){

   var Core = { 
      loadScript:function(url, callback){
         var script = document.createElement("script")
         script.type = "text/javascript";

         if (script.readyState){  //IE
           script.onreadystatechange = function(){
            if (script.readyState == "loaded" || script.readyState == "complete"){
              script.onreadystatechange = null;
              callback();
            }
          }
        } else {  //Others
          script.onload = function(){
            callback();
          }
        }
        script.src = url;
        document.getElementsByTagName("head")[0].appendChild(script);
      }
    }

   var router = new Router({
      routes: {
         ''     : 'index',
         '#!index'  : 'index'
      },

      onReady: function(){
         Core.init();                     // Render body here ... working! 
      },

      onIndex: function() {
         Core.loadScript("index.js", function(){
           index.init();           // ReferenceError: index is not defined      
           console.log('Index loaded...'); 
         });
      }
   });

}）;

这是我的外部index.js：

var index = {
   init : function(){   
      $('div_content').set('html', index.render()); 
   },
   render: function() {
      ...
   }
}

如果我尝试加载页面，我会收到此错误：

ReferenceError：未定义索引 index.init（）;

两周内找不到错误！谢谢。

Answer 1

对我有用：

<html>
<head>
<script>
document.addEventListener("DOMContentLoaded",function(){
   var Core = { 
      loadScript:function(url, callback){
         var script = document.createElement("script");
         script.type = "text/javascript";
          script.onload = function(){
            callback();
          }
        script.src = url;
        document.getElementsByTagName("head")[0].appendChild(script);
      }
    }

    Core.loadScript("index.js", function(){
           index.init();     // ReferenceError: index is not defined      
           console.log('Index loaded...'); 
    });
});
</script>
</head>
<body>
</body>
</html>

我的假设是，因为“window.addEvent（”domready“......”不是本机方法，mooTools会做一些魔法并改变加载变量的范围。所以只需试试document.addEventListener（“DOMContentLoaded”），函数（）{

HTH

Gekkstah

Answer 2

哈哈，我看到你正在使用我和xrado的Router类。 :)无论如何，你遇到的问题是你的init和javascript加载器。

首先，这个：

var index = {
   init : function(){   
      $('div_content').set('html', index.render()); 
   },
   render: function() {
      ...
   }
}

运行init方法时，this将成为宿主对象this.render()

第二，懒加载重新发明。看看mootools Assets.js - https://github.com/mootools/mootools-more/blob/master/Source/Utilities/Assets.js#L24-48

mootools源出现错误，这意味着IE9将恢复为onreadystatechange 尽管IE9已经支持加载事件，但回调。不过，没关系，在它准备好之前不会开火。在以后引入时请记住索引的范围。

我倾向于使用RequireJS，它允许我及时延迟加载资源以使应用程序正常工作，这是委派内容并能够打包它们的好方法

明目张胆的自我广告

由于你的index.js看起来像一个视图，我建议你看一下Epitome，我写的是能够在MooTools中构建这样的应用程序 - http://dimitarchristoff.github.com/Epitome/ - 它是一个基于Class和Events的轻量级MVP实现。附带相同的router class，适用于AMD或普通脚本加载等。并具有适当的视图/模型/集合/模板结构。

例如，请在此处查看哈希应用中的todomvc实现：http://dimitarchristoff.github.com/Epitome/#examples/todomvc-reference - 请参阅代码为https://github.com/DimitarChristoff/Epitome-todo的repo。

Javascript哈希导航＆amp;外部js文件

2 个答案:

明目张胆的自我广告