详谈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 相关文章推荐
Iframe thickbox2.0使用的方法
Mar 05 Javascript
JavaScript弹簧振子超简洁版 完全符合能量守恒,胡克定理
Oct 25 Javascript
JS下载文件|无刷新下载文件示例代码
Apr 17 Javascript
jQuery 2.0.3 源码分析之core(一)整体架构
May 27 Javascript
网站基于flash实现的Banner图切换效果代码
Oct 14 Javascript
jQuery动画效果图片轮播特效
Jan 12 Javascript
JS获取字符串实际长度(包含汉字)的简单方法
Aug 11 Javascript
Node.js常用工具之util模块
Mar 09 Javascript
微信小程序日期时间选择器使用方法
Feb 01 Javascript
Vue的事件响应式进度条组件实例详解
Feb 04 Javascript
puppeteer库入门初探
Jan 09 Javascript
jQuery位置选择器用法实例分析
Jun 28 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
excellent!――ASCII Art(由目标图象生成ascii)
2007/02/20 PHP
php session 错误
2009/05/21 PHP
解析php中如何直接执行SHELL
2013/06/28 PHP
PHP生成验证码时“图像因其本身有错无法显示”的解决方法
2013/08/07 PHP
jquery Firefox3.5中操作select的问题
2009/07/10 Javascript
Javascript 面向对象 继承
2010/05/13 Javascript
Tips 带三角可关闭的文字提示
2010/10/06 Javascript
关于图片的预加载过程中隐藏未知的
2012/12/19 Javascript
jquery获取被勾选的checked(选中)的那一行的3列和4列的值
2013/07/04 Javascript
jquery 使用简明教程
2014/03/05 Javascript
JavaScript中的函数的两种定义方式和函数变量赋值
2014/05/12 Javascript
jQuery实现表格行上移下移和置顶的方法
2015/05/22 Javascript
以WordPress为例讲解jQuery美化页面Title的方法
2016/05/23 Javascript
angularjs数组判断是否含有某个元素的实例
2018/02/27 Javascript
Vue监听一个数组id是否与另一个数组id相同的方法
2018/09/26 Javascript
详解JavaScript中关于this指向的4种情况
2019/04/18 Javascript
vue实现手机端省市区区域选择
2019/09/27 Javascript
JS 数组和对象的深拷贝操作示例
2020/06/06 Javascript
python使用multiprocessing模块实现带回调函数的异步调用方法
2015/04/18 Python
Python中列表和元组的相关语句和方法讲解
2015/08/20 Python
Python中django学习心得
2017/12/06 Python
python3+PyQt5泛型委托详解
2018/04/24 Python
python爬虫框架scrapy实现模拟登录操作示例
2018/08/02 Python
解决pandas.DataFrame.fillna 填充Nan失败的问题
2018/11/06 Python
Win10系统下安装labelme及json文件批量转化方法
2019/07/30 Python
python实现通过队列完成进程间的多任务功能示例
2019/10/28 Python
基于Django实现日志记录报错信息
2019/12/17 Python
Python selenium抓取虎牙短视频代码实例
2020/03/02 Python
python图片合成的示例
2020/11/09 Python
canvas学习和滤镜实现代码
2018/08/22 HTML / CSS
iRobot官网:改变生活的家用机器人品牌
2016/09/20 全球购物
预订奥兰多和佛罗里达州公园门票:FloridaTix
2018/01/03 全球购物
宝拉珍选英国官网:Paula’s Choice英国
2019/05/29 全球购物
上党课的心得体会
2014/09/02 职场文书
担保书范本
2015/01/20 职场文书
《学会看病》教学反思
2016/02/17 职场文书