脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js模块化规范

详谈js模块化规范

 更新时间：2017年07月07日 08:33:32   投稿：jingxian  
下面小编就为大家带来一篇详谈js模块化规范。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧

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模块化规范就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • 解决在layer.open中使用时间控件laydate失败的问题

    解决在layer.open中使用时间控件laydate失败的问题

    今天小编就为大家分享一篇解决在layer.open中使用时间控件laydate失败的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • Flexible.js可伸缩布局实现方法详解

    Flexible.js可伸缩布局实现方法详解

    这篇文章主要介绍了Flexible.js可伸缩布局实现方法详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-11-11
  • js动态添加事件并可传参数示例代码

    js动态添加事件并可传参数示例代码

    js动态添加事件可以搜索到很多的相关文章，不过可以传参数的就没有几个了，下面有个不错的示例可以满足大家对传参的需求，感兴趣的各位不要错过
    2013-10-10
  • Javascript将字符串日期格式化为yyyy-mm-dd的方法

    Javascript将字符串日期格式化为yyyy-mm-dd的方法

    日期格式化相信对于大家来说再熟悉不过，最近工作中自己利用Javascript就写了一个，现在将实现的代码分享给大家，希望对有需要的朋友们能有所帮助，感兴趣的朋友们下面来一起看看吧。
    2016-10-10
  • JavaScript prototype属性深入介绍

    JavaScript prototype属性深入介绍

    每个函数创建时默认带有一个prototype属性，其中包含一个constructor属性，和一个指向Object对象的隐藏属性,需要的朋友可以参考下
    2012-11-11
  • 使用JavaScript实现获取页面上所有的img并保存本地

    使用JavaScript实现获取页面上所有的img并保存本地

    这篇文章主要为大家详细介绍了如何使用JavaScript实现获取页面上所有的img并保存到本地,文中的示例代码讲解详细,有需要的小伙伴可以了解下
    2024-12-12
  • TypeScript 使用 Tuple Union 声明函数重载

    TypeScript 使用 Tuple Union 声明函数重载

    这篇文章主要介绍了TypeScript 使用 Tuple Union 声明函数重载，TypeScript 中为函数添加多个签名后，依然需要添加相应的代码来判断并从不同的签名参数列表中获取对应的参数，下文就来探索方法和技巧吧
    2022-04-04
  • AJAX 网页保留浏览器前进后退等功能

    AJAX 网页保留浏览器前进后退等功能

    AJAX的应用较少了页面的刷新次数，但是也可能会使浏览器的前进、后退、刷新等功能受到影响。
    2011-02-02
  • JS转换HTML转义符的方法

    JS转换HTML转义符的方法

    下面小编就为大家带来一篇JS转换HTML转义符的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • javascript实现随机生成DIV背景色

    javascript实现随机生成DIV背景色

    这篇文章主要介绍了javascript实现随机生成DIV背景色的具体代码，如何设置DIV背景色为随机色，感兴趣的小伙伴们可以参考一下
    2016-06-06

最新评论