Modular programming idea in js

Today we have a topic:
if you are a front-end developer familiar with modular packaging tools. Do not consider using tools that are already implemented, such as require.js. It is required to implement it in a native way, how to introduce three modules, that is, three js files, such as a.js, b.js and c.js. The requirement is introduced at the same time, and then the corresponding callback function is executed.
thought: the core of modularization thought


according to the answer obtained by the above brother, I wrote it down casually, which may be incorrect, never mind

.

Let's write two sub-modules. The principle should be the same

.

main.js

var opt1 = {
  type: 'GET',
  url: './1.js',
  headers: {
    "Content-Type": "text/plain"
  },
  dataType: "script"
}
var opt2 = {
  type: 'GET',
  url: './2.js',
  headers: {
    "Content-Type": "text/plain"
  },
  dataType: "script"
}

var pro1 = ajax(opt1)
var pro2 = ajax(opt2)

Promise.all([pro1, pro2]).then(function(result) {
  for(var i = 0, len = result.length; i < len; i PP) {
    eval(result[i])
  }
  this.mod1 = mod1
})

function ajax(options) {
  options = options || {};
  options.type = (options.type || "GET").toUpperCase();
  options.async = (options.async == false) ? false : true;
  options.dataType = options.dataType || "json";
  //form-data{}
  options.headers = options.headers || { "Content-Type": "application/json" };
  var xhr = _createXHR();
  var isPost = options.type == 'POST';
  return new Promise(function (resolve, reject) {
    xhr.onreadystatechange = function () {
      if (xhr.readyState == 4) {
        if (xhr.status == 200) {
          resolve((options.dataType == 'json') ? JSON.parse(xhr.responseText) : xhr.responseText);
        }
        else {
          reject(xhr.status);
        }
      }
    }
    xhr.open(options.type.toUpperCase(), isPost ? options.url : encodeURI(options.url), options.async);
    for (var key in options.headers) {
      xhr.setRequestHeader(key, options.headers[key]);
    }
    xhr.send(isPost ? options.data : null);
  });
  function _createXHR() {
    if (window.XMLHttpRequest) {
      return new XMLHttpRequest();
    }
    else if (window.ActiveXObject) {
      return new ActiveXObject('Microsoft.XMLHTTP');
    }
    else {
      alert('Your browser does not support Ajax');
    }
  }
}

1.js

var mod1 = {
  say: function (it) {
    console.log(it)
  }
}

2.js

var mod2 = {
  bark: function () {
    alert('wong wong')
  }
}

then execute it in the browser:

for the time being, I only think of the method of changing global variables by putting the objects in the module on top of window.

as for the request you said will be sent to the server, I think the main module and the sub-module are generally placed on the same server. Even if the main module initiates a request to load the sub-module, it is equivalent to loading the js file locally on the server. There is no big problem

.

is for reference only.

< hr >

I just saw that Promise.all sends out requests by Synchronize in order. Explain here so as not to be misleading, but they are all asynchronous operations, and sending requests in sequence will not block each other


ajax request js file and wrap it in wrapper eval , I guess so.

in addition, you can take a look at the solution of node.js. It should be OK to replace the read file part with a request, but the parsing strategy of the module may change slightly.

Menu