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


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






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

项目结构:
--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>
最后页面訪问效果如图:



















































































版权声明:本文博主原创文章,博客,未经同意不得转载。

seajs构建web申请书的更多相关文章

  1. angularjs + seajs构建Web Form3

    angularjs + seajs构建Web Form前端(三) -- 兼容easyui 回顾 在上一章中使用了angular实现了ajax form和树形结构,经过以上两章对于angular的大致使 ...

  2. bootstrap + angularjs + seajs构建Web Form前端2

    bootstrap + angularjs + seajs构建Web Form前端(二) 回顾 上一篇讲解了引入bootstrap构建一个简单的登录页面,如何让angularjs自动启动并绑定视图,操 ...

  3. bootstrap + angularjs + seajs构建Web Form前端(1)

    bootstrap + angularjs + seajs构建Web Form前端(一) 简介 Bootstrap是Twitter推出的一个用于前端开发的开源工具包,它由Twitter的设计师Mark ...

  4. angularjs + seajs构建Web Form前端(一)

    简介 Bootstrap是Twitter推出的一个用于前端开发的开源工具包,它由Twitter的设计师Mark Otto和Jacob Thornton合作开,是一个CSS/HTML框架. Angula ...

  5. angularjs + seajs构建Web Form前端(二)

    回顾 上一篇讲解了引入bootstrap构建一个简单的登录页面,如何让angularjs自动启动并绑定视图,操作过程当中如何使用ui-bootstrap,继而完成简单功能后如何引入seajs后如何使n ...

  6. angularjs + seajs构建Web Form前端(三) -- 兼容easyui

    回顾 在上一章中使用了angular实现了ajax form和树形结构,经过以上两章对于angular的大致使用,对于angular也有了初步的认识,接下来的内容只会对angular的一些用法做简单的 ...

  7. NodeJs+http+fs+request+cheerio 采集,保存数据,并在网页上展示(构建web服务器)

    目的: 数据采集 写入本地文件备份 构建web服务器 将文件读取到网页中进行展示 目录结构: package.json文件中的内容与上一篇一样:NodeJs+Request+Cheerio 采集数据 ...

  8. 使用EXtjs6.2构建web项目

    一.项目简介 众所周知ext是一款非常强大的表格控件,尤其是里边的grid为用户提供了非常多的功能,现在主流的还是用extjs4.0-4.2,但是更高一点的版本更加符合人的审美要求.因此,在今天咱们构 ...

  9. 《深入浅出Node.js》第8章 构建Web应用

    @by Ruth92(转载请注明出处) 第8章 构建Web应用 一.基础功能 请求方法:GET.POST.HEAD.DELETE.PUT.CONNECT GET /path?foo=bar HTTP/ ...

随机推荐

  1. 【BZOJ 3238】[Ahoi2013]差异

    [链接]h在这里写链接 [题意]     还有更简洁的题目描述吗/xk [题解]     对于lenti+lentj这一部分,比较好处理.     可以弄一个前缀和.     然后O(N)扫描一遍. ...

  2. addSubview 与 removeFromSuperview

    //当前视图的父视图添加和本视图同级的视图 [self.view.superview addSubview:showview.view]; //从父视图移除当前视图 [self.view remove ...

  3. NASM Syntax

    NASM has a simplified syntax designed to let the user code with minimum overhead. In its simplest fo ...

  4. okhttp的简介(二)之简单封装

    前一篇文章简单的介绍了okhttp的简单使用.okhttp的简介(一):http://blog.csdn.net/wuyinlei/article/details/50579564 相信使用还是非常好 ...

  5. 【Heritrix基础教程之1】在Eclipse中配置Heritrix 分类: H3_NUTCH 2014-06-01 00:00 1262人阅读 评论(0) 收藏

    一.新建项目并将Heritrix源码导入 1.下载heritrix-1.14.4-src.zip和heritrix-1.14.4.zip两个压缩包,并解压,以后分别简称SRC包和ZIP包: 2.在Ec ...

  6. Android 节日短信送祝福(UI篇:3-选择短信与发送短信的Activity的实现)

    一.ChooseMsgActivity的实现 1.布局文件 <RelativeLayout xmlns:android="http://schemas.android.com/apk/ ...

  7. ssion机制详解

    ssion机制详解   ref:http://justsee.iteye.com/blog/1570652 虽然session机制在web应用程序中被采用已经很长时间了,但是仍然有很多人不清楚sess ...

  8. 体验ArcGIS9.2的历史库功能

    转自原文 体验ArcGIS9.2的历史库功能 ESRI公司于2006年11月9日全球同步发布了历史上重要的软件版本ArcGIS9.2,在该版本中,主要新增了以下四大功能(ESRI田昌莲): 第一大新功 ...

  9. deep learning实践经验总结

    近期拿caffe来做图片分类.遇到不少问题,同一时候也吸取不少教训和获得不少经验. 先看样例再总结经验. 这是一个2类分类器.分的是条纹衣服和纯色衣服. 先看几张图片. 条纹衣服:   纯色衣服: w ...

  10. 利用PS把多张psd格式的图片转换为一张PDF格式

    最近为公司做了一版电子样册,所有图片都是包含多图层高清晰的psd格式,要做成一个PDF文件的电子样册,发给客户看,面对这些零散的图片,本来打算利用在线合成:在线网址 https://smallpdf. ...