`

将一些js库改写成符合cmd规范的模块

 
阅读更多

在进行seajs编码的时候，遇到很到js库都不是使用cmd规范进行编码的。这时怎么办呢？当然是改写喽

第一是：jQuery了，版本jquery-1.8.1.js（不同的版本有不同的改法）

//查询到define，将那边的if语句替换成如下格式，O啦
if ( typeof define === "function" && define.cmd) {
	define( function () { return jQuery; } );
}

 第二是：H5的音频库，版本buzz-1.1.8.js

//查询到define，将附近的语句替换成如下代码
if (typeof module !== "undefined" && module.exports) {
        module.exports = factory();
    } else if (typeof define === "function" && define.cmd) {
        define(factory);
    } else {
        context.buzz = factory();
    }

 第三是：SVG图片库，版本Raphael-2.1.2.js

// AMD support,稍微复杂一点，查询到此处替换成如下代码
    if (typeof define === "function" && define.cmd) {
        // Define as an anonymous module
        define(function(require, exports, module) {
			var eve = require("eve");
            return factory(glob, eve);
        });
    } else {
        // Browser globals (glob is window)
        // Raphael adds itself to window
        factory(glob, glob.eve || (typeof require == "function" && require('eve')) );
    }

 好了，以上就是今天介绍的三个js的cmd改写方法，其他的以后再说

下面简单说一下如何使用

step1,：这是index.html代码

<!DOCTYPE HTML>
<html>
<head>
	<title>timeline脚本</title>
	<script type="text/javascript" src="sea.js"></script>
	<script type="text/javascript">
		seajs.config({
			alias:{
				'jQuery': 'lib/jquery-1.8.1.js',
				'Raphael': 'lib/raphael.js',
				'Buzz': 'buzz.js'
			}
		});
		seajs.use(['jQuery','Buzz','Raphael','main'], function($, Buzz, Raphael,main){
			$(function(){
				main.start();
			});
		});
	</script>
</head>
<body>
	<canvas id="myview">您的浏览器不支持，请更换现代浏览器</canvas>
	<button id="mybutton">click</button>
	<div id="timer"></div>
</body>
</html>

 

step2：这里是main.js脚本，程序的入口

define("main",function(require, exports, module){
	var timeline = require("timeline");
	var $ = require("jQuery");
	var buzz = require("Buzz");
	var raphael = require("Raphael");
	
	exports.start = function(){
		var mybutton = $('#mybutton');
		mybutton.click(function(){
			alert(123);
		});
		// 在坐标（10,50）创建宽320，高200的画布
		var paper = Raphael(10, 50, 320, 200);
		 
		// 在坐标（x = 50, y = 40）绘制半径为 10 的圆
		var circle = paper.circle(50, 40, 200);
		 
		// 给绘制的圆圈填充红色 (#f00)
		circle.attr("fill", "#f00");
		 
		// 设置画笔（stroke）的颜色为白色
		circle.attr("stroke", "#317");
		
		var mySound = new buzz.sound( "sound/start", {
			formats: [ "ogg", "mp3", "acc" ]
		});
		mySound.play();
	};
	
	
});

 step3：其他的就是一些脚本库了，自己看情况添加，仅作练习使用。附件中有我上传的一些源码，直接运行index.html就可以听见声音，看见效果。音效可能稍微有点恐怖，O(∩_∩)O哈哈~

 

 

分享到：
| 水果忍者代码理解-timeline
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics