详谈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实现图片切换的幻灯片效果源代码
Dec 12 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
Oct 24 Javascript
JavaScript实现的使用键盘控制人物走动实例
Aug 27 Javascript
使用jquery组件qrcode生成二维码及应用指南
Feb 22 Javascript
AngularJS过滤器filter用法总结
Dec 13 Javascript
jQuery Chosen通用初始化
Mar 07 Javascript
Angularjs+bootstrap+table多选(全选)支持单击行选中实现编辑、删除功能
Mar 27 Javascript
详解JavaScript中的六种错误类型
Sep 21 Javascript
angular 表单验证器验证的同时限制输入的实现
Apr 11 Javascript
解决vue动态下拉菜单 有数据未反应的问题
Aug 06 Javascript
Javascript如何实现扩充基本类型
Aug 26 Javascript
vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
Feb 20 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 parse_url 一个好用的函数
2009/10/03 PHP
PHP实现通过中文字符比率来判断垃圾评论的方法
2014/10/20 PHP
CI框架的安全性分析
2016/05/18 PHP
项目中应用Redis+Php的场景
2016/05/22 PHP
PHP内存缓存功能memcached示例
2016/10/19 PHP
thinkPHP5.0框架API优化后的友好性分析
2017/03/17 PHP
TP5框架使用QueryList采集框架爬小说操作示例
2020/03/26 PHP
php设计模式之模板模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
Mootools 1.2教程(21)——类(二)
2009/09/15 Javascript
jQuery Flash/MP3/Video多媒体插件
2010/01/18 Javascript
javascript在子页面中函数无法调试问题解决方法
2014/01/17 Javascript
javascript实现选中复选框后相关输入框变灰不可用的方法
2015/08/11 Javascript
基于jquery实现鼠标左右拖动滑块滑动附源码下载
2015/12/23 Javascript
分享JavaScript监听全部Ajax请求事件的方法
2016/08/28 Javascript
BootStrap与validator 使用笔记(JAVA SpringMVC实现)
2016/09/21 Javascript
详解Node.js中的事件机制
2016/09/22 Javascript
bootstrap multiselect 多选功能实现方法
2017/06/05 Javascript
JS多个表单数据提交下的serialize()应用实例分析
2019/08/27 Javascript
纯js+css实现仿移动端淘宝网站的弹出详情框功能
2019/12/29 Javascript
在Vue中使用HOC模式的实现
2020/08/23 Javascript
JavaScript实现复选框全选和取消全选
2020/11/20 Javascript
Python复制目录结构脚本代码分享
2015/03/06 Python
pytest中文文档之编写断言
2019/09/12 Python
Python线程指南分享
2019/11/19 Python
基于python实现数组格式参数加密计算
2020/04/21 Python
Python实现树莓派摄像头持续录像并传送到主机的步骤
2020/11/30 Python
介绍一下MYSQL常用的优化技巧
2012/10/25 面试题
应届大学生的推荐信
2013/11/20 职场文书
酒店销售主管岗位职责
2014/01/04 职场文书
高二化学教学反思
2014/01/30 职场文书
幼儿园教师节活动方案
2014/02/02 职场文书
行政部岗位职责范本
2014/03/13 职场文书
大学生入党推荐书范文
2014/05/17 职场文书
幼儿园大班开学寄语
2014/08/02 职场文书
HTML+CSS+JS实现图片的瀑布流布局的示例代码
2021/04/22 HTML / CSS
MySQL 条件查询的常用操作
2022/04/28 MySQL