javascript - 在 ASP.NET MVC 中创建 _layout 和 View 之间可用的 jQuery "object"

Question

我在 ASP.NET MVC 5.2 中编码，并使用 jQuery 作为我的主要脚本库。不过，我遇到了一些问题，_Layout 和使用该布局的 View 之间存在差异。

基本上是这样的

1. _Layout 有需要运行的一些脚本(初始布线、进度条、启动画面等)
2. 继承 View 有一些脚本需要运行(该 View 独有)
3. _Layout 有额外的脚本需要在 View 的独特脚本之后运行。

我一直在尝试很多方法来解决这个问题，但事实证明这是一个大问题。我经常被告知我不应该在全局命名空间上创建对象，所以我想知道是否有任何其他选项来创建我可以在两个 View 中访问的脚本对象，而不像全局对象那样具有破坏性。

我尝试过 promises，但越来越令人沮丧。我已经尝试过事件，但这并没有真正帮助，因为我无法弄清楚将事件附加到什么。我被告知不要将它们附加到 $(document)，但这实际上是 View 和布局之间共享的唯一内容之一。

我知道全局对象在 javascript 中并不被认为是好的，但此时我不确定我还有什么其他选择可以确保事情以正确的顺序执行。

更新

这个问题更多的是关于“工具”而不是关于运行时。确实，当实际 View 加载和运行时，它都被压入一个大的快乐页面，并且可以正常工作。问题主要是我必须在工具 (Visual Studio) 中拆分逻辑，以防止它抛出错误和混淆。

所以我想说它是一个伪问题更准确。

我曾尝试像这样拆分逻辑，但我认为这只是声明全局对象的另一种方式。我从 Q.js 库中得到了这个想法。

任务.js

(function(definition) {
    // assign the task system
    tasks = definition();
})(function() {
    var list = [];

    function tasks() {

    };

    tasks.start = start;
    tasks.enqueue = enqueue;
    /*
     * start the task queue.
     */
    function start() {
        // make sure to raise a started event for things that need
        // to monitor it.
        $(this).trigger("started");
    };
    function enqueue(f) {
       // add the potential function to the queue to be processed later.
       list.push(f);
       $(this).trigger("enqueue", { item: f });
    };

    return tasks;

});

示例用法

$(function(){
  $(tasks).on("started", function(){
    console.log("event called");
  });
  
  console.log("tasks", tasks);
  tasks.start();
});

Answer 1

您可以通过多种方式解决此问题:

1. 使用 RequireJs 将 Tasks 定义为一个模块，然后:

   require(['tasks'], function(tasks){
     $(tasks).on("started", function(){
       console.log("event called");
     });
   
     console.log("tasks", tasks);
     tasks.start();
   });
   

2. 使用全局对象，但为其命名:

   Ciel = Ciel || {};
   Ciel.tasks = Ciel.tasks || function(){
       var list = [];
       ...
   };
   

3. 将您的数据绑定(bind)到特定的 dom 元素:

   <div class="ciel-tasks"></div>
   
   ...
   
   $(function() { $('.ciel-tasks').each(function() {
       var tasks = $(this);
       ...
   });