详谈js模块化规范


Posted in Javascript onJuly 07, 2017

1. CommonJS

用于服务端模块化编程,比如nodejs就采用此规范;

一个文件就是一个模块,require方法用来加载模块,该方法读取一个文件并执行,最后返回文件内部的module.exports对象;

require是默认读取.js文件的,所以require(模块名)可以不写后缀;

同步加载,由于服务端加载的模块一般在本地,所以可以这样;但是在客户器端如果一个模块过大就会导致页面“假死”;

module.exports属性表示当前模块对外输出的接口,其他文件加载该模块,实际上就是读取module.exports变量;为了方便也可以用exports,exports指向module.exports;即exports = module.exports = {}

exports.xxx相当于在导出的对象上添加属性,该属性对调用模块可见;

exports =  相当于给exports重新赋值,这样就切断了和module.exports的关联,调用模块就不能访问exports的对象及其属性;

2. AMD

加载模块:require([module], function(module){});

定义模块:define([module], function(module){});module为依赖模块;

require.js(前端模块化管理的工具库)实现js文件的异步加载,避免网页失去响应;管理模块之间的依赖性,便于代码的编写和维护。

依赖前置,尽早的执行模依赖块,执行顺序不一定是先1后2;

加载非规范的模块

require.config({
 baseUrl: "js/lib",
 paths: {
  "jquery": "jquery.min",
 "underscore": "underscore.min",

 "backbone": "backbone.min"
  },
 shim: {
  'underscore':{
   exports: '_'

 },

 'backbone': {


deps: ['underscore', 'jquery'],


exports: 'Backbone'

 }
 }
});
// exports值(输出的变量名),表明这个模块外部调用时的名称;deps数组,表明该模块的依赖性

3. CMD

define(function(require, exports, module){
 var a = require('a');
 a.foo();
};

Sea.js

依赖就近,且在真正需要使用依赖模块时才执行该模块,顺序固定;

AMD和CMD最大的区别是对依赖模块的执行时机处理不同,而不是加载的时机或者方式不同,二者皆为异步加载模块;

AMD依赖前置,js可以方便知道依赖模块是谁,立即加载;而CMD就近依赖,需要使用把模块变为字符串解析一遍才知道依赖了那些模块

以上这篇详谈js模块化规范就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一个JS小玩意 几个属性相加不能超过一个特定值.
Sep 29 Javascript
在ASP.NET中使用JavaScript脚本的方法
Nov 12 Javascript
在JavaScript中使用JSON数据
Feb 15 Javascript
星期几的不同脚本写法(推荐)
Jun 01 Javascript
vue.js学习笔记:如何加载本地json文件
Jan 17 Javascript
jQuery实现下拉菜单的实例代码
Jun 19 jQuery
VueJs组件之父子通讯的方式
May 06 Javascript
ajax与jsonp的区别及用法
Oct 16 Javascript
详解基于 Node.js 的轻量级云函数功能实现
Jul 08 Javascript
ES6 Class中实现私有属性的一些方法总结
Jul 08 Javascript
vue中使用v-model完成组件间的通信
Aug 22 Javascript
javascript/jquery实现点击触发事件的方法分析
Nov 11 jQuery
使用JavaScript实现alert的实例代码
Jul 06 #Javascript
vuejs手把手教你写一个完整的购物车实例代码
Jul 06 #Javascript
Vue axios 中提交表单数据(含上传文件)
Jul 06 #Javascript
解决webpack打包速度慢的解决办法汇总
Jul 06 #Javascript
详解微信小程序Radio选中样式切换
Jul 06 #Javascript
Node.js 回调函数实例详解
Jul 06 #Javascript
详解vue渲染从后台获取的json数据
Jul 06 #Javascript
You might like
Oracle 常见问题解答
2006/10/09 PHP
php microtime获取浮点的时间戳
2010/02/21 PHP
php iconv() : Detected an illegal character in input string
2010/12/05 PHP
深入探讨<br />和 \r\n两者有什么区别??
2013/06/05 PHP
慎用preg_replace危险的/e修饰符(一句话后门常用)
2013/06/19 PHP
PHP中使用GD库创建圆形饼图的例子
2014/11/19 PHP
如何用PHP来实现一个动态Web服务器
2015/07/29 PHP
Laravel 在views中加载公共页面的实现代码
2019/10/22 PHP
js 获取浏览器高度和宽度值(多浏览器)
2009/09/02 Javascript
利用百度地图JSAPI生成h7n9禽流感分布图实现代码
2013/04/15 Javascript
JS获取URL中参数值(QueryString)的4种方法分享
2014/04/12 Javascript
详细介绍jQuery.outerWidth() 函数具体用法
2015/07/20 Javascript
jQuery弹簧插件编写基础之“又见弹窗”
2015/12/11 Javascript
微信小程序引用iconfont图标的方法
2018/10/22 Javascript
微信小程序实现顶部下拉菜单栏
2018/11/04 Javascript
vue中组件的过渡动画及实现代码
2018/11/21 Javascript
ant design实现圈选功能
2019/12/17 Javascript
Vue中使用Lodop插件实现打印功能的简单方法
2019/12/19 Javascript
微信小程序实现限制用户转发功能的实例代码
2020/02/22 Javascript
[04:21]狐狸妈带你到现场 DOTA2 TI中国区预选赛线下赛路线指引
2014/05/22 DOTA
Python基于回溯法子集树模板实现图的遍历功能示例
2017/09/05 Python
Python hashlib模块实例使用详解
2019/12/24 Python
通过实例学习Python Excel操作
2020/01/06 Python
Python run()函数和start()函数的比较和差别介绍
2020/05/03 Python
Python列表去重复项的N种方法(实例代码)
2020/05/12 Python
python语言实现贪吃蛇游戏
2020/11/13 Python
Django中日期时间型字段进行年月日时分秒分组统计
2020/11/27 Python
CSS3 :default伪类选择器使用简介
2018/03/15 HTML / CSS
LightInTheBox西班牙站点:全球商品在线采购
2016/09/22 全球购物
英国领先的NHS批准的在线药店:Pharmacy2U
2017/01/06 全球购物
自我评价是什么
2014/01/04 职场文书
舞蹈毕业生的自我评价
2014/03/05 职场文书
校园文明标语
2014/06/13 职场文书
2015年客服工作总结范文
2015/04/02 职场文书
幼儿园开学家长寄语(2016春季)
2015/12/03 职场文书
你真的会用Mysql的explain吗
2022/03/31 MySQL