Zurb Foundation 如何检测 javascript 个组件？

Question

我认为它是通过属性来实现的，例如在下拉列表中：

<ul class="dropdown menu" data-dropdown-menu>
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a></li>
  <li><a href="#">Item 3</a></li>
  <li><a href="#">Item 4</a></li>
</ul>

类似但更复杂的东西：

if ($('div').attr('data-dropdown-menu')) {
// Create component
}

可能的解决方案

我能想到的一种方法是有一个数组，其中包含组件的属性和组件创建的函数。然后启动收集 html 的所有属性的初始进程，如果它与现有属性匹配，则创建组件。

我想知道

我想知道哪个 函数启动了查找属性的进程，如果属性对应于一个组件，它会创建该组件。

初始化插件 Zurb Foundation

谢谢 Ross 我发现这也在寻找创建我自己的插件初始化器。

  /**
   * Initialize plugins on any elements within `elem` (and `elem` itself) that aren't already initialized.
   * @param {Object} elem - jQuery object containing the element to check inside. Also checks the element itself, unless it's the `document` object.
   * @param {String|Array} plugins - A list of plugins to initialize. Leave this out to initialize everything.
   */
  reflow: function(elem, plugins) {

    // If plugins is undefined, just grab everything
    if (typeof plugins === 'undefined') {
      plugins = Object.keys(this._plugins);
    }
    // If plugins is a string, convert it to an array with one item
    else if (typeof plugins === 'string') {
      plugins = [plugins];
    }

    var _this = this;

    // Iterate through each plugin
    $.each(plugins, function(i, name) {
      // Get the current plugin
      var plugin = _this._plugins[name];

      // Localize the search to all elements inside elem, as well as elem itself, unless elem === document
      var $elem = $(elem).find('[data-'+name+']').addBack('[data-'+name+']');

      // For each plugin found, initialize it
      $elem.each(function() {
        var $el = $(this),
            opts = {};
        // Don't double-dip on plugins
        if ($el.data('zfPlugin')) {
          console.warn("Tried to initialize "+name+" on an element that already has a Foundation plugin.");
          return;
        }

        if($el.attr('data-options')){
          var thing = $el.attr('data-options').split(';').forEach(function(e, i){
            var opt = e.split(':').map(function(el){ return el.trim(); });
            if(opt[0]) opts[opt[0]] = parseValue(opt[1]);
          });
        }
        try{
          $el.data('zfPlugin', new plugin($(this), opts));
        }catch(er){
          console.error(er);
        }finally{
          return;
        }
      });
    });
  }

谢谢

Answer 1

Foundation 对 JS 组件使用插件类型的方法。每个插件都使用 registerPlugin 函数注册和初始化。以 DropDown 组件为例，此调用 Foundation.plugin(Dropdown, 'Dropdown'); 为 DropDown 取得了成功。

/**
    * @function
    * Populates the _uuids array with pointers to each individual plugin instance.
    * Adds the `zfPlugin` data-attribute to programmatically created plugins to allow use of $(selector).foundation(method) calls.
    * Also fires the initialization event for each plugin, consolidating repetitive code.
    * @param {Object} plugin - an instance of a plugin, usually `this` in context.
    * @param {String} name - the name of the plugin, passed as a camelCased string.
    * @fires Plugin#init
    */
registerPlugin: function (plugin, name) {
    var pluginName = name ? hyphenate(name) : functionName(plugin.constructor).toLowerCase();
    plugin.uuid = this.GetYoDigits(6, pluginName);

    if (!plugin.$element.attr('data-' + pluginName)) {
    plugin.$element.attr('data-' + pluginName, plugin.uuid);
    }
    if (!plugin.$element.data('zfPlugin')) {
    plugin.$element.data('zfPlugin', plugin);
    }
    /**
    * Fires when the plugin has initialized.
    * @event Plugin#init
    */
    plugin.$element.trigger('init.zf.' + pluginName);

    this._uuids.push(plugin.uuid);

    return;
}

Zurb Foundation 如何检测 javascript 个组件？

How does Zurb Foundation detect javascript components?

javascript

zurb-foundation

可能的解决方案

我想知道

初始化插件 Zurb Foundation