seajs构建web申请书

转载

mob604756ec5243 2015-09-17 20:26:00

文章标签 jquery html css 调试器静态文件 文章分类 运维

随着开发项目的不断扩大，查找代码依赖关系复杂化，维护比较沉闷。记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调试器能够看到例如以下效果：

seajs构建web申请书_css

调试器切换到Network。能够看到延迟载入作用体现

seajs构建web申请书_jquery_02

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

项目结构：

--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>