seaJs的简单应用
sea.js的应用
模块化:
将Js代码按模块化分开,提高了代码的重用性;
seaJs的好处:
解决了文件的依赖
解决了变量名的冲突
seaJs的使用
1、定义模块
define(function(require,exports,module)){
require:引入一个模块
如:var _msg = require("msg"); exports:输出一个模块
如:exports.msg = function(){
alert("ok");
} module:批量输出模块(很少用)
}
2、使用一个模块
seajs.use("模块名",function(mod){
//code
})
使用多个模块
seajs.use(["a","b",···],function(mod1,mod2···){}) 效果:添加一个人的姓名,年龄和通讯方式
框架:
html代码:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>SeaJs Test</title>
<script src="../js/sea.js"></script>
<script>
seajs.use("init",function(init){
init.init();
})
</script>
</head>
<body>
<div class="main">
<h1>信息</h1>
<ul>
<li id="s1"></li>
<li id="s2"></li>
<li id="s3"></li>
</ul>
</div>
</body>
</html>
init.js代码:
define(function(require,exports,module){
var man = require("man");
var css = require("../css/main.css"); var $ = function(id){
return document.getElementById(id);
}; exports.init = function(){
var s1 = $("s1");
var s2 = $("s2");
var s3 = $("s3"); var name = man.getName();
var age = man.getAge();
var msg = man.say(); s1.innerHTML = name;
s2.innerHTML = age;
s3.innerHTML = msg; }
})
man.js代码:
define(function(require,exports,module){
var msg = require("msg"); var _name = "tom";
var _age = "20"; exports.myName = _name; exports.say = function(){
return msg.getMsg();
}; exports.getName = function(){
return _name;
}; exports.getAge = function(){
return _age;
}
})
msg.js代码:
define(function(require,exports,module){
var _msg = "not set msg!"; exports.setMsg = function(msg){
_msg = msg;
}
exports.getMsg = function(){
return _msg;
}
});
seaJs的简单应用的更多相关文章
- 快速上手seajs——简单易用Seajs
快速上手seajs——简单易用Seajs 原文 http://www.cnblogs.com/xjchenhao/p/4021775.html 主题 SeaJS 简易手册 http://yslo ...
- 简单的使用Seajs
什么是Seajs Seajs是一个加载器 http://yslove.net/seajs/ 遵循 CMD 规范模块化开发,依赖的自动加载.配置的简洁清晰. 兼容性 Chrome 3+ Firefox ...
- seajs简单使用
背景:在做一个功能时需要用到一个JS库,但是这个库比较大,想要在只有用到这个功能时再去加载这个库. <script src="~/Scripts/jquery-1.10.2.min.j ...
- 深入seajs源码系列一
简述 前端开发模块化已经是大势所趋,目前模块化的规范有很多,众所周知的有commonJS,Module/Wrappings和AMD等,而且ES6也着手开始制定模块化机制的实现.类似于c/c++的inc ...
- SeaJS入门篇一 怎么使用query
研究了2个多小时,终于搞定引入jq 1.写个html页面 <h1>ddddddddd</h1> <script src='/Scripts/dist/sea.js'> ...
- seajs快速了解
详情请点击原文 SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架,可以实现JavaScript的模块化开发及加载机制.与jQuery等JavaScript框架不同,S ...
- seajs 和spm的使用简介
说实话, 前端开发是一个令人头痛的事情. nodejs出现了很久了, 一直不是很习惯用nodejs, 当初刚出来的时候, 就下载了express, 想搭建个网站, 结果不是我的菜, 愣是用的不习惯,也 ...
- Seajs教程
API 快速参考 该页面列举了 Sea.js 的常用 API.只要掌握这些用法,就可以娴熟地进行模块化开发. seajs.config 用来对 Sea.js 进行配置. seajs.config({ ...
- seaJS简介和完整实例
什么是 seaJS ? 和requireJS相似的,seaJS 也是用JavaScript编写的JS框架,主要功能是可以按不同的先后依赖关系对 JavaScript 等文件的进行加载工作,可简单理解为 ...
随机推荐
- Spring Cloud集成相关优质项目推荐
Spring Cloud Config 配置管理工具包,让你可以把配置放到远程服务器,集中化管理集群配置,目前支持本地存储.Git以及Subversion. Spring Cloud Bus 事件.消 ...
- HashMap归档-超越昨天的自己系列
java HashMap 读一下源码,一个数组存储数据: transient Entry[] table; 内部存key和value的内部类: static class Entry<K,V> ...
- Eclipse “cannot be resolved to a type” 错误
eclipse中遇到了“XX cannot be resolved to a type”的报错信息.网上找了些资料,本文将做以简单总结. (1)jdk不匹配(或不存在) 项目指定的jdk为“j ...
- 转自一个CG大神的文章
<如何学好游戏3D引擎编程>此篇文章献给那些为了游戏编程不怕困难的热血青年,它的神秘要我永远不间断的去挑战自我,超越自我,这样才能攀登到游戏技术的最高峰 ——阿哲VS自 ...
- 基于注解的SpringMVC简单介绍
SpringMVC是一个基于DispatcherServlet的MVC框架,每一个请求最先访问的都是DispatcherServlet,DispatcherServlet负责转发每一个Request请 ...
- PHP实例开发(3)PHP中MVC学习之ThinkPHP
PHP中MVC学习之ThinkPHP 1.什么是MVC MVC本来是存在于Desktop程序中的,M是指数据模型,V是指用户界面,C则是控制器.使用MVC的目的是将M和V的实现代码分离 MVC是一个设 ...
- 【P1915】[usaco09 dec gold]电视游戏问题
在百度上搜到了nzx学长的题解orz 原题: 农夫约翰的奶牛们游戏成瘾!本来FJ是想要按照陶叫兽的做法拿她们去电击戒瘾的,可是后来他发现奶牛们玩游戏之后比原先产更多的奶.很明显,这是因为满足的牛会产更 ...
- 35 个 Java 代码性能优化总结
前言 代码优化,一个很重要的课题.可能有些人觉得没用,一些细小的地方有什么好修改的,改与不改对于代码的运行效率有什么影响呢?这个问题我是这么考虑的,就像大海里面的鲸鱼一样,它吃一条小虾米有用吗?没用, ...
- linux memory
http://duartes.org/gustavo/blog/post/how-the-kernel-manages-your-memory/ http://duartes.org/gustavo/ ...
- ECMAScript 6的解构赋值 ( destructuring assignment)
var provinceValues=["010","020","028","0755","023" ...