seajs使用记

Posted 2021-01-19 qingshan

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了seajs使用记相关的知识，希望对你有一定的参考价值。

1、seajs使用外部依赖（第三方工具库，譬如jQuery）

错误做法：

define(function(require, exports, module){
   
    //  require可以下载外部依赖，但是他不能将其解析为seajs自身的模块，所以不能这样使用。
    var $ = require(‘../../depency/3rd_lib/jquery.js‘);

    $(‘#hi‘).html("aaaaaa");
   
});

正确做法1：

index.html

<html>
     <head>
        <title>sea demo</title>
        <!-- <script type="text/javascript" src="../depency/3rd_lib/jquery.js"></script> -->
        <script type="text/javascript" src="../depency/3rd_lib/sea-debug.js"></script>
    </head>

<body>

<div id="hi">

</div>    

<script type="text/javascript">
    seajs.use(‘../static/test/seaUtil.js‘, function(){
         seajs.use(‘../static/test/seajsDemo.js‘);    
    });

</script>
    

</body>
</html>


seaUtil.js
     
       define(function(require, exports, module){
    
    /**
     *  require可以下载外部依赖，但是他不能将其解析为seajs自身的模块，所以不能这样使用。
     *  外部依赖引入推荐做法：
     *     1、将外部依赖单独放到一个seajs文件模块中引入，在首页seajs.use的callback里use其他模块，在callback中引入其他初始模块可以防止依赖未引入时使用
     *     2、将外部依赖放在首页HTML中加载，在seajs文件模块中直接使用
     */ 
    
    require(‘../../depency/3rd_lib/jquery.js‘);

    // $(‘#hi‘).html("aaaaaa");
   
});

seajsDemo.js
     define(function(require, exports, modeule){

    var seaUtil = require(‘./seaUtil‘);

    eBase = window.eBase = window.eBase || {}; 
    
    app = window.app = window.app || {};

    
     


    $.extend(eBase, {
        sayHello: function(){
            alert(‘hello , gray boy @‘);
        }
    });

    app.userManager = app.userManager || {};

    

});

正确做法2：

index.html

     <html>
<head>
<title>sea demo</title>
<script type="text/javascript" src="../depency/3rd_lib/jquery.js"></script>
<script type="text/javascript" src="../depency/3rd_lib/sea-debug.js"></script>
</head>

<body>

<div id="hi">

</div>    

<script type="text/javascript">
    seajs.use(‘../static/test/seaUtil.js‘, function(){
         seajs.use(‘../static/test/seajsDemo.js‘);    
    });

</script>
    

</body>
</html>

seajsDemo.js

define(function(require, exports, modeule){

    var seaUtil = require(‘./seaUtil‘);

    eBase = window.eBase = window.eBase || {}; 
    
    app = window.app = window.app || {};

    
     


    $.extend(eBase, {
        sayHello: function(){
            alert(‘hello , gray boy @‘);
        }
    });

    app.userManager = app.userManager || {};

    

});

以上是关于seajs使用记的主要内容，如果未能解决你的问题，请参考以下文章

使用模块化管理工具seajs实现简单动画效果