详谈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将当前时间格式转换成时间搓(自写)
Sep 26 Javascript
删除条目时弹出的确认对话框
Jun 05 Javascript
动态载入js提高网页打开速度的方法
Jul 04 Javascript
jQuery控制的不同方向的滑动(向左、向右滑动等)
Jul 18 Javascript
JavaScript接口的实现三种方式(推荐)
Jun 14 Javascript
js实现上传文件添加和删除文件选择框
Oct 24 Javascript
关于js中的鼠标事件总结
Jul 11 Javascript
微信小程序图片选择区域裁剪实现方法
Dec 02 Javascript
解决vue-cli创建项目的loader问题
Mar 13 Javascript
vue组件中使用props传递数据的实例详解
Apr 08 Javascript
浅谈laytpl 模板空值显示null的解决方法及简单的js表达式
Sep 19 Javascript
vue中控制mock在开发环境使用,在生产环境禁用方式
Apr 06 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面向对象编程快速入门
2006/10/09 PHP
基于php在各种web服务器的运行模式详解
2013/06/03 PHP
php预定义变量使用帮助(带实例)
2013/10/30 PHP
php从给定url获取文件扩展名的方法
2015/03/14 PHP
如何在Laravel5.8中正确地应用Repository设计模式
2019/11/26 PHP
关于javascript DOM事件模型的两件事
2010/07/22 Javascript
jCallout 轻松实现气泡提示功能
2013/09/22 Javascript
浏览器图片选择预览、旋转、批量上传的JS代码实现
2013/12/04 Javascript
Bootstrap网格系统详解
2016/04/26 Javascript
轻松掌握jQuery中wrap()与unwrap()函数的用法
2016/05/24 Javascript
JS封装的自动创建表格的实现代码
2016/06/15 Javascript
JavaScript操作 url 中 search 部分方法函数
2016/06/15 Javascript
jQuery简单动画变换效果实例分析
2016/07/04 Javascript
javascript对浅拷贝和深拷贝的详解
2016/10/14 Javascript
详解webpack 入门与解析
2018/04/09 Javascript
对Layer UI 模块化的用法详解
2019/09/26 Javascript
[14:24]Optic Gaming vs PSG LGD BO3
2018/06/07 DOTA
Python HTMLParser模块解析html获取url实例
2015/04/08 Python
使用python实现生成用户信息
2017/03/20 Python
深入理解Python3 内置函数大全
2017/11/23 Python
python异步编程 使用yield from过程解析
2019/09/25 Python
python实现翻译word表格小程序
2020/02/27 Python
Python插件机制实现详解
2020/05/04 Python
基于K.image_data_format() == 'channels_first' 的理解
2020/06/29 Python
Fashion Eyewear美国:英国线上设计师眼镜和太阳镜的零售商
2016/08/15 全球购物
联想美国官方商城:Lenovo美国
2017/06/19 全球购物
Sunglasses Shop丹麦:欧洲第一的太阳镜在线销售网站
2017/10/22 全球购物
美国婴儿和儿童家具网上商店:ABaby.com
2018/07/02 全球购物
LUISAVIAROMA德国官网:时尚奢侈品牌购物网站
2020/11/12 全球购物
酒店秘书求职信范文
2014/02/17 职场文书
工作会议通知
2015/04/15 职场文书
社区文明创建工作总结2015
2015/04/21 职场文书
2016年元旦主持词
2015/07/06 职场文书
导游词之舟山普陀山
2019/11/06 职场文书
Oracle 区块链表创建过程详解
2021/05/15 Oracle
Python使用Beautiful Soup(BS4)库解析HTML和XML
2022/06/05 Python