requirejs实践二 加载其它JavaScript与运行

 

 

 

 

上一篇中介绍了requirejs加载JavaScript文件，在这一篇中介绍加载JavaScript后执行代码

这次是test2.html文件，

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Test2</title>   
    </head>
    <body>
        <script data-main="scripts/test2" src="scripts/require.js"></script>
    </body>
</html>
View Code

这次是加载test2.js文件，在test2.js中，有如下代码：

SayHello();
require(['test'],function(test){
    SayHello();
});

test.js:

alert('加载了test.js');
function SayHello(){
    alert('这是SayHello方法');
}

这里SayHello()是在test.js中定义的，而test2.js中通过require()方式加载test2，在浏览test2.html时可以看到有一个JavaScript错误：

这里报错的是第一句，因为此时test.js还没有加载，Sayhello没有定义，当注释或者删除第一句后，重新浏览test2.html，如下：

 

 

//SayHello();    //此处还没有加载test.js，于是调用SayHello方法就会报错
require(['test'],function(test){
    //比如test.js定义了SayHello方法,此处是加载了test.js之后，就可以调用SayHello方法了
    SayHello();
});
View Code

 

更通俗的例子，当我们需要使用jquery的datepicker（jquery ui中的日历插件），需要加载jquery.js、jquery.ui.js(此处省略版本号，下同)

test3.html: 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Test3</title>
        <link rel="stylesheet" type="text/css" href="css/jquery-ui.min.css" />   
    </head>
    <body>
        <input type="text" name="date" id="date" />
        <script data-main="scripts/test3" src="scripts/require.js"></script>
    </body>
</html>
View Code

test3.js:

//$('#date').datepicker();    //未加载jquery与jquery.ui ,此处会报错
require(['jquery-3.1.1.min','jquery-ui.min'],function(jq,ui){
    $('#date').datepicker();
});
View Code

该例子与之前的目录文件结构不一样，此处多了jquery.js、jquery.ui.js、以及ui中的css文件，图片文件

 

浏览test3.html，点击文本框时候，发现已经绑定了日历

 

 参考资料：

http://www.requirejs.cn/

posted @ 2016-11-05 22:55  Jichan·Jong  阅读(263)  评论(0)  编辑  收藏  举报