详谈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 相关文章推荐
用Mootools获得操作索引的两种方法分享
Dec 12 Javascript
JS拖拽插件实现步骤
Aug 03 Javascript
js实现页面跳转的五种方法推荐
Mar 10 Javascript
AngularJS在IE下取数据总是缓存问题的解决方法
Aug 05 Javascript
谈谈因Vue.js引发关于getter和setter的思考
Dec 02 Javascript
js实现的xml对象转json功能示例
Dec 24 Javascript
jQuery实现限制文本框的输入长度
Jan 11 Javascript
详解webpack进阶之插件篇
Jul 06 Javascript
vue封装第三方插件并发布到npm的方法
Sep 25 Javascript
使用Bootstrap和Vue实现用户信息的编辑删除功能
Oct 25 Javascript
layui中使用jquery控制radio选中事件的示例代码
Aug 15 jQuery
vue 数据双向绑定的实现方法
Mar 04 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
PHP垃圾回收机制简单说明
2010/07/22 PHP
Zend Framework分发器用法示例
2016/12/11 PHP
基于PHP实现生成随机水印图片
2020/12/09 PHP
javascript中的对象创建 实例附注释
2011/02/08 Javascript
如何改进javascript代码的性能
2015/04/02 Javascript
jQuery包裹节点用法完整示例
2016/09/13 Javascript
RequireJS简易绘图程序开发
2016/10/28 Javascript
微信小程序 wxapp内容组件 text详细介绍
2016/10/31 Javascript
canvas基础绘制-绚丽倒计时的实例
2017/09/17 Javascript
vue组件发布到npm简单步骤
2017/11/30 Javascript
解决vue-router进行build无法正常显示路由页面的问题
2018/03/06 Javascript
LayUi中接口传数据成功,表格不显示数据的解决方法
2018/08/19 Javascript
使用electron实现百度网盘悬浮窗口功能的示例代码
2018/10/24 Javascript
Jquery实现无缝向上循环滚动列表的特效
2019/02/13 jQuery
Vue实现将数据库中带html标签的内容输出(原始HTML(Raw HTML))
2019/10/28 Javascript
node.js使用zlib模块进行数据压缩和解压操作示例
2020/02/12 Javascript
vue 组件基础知识总结
2021/01/26 Vue.js
[01:59]DOTA2首部纪录片《Free to play》预告片
2014/03/12 DOTA
[31:33]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS DT 第一场
2014/05/23 DOTA
比较详细Python正则表达式操作指南(re使用)
2008/09/06 Python
用实例详解Python中的Django框架中prefetch_related()函数对数据库查询的优化
2015/04/01 Python
Python读写Json涉及到中文的处理方法
2016/09/12 Python
使用python对excle和json互相转换的示例
2018/10/23 Python
利用Tensorflow构建和训练自己的CNN来做简单的验证码识别方式
2020/01/20 Python
使用Python内置模块与函数进行不同进制的数的转换
2020/04/26 Python
在 Windows 下搭建高效的 django 开发环境的详细教程
2020/07/27 Python
HTML5单页面手势滑屏切换原理分析
2017/07/10 HTML / CSS
Spartoo英国:欧洲最大的网上鞋店
2016/09/13 全球购物
美国廉价机票预订网站:Cheapfaremart
2018/04/28 全球购物
如何安装ruby on rails
2014/02/09 面试题
宝宝周岁宴答谢词
2014/01/26 职场文书
农民工工资支付承诺函
2014/03/31 职场文书
询价采购方案
2014/06/09 职场文书
欢迎词范文
2015/01/27 职场文书
2015年市场部工作总结
2015/04/30 职场文书
HTML5中 rem适配方案与 viewport 适配问题详解
2021/04/27 HTML / CSS