SeaJs学习.doc

SeaJS是什么？ SeaJS是下载并检阅 SeaJSSeaJS现在已经是2.0版本啦，到这里下载：/seajs/seajs 解压后会看到下列目录： 其中： dist —— 压缩好的、用于浏览器端的SeaJS代码 docs —— 文档 src —— 源代码 package.json + Gruntfile.js —— Grunt构建工具所需要的文件，这个在第七步压缩合并会介绍到 其他目录或文件可以暂且不管 建立工程和各种目录 建立工程在tomcat\webapps创建如下目录结构, 当然你也可以用eclipse创建 Dynamic Web Project准备各种目录 在这里把JavaScript、Image、CSS都放在统一的资源文件（assets）中，建好之后的目录如下： 引入SeaJS库 与引入其他js库并无太大区别： script src=assets/scripts/seajs/sea.js id=seajsnode/script 你可能注意到，这里加上了id=seajsnode，原因如下： a. SeaJS加载自身的script标签的其他属性（如data-config、data-main）等来实现不同的功能 b. SeaJS内部通过document.getElementById(seajsnode)来获取这个script标签（其实SeaJS内部还有一种方式，不过另一种方式的效率比较低，所以不推荐，如果有兴趣，可以看一下源码/seajs/seajs/blob/master/src/util-path.js） 5、编写自己的代码 这里作为示范，只做了一个非常简单的效果，点击查看：http://liuda101.github.io/HelloSeaJS/ 在编写自己代码的时候，要时刻记住”模块化“，而操作起来也非常简单，因为在SeaJS中一个文件就是一个模块。 下面是代码逻辑的模块application.js： 我们看到，所有代码都放在define(function(require,exports,module){});函数体里面。 define是SeaJS定义的一个全局函数，用来定义一个模块。至于require，exports，module都是什么，可以暂且不管，到此，我们的代码已经完成，很简单吧. 看完之后，你会说，这算什么啊！这就完了么？不要怪我，为了简单易懂，我们就按照”一步步“的节奏慢慢来。随着代码的增多，你肯定会遇到util越来越多的情况。很好，这样看来，我们就有了两个模块：util模块和application模块。SeaJS中，文件即模块，所以当然要将其分为两个文件。先看util.js： 除了define之外，我们看到module.exports = util;这一句比较特殊。这句是在说，我util模块向外暴露的接口就这些，其他所有的东西都是我内部用的，无需担心，我会照顾好的。 再看application.js： 我们看到var util = require(./util);这句比较特殊。这句就是在说，我application模块由于业务需要，想请util模块来帮忙，所以把util给require进来。 至此，我们经历了一个模块到两个模块的转变，在日后漫长的日子中，我们的模块也许会越来越多，不过不用担心，有了SeaJS提供的define、require、module.exports，我们都可以方便的应对。 6、引入自己的代码 你看到这个小标题，你可能会极力的鄙视我，这等工作还需要你来示范？于是，你啪啪啪啪，在引入SeaJS的script标签后引入了util.js和application.js: script src=assets/scripts/application/util.js/script script src=assets/scripts/application/application.js/script 然后你不停的F5……你看不到效果吧？这就是这个小节存在的理由。 SeaJS提供了模块化的能力，前面我们已经看到了SeaJS定义模块、引用模块的方法，而这里就要用到SeaJS加载并启动模块的两种方式： a、使用data-main 为script src=assets/scripts/seajs/sea.js id=seajsnode/script添加data-main=application/application属性即可： script src=assets/scripts/seajs/sea.js id=seajsnode data-main=application/application/script SeaJS会根据data-main指定的模块来作为整个应用的入口模块。SeaJS找到这个