随着开发项目的不断扩大，查找代码依赖关系复杂化，维护比较沉闷。记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. 
						
  2. bootstrap + angularjs + seajs构建Web Form前端2
		
    bootstrap + angularjs + seajs构建Web Form前端(二) 回顾 上一篇讲解了引入bootstrap构建一个简单的登录页面,如何让angularjs自动启动并绑定视图,操 ...
    
		
    3. 
						
  3. bootstrap + angularjs + seajs构建Web Form前端(1)
		
    bootstrap + angularjs + seajs构建Web Form前端(一) 简介 Bootstrap是Twitter推出的一个用于前端开发的开源工具包,它由Twitter的设计师Mark ...
    
		
    4. 
						
  4. angularjs + seajs构建Web Form前端(一)
		
    简介 Bootstrap是Twitter推出的一个用于前端开发的开源工具包,它由Twitter的设计师Mark Otto和Jacob Thornton合作开,是一个CSS/HTML框架. Angula ...
    
		
    5. 
						
  5. angularjs + seajs构建Web Form前端(二)
		
    回顾 上一篇讲解了引入bootstrap构建一个简单的登录页面,如何让angularjs自动启动并绑定视图,操作过程当中如何使用ui-bootstrap,继而完成简单功能后如何引入seajs后如何使n ...
    
		
    6. 
						
  6. angularjs + seajs构建Web Form前端(三) -- 兼容easyui
		
    回顾 在上一章中使用了angular实现了ajax form和树形结构,经过以上两章对于angular的大致使用,对于angular也有了初步的认识,接下来的内容只会对angular的一些用法做简单的 ...
    
		
    7. 
						
  7. NodeJs+http+fs+request+cheerio 采集,保存数据,并在网页上展示(构建web服务器)
		
    目的: 数据采集 写入本地文件备份 构建web服务器 将文件读取到网页中进行展示 目录结构: package.json文件中的内容与上一篇一样:NodeJs+Request+Cheerio 采集数据  ...
    
		
    8. 
						
  8. 使用EXtjs6.2构建web项目
		
    一.项目简介 众所周知ext是一款非常强大的表格控件,尤其是里边的grid为用户提供了非常多的功能,现在主流的还是用extjs4.0-4.2,但是更高一点的版本更加符合人的审美要求.因此,在今天咱们构 ...
    
		
    9. 
						
  9. 《深入浅出Node.js》第8章 构建Web应用
		
    @by Ruth92(转载请注明出处) 第8章 构建Web应用 一.基础功能 请求方法:GET.POST.HEAD.DELETE.PUT.CONNECT GET /path?foo=bar HTTP/ ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 从零开始使用git第二篇：git的日常操作
			
    从零开始使用git 第二篇:git的日常操作 第一篇:从零开始使用git第一篇:下载安装配置 第二篇:从零开始使用git第二篇:git实践操作 第三篇:从零开始使用git第三篇:git撤销操作.分支操 ...
    
			
    2. 
						
  2. google校招在线測试题---2048
			
    先附代码:(简单地说就是给出一个矩阵代表2048游戏的一个状态以及一个方向,输出往这个方向移动之后的矩阵) #include<iostream> #include<fstream&g ...
    
			
    3. 
						
  3. GTK入门学习：glade的使用
			
    搭建好环境后,在终端敲 glade 就可以启动glade工具. glade的总体框图: 经常使用控件选择区:列举了经常使用的控件,经常使用的有三类:顶层(主窗体等).容器(各种布局容器等).控制和显示 ...
    
			
    4. 
						
  4. 组合搜索（combinatorial search）在算法求解中的应用
			
    1. 分治.动态规划的局限性 没有合适的分割方式时,就不能使用分治法: 没有合适的子问题或占用内存空间太大时,就不能用动态规划: 此时还需要回到最基本的穷举搜索算法. 穷举搜索(exhaustive  ...
    
			
    5. 
						
  5. SDK应该包括什么东西
			
    作者:朱金灿 来源:http://blog.csdn.net/clever101 如果让你设计和开发一个SDK(软件二次开发包),你认为里面应该有什么东西?首先接口文件和库文件之类是必不可少的,否则别 ...
    
			
    6. 
						
  6. 三、链路追踪系统 zipkin
			
    一.构建项目 用到的依赖直接看pom.xml的注释吧 <?xml version="1.0" encoding="UTF-8"?> <proj ...
    
			
    7. 
						
  7. HTML标签的权重
			
    原文 简书原文:https://www.jianshu.com/p/c86d540aec40 大纲 1.HTML权重标签 2.常见的权重标签 3.常见的权重标签的使用 1.HTML权重标签 SEOer ...
    
			
    8. 
						
  8. 多事务运行并发问题spring学习笔记——数据库事务并发与锁详解
			
    多事务运行并发问题 在实际应用中,往往是一台(或多台)服务器向无数客户程序提供服务,当服务器查询数据库获取数据时,如果没有采用必要的隔离机制,可能会存在数据库事务的并发问题,下面是一些常见的并发问题分 ...
    
			
    9. 
						
  9. [Recompose] Show a Spinner While a Component is Loading using Recompose
			
    Learn how to use the 'branch' and 'renderComponent' higher-order components to show a spinner while  ...
    
			
    10. 
						
  10. JavaScript中的一些细节                                                    分类：            C1_HTML/JS/JQUERY             2014-08-05 16:45    384人阅读    评论(0)    收藏
			
    1.设置id / class等属性 用 setAttribute 设置一些常规属性如 id ,className 的时候经常不起作用,只能用 object.id = value 这样来设置 news_ ...
    
			
    11.