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');
            });
        }
    }
})

 

posted @ 2016-07-28 17:24  Van小时  阅读(193)  评论(0)  编辑  收藏  举报