详谈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 相关文章推荐
十个优秀的Ajax/Javascript实例网站收集
Mar 31 Javascript
基于jquery的气泡提示效果
May 31 Javascript
javascript 广告后加载,加载完页面再加载广告
Nov 25 Javascript
显示今天的日期js代码(阳历和农历)
Sep 30 Javascript
js实现进度条的方法
Feb 13 Javascript
微信小程序 火车票查询实例讲解
Oct 17 Javascript
原生js实现弹出层效果
Jan 20 Javascript
ES6学习笔记之Set和Map数据结构详解
Apr 07 Javascript
vue中的计算属性的使用和vue实例的方法示例
Dec 04 Javascript
详解webpack 入门与解析
Apr 09 Javascript
解决vue中监听input只能输入数字及英文或者其他情况的问题
Aug 30 Javascript
最全vue的vue-amap使用高德地图插件画多边形范围的示例代码
Jul 17 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中强制下载文件的代码(解决了IE下中文文件名乱码问题)
2011/05/09 PHP
php学习之运算符相关概念
2011/06/09 PHP
解析array splice的移除数组中指定键的值,返回一个新的数组
2013/07/02 PHP
浅析php学习的路线图
2013/07/10 PHP
Mac OS下配置PHP+MySql环境
2015/02/25 PHP
php关闭warning问题的解决方法
2016/05/17 PHP
javascript 面向对象编程基础:封装
2009/08/21 Javascript
修改js Calendar日历控件 兼容IE9/谷歌/火狐
2013/01/04 Javascript
js解析xml字符串和xml文档实现原理及代码(针对ie与火狐)
2013/02/02 Javascript
js变换显示图片的实例
2013/04/16 Javascript
file控件选择上传文件确定后触发的js事件是哪个
2014/03/17 Javascript
jQuery修改li下的样式以及li下的img的src的值的方法
2014/11/02 Javascript
firefox浏览器用jquery.uploadify插件上传时报HTTP 302错误
2015/03/01 Javascript
一个php+js实时显示时间问题
2015/10/12 Javascript
jquery广告无缝轮播实例
2017/01/05 Javascript
微信小程序 template模板详解及实例代码
2017/03/09 Javascript
AngularJS入门教程一:路由用法初探
2017/05/27 Javascript
mui开发中获取单选按钮、复选框的值(实例讲解)
2017/07/24 Javascript
Vue.js学习笔记之常用模板语法详解
2017/07/25 Javascript
javascript浏览器用户代理检测脚本实现方法
2017/10/27 Javascript
npx create-react-app xxx创建项目报错的解决办法
2020/02/17 Javascript
[06:59]DOTA2-DPC中国联赛3月7日Recap集锦
2021/03/11 DOTA
python通过自定义isnumber函数判断字符串是否为数字的方法
2015/04/23 Python
详解Python在七牛云平台的应用(一)
2017/12/05 Python
python 实现将txt文件多行合并为一行并将中间的空格去掉方法
2018/12/20 Python
pandas对dataFrame中某一个列的数据进行处理的方法
2019/07/08 Python
荷兰的时尚市场:To Be Dressed
2019/05/06 全球购物
世界汽车零件:World Car Parts
2019/09/04 全球购物
师范大学应届生求职信
2013/11/21 职场文书
终端业务员岗位职责
2013/11/27 职场文书
办理护照介绍信
2014/01/16 职场文书
微信营销策划方案
2014/02/24 职场文书
2014年公务员思想汇报范文:全心全意为人民服务
2014/03/06 职场文书
《金孔雀轻轻跳》教学反思
2014/04/20 职场文书
小学运动会宣传稿
2015/07/23 职场文书
2016继续教育培训学习心得体会
2016/01/19 职场文书