Question

现在我正在编写一个小jQuery插件，以获得乐趣和利润，所以由于我对这个库不太熟悉，所以有一些问题让我感到困惑。

假设我们有一个非常简单的插件：

(function($) {

  onButtonPress() {
    console.log('Button pressed!'); 
  }

  render(container, settings) {
    $(container).addClass(settings.boxClass);
    $('<button></button>').appendTo(container).addClass(settings.addImageButton).on('click', onButtonPress); 
  }

  $.fn.myAwesomeForm = function(options){
    var settings = $.extend({
      'boxClass': 'box-header with-border',
      'addImageButton': 'btn btn-primary btn-sm',
    }, options);

    render(this, settings);
  }
}(jQuery));

1）让我们假设我们的render（）方法是使用25个不同的函数实现的，它们总共有400行代码。其中一些函数负责绘制UI，其中一些函数正在执行ajax查询，其中一些只是我为减少代码的数量（以及丑陋）所做的一些有用的代码片段。

如何将此代码拆分为单独的文件？据我所知，我需要在不同的文件中编写代码，然后使用像grunt / gulp这样的工具创建一个任务或观察程序，将它们全部合并到一个* .js文件中（并且可能还提供缩小版本），但是现在我对我应该怎么做有点困惑。是否存在任何类型的“最佳实践”或任何常见的方法来确保我的代码对其他可能的维护者不那么混乱？

2）假设默认设置是70个[可能是嵌套的]元素的数组，我想在onButtonPress函数中访问其中一个元素。哦，也是我想在someOther函数中访问的另一个，并且我需要一些deleteForm（）函数，所以一般来说，如果我的代码更好，我可以从几乎每个地方访问设置数组。代码，最重要的是，我可以在页面上有5-6个表单实例，所以我不能在插件文件中使用local-scope变量。

我读到了在数据字段中保存设置的方法，但坦率地说让我觉得有点奇怪。有没有更好的方法来实现它？

3）假设我的插件正在增长，现在我想为Bootstrap和Sematic UI框架添加一些预定义的设置，添加到我现在使用的AdminLTE中。

当然，通常我希望我的$（'＃form'）。myAwesomeForm（{}）调用不是70行长，所以一般我想找到一种方法以某种方式移动另一个文件中的默认设置，说“myplugin-defaults-lte.js”，那么我可以这样做：

<script type='text/javascript' src="myplugin-defaults-bootstrap.min.js">
<script type='text/javascript' src="myplugin.min.js">
<script type='text/javascript'>
   // Here's my form. Already bootstrap-customized.
   $('#form').myAwesomeForm();
</script>

我不确定这是不是最好的模式，但也许你有了这个想法。所以一般来说，任何人都可以提供一个简单的代码片段，或类似的东西，因为在这一点上，事情开始让我感到困惑，所以我真的不确定如何正确处理它？</ p>

很少有基本的jQuery概念（将代码分成文件，设置存储，模块化系统）

0 个答案: