Question

我正在尝试创建一个全局函数，我可以在.js文件中的任何位置使用它。

我们有超过50个javascript文件连接在一起，在每个文件中我希望能够在任何地方使用此库。

Localized.js

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module.
        define(factory);
    } else if (typeof exports === 'object') {
        // Node. Does not work with strict CommonJS, but
        // only CommonJS-like enviroments that support module.exports,
        // like Node.
        module.exports = factory();
    } else {
        // Browser globals (root is window)
        if (typeof Localized !== 'undefined') {
            throw 'Localized" already in use';
        }

        root.Localized = factory();
    }
}(this, function () {

  var _strings,
      _readyCallback,
      _isReady = false,
      _requestedStrings = false;

  function ready( data ) {
     _readyCallback = _readyCallback || function(){};

    function domReady() {
      // If the DOM isn't ready yet, repeat when it is
      if ( document.readyState !== "complete" ) {
        document.onreadystatechange = domReady;
        return;
      }
      document.onreadystatechange = null;
      _strings = data;
      _isReady = true;
      _readyCallback();
    }

    domReady();
  }

  // Get the current lang from the document's HTML element, which the
  // server set when the page was first rendered. This saves us having
  // to pass extra locale info around on the URL.
  function getCurrentLang() {
    var html = document.querySelector( "html" );
    return html && html.lang ? html.lang : "en-US";
  }

  var Localized = {
    get: function( key ) {
      if ( !_strings ) {
        console.error( "[goggles.webmaker.org] Error: string catalog not found." );
        return "";
      }
      return ( _strings[ key ] || "" );
    },

    getCurrentLang: getCurrentLang,

    // Localized strings are ready
    ready: function( cb ) {
      if ( !_requestedStrings ) {
        _requestedStrings = true;
        _readyCallback = cb;

        function onload( data ) {
          ready( data );
        }
        onload.error = console.log;

        var xhr = new XMLHttpRequest();
        xhr.open('GET', '/strings/' + getCurrentLang() + '?bust=' + Date.now(), false);
        xhr.send(null);
        if (xhr.status !== 200) {
          err = new Error(id + ' HTTP status: ' + status);
          err.xhr = xhr;
          onload.error(err);
          return;
        }
        onload(JSON.parse(xhr.responseText));
      };
      if ( _isReady ) {
        _readyCallback();
      }
    },

    isReady: function() {
      return !!_isReady;
    }
  };
  return Localized;
}));

所以我希望能够进入任何 50 文件并执行Localized.get("something"); 但是，我甚至没有 Web控制台中的Localized对象。例如，如果您有jQuery，则可以在Web控制台中执行$，然后就可以执行任何操作。

Answer 1

事实证明，我的javascript是全局定义的，并且可以在包含的文件中随处访问，也可以从控制台调用，除非我必须通过执行来初始化它Localized.ready(function(){}); 然后我可以让它发挥作用。

因此，如果有人想要创建自己的全局函数并使其成为标准，他们可以按照这种方式。

amdWeb.js 是我用作创建全局函数的标准。

Answer 2

你有没有看过Three.js的全局函数？这很容易理解！

(function (global, factory) {
	typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
	typeof define === 'function' && define.amd ? define(['exports'], factory) :
	(factory((global.THREE = global.THREE || {})));
}(this, (function (exports) { 'use strict';

在JavaScript中创建一个全局函数

2 个答案: