javascript中UMD规范的代码推演


Posted in Javascript onAugust 29, 2018

1. UMD规范

地址:https://github.com/umdjs/umd

UMD规范,就是所有规范里长得最丑的那个,没有之一!!!它是为了让模块同时兼容AMD和CommonJs规范而出现的,多被一些需要同时支持浏览器端和服务端引用的第三方库所使用。UMD是一个时代的产物,当各种环境最终实现ES harmony的统一的规范后,它也将退出历史舞台。

UMD规范的结构乍一看非常复杂,主要是因为想要看懂这段范式需要一些javascript基础知识,它的基本结构是这样的:

(function (root, factory) {
 if (typeof define === 'function' && define.amd) {
  // AMD
  define(['jquery', 'underscore'], factory);
 } else if (typeof exports === 'object') {
  // Node, CommonJS之类的
  module.exports = factory(require('jquery'), require('underscore'));
 } else {
  // 浏览器全局变量(root 即 window)
  root.returnExports = factory(root.jQuery, root._);
 }
}(this, function ($, _) {
 // 方法
 function a(){}; // 私有方法,因为它没被返回 (见下面)
 function b(){}; // 公共方法,因为被返回了
 function c(){}; // 公共方法,因为被返回了

 // 暴露公共方法
 return {
  b: b,
  c: c
 }
}));

2. 源码范式推演
2.1 基本结构

先来看最外层的结构:

(function (){}());

非常简单,就是一个自执行函数。既然它是一个模块化的标准,也就意味着这个自执行函数最终可以导出一个模块,那么从代码的角度来讲实际上有两种常见的实现方式:

  1. return返回一个模块;
  2. 实参传入一个对象,把函数内部生成好的需要导出的东西挂在这个对象的属性上;

可以看到上面的函数体内部是没有return语句的,那么可以猜测UMD在实现时是采用了第二种方式。既然UMD是一种模块化的规范,那么它的功能就是根据使用要求生产模块,也就是说它的职责定位叫做模块工厂,我们可以定义一个factory方法,每当执行该方法时,就回返回一个模块,所以它的基本结构就变成了如下的样子:

(function (factory){
 //假设没有使用任何模块化方案,那么将工厂函数执行后返回的内容直接挂载到全局
 window.Some_Attr = factory();
}(function(){
 //自定义模块主体的内容
 /*
  var a,b,c
  function a1(){}
  function b1(){}
  function c1(){}
  return {
   a:a1,
   b:b1
  }
  */
}))

也就是说我们自定义一个匿名函数,然后把它当做实参传给了自执行函数,然后在自执行函数内部通过形参来访问这个工厂方法(或者你会更熟悉回调函数或callback这样的叫法),把它简单地挂在到全局对象上,这样就完成了基本的模块导出。

有的时候我们也希望可以将模块挂载到非全局的环境,将挂载对象动态传入可以让代码变得更灵活,此处涉及到一个基础知识,就是浏览器环境中的全局对象拥有parent,top,self三个属性来追踪页面中嵌入<iframe>后引入的新的Window对象的,单页面Window.self是指向自己的,代码中常通过是否包含self属性来鉴别全局对象,所以此处的写法可以改进为兼容:

(function(root,factory){
 root.Some_Attr = factory();
}(self !== undefined ? self : this, function(){
 
}));

2.2 适配AMD

接着我们先来加入AMD的规范的适配,规范地址:AMD规范github地址:https://github.com/amdjs/amdjs-api/blob/master/AMD.md

/*
* AMD规范的模块定义格式是define(id?, dependencies?, factory),factory就是实际的模块内容
*/
(function (factory){
 //判断全局环境是否支持AMD标准
 if(typeof define === 'function' && define.amd){
  //定义一个AMD模块
  define([/*denpendencies*/],factory);
 }
}(function(/*formal parameters*/){
 //自定义模块主体的内容
 /*
  var a,b,c
  function a1(){}
  function b1(){}
  function c1(){}
  return {
   a:a1,
   b:b1
  }
  */
}))

2.3 适配CommonJs

接着我们先来加入CommonJs的规范的适配:

/*
* CommonJs规范使用require('moduleName')的格式来引用模块,使用module.exports对象输出模块,所以只要把模块的输出内容挂载到module.exports上就完成了模块定义。
*/
(function (factory){
 //判断全局环境是否支持CommonJs标准
  if(typeof exports === 'object' && typeof define !== 'function'){
    module.exports = factory(/*require(moduleA), require(moduleB)*/);
  }
}(function(/*formal parameters*/){
 //自定义模块主体的内容
 /*
  var a,b,c
  function a1(){}
  function b1(){}
  function c1(){}
  return {
   a:a1,
   b:b1
  }
  */
}))

加入对CommonJs的适配后,函数主体中return的内容(一般是一个对象)就被挂载到了module.exports上,如果你编写过node.js代码,对此一定不会陌生。

把上面的片段揉到一块,你也就看懂UMD的样子了。

3. 更具针对性的UMD范式

UMD在其github主页上提供了更具针对性的范式,适用于不同的场景,感兴趣的读者可以自行查看(地址在第一节已经给出)。

javascript中UMD规范的代码推演

在此贴一个可能对大多数开发者比较有用的jqueryPlugin的开发范式,如果看懂了上面的分析,那么下面的代码应该不难看懂:

// Uses CommonJS, AMD or browser globals to create a jQuery plugin.
(function (factory) {
 if (typeof define === 'function' && define.amd) {
  // AMD. Register as an anonymous module.
  define(['jquery'], factory);
 } else if (typeof module === 'object' && module.exports) {
  // Node/CommonJS
  module.exports = function( root, jQuery ) {
   if ( jQuery === undefined ) {
    // require('jQuery') returns a factory that requires window to
    // build a jQuery instance, we normalize how we use modules
    // that require this pattern but the window provided is a noop
    // if it's defined (how jquery works)
    if ( typeof window !== 'undefined' ) {
     jQuery = require('jquery');
    }
    else {
     jQuery = require('jquery')(root);
    }
   }
   factory(jQuery);
   return jQuery;
  };
 } else {
  // Browser globals
  factory(jQuery);
 }
}(function ($) {
 $.fn.jqueryPlugin = function () { return true; };
}));

4. 模块化开发

前端模块化本身是一个稍显混乱的话题,笔者自己最初也是require( )和require.js傻傻分不清楚,但模块化是前端开发中非常重要的课题,如果你不想一辈子只是在一个页面内写代码,这一关是一定要过的,感兴趣的读者可以按照下面的基本类别划分分块进行学习。

javascript中UMD规范的代码推演

Javascript 相关文章推荐
让广告代码不再影响你的网页加载速度
Jul 07 Javascript
理解Javascript的call、apply
Dec 16 Javascript
Webpack 实现 AngularJS 的延迟加载
Mar 02 Javascript
JavaScript函数节流概念与用法实例详解
Jun 20 Javascript
JavaScript易错知识点整理
Dec 05 Javascript
React-Native中禁用Navigator手势返回的示例代码
Sep 09 Javascript
arcgis for js栅格图层叠加(Raster Layer)问题
Nov 22 Javascript
微信小程序如何获取用户手机号
Jan 26 Javascript
利用JavaScript缓存远程窃取Wi-Fi密码的思路详解
Nov 05 Javascript
js实现简单分页导航栏效果
Jun 28 Javascript
Vue项目中ESlint规范示例代码
Jul 04 Javascript
js对象数组和对象的使用实例详解
Aug 27 Javascript
详解webpack自定义loader初探
Aug 29 #Javascript
在vue中使用SockJS实现webSocket通信的过程
Aug 29 #Javascript
微信小程序自定义select下拉选项框组件的实现代码
Aug 28 #Javascript
微信小程序中上传图片并进行压缩的实现代码
Aug 28 #Javascript
vee-validate vue 2.0自定义表单验证的实例
Aug 28 #Javascript
vue+element-ui动态生成多级表头的方法
Aug 28 #Javascript
jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】
Aug 28 #jQuery
You might like
生成静态页面的PHP类
2006/07/15 PHP
PHP中将字符串转化为整数(int) intval() printf() 性能测试
2020/03/20 PHP
php修改指定文件后缀的方法
2014/09/11 PHP
使用WordPress发送电子邮件的相关PHP函数用法解析
2015/12/15 PHP
PHP使用PDO实现mysql防注入功能详解
2019/12/20 PHP
jQuery 版元素拖拽原型代码
2011/04/25 Javascript
jQuery 选择器项目实例分析及实现代码
2012/12/28 Javascript
javascript实现div的显示和隐藏的小例子
2013/06/25 Javascript
js实现选中页面文字将其分享到新浪微博
2015/11/05 Javascript
JS简单实现仿百度控制台输出信息效果
2016/09/04 Javascript
JavaScript实现自动切换图片代码
2016/10/11 Javascript
微信小程序之网络请求简单封装实例详解
2017/06/28 Javascript
Vue的事件响应式进度条组件实例详解
2018/02/04 Javascript
vue 微信授权登录解决方案
2018/04/10 Javascript
jQuery实现的五星点评功能【案例】
2019/02/18 jQuery
Layui之table中的radio在切换分页时无法记住选中状态的解决方法
2019/09/02 Javascript
js实现百度登录窗口拖拽效果
2020/03/19 Javascript
vue-cli3 热更新配置操作
2020/09/18 Javascript
VueCli生产环境打包部署跨域失败的解决
2020/11/13 Javascript
Python之用户输入的实例
2018/06/22 Python
python实现连续图文识别
2018/12/18 Python
简单了解Django ORM常用字段类型及参数配置
2020/01/07 Python
Python tcp传输代码实例解析
2020/03/18 Python
解决jupyter notebook 前面书写后面内容消失的问题
2020/04/13 Python
可视化pytorch 模型中不同BN层的running mean曲线实例
2020/06/24 Python
css3 box-shadow阴影(外阴影与外发光)图示讲解
2017/08/11 HTML / CSS
Canvas制作的下雨动画的示例
2018/03/06 HTML / CSS
韩国演唱会订票网站:StubHub韩国
2019/01/17 全球购物
在职研究生自我鉴定
2013/10/16 职场文书
工程造价专业大学生职业规划范文
2014/03/09 职场文书
联欢晚会主持词
2014/03/25 职场文书
《三顾茅庐》教学反思
2014/04/10 职场文书
上班迟到检讨书范文
2015/05/06 职场文书
2016年社会主义核心价值观心得体会
2016/01/21 职场文书
MySQL 如何设计统计数据表
2021/06/15 MySQL
vue组件冲突之引用另一个组件出现组件不显示的问题
2022/04/13 Vue.js