如何传递元素参数给require.js定义调用

How to pass element parameter to require.js define call?

本文关键字：js 定义 调用 require 何传递 元素 参数      更新时间：2023-09-26

我有一个页面，它被分割成动态加载的"小部件"- JS与require.js, HTML &CSS与自定义JS。这是特别方便的，因为它允许每个小部件定义自己的JS需求。

例如:

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

然而，为了将小部件JS功能定位到正确的元素中，我需要将小部件根元素传递给javascript，该元素加载了require.js，这是require.js不支持的……:/

我目前拥有的是这样的东西，其中定义调用返回一个函数，做渲染…

// 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函数开始膨胀，这使得它不那么漂亮，更难阅读(也更容易出现bug)。

最理想的情况是这样的…

// 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) {

那么，男人该怎么做呢?是否有一种模式，我可以使用某种方式将元素干净地传递给定义调用?还是说我只能求助于这个丑陋的复试丛林?

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

对于define模块来说，在创建时知道$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')});
    });
相关文章：