码迷,mamicode.com
首页 > Web开发 > 详细

seajs构建web应用

时间:2014-09-29 23:23:41      阅读:411      评论:0      收藏:0      [点我收藏+]

标签:seajs   框架   结构   cmd   amd   

随着开发项目不断膨胀,发现代码依赖关系变得复杂,维护比较蛋疼,想起seajs有这方面之功效,果断尝鲜,用来解决两个问题:1)命名冲突 2)文件依赖关系

由于所在BG使用TAF服务,基于C++开发一套WSP web服务框架。下面所讲的都是基于该框架下测试验证。
分成三个阶段:开发->改进->构建


第一阶段:开发
模板目录结构:

--wsp
      --index.html
--doc
     --js
         -- sea.js
         -- jquery_cmd.js
         -- main.js


第一步:引用的第三方类库,用require包装起来,我的项目使用的为jquery库,包装成jquery_cmd.js

define(function(require, exports, modules) {
    // jquery 源码
    return jQuery;
});
第二步:编写引入的js,命名为main.js

顺带使用一个AlloyTeam看到的console.log输出点绚丽
seajs.config({  
  alias: {  
    "jquery": "/js/jquery_cmd.js" // 这个路劲写对(本项目基于框架下面静态目录js下)
  }  
});  
define(function(require, exports, module) {  
   // 引入jquery模块
   var $ = require(‘jquery‘); 

   if (typeof $(‘h2‘) !== "undefined") {
       var oContent = {
           logText: ‘%c这是一个%c神奇的%c网站%c‘,
           cssStyle: [‘color:#a48bf2;‘, ‘color:#ff0000;‘, ‘color:#a0c484;‘, ‘padding:55px 135px;background:url(http://res.imtt.qq.com/actnew/css/head_logo.png) no-repeat center center;line-height:109px;‘]
       };
       console.log(oContent[‘logText‘], oContent[‘cssStyle‘][0], oContent[‘cssStyle‘][1], oContent[‘cssStyle‘][2], oContent[‘cssStyle‘][3]);
   } else {
       console.log(‘not found‘);
   }

}); 
第三步:html页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>seajs第一个应用</title>
</head>
<body>
    <h2>hello world</h2>
    <script src="/js/sea.js" id="seajsnode"></script>
    <script type="text/javascript">
        seajs.use("/js/main");
    </script>   
</body>
</html>
打开chrome调试器可以看到如下效果:
bubuko.com,布布扣
bubuko.com,布布扣

调试器切换到Network,可以看到延迟加载作用体现

bubuko.com,布布扣




第二阶段:项目的进一步优化和改进

项目结构:
--wsp
      --index.html
--doc
     --js
         -- sea.js
         -- require.js
         -- jquery_cmd.js
         -- main.js
         -- echarts-map.js
         -- build
                  -- echarts.js
                  chart
                        -- bar.js


1、如果需要引入jquery插件:
define(function(require) {
    var $, jQuery;
    $ = jQuery = require(‘jquery‘);

   // 插件整个代码

});
2、项目需要引入图表,这块需要根据API来实现(该项目使用百度echarts),从官方文档中发现,echarts没有直接支持seajs的CMD模式,改为引入一下requireJS支持AMD模式。

导入echarts-map.js和require.js


3、修改index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>requirejs引用echarts图表</title>
</head>
<body>
    <!-- 为Echarts准备一个具备大小(宽高)的Dom -->
    <div id="main" style="height:500px;border:1px solid #ccc;padding:10px;"></div>
    <script src="/js/require.js" id="requirejsnode"></script>    <script type="text/javascript">
        require.config({
            paths: {
                // 这个路径写对(该项目基于WSP框架下静态目录js下)
                ‘echarts‘: ‘./js/echarts-map‘,
                ‘echarts/chart/bar‘: ‘./js/echarts-map‘,
                ‘echarts/chart/line‘: ‘./js/echarts-map‘,
                ‘echarts/chart/map‘: ‘./js/echarts-map‘
            }
        });
        require([
            ‘echarts‘,
            ‘echarts/chart/bar‘,
            ‘echarts/chart/line‘,
            ‘echarts/chart/map‘
        ], function(ec) {
            var domMain = document.getElementById(‘main‘);
            var myChart = ec.init(domMain);
            myChart.setOption({
                tooltip: {
                    trigger: ‘axis‘
                },
                legend: {
                    data: [ ‘蒸发量‘, ‘降水量‘ ]
                },
                toolbox: {
                    show: true,
                    feature: {
                        mark: { show: true },
                        dataView: { show: true, readOnly: false },
                        magicType: { show: true, type: [ ‘line‘, ‘bar‘ ] },
                        restore: { show: true },
                        saveAsImage: { show: true }
                    }
                },
                calculable: true,
                xAxis: [
                    {
                        type: ‘category‘,
                        data: [ ‘1月‘, ‘2月‘, ‘3月‘ ]
                    }
                ],
                yAxis: [
                    {
                        type: ‘value‘,
                        splitArea: { show: true }
                    }
                ],
                series: [
                    {
                        name: ‘蒸发量‘,
                        type: ‘bar‘,
                        data: [ 2.0, 4.9, 7.0 ]
                    },
                    {
                        name: ‘降水量‘,
                        type: ‘bar‘,
                        data: [ 2.6, 5.9, 9.0 ]
                    }
                ]
            });
        });
    </script>   
</body>
</html>
最后页面访问效果如图:
bubuko.com,布布扣



















































































seajs构建web应用

标签:seajs   框架   结构   cmd   amd   

原文地址:http://blog.csdn.net/zqjflash/article/details/39676799

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!