seajs入门使用
使用 Sea.js 进行模块化开发还能够带来非常多优点:
模块的版本号管理。
通过别名等配置,配合构建工具,能够比較轻松地实现模块的版本号管理。
提高可维护性。模块化能够让每一个文件的职责单一,很有利于代码的维护。Sea.js 还提供了 nocache、debug 等插件,拥有在线调试等功能。能比較明显地提升效率。
前端性能优化。
Sea.js 通过异步载入模块,这对页面性能非常故意。
Sea.js 还提供了 combo、flush 等插件,配合服务端,能够非常好地对页面性能进行调优。
跨环境共享模块。
CMD 模块定义规范与 Node.js 的模块规范非常相近。通过 Sea.js 的 Node.js 版本号。能够非常方便实现模块的跨server和浏览器共享。
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仅仅接受字符串直接是量作为參数
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());
});
效果:
<%@ 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入门使用的更多相关文章
- SeaJS入门教程系列之使用SeaJS(二)
SeaJS入门教程系列之使用SeaJS(二) 作者: 字体:[增加 减小] 类型:转载 时间:2014-03-03我要评论 这篇文章主要介绍了SeaJS入门教程系列之使用SeaJS,着重介绍了SeaJ ...
- seajs 入门
最近想搞搞JS模块化, 读到了园子里的一篇好文: http://www.cnblogs.com/lvdabao/p/js-modules-develop.html 看里面讲seajs不错, 于是想学 ...
- SeaJS入门篇一 怎么使用query
研究了2个多小时,终于搞定引入jq 1.写个html页面 <h1>ddddddddd</h1> <script src='/Scripts/dist/sea.js'> ...
- SeaJS入门教程系列之SeaJS介绍(一)
前言SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架,可以实现JavaScript的模块化开发及加载机制.与jQuery等JavaScript框架不同,SeaJS不会扩展封装 ...
- SeaJS入门教程系列之完整示例(三)
一个完整的例子上文说了那么多,知识点比较分散,所以最后我打算用一个完整的SeaJS例子把这些知识点串起来,方便朋友们归纳回顾.这个例子包含如下文件: 1.index.html——主页面.2.sea.j ...
- SeaJS入门
Sea.js是一种模块加载工具 官网:http://seajs.org/docs/ 使用步骤: 1.下载sea.js 2.引入sea.js 3.加入配置代码 // seajs 的简单配置 seajs. ...
- 模块化开发(二)--- seaJs入门学习
SeaJS是一个基于CMD模块定义规范实现一个模块系统加载器 [CMD规范](https://github.com/cmdjs/specification/blob/master/draft/mo ...
- grunt和seajs入门之--提取依赖、合并、压缩js文件
一.安装grunt: npm install -g grunt-cli //安装 npm install grunt –save-dev //安装Grunt最新版本到项目目录中,并将其添加到devDe ...
- seaJs模块化开发简单入门
随着前端技术的日益成熟,功能越来越丰富强大,规范也越来越健全,在这样的背景环境下很快便有了CommonJs.AMD.CMD等一系列规范,使前端发开趋向模块化.规范化.CMD模块化的代表之一就是国内开发 ...
随机推荐
- redis 可视化管理工具
Redis Desktop Manager 下载地址:http://redisdesktop.com/download 支持: Windows 7+, Mac OS X 10.10+, Ubuntu ...
- Java基础(十三)--深拷贝和浅拷贝
在上篇文章:Java基础(十二)--clone()方法,我们简单介绍了clone()的使用 clone()对于基本数据类型的拷贝是完全没问题的,但是如果是引用数据类型呢? @Data @NoArgsC ...
- vue工程化
很多人在玩完了官方文档的小例子之后,又不知道如何下手了.所以我这边帮大家把断层补上.大家首先要把vue的基本语法都熟悉了,然后再来这边学习. 有了前面webpack的铺垫,我们直接从vue的工程化开始 ...
- PHP 下基于 php-amqp 扩展的 RabbitMQ 简单用例 (一) -- 安装 AMQP 扩展和 Direct Exchange 模式
Windows 安装 amqp 扩展 RabbitMQ 是基于 amqp(高级消息队列协议) 协议的.使用 RabbitMQ 前必须为 PHP 安装相应的 amqp 扩展. 下载相应版本的 amqp ...
- ArrayList中removeAll和clear的区别(无区别)
removeAll会直接调用此方法,传入list和false,因中间的逻辑都不会走(如果由retainAll方法调用,则会走这些逻辑判断),所以只需要看finaly中的最后一个if条件,w=0,通过循 ...
- git Please tell me who you are解决方法
在git创建项目时出现,是因为在创建git文件夹的时候信息不完善导致的下图是正确在git创建项目时出现,是因为在创建git文件夹的时候信息不完善导致的下图是正确1.git init2.git conf ...
- 你知道你常用的dos和linux命令吗?
功能 Linux MS-DOS 进入到该目录 cd cd 列举文件 ls dir 创建目录 mkdir mkdir 清除屏幕 clear cls 复制文件 cp copy 移动文件 mv move 删 ...
- win7 x64安装glpk
下载glpk,下载地址:http://ftp.gnu.org/gnu/glpk/
- (十四)Python3 字符串格式化
Python3 字符串格式化 字符串的格式化方法分为两种,分别为占位符(%)和format方式.占位符方式在Python2.x中用的比较广泛,随着Python3.x的使用越来越广,format方式使用 ...
- webstrom破解-webstrom2018.2.4破解方法(xjl456852原创)
方法一: 获取注册码: http://idea.lanyus.com/ 方法二: 使用破解补丁 放在安装目录的bin目录下,并且编辑bin目录下的文件 如果使用的32位的webstrom就编辑webs ...