详谈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 相关文章推荐
jQuery为iframe的body添加click事件的实现代码
Apr 07 Javascript
firefox下jquery iframe刷新页面提示会导致重复之前动作
Dec 17 Javascript
鼠标选择动态改变网页背景颜色的JS代码
Dec 10 Javascript
js实现带按钮的上下滚动效果
May 12 Javascript
js的flv视频播放器插件使用方法
Jun 23 Javascript
jquery日历插件datepicker用法分析
Jan 22 Javascript
javascript的几种继承方法介绍
Mar 22 Javascript
AngularJS+Bootstrap实现多文件上传与管理
Nov 08 Javascript
Bootstrap fileinput组件封装及使用详解
Mar 10 Javascript
JavaScript设计模式之模板方法模式原理与用法示例
Aug 07 Javascript
js获取图片的base64编码并压缩
Dec 05 Javascript
vue 数据操作相关总结
Dec 17 Vue.js
使用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
德劲1103的维修打理经验
2021/03/02 无线电
PHP读取配置文件类实例(可读取ini,yaml,xml等)
2015/07/28 PHP
PHP生成随机字符串(3种方法)
2015/09/25 PHP
php删除一个路径下的所有文件夹和文件的方法
2018/02/07 PHP
PHP超低内存遍历目录文件和读取超大文件的方法
2019/05/01 PHP
脚本吧 - 幻宇工作室用到js,超强推荐share.js
2006/12/23 Javascript
精选的10款用于构建良好易用性网站的jQuery插件
2011/01/23 Javascript
基于jquery的使ListNav兼容中文首字拼音排序的实现代码
2011/07/10 Javascript
js实现无需数据库的县级以上联动行政区域下拉控件
2013/08/14 Javascript
全面解析Bootstrap中nav、collapse的使用方法
2016/05/22 Javascript
AngularJS使用ng-app自动加载bootstrap框架问题分析
2017/01/04 Javascript
self.attachevent is not a function的解决方法
2017/04/04 Javascript
使用Dropzone.js上传的示例代码
2017/10/10 Javascript
NodeJs实现定时任务的示例代码
2017/12/05 NodeJs
跨域请求两种方法 jsonp和cors的实现
2018/11/11 Javascript
详解Vue webapp项目通过HBulider打包原生APP(vue+webpack+HBulider)
2019/02/02 Javascript
详解js动态获取浏览器或页面等容器的宽高
2019/03/13 Javascript
JS函数参数的传递与同名参数实例分析
2020/03/16 Javascript
Js on及addEventListener原理用法区别解析
2020/07/11 Javascript
使用Python脚本操作MongoDB的教程
2015/04/16 Python
由Python运算π的值深入Python中科学计算的实现
2015/04/17 Python
Python 实现数据库(SQL)更新脚本的生成方法
2017/07/09 Python
django 2.0更新的10条注意事项总结
2018/01/05 Python
django+xadmin+djcelery实现后台管理定时任务
2018/08/14 Python
pandas DataFrame 行列索引及值的获取的方法
2019/07/02 Python
python区分不同数据类型的方法
2019/10/14 Python
wxpython绘制音频效果
2019/11/18 Python
python实现暗通道去雾算法的示例
2020/09/27 Python
解决pytorch 数据类型报错的问题
2021/03/03 Python
Piercing Pagoda官网:耳环、戒指、项链、手链等
2020/09/28 全球购物
给老婆的搞笑检讨书
2014/01/12 职场文书
学生自我评价范文
2014/02/02 职场文书
群众路线四风问题整改措施
2014/09/27 职场文书
介绍信范文
2015/01/31 职场文书
乌镇导游词
2015/02/02 职场文书
新兵入伍决心书
2015/09/22 职场文书