javascript - 如何停止一遍又一遍地重复相同的 Javascript 函数

Question

随着我编写越来越多的 Javascript，我发现自己一遍又一遍地重复某些变量和函数。例如，在我当前的项目中，我已经使用了这段代码 6 次：

var loadDataInto = $('#page');

loadDataInto.empty();
loadDataInto.UIBusy({'color':'#000', 'size': '100px'});

但是，我每次使用它时都会更改 loadDataInto 和 loadDataInto.UIBusy 的值。这只是我似乎重复代码的一个例子，希望它是一个足够好的例子。

有没有办法清理我的代码并声明一次，在我调用它时更改值？几乎像一个SASS混合？我希望这是有道理的！

提前谢谢了。

Answer 1

使它成为一个函数：

function dataLoad(id, color, size) {
    var loadDataInto = $('#' + id);

    loadDataInto.empty();
    loadDataInto.UIBusy({'color':color, 'size': size});
}

Answer 2

另一个选项，类似于@tymeJV，但传递styles而不是单独的颜色和大小参数：

function dataLoad(id, styles) {
    var loadDataInto = $('#' + id);

    loadDataInto.empty();
    loadDataInto.UIBusy(styles);
}

Answer 3

您可以扩展 jQuery 并使用选择器：

(function( $ ){
   $.fn.myfunction = function() {
      this.empty();
      this.UIBusy({'color':'#000', 'size': '100px'});
   }; 
})( jQuery );

$('#page').myfunction();

带参数（如Pointy所说）：

(function( $ ){
   $.fn.myfunction = function(color, size) {
      this.empty();
      this.UIBusy({'color':color, 'size': size});
   }; 
})( jQuery );

$('#page').myfunction('#000', '100px');