Question

我有一个分为“小部件”的页面，它们动态加载 - JS with require.js，HTML＆amp; CSS与自定义JS。这非常方便，因为它允许每个小部件定义它自己的JS需求。

例如：

define(['jquery', 'mustache'], function($, Mustache) { ...

但是，为了将窗口小部件JS功能定位到正确的元素，我需要将窗口小部件根元素传递给javascript，这是用require.js加载的，这是require.js不支持的东西... ：/

我目前拥有的是这样的东西，其中define调用返回一个执行渲染的函数......

// Example.js
define(['jquery'], function($) {
    return function($el) {
        // Render the widget here to "$el"
        $el.html('asdsadads');
    }
});

...由require调用运行...

require(['js/example'], function(render) { render($el); });

...使用简单的结构可以正常工作，但是使用更复杂的小部件，init函数开始膨胀，这使得它不那么漂亮，也更难读（也更容易出错）。

最佳情况是这样的......

// Example.js 
define(['jquery'], function($) {
    if() { // Check for route and/or other modifiers (is logged in etc)
        $el.html('asdasdasd');
    } else {
        $el.html('qwerty');
    }

});

...实际功能直接位于define调用中。不幸的是，据我所知，没有办法通过require调用传递元素，就像这样......

define(['jquery'], function($, $el) {

那么，男人应该做什么？是否有一种模式可以用来以某种方式将元素干净地传递给define调用？或者我是否必须进入这个丑陋的回调丛林？

Answer 1

定义块的想法是返回可以在代码的另一部分中使用的类或函数。这鼓励并可重复使用DRY模块化编码风格。

定义模块在创建时意识到$ el是没有意义的。有意义的是你返回一个用$ el实例化的类。这样，您的模块可以重复使用，并且您将控制负担返还给您的应用程序，而不是模块本身。

模块及其用途的简单示例：

define(['jquery'], function($) {
    var MyClass = function(args){
       this.initView(args.$el);
    }
    MyClass.prototype.initView($el){
      //init your view
    }
    return MyClass;
});

然后当你可以像这样使用这个模块时：

 define(['path/to/myClass'], function(MyClass) {
        var myView = new MyClass({$el: $('.my-selector')}),
           myOtherView = new MyClass({$el: $('.my-other-selector')});
    });

如何将element参数传递给require.js定义调用？

1 个答案: