详谈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 相关文章推荐
解密效果
Jun 23 Javascript
javascript 动态table添加colspan\rowspan 参数的方法
Jul 25 Javascript
等待指定时间后自动跳转或关闭当前页面的js代码
Jul 09 Javascript
jQuery之过滤元素操作小结
Nov 30 Javascript
JavaScript定义变量和变量优先级问题探讨
Oct 11 Javascript
jQuery限制图片大小的方法
May 25 Javascript
bootstrap实现图片自动轮播
Dec 21 Javascript
Bootstrap面板使用方法
Jan 16 Javascript
浅谈AngularJS中使用$resource(已更新)
Sep 14 Javascript
Vue-router结合transition实现app前进后退动画切换效果的实例
Oct 11 Javascript
JS实现点击循环切换显示内容的方法
Oct 19 Javascript
微信小程序实现发红包功能
Jul 11 Javascript
使用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
thinkphp3.x连接mysql数据库的方法(具体操作步骤)
2016/05/19 PHP
PHP PDOStatement::fetchAll讲解
2019/01/31 PHP
JQuery.closest(),parent(),parents()寻找父结点
2012/02/17 Javascript
JS防止用户多次提交的简单代码
2013/08/01 Javascript
JavaScript 中的日期和时间及表示标准介绍
2013/08/21 Javascript
JavaScript与ActionScript3两者的同性与差异性
2016/09/22 Javascript
jquery+Jscex打造游戏力度条
2020/09/12 Javascript
微信小程序进行微信支付的步骤昂述
2016/12/01 Javascript
node.js基于mongodb的搜索分页示例
2017/01/22 Javascript
js 颜色选择插件
2017/01/23 Javascript
详解vue2.0脚手架的webpack 配置文件分析
2017/05/27 Javascript
Angularjs中的验证input输入框只能输入数字和小数点的写法(推荐)
2017/08/16 Javascript
Angular5给组件本身的标签添加样式class的方法
2018/04/07 Javascript
JavaScript中常用的简洁高级技巧总结
2019/03/10 Javascript
vue项目中实现缓存的最佳方案详解
2019/07/11 Javascript
vue实现评价星星功能
2020/06/30 Javascript
Python 深入理解yield
2008/09/06 Python
python实现最长公共子序列
2018/05/22 Python
Python2.7.10以上pip更新及其他包的安装教程
2018/06/12 Python
python pymysql链接数据库查询结果转为Dataframe实例
2020/06/05 Python
浅谈Keras的Sequential与PyTorch的Sequential的区别
2020/06/17 Python
用Python进行websocket接口测试
2020/10/16 Python
Python实现PS滤镜中的USM锐化效果
2020/12/04 Python
茵宝(Umbro)英国官方商店:英国足球服装生产商
2016/12/29 全球购物
What is view? why do we have view?
2012/06/22 面试题
药剂学专业应届生自荐信
2013/09/29 职场文书
市场部专员岗位职责
2013/11/30 职场文书
年会主持词结束语
2014/03/27 职场文书
2014年话务员工作总结
2014/11/19 职场文书
创先争优活动个人总结
2015/03/04 职场文书
大学生求职自荐信
2015/03/24 职场文书
2015秋季开学演讲稿范文
2015/07/16 职场文书
2016新党章学习心得体会
2016/01/15 职场文书
详解php中流行的rpc框架
2021/05/29 PHP
windows安装 redis 6.2.6最新步骤详解
2022/04/26 Redis
Python可视化神器pyecharts绘制水球图
2022/07/07 Python