Require.js用法

最新推荐文章于 2024-08-04 03:29:52 发布

原创最新推荐文章于 2024-08-04 03:29:52 发布 · 390 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Require.js #模块化 #AMD

requirejs 同时被 2 个专栏收录

3 篇文章

订阅专栏

模块化

3 篇文章

订阅专栏

本文详细介绍了Require.js的使用方法，包括如何载入、定义和调用模块，以及复杂的配置文件示例。深入探讨了AMD规范下的模块依赖管理和非AMD规范库的整合策略。

载入Require.js

<script src="js/require.js" data-main="js/main"></script>

定义模块

//普通模块
define(function() {
	return {
	    method1: function() {},
		method2: function() {},
    };
});

//依赖其他模块
define(['module1', 'module2'], function(m1, m2) {
    return {
        method: function() {
            m1.methodA();
			m2.methodB();
        }
    };
});

//依赖非常多模块简写
define(function (require) {
	var dep1 = require('dep1'),
		dep2 = require('dep2'),
		dep3 = require('dep3'),
		dep4 = require('dep4'),
		dep5 = require('dep5'),
		dep6 = require('dep6'),
		dep7 = require('dep7'),
		dep8 = require('dep8');
});

//根据条件判断加载依赖
define(('__proto__' in {} ? ['zepto'] : ['jquery']), function($) {
    return $;
});

调用模块

//普通调用
require(['foo', 'bar'], function(foo, bar) {
        foo.doSomething();
});

//根据条件判断调用
require( [ window.JSON ? undefined : 'util/json2' ], function (JSON) {
  JSON = JSON || window.JSON;

  console.log( JSON.parse( '{ "JSON" : "HERE" }' ) );
});

配置config

require.config({
	baseUrl: 'js', //本地模块位置的基准目录
	map: { //"map"告诉RequireJS在任何模块之前，都先载入这个模块
        '*': {
            css: 'lib/css' //此模块用来加载css文件
        }
    },
    paths: { //模块路径设置
        jquery: [ //同一个模块可以设置多个路径，如果第一路径加载失败会继续加载第二个路径
            'https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js',
            'lib/jquery'
        ],
        backbone: 'lib/backbone',
        underscore: 'lib/underscore',
        demo: 'lib/demo'
    },
    shim: { //非AMD规范的库
        backbone: {
            deps: [ 'underscore' ], //依赖
            exports: 'Backbone' //输出
        },
        underscore: {
            exports: '_' //输出
        },
        demo: ['css!lib/shim/demo.css'] //此模块依赖的css
    }
});

项目中公用配置config文件示例

Project
├── index.html
│
├── css 样式
│ └── index.css
│
└── js
　├── app 业务模块
　│ └── index.js
　│
　├── lib 模块库
　│ ├── shim 非AMD规范的库
　│ │ ├── modal.css
　│ │ └── modal.js
　│ │
　│ ├── common.js
　│ ├── css.js
　│ └── jquery-3.2.1.min.js
　│
　├── require.js
　└── requireConfig.js

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
		<title>项目中公用配置config文件示例</title>
		<link rel="stylesheet" href="css/index.css" />
	</head>
	<body>
		<header></header>
		
		<main >
			<button id="modalBtn">点击弹出内容</button>
		</main>
		
		<footer></footer>
		
		<script src="js/require.js" data-main="js/app/index"></script>
	</body>
</html>

requireConfig.js

require.config({
	baseUrl: 'js', 
	map: { //"map"告诉RequireJS在任何模块之前，都先载入这里的模块
        '*': {
            css: 'lib/css', //此模块用来加载css文件
            common: 'lib/common' //所有页面默认需要加载的模块
        }
    },
    paths: {
        jquery: 'lib/jquery-3.2.1.min',
        modal: 'lib/shim/modal'
    },
    shim: {
    	modal: {
    		deps: [ 'css!lib/shim/demo.css' ], //依赖
            exports: 'modal' //输出
        }
    }
});
//require(['common']); //也可以在这里设置所有页面默认需要加载的模块

index.js

require(['../requireConfig'], function() { //载入配置文件

	require(['jquery', 'modal'], function($, modal) {
		$('#modalBtn').click(function(){
			modal('我是弹出框的内容');
		});
	});
	
});

另附一份复杂的配置文件参考

require.config({
    baseUrl: 'js', //以页面为基础
    map: { //"map"告诉RequireJS在任何模块之前，都先载入这个模块
        '*': {
            css: 'lib/css'
        }
    },
    paths: {
        jquery: 'lib/jquery-1.8.3.min',
        template: 'lib/template',
        tabFrame: 'lib/tabFrame',
        'jquery.bootstrapTable': 'lib/shim/bootstrap-table/src/bootstrap-table',
        'jquery.bootstrapTableLang': 'lib/shim/bootstrap-table/src/bootstrap-table-zh-CN.min',
        tooltip: 'lib/shim/bootstrap/tooltip',
        popover: 'lib/shim/bootstrap/popover',
        easyDropDown: 'lib/shim/easydropdown/jquery.easydropdown.min',
        imeiFilter: 'lib/imeiFilter',
        mock: 'http://mockjs.com/dist/mock',
        simplPagination: 'lib/shim/simplPagination/jquery.simplePagination',
        hashMap: 'lib/shim/hashMap',
        layer: 'lib/shim/layer/layer',
        moment: 'lib/moment',
        dateUtil: 'lib/dateUtil',
        'qrcode': 'lib/shim/qrcode/qrcode',
        'jquery.qrcode': 'lib/shim/qrcode/jquery.qrcode',
        util: 'lib/util'

    },
    shim: {
        'jquery.bootstrapTable': {
            deps: [
                'css!lib/shim/bootstrap-table/src/bootstrap-table.css',
                'jquery'
            ]
        },
        'jquery.bootstrapTableLang': ['jquery', 'jquery.bootstrapTable'],
        'jquery.qrcode': ['qrcode', 'jquery'],
        tooltip: ['jquery'],
        popover: ['tooltip'],
        easyDropDown: ['css!lib/shim/easyDropDown/easydropdown.css', 'css!lib/shim/easyDropDown/easydropdown-customize.css', 'jquery'],
        simplPagination: ['css!lib/shim/simplPagination/simplePagination.css', 'css!lib/shim/simplPagination/simplePagination-customize.css', 'hashMap', 'jquery'],
        layer: ['css!lib/shim/layer/theme/default/layer.css', 'jquery']
    },
});