RequireJS的简单应用

一、RequireJS的主要作用与优点

主要作用：js模块化、编写复用js代码

优点：

1、防止命名冲突

2、声明不同js文件之间的依赖

3、代码模块化

（1）一个文件一个模块：每个js文件应该只定义一个模块

（2）define()中注意相对模块名

二、常用方法

1、require.config 为模块指定别名

2、require 引入写好的模块

3、define 编写模块

三、使用方法+一个小例子

模块js写在html外面，由一个js进行模块加载

例如我的工程目录结构

| src

| |—— js

|—— main.js

|—— test.js

| vender

| |—— js

|—— require.min.js

|—— jquery.min.js

| test.html

一个 Demo test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>一个Require Test</title>
    <style>

        #myTest{
            height: 50px;;
            width: 50px;
            background-color: #28a4c9;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="myTest">Test</div>
    <script src="vender/js/require.min.js" data-main="src/js/main"></script>
</body>
</html>

|—— main.js

require.config({
    paths:{
        jquery: '../../vender/js/jquery.min'
    }
});
require(['jquery','test'],function($,test){
    test.fun1();
    $('#myTest').click(function(){
        console.log('myTest click2');
    });
});

|—— test.js

define(['jquery'],function($){
    return {
        fun1:function(){
            $('#myTest').click(function(){
                console.log('myTest click');
            });
        }
    }
})