我想知道在javascript中编写可重用代码的这种方法

I would like to know this approach of writing reusable code in javascript

本文关键字：代码 方法 想知道 javascript      更新时间：2023-09-26

我以前看过一个教程，在那个教程中，作者使用了以下方法来编写可重用的代码。我正试图找到那个教程，但还没有用。我想知道一些关于下面的方法，以及如何与new操作符重用这一点，而不将模块添加到全局命名空间?

(function(factory) {
})(function() {
    // All of the logic code was here in that tutorial.
});

我认为你应该看看模块模式，它旨在创建可重用的良好封装的javascript组件

这里有一个简短的例子

 MyModule = function(){
      var privateAttribute = 2;
      return {
         publicAttribute : "this is a public attribute";
         publichMethod : function (param1){console.log(param1);}
      }
 }();
var module = MyModule;
module.putlicMethod("hello world");

所以，这个想法是第二个函数是你在第一个函数中作为factory参数传递进来的，所以你会创建factory的实例并在TOP函数中针对这些实例编写代码-而不是底部函数。最下面的函数是模块定义。

感谢@Bergi让我走上了正确的道路。

下面是一个示例代码: 

(function(factory) {
  var constructor = new factory();
  var obj1 = new constructor();
  var obj2 = new constructor();
  console.log("obj1: ", obj1);
  console.log("obj2: ", obj2);
})(function() {
  return function() {
    return {
      prop1: "123",
      prop2: "ABC"
    }
  }
});

从代码示例中很难确切地知道您在寻找什么，但是代码看起来类似于用于定义可重用模块的通用模块定义模式(UMD)，用于与各种模块加载器一起使用。

UMD的一个例子(取自本页)，它说明了您在代码中描述的内容;在较低的函数中实际的代码逻辑(模块)，它作为参数factory传递给处理模块设置的上层函数:

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD
        define(['jquery'], factory);
    } else if (typeof exports === 'object') {
        // Node, CommonJS-like
        module.exports = factory(require('jquery'));
    } else {
        // Browser globals (root is window)
        root.returnExports = factory(root.jQuery);
    }
}(this, function ($) {
    //    methods
    function myFunc(){};
    //    exposed public method
    return myFunc;
}));
相关文章：