详谈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 相关文章推荐
JavaScript 学习笔记(十五)
Jan 28 Javascript
php 中序列化和json使用介绍
Jul 08 Javascript
js中this用法实例详解
May 05 Javascript
AngularJS实现元素显示和隐藏的几个案例
Dec 09 Javascript
jQuery+正则+文本框只能输入数字的实现方法
Oct 07 Javascript
微信小程序 PHP生成带参数二维码
Feb 21 Javascript
webstorm和.vue中es6语法报错的解决方法
May 08 Javascript
javascript使用substring实现的展开与收缩文字功能示例
Jun 17 Javascript
ES6 Generator函数的应用实例分析
Jun 26 Javascript
微信小程序开发之map地图组件定位并手动修改位置偏差
Aug 17 Javascript
layui扩展上传组件模拟进度条的方法
Sep 23 Javascript
在Vuex中Mutations修改状态操作
Jul 24 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
PHP获取MSN好友列表类的实现代码
2013/06/23 PHP
php使用imagick模块实现图片缩放、裁剪、压缩示例
2014/04/17 PHP
基于PHP实现解密或加密Cloudflar邮箱保护
2020/06/24 PHP
Jquery Autocomplete 结合asp.net使用要点
2010/10/29 Javascript
js清除input中type等于file的值域(示例代码)
2013/12/24 Javascript
JS实现仿QQ聊天窗口抖动特效
2015/05/10 Javascript
Js与Jq获取浏览器和对象值的方法
2016/03/18 Javascript
浅析JavaScript Array和string的转换(推荐)
2016/05/20 Javascript
第二篇Bootstrap起步
2016/06/21 Javascript
AngularJS基础 ng-switch 指令简单示例
2016/08/03 Javascript
jQuery学习笔记——jqGrid的使用记录(实现分页、搜索功能)
2016/11/09 Javascript
AngularJS之ionic 框架下实现 Localstorage本地存储
2017/04/22 Javascript
node.js中cluster的使用教程
2017/06/09 Javascript
浅谈JS对html标签的属性的干预以及对CSS样式表属性的干预
2017/06/25 Javascript
微信小程序实现分享商品海报功能
2019/09/30 Javascript
Vue动态加载图片在跨域时无法显示的问题及解决方法
2020/03/10 Javascript
javascript设计模式 ? 单例模式原理与应用实例分析
2020/04/09 Javascript
JQuery通过键盘控制键盘按下与松开触发事件
2020/08/07 jQuery
javascript代码实现简易计算器
2021/01/25 Javascript
[43:33]EG vs Spirit Supermajor 败者组 BO3 第一场 6.4
2018/06/05 DOTA
[05:49]DOTA2-DPC中国联赛 正赛 Elephant vs LBZS 选手采访
2021/03/11 DOTA
Pyhthon中使用compileall模块编译源文件为pyc文件
2015/04/28 Python
Python中的自省(反射)详解
2015/06/02 Python
Python堆排序原理与实现方法详解
2018/05/11 Python
Python实现批量修改图片格式和大小的方法【opencv库与PIL库】
2018/12/03 Python
Python调用JavaScript代码的方法
2020/10/27 Python
传播学毕业生求职信
2013/10/11 职场文书
司机检讨书
2014/02/13 职场文书
金融管理应届生求职信
2014/02/20 职场文书
2014年党员教师自我剖析材料
2014/09/30 职场文书
单位委托书
2014/10/15 职场文书
个人委托函范文
2015/01/29 职场文书
如何写好开幕词?
2019/06/24 职场文书
毕业生自荐求职信书写的技巧
2019/08/26 职场文书
PhpSpreadsheet中文文档 | Spreadsheet操作教程实例
2021/04/01 PHP
关于MySQL临时表为什么可以重名的问题
2022/03/22 MySQL