前端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"); }; });