详谈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 相关文章推荐
一些Javascript的IE和Firefox(火狐)兼容性的问题总结及常用例子
May 21 Javascript
js中更短的 Array 类型转换
Oct 30 Javascript
Jquery读取URL参数小例子
Aug 30 Javascript
Javascript中引用示例介绍
Feb 21 Javascript
一个简单的jQuery计算器实现了连续计算功能
Jul 21 Javascript
Javascript随机标签云代码实例
Jun 21 Javascript
AngularJs Scope详解及示例代码
Sep 01 Javascript
Angular表单验证实例详解
Oct 20 Javascript
jquery实现动态改变css样式的方法分析
May 27 jQuery
深入了解query和params的使用区别
Jun 24 Javascript
vue-router路由模式详解(小结)
Aug 26 Javascript
jQuery实现移动端下拉展现新的内容回弹动画
Jun 24 jQuery
使用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与XML、XSLT、Mysql的结合运用实现代码
2009/11/19 PHP
php 修改、增加xml结点属性的实现代码
2013/10/22 PHP
ThinkPHP分组下自定义标签库实例
2014/11/01 PHP
PHP实现求连续子数组最大和问题2种解决方法
2017/12/26 PHP
php获得刚插入数据的id 的几种方法总结
2018/05/31 PHP
教你如何解密js/vbs/vbscript加密的编码异处理小结
2008/06/25 Javascript
JS实现的网页背景闪电闪烁效果代码
2015/10/17 Javascript
基于jQuery实现鼠标点击导航菜单水波动画效果附源码下载
2016/01/06 Javascript
js实现文字滚动效果
2016/03/03 Javascript
微信小程序 教程之模块化
2016/10/17 Javascript
jQuery实现字符串全部替换的方法【推荐】
2017/03/09 Javascript
JS给按钮添加跳转功能类似a标签
2017/05/30 Javascript
将angular.js项目整合到.net mvc中的方法详解
2017/06/29 Javascript
jQuery 实现图片的依次加载图片功能
2017/07/06 jQuery
JavaScript判断浏览器和hack滚动条的写法
2017/07/23 Javascript
JavaScript实现简单的双色球(实例讲解)
2017/07/31 Javascript
ES6学习教程之对象字面量详解
2017/10/09 Javascript
在 webpack 中使用 ECharts的实例详解
2018/02/05 Javascript
jQuery的ztree仿windows文件新建和拖拽功能的实现代码
2018/12/05 jQuery
JS 遍历 json 和 JQuery 遍历json操作完整示例
2019/11/11 jQuery
解决vue-cli@3.xx安装不成功的问题及搭建ts-vue项目
2020/02/09 Javascript
详解ES6中class的实现原理
2020/10/03 Javascript
Python中使用不同编码读写txt文件详解
2015/05/28 Python
深入讲解Python中的迭代器和生成器
2015/10/26 Python
Python实现的自定义多线程多进程类示例
2018/03/23 Python
python 读取dicom文件,生成info.txt和raw文件的方法
2019/01/24 Python
Python中pymysql 模块的使用详解
2019/08/12 Python
python selenium循环登陆网站的实现
2019/11/04 Python
Python通过getattr函数获取对象的属性值
2020/10/16 Python
详解CSS3选择器:nth-child和:nth-of-type之间的差异
2017/09/18 HTML / CSS
2015年社区服务活动总结
2015/03/25 职场文书
PhpSpreadsheet中文文档 | Spreadsheet操作教程实例
2021/04/01 PHP
SQL Server中交叉联接的用法详解
2021/04/22 SQL Server
Python中常见的导入方式总结
2021/05/06 Python
SQL SERVER存储过程用法详解
2022/02/24 SQL Server
Python matplotlib 利用随机函数生成变化图形
2022/04/26 Python