首页 > 代码库 > require.js初识

require.js初识

2024-07-16 15:17:07   222人阅读

来自http://www.tuicool.com/articles/v6b6R3 的学习笔记

　　下载require.js和jquery.js的文件，放入文件夹。在文件夹中再见main.js和index.html的文件

　　方式一

　　index.html内容如下

　　

<!doctype html><html>    <head>        <title>requirejs入门（一）</title>        <meta charset="utf-8">        <script data-main="main.js" src=http://www.mamicode.com/"require.js"></script>     </head>     <body>             </body></html>

　　其中data-main是主入口js的文件，src是加载的js文件

 

　　main.js的内容如下

　　

require.config({    paths:{        jquery: ‘jquery‘    }});require([‘jquery‘],function($){    alert($().jquery);})

　　这里的main设置了require的路径paths，还有require了一个jquery.js文件，在这上面做了alert的动作

　　

　　浏览器查看index.html的文件，会alert出一个jquery的版本号，再看网络那里，加载出来了index.html,main.js,require.js,jquery.js四个文件

　　

　　方式二

　　其实也不一定要设data-main的路径，可以直接在index.html里面配置路径和require文件

　　index.html

　　

<!doctype html><html>    <head>        <title>requirejs入门（一）</title>        <meta charset="utf-8">        <script type="text/javascript" src=http://www.mamicode.com/"require.js"></script>     </head>     <body>        <script type="text/javascript">            require.config(function(){                paths:{                    main:‘main‘                }            });            require([‘main‘],function( fn ){                fn.init();            });        </script>     </body></html>

　　这里我们把paths设置为main，然后就可以require main这个js模块了。

　　从这也可以看出，一个require。js只有一个paths路径，一次require，剩下的要加载的模块可以在main那个js模块里面加载

 

　　main.js

　　

    define( function( require ){        var exports = {};        var jquery = require(‘jquery‘);        function init(){             alert(jquery().jquery);        }        exports.init = init;        return exports;    });

　　模块文件中要以define(function(){});才能被引用

　　这里var了一个exports的对象，然后让整个function返回expotrs，在index.html里的fn.init其实就是这里的exports.init了。

　　其实，fn就是define里面这个匿名函数！

　　如果我们还有别的模块要增加，可以都从main里面require，想require jquery那样做就好了。


联系
我们