seajs构建web申请书
2015-09-17 20:26
549 查看
随着开发项目的不断扩大,查找代码依赖关系复杂化,维护比较沉闷。记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.jschart-- bar.js1、假设须要引入jquery插件:
define(function(require) { var $, jQuery; $ = jQuery = require('jquery'); // 插件整个代码 });2、项目须要引入图表。这块须要依据API来实现(该项目使用百度echarts)。从官方文档中发现,echarts没有直接支持seajs的CMD模式。改为引入一下requireJS支持AMD模式。导入echarts-map.js和require.js3、改动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>
最后页面訪问效果如图:
相关文章推荐
- threejs加载图片需创站与 如何写出字体
- 转载:JavaScript addEventListener第三个参数作用
- 【笔记】JS动画效果(慕课)
- 操作JSON————精品
- JavaScript基础系列--函数
- javascript toString.call()
- Javascript 继承的六种方法
- Json,List,Map的数据格式详解。
- JSON的解析之net.sf.json
- web.xml中配置JSP属性
- 解决javascript加减乘除及toFixed的误差问题
- JS事件知识的一些小整理
- javascript 函数详解
- Prototype and Constructor in JavaScript
- JSON对象与字符串之间的转换
- js checkbox多选值采集
- Javascript判断空对象
- js之location对象
- JSP中getParameter()和getAttribute()的区别
- js将long日期格式转换为标准日期格式