使用 Sea.js 进行模块化开发还能够带来非常多优点:

  1. 模块的版本号管理。

    通过别名等配置,配合构建工具,能够比較轻松地实现模块的版本号管理。

  2. 提高可维护性。模块化能够让每一个文件的职责单一,很有利于代码的维护。Sea.js 还提供了 nocache、debug 等插件,拥有在线调试等功能。能比較明显地提升效率。

  3. 前端性能优化。

    Sea.js 通过异步载入模块,这对页面性能非常故意。

    Sea.js 还提供了 combo、flush 等插件,配合服务端,能够非常好地对页面性能进行调优。

  4. 跨环境共享模块。

    CMD 模块定义规范与 Node.js 的模块规范非常相近。通过 Sea.js 的 Node.js 版本号。能够非常方便实现模块的跨server和浏览器共享。



seajs的文件结构 :


以上步骤完毕,接下来演示一个怎样简单的使用seajs

第一步:

define

用来定义模块。Sea.js 推崇一个模块一个文件,遵循统一的写法:

define(function(require,exports,module){

	  var _msg = 'not set msg!';
exports.setMsg = function(msg){
_msg = msg;
}; exports.getMsg = function(){
return _msg;
};
});

第一个參数:require用来获取指定的接口,注意require仅仅接受字符串直接是量作为參数

第二个參数:exports用来在模块内部对外部提供接口
第三个參数:module与exports类似,用来在模块内部对外提供接口

第二步:
   当模块定义好了。那么就把刚才配置好的模块配置入seajs。

seajs.config

seajs.config({
alias:{
'init':"modul/init.js"
}
});

init表示模块的id是自己定义的,“modul/init.js”是模块的相对路径能够省略js。注意:模块的绝对路径是seajs-2.3.0/dist/modul/init.js


seajs.use

用来在页面中载入一个或多个模块。

seajs.use("init", function(init){
//设置值
init.setMsg('Hello World');
alert(init.getMsg());
});

效果:

  
HTML页面的代码:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<!-- 导入seajs-2.3.0这个文件 -->
<script type="text/javascript" src="seajs-2.3.0/dist/sea.js"></script> <script type="text/javascript">
//配置seajs
seajs.config({
alias:{
'init':"modul/init.js"
}
}); //使用seajs
seajs.use("init", function(init){
//设置值
init.setMsg('Hello World');
alert(init.getMsg());
});
</script>
</head>
<body>
<h1>Test seajs</h1> </body>
</html>


seajs入门使用的更多相关文章

  1. SeaJS入门教程系列之使用SeaJS(二)

    SeaJS入门教程系列之使用SeaJS(二) 作者: 字体:[增加 减小] 类型:转载 时间:2014-03-03我要评论 这篇文章主要介绍了SeaJS入门教程系列之使用SeaJS,着重介绍了SeaJ ...

  2. seajs 入门

    最近想搞搞JS模块化, 读到了园子里的一篇好文:  http://www.cnblogs.com/lvdabao/p/js-modules-develop.html 看里面讲seajs不错, 于是想学 ...

  3. SeaJS入门篇一 怎么使用query

    研究了2个多小时,终于搞定引入jq 1.写个html页面 <h1>ddddddddd</h1> <script src='/Scripts/dist/sea.js'> ...

  4. SeaJS入门教程系列之SeaJS介绍(一)

    前言SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架,可以实现JavaScript的模块化开发及加载机制.与jQuery等JavaScript框架不同,SeaJS不会扩展封装 ...

  5. SeaJS入门教程系列之完整示例(三)

    一个完整的例子上文说了那么多,知识点比较分散,所以最后我打算用一个完整的SeaJS例子把这些知识点串起来,方便朋友们归纳回顾.这个例子包含如下文件: 1.index.html——主页面.2.sea.j ...

  6. SeaJS入门

    Sea.js是一种模块加载工具 官网:http://seajs.org/docs/ 使用步骤: 1.下载sea.js 2.引入sea.js 3.加入配置代码 // seajs 的简单配置 seajs. ...

  7. 模块化开发(二)--- seaJs入门学习

    SeaJS是一个基于CMD模块定义规范实现一个模块系统加载器   [CMD规范](https://github.com/cmdjs/specification/blob/master/draft/mo ...

  8. grunt和seajs入门之--提取依赖、合并、压缩js文件

    一.安装grunt: npm install -g grunt-cli //安装 npm install grunt –save-dev //安装Grunt最新版本到项目目录中,并将其添加到devDe ...

  9. seaJs模块化开发简单入门

    随着前端技术的日益成熟,功能越来越丰富强大,规范也越来越健全,在这样的背景环境下很快便有了CommonJs.AMD.CMD等一系列规范,使前端发开趋向模块化.规范化.CMD模块化的代表之一就是国内开发 ...

随机推荐

  1. InChatter系统之服务器开发(二)

    现在我们继续进行InChatter系统的服务器端的开发,今天我们将实现服务契约同时完成宿主程序的开发,今天结束之后服务器端将可以正常运行起来. 系统的开发是随着博客一起的,颇有点现场直播的感觉,所有在 ...

  2. 字符串(String)几个常用方法的详解

    String:(字符串) indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置. stringObject.indexOf(searchvalue,fromindex) searc ...

  3. pthread Win32多线程编程的一些知识和感想

    研究遗传算法的一大诟病就是每次运行程序的结果并不是完全一样的,有时候能找到最优解有时候找不到最优解,这就是遗传算法的概率性导致的.那么怎么评价你的方法的好坏呐,这时候就要多次独立运行程序最后取结果的平 ...

  4. windows ubuntu bcdeditor

    双系统. 先装windows,后装ubuntu12.04 为了避免grub引导,所以安装bcdeditor. 平时使用没有什么不适,可是每次linux升级内核以后,grub列表可能就会消失,自然是不能 ...

  5. CentOS 7 安装Oracle VirtualBox

    1. 下载VirtualBox的repo文件: 登陆 https://www.virtualbox.org/wiki/Linux_Downloads 在网页的最下端的repo链接上右键下载,或者wge ...

  6. python爬虫学习:分布式抓取

    前面的文章都是基于在单机操作,正常情况下,一台机器无论配置多么高,线程开得再多,也总会有一个上限,或者说成本过于巨大.因此,本文将提及分布式的爬虫,让爬虫的效率提高得更快. 构建分布式爬虫首先需要有多 ...

  7. image和TFRecord互相转换

    关说不练假把式.手上正好有车牌字符的数据集,想把他们写成TFRecord格式,然后读进来,构建一个简单的cnn训练看看.然后发现准确率只有0.0x.随机猜也比这要好点吧.只能一步步检查整个过程.暂时想 ...

  8. Ubuntu-11.10中 vim和Gedit打开html文件中文乱码问题

    解决vim中文乱码方法:     打开/etc/vim/vimrc     添加代码:     set fileencodings=utf-8,gb2312,gbk,gb18030     set t ...

  9. Bzoj 3307 雨天的尾巴(线段树合并+树上差分)

    C. 雨天的尾巴 题目描述 N个点,形成一个树状结构.有M次发放,每次选择两个点x,y对于x到y的路径上(含x,y)每个点发一袋Z类型的物品.完成所有发放后,每个点存放最多的是哪种物品. 输入格式 第 ...

  10. Laravel核心解读 -- 扩展用户认证系统

    扩展用户认证系统 上一节我们介绍了Laravel Auth系统实现的一些细节知道了Laravel是如何应用看守器和用户提供器来进行用户认证的,但是针对我们自己开发的项目或多或少地我们都会需要在自带的看 ...