简单讲下sea.js使用的代码结构

某htm模板

<?php
$this->display("elements/header.phtml", array(·
'title' => 'title',
'keywords' => '',
'description' => '',
'nav' => 'nav',
'addStyle' => array('www/xxx/index.css'),

));

?>

<body>
...html code...
</body>

<?php
$this->display("elements/footer.phtml", array(
    'modules' => array('www/xxx/index.js'),
));
?>

该html模版的footer模版

<script>
    seajs.config({
        base:'<?php echo $scriptURL; ?>',
        paths: {
            'modules':'<?php echo $scriptURL; ?>'
        },
        map: [
            [ /^(.*?\/script\/(?:src|dist)\/.*?\/.*?\.js$)(?:.*)$/i, '$1?v=<?php echo $this->version;?>']
        ],
        charset: 'utf-8'
    });
    seajs.use('modules/www/common/common.js',function(){
        <?php if (isset($modules)): ?>
            <?php foreach ($modules as $module): ?>
            seajs.use('modules/<?php echo $module; ?>');
            <?php endforeach; ?>
        <?php endif; ?>
    });
</script>

</div>
</body>
</html>

首先引入的公共js代码modules/www/common/common.js

define(function(require, exports, module) {
    //json工具函数
    require('../../public/json2');

    //获取并显示用户数据模块;
    require('./mod/user.loaded.data');

    //弹出登录模块;
    require('./mod/singinbox');

    //引入退出登录模块;
    require('./mod/logout');

    //头部菜单显示隐藏;
    require('./mod/menu');

    //返回顶部;
    require('./mod/gotop');
    
    //根据屏幕大小调整侧栏位置;
    require('./mod/adjustToolBar');
    
    //头部搜索框;
    require('./mod/search');


});

$modules php变量中单独引入的js代码

define(function(require, exports, module) {
  var a = require('./a')
  a.doSomething()
  var b = require('./b')
  b.doSomething()
})

附录:
关于require.js和sea.js的比较,这里阮老师的blog和玉伯(sea.js的作者)的知乎,挺不错的
http://www.ruanyifeng.com/blog/2012/10/asynchronous_module_definition.html
http://www.ruanyifeng.com/blog/2012/11/require_js.html
https://www.zhihu.com/question/20351507

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容