• 技术文章 >web前端 >js教程

    手把手教你使用JS给通用模块写法(代码详解)

    奋力向前奋力向前2021-08-26 14:05:23转载198

    之前的文章《浅析JavaScript中时间戳运算的方法(附代码)》中,给大家了解了js中时间戳运算的方法。下面本篇文章给大家怎么使用JS给通用模块写法,我们一起看看怎么做。

    模块化这个问题并非一开始就存在,WWW刚刚问世的时候,htmlJavaScriptCSSJSCSS都是后来在网景被引进浏览器的)都是极其简单的存在,不需要模块化。

    模块化的需求是规模的产物,当web page进化到web application,浏览器端处理的逻辑越来越复杂,展现的样式和动画越来多,对于工程的要求也就越来越高。于是模块化的需求也就产生了。模块化的意义:

    JavaScript长久以来被认为是简单的脚本语言,实际上情况早就发生来变化,在最新版的 ECMA-262(ES6)文档中强调JavaScript是通用编程语言而不是脚本语言。脚本语言,比如shell并不是用来完成复杂功能的,只是用来做一些自动化控制,是不需要模块化的。而用于构建复杂系统通用编程语言(比如Java)一般都有模块的实现。

    ES6以前,JS语言没有模块化,如何让JS不止运行在浏览器,且能更有效的管理代码, 于是应运而生CommonJS这种规范,定义了三个全局变量:

    require,exports,module

    require引入时获取的是这个模块对外暴露的接口(exports

    Node.js使用了CommonJS规范:

    var foo = require("foo");
    var out = foo.sayName();
    module.exports = out;

    在浏览器端,不像Node.js内部支持CommonJS,如何进行模块化,于是出现了CMDAMD两种方式,其主要代表是seajsrequirejs,他们都定义了一个全局函数define来创建一个模块:

    //CMD
    define(function (require, exports, module) {
      var foo = require("foo");
      var out = foo.sayName();
      module.exports = out;
    });
    
    //AMD
    define(["foo"], function (foo) {
      var out = foo.sayName();
      return out;
    });

    可以看出CMD完好的保留了CommonJS的风格, 而AMD用了一种更简洁的依赖注入和函数返回的方式实现模块化。 两者除风格不同外最大区别在于加载依赖模块的方式,CMD是懒加载,在require时才会加载依赖, 而AMD是预加载,在定义模块时就提前加载好所有依赖。

    我们要实现一个模块,让它既能在seajs(CMD)环境里引入,又能在requirejs(AMD)环境中引入,当然也能在Node.js(CommonJS)中使用,另外还可以在没有模块化的环境中用script标签全局引入。

    首先搞一个模块

    var factory = function () {
      var moduleName = {};
      return moduleName;
    };

    当然return输出的可以是任何值,对象,类,其他都可以

    首先满足Node.js或者ES6,我们可以通过全局变量moduleexports来判断

    var factory = function () {
      var moduleName = {};
      return moduleName;
    };
    if (typeof module !== "undefined" && typeof exports === "object") {
      module.exports = factory;
    }

    CMDAMD中,我们需要提供一个工厂函数传入define来定义模块,当没有上述全局变量,且有define全局变量时,我们认为是AMDCMD,可以直接将factory传入define

    var factory = function () {
      var moduleName = {};
      return moduleName;
    };
    if (typeof module !== "undefined" && typeof exports === "object") {
      module.exports = factory;
    } else if (typeof define === "function" && (define.cmd || define.amd)) {
      define(factory);
    }

    注意:CMD 其实也支持 return 返回模块接口,所以两者可以通用。

    然后还要满足script标签全局引入,我们可以将模块放在window上,为了模块内部在浏览器和Node.js中都能使用全局对象,我们可以做此判断:

    var global = typeof window !== "undefined" ? window : global;

    我们用一个立刻执行的闭包函数将所有代码包含,来避免污染全局空间,并将global对象传入闭包函数,最终变成这样:

    (function (global) {
      var factory = function () {
        var moduleName = {};
        return moduleName;
      };
      if (typeof module !== "undefined" && typeof exports === "object") {
        module.exports = factory;
      } else if (typeof define === "function" && (define.cmd || define.amd)) {
        define(factory);
      } else {
        global.factory = factory;
      }
    })(typeof window !== "undefined" ? window : global);

    注意:闭包前加上分号是为了给前一个模块填坑,分号多了没问题,少了则语句可能发生变化。

    然后,就能愉快的调用了

    //Node.js
    var myModule = require('moduleName')
    
    //Seajs
    define(function(require,exports,module){
      var myModule = require('moduleName')
    })
    
    // Browser global
    <script src='moduleName.js'></script>

    【完】

    推荐学习:JavaScript高级教程

    以上就是手把手教你使用JS给通用模块写法(代码详解)的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:禅境花园,如有侵犯,请联系admin@php.cn删除
    专题推荐:js
    上一篇:浅析JavaScript中时间戳运算的方法(附代码) 下一篇:JavaScript限制输入框只允许整数和小数点(两种方法)
    线上培训班

    相关文章推荐

    • 如何使用JavaScript比较两个日期• 你值得了解的JavaScript“继承之jquery”使用方法(代码详解)• 深入解析JavaScript中对象拷贝方法(附代码)• JavaScript如何获取数字数组的中位数(两种方法)• JavaScript获取关联数组的键的两种方法• 浅析javascript中Reflect内置对象(代码详解)

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网