详谈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 相关文章推荐
js prototype截取字符串函数
Apr 01 Javascript
IE浏览器IFrame对象内存不释放问题解决方法
Aug 22 Javascript
几种经典排序算法的JS实现方法
Mar 25 Javascript
使用JQuery中的trim()方法去掉前后空格
Sep 16 Javascript
jquery pagination分页插件使用详解(后台struts2)
Jan 22 Javascript
vue实现element-ui对话框可拖拽功能
Aug 17 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变rgba的a值实现)
Jan 24 Javascript
ES6 Symbol数据类型的应用实例分析
Jun 26 Javascript
jquery树形插件zTree高级使用详解
Aug 16 jQuery
layui 实现table翻页滚动条位置保持不变的例子
Sep 05 Javascript
解决父组件将子组件作为弹窗调用只执行一次created的问题
Jul 24 Javascript
js+h5 canvas实现图片验证码
Oct 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
JAVA/JSP学习系列之四
2006/10/09 PHP
PHP会员找回密码功能的简单实现
2016/09/05 PHP
Laravel源码解析之路由的使用和示例详解
2018/09/27 PHP
扩展Jquery插件处理mouseover时内部有子元素时发生样式闪烁
2011/12/08 Javascript
利用JQuery和JS实现奇偶行背景颜色自定义效果
2012/11/19 Javascript
博客侧边栏模块跟随滚动条滑动固定效果的实现方法(js+jquery等)
2013/03/24 Javascript
JavaScript全排列的六种算法 具体实现
2013/06/29 Javascript
cookie.js 加载顺序问题怎么才有效
2013/07/31 Javascript
jquery 实现两级导航菜单附效果图
2014/03/07 Javascript
js获取上传文件大小示例代码
2014/04/10 Javascript
三种取消选中单选框radio的方法
2014/09/09 Javascript
javascript等号运算符使用详解
2015/04/16 Javascript
JQuery查找DOM节点的方法
2015/06/11 Javascript
JavaScript代码性能优化总结(推荐)
2016/05/16 Javascript
js中使用使用原型(prototype)定义方法的好处详解
2016/07/04 Javascript
微信小程序“摇一摇”的实例代码
2017/07/20 Javascript
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
2020/07/18 Javascript
[04:11]DOTA2上海特级锦标赛主赛事首日TOP10
2016/03/03 DOTA
[02:36]DOTA2亚洲邀请赛小组赛精彩集锦:EE凭借法力虚空拿下4杀
2017/03/30 DOTA
详解Python中find()方法的使用
2015/05/18 Python
python实现屏保程序(适用于背单词)
2019/07/30 Python
用python画一只可爱的皮卡丘实例
2019/11/21 Python
解决TensorFlow GPU版出现OOM错误的问题
2020/02/03 Python
Win10下配置tensorflow-gpu的详细教程(无VS2015/2017)
2020/07/14 Python
如何在python中实现线性回归
2020/08/10 Python
泰国在线书店:SE-ED
2020/06/21 全球购物
大四本科生的自我评价
2013/12/30 职场文书
个人求职信范文分享
2014/01/31 职场文书
小学英语教师先进事迹
2014/05/28 职场文书
授权委托书范文
2014/07/31 职场文书
校长创先争优承诺书
2014/08/30 职场文书
期末复习计划
2015/01/19 职场文书
反腐倡廉学习心得体会范文
2015/08/15 职场文书
幼儿园大班开学寄语(2016秋季)
2015/12/03 职场文书
手把手教你从零开始react+antd搭建项目
2021/06/03 Javascript
Java无向树分析 实现最小高度树
2022/04/09 Javascript