seajs的使用--主要了解模块化

一个使用sea.js的Demo

sea.js可以解决命名问题,js文件间的依赖等.

index.html内容如下:

 <!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <title></title>
     <script src="../js/sea.js"></script>
 </head>
 <body>
     <script>
         //jquery 1.8.2用不了.建议1.10.2以上.
         seajs.config({
             base: "/js/",
             alias: { "jquery": "jquery-1.10.2.js" }
         });

         seajs.use(['jquery', 'test'], function ($, test) {
             $(document).ready(function () {
                 test.doSomething('Jquery ready.');
                 $("body").append('hello');
             });
         });

     </script>
     <p id="p1"></p>

     <script>
         /*
             恼人的命名冲突
             在一个util.js文件里有function each(arr){...};function log(str){...};
             一个页面在引用该util.js后,可能还有应用其他js文件,或者写该页面内部js脚本.
             其他的js文件或者脚本可能也会命名each,log等方法,导致命名冲突,程序异常.
         */
         var ice = {};
         ice.common = {};
         ice.common.greet = function () {
             alert('hello world!');
         };

         (function (window) {
             //此处的代码不会污染全局作用域

         })(window);
     </script>
 </body>
 </html>

第16行: seajs.use(['jquery', 'test'], function ($, test) {...
需要加载 test.js,内容如下:

 define(function (require, exports, module) {
     //define(id,依赖,function())可以是3个参数
     //如:define('test', ['jquery'],function (require, exports, module) {

     // 通过 require 引入依赖
     // var $ = require('/js/jquery-1.10.2.js');

     // 通过 exports 对外提供接口
     exports.doSomething = function (str) {
         alert(str);
     };

     // 或者通过 module.exports 提供整个接口
 });

附:seajs的学习网站

http://seajs.org/docs/