前端MVC学习——模块发开发、seajs学习

时间:2023-03-09 04:46:16
前端MVC学习——模块发开发、seajs学习

  这份学习链接已经足够了:http://seajs.org/docs/#intro

  我假设你至少已经浏览过上述链接文档、并且掌握了基本的seajs基础知识~

  手把手教你创建helloworld~

  HelloWorld

  程序员嘛,难免有helloworld情结~

  平台:win7、chrome

  ① 创建helloworld文件夹

  ② 在helloworld文件夹下,创建index.html、style.css、init.js、data.js、test-export.js、还有一个 lib 文件夹

  ③ 将网上download来的sea.js和jquery-1.10.2.min.js放在由第②步创建的 lib 文件夹中

  下面来看看我们在上述创建的文件里放入了什咩代码

  sea.js和jquery-1.10.2.min.js是库文件,理论上不需要我们修改或添加什么,但是这里有一个小细节,因为sea.js专注模块化开发,对于jquery-1.10.2.min.js的库文件引入,我们也需要将jquery-1.10.2.min.js进行模块化,模块化处理很简单——打开jquery-1.10.2.min.js文件,将jquery-1.10.2.min.js所有代码包括在define中,并且返回$.noConflict();

  jquery-1.10.2.min.js 具体如下:

define(function() {

     //jquery-1.10.2.min.js的源码部分

     return $.noConflict();

});

  index.html:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>seajs</title>
</head>
<body>
<div id="content">
<p class="author"></p>
<p class="blog"><a href="#">blog</a></p>
</div> <script src="./lib/sea.js"></script>
<script>
seajs.use("./init");
</script> </body>
</html>

  init.js

define(function(require,exports,module) {
var $ = require('./lib/jquery-1.10.2.min');
var data = require('./data');
var css = require('./style.css');
var textExport = require('./test-export'); $('.author').html(data.author);
$('.blog a').attr('href',data.blog); textExport.test(); /在控制台输出hello world
});

  data.js

define({
"author": '西红柿炒番茄',
"blog": 'http://www.cnblogs.com/Iwillknow/'
});

  style.css

.author {
	color: red;
font-size: 16px;
}
.blog {
font-size: 16px;
}

  test-export.js

define(function(require,exports,module) {
exports.test = function() {
console.log("hello wolrd");
};
});

  前端MVC学习——模块发开发、seajs学习