seajs模块化加载框架使用
seajs是模块化加载框架。seajs.org已经打不开了,seajs的github。seajs速查文档
<!--如果完成下面4步,则seajs掌握了80%
js模块化
1.引入seajs的库 :<script type="text/javascript" src="sea/sea.js"></script>
2.如何变成模块
define:一个文件就是一个模块。如下utils文件
define(function(require, exports) {
exports.each = function (arr) {
// 实现代码
};
exports.log = function (str) {
// 实现代码
};
});
3.如何调用模块 exports seajs.use
用来在页面中加载一个或多个模块。seajs.use(id, callback?)
4.如何依赖模块 requie
通过 require('./util.js') 就可以拿到 util.js 中通过 exports 暴露的接口。
require执行完的结果就是exports 。
-->
html文件:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
<meta name="format-detection" content="telphone=no, email=no"/>
<meta name="apple-touch-fullscreen" content="yes"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<title>image-size</title>
<style type="text/css">
*{margin: 0;padding: 0;}
</style>
<script type="text/javascript" src="sea/sea.js"></script>
<script language="javascript">
//加载入口文件main.js,默认后缀js自动匹配
//seajs.use(模块地址,函数)
// sea的默认根目录:sea.js这个文件所在的文件
//以当前页面为根目录写法:./目录
seajs.use('./sea/main',function(main){
console.log(main.say());
});
</script>
</head>
<body> </body>
</html>
与html并列的sea文件夹里,放有sea.js,main.js,main1.js,main2.js
main.js:
define(function(require,exports,module){
console.log('module of main:');
var main1 = require('main1');
main1.say();
var main2 = require('main2'); //require引用模块
main2.say();
return {
say: function(){
console.log('main--hello');
}
};
});
main1.js:
define(function(require,exports,module){
console.log('module of main1:');
//exports 对外提供接口的对象
module.exports = {
say: function(){
console.log('main1--hello');
}
};
});
main2.js:
define(function(require,exports,module){
console.log('module of main2:');
return {
say: function(){
console.log('main2--hello');
}
};
});
输出结果:
module of main:
module of main1:
main1--hello
module of main2:
main2--hello
main--hello
undefined
seajs模块化加载框架使用的更多相关文章
- SeaJS 模块化加载框架使用
SeaJS 是一个遵循 CMD 规范的模块化加载框架 CommonJS,CMD,AMD等规范后文会提到,这里主要先了解如何在代码中使用. 如果你有使用过nodejs ,那么理解起来就容易多了. 我们通 ...
- RequireJS 模块化加载框架使用
RequireJS 是一个遵循 AMD 规范的模块化加载框架 与上文seajs一样,这里简单介绍其相关用法 同样的,首先是下载好 require.js --> http://requirejs. ...
- RequireJS与SeaJS模块化加载示例
web应用越变的庞大,模块化越显得重要,尤其Nodejs的流行,Javascript不限用于浏览器,还用于后台或其他场景时,没有Class,没有 Package的Javascript语言变得难以管理, ...
- 转: javascript模块加载框架seajs详解
javascript模块加载框架seajs详解 SeaJS是一个遵循commonJS规范的javascript模块加载框架,可以实现javascript的模块化开发和模块化加载(模块可按需加载或全部加 ...
- javascript模块加载框架seajs详解
SeaJS是一个遵循commonJS规范的javascript模块加载框架,可以实现javascript的模块化开发和模块化加载(模块可按需加载或全部加载).SeaJS可以和jQuery完美集成,使用 ...
- angularJS1笔记-(20)-模块化加载机制seajs
SeaJS是一个遵循CMD规范的JavaScript模块加载框架,可以实现JavaScript的模块化开发及加载机制. 与jQuery等JavaScript框架不同,SeaJS不会扩展封装语言特性,而 ...
- js模块化加载器实现
背景 自es6以前,JavaScript是天生模块化缺失的,即缺少类似后端语言的class, 作用域也只以函数作为区分.这与早期js的语言定位有关, 作为一个只需要在网页中嵌入几十上百行代码来实现一些 ...
- 一起写一个Android图片加载框架
本文会从内部原理到具体实现来详细介绍如何开发一个简洁而实用的Android图片加载缓存框架,并在内存占用与加载图片所需时间这两个方面与主流图片加载框架之一Universal Image Loader做 ...
- 该如何理解AMD ,CMD,CommonJS规范--javascript模块化加载学习总结
是一篇关于javascript模块化AMD,CMD,CommonJS的学习总结,作为记录也给同样对三种方式有疑问的童鞋们,有不对或者偏差之处,望各位大神指出,不胜感激. 本篇默认读者大概知道requi ...
随机推荐
- String的小笔记
String类的对象是不可变的! 在使用String类的时候要始终记着这个观念.一旦创建了String对象,它就不会改变. String类中也有可以改变String中字符串的方法,但只要是涉及改变的方 ...
- MVC dropdownlist 后端设置select属性后前端依然不能默认选中的解决方法
-----------------------------------来自网上的解决方法--------------------------------------------- ASP.Net MV ...
- Eclipse Mars.2集成Maven 3.5.4
准备材料: Eclipse Mars.2 Release (4.5.2): 官网戳:https://www.eclipse.org/downloads/ Maven 3.5.4: http://ma ...
- 在CentOS 6.7 64位安装PHP的PDO_OCI扩展 Installing PDO_OCI extension on CentOS 6.7 64bit
需求&背景 最近根据项目需求,要在php中远程连接Oracel 11g Express数据库,为了开发方便,决定采用pdo,也就是php的PDO_OCI扩展,但是php安装的时候并没有安装PD ...
- (转载)最近总是遇到各种 IEbug,mark一下,学习到了,转载出处:http://www.cnblogs.com/ruomeng/p/5332814.html
本文分享下我在项目中积累的IE8+兼容性问题的解决方法.根据我的实践经验,如果你在写HTML/CSS时候是按照W3C推荐的方式写的,然后下面的几点都关注过,那么基本上很大一部分IE8+兼容性问题都OK ...
- Android 仿微信朋友圈添加图片
github地址(欢迎下载Demo) https://github.com/zhouxu88/WXCircleAddPic 老习惯,先上图,着急用的朋友,直接带走Demo,先拿来用吧,毕竟老板催的紧, ...
- Objective-C Protocols
Objective-C allows you to define protocols, which declare the methods expected to be used for a part ...
- HTML5与PHP的比较
一:需求量比较 知名招聘网站拉勾网显示,北京地区HTML5的需求量只有73个,而PHP的需求量有500+个:智联招聘网显示,北京上海广州深圳HTML5的需求量是7475个,而PHP的需求量是12514 ...
- 在Ubuntu16.04安装YouCompleteMe
作为从事了4年多嵌入式Linux工作的软件工程师,最近决定完全在ubuntu上工作,使用vim进行代码的阅读和编辑,然后尝试去安装vim相关的各种插件.从来没用过代码补全的我,在网上找到了插件omni ...
- Maven归纳
一.常用功能 1.Maven的中央仓库 https://mvnrepository.com/ 2.添加jar包依赖 1.首先点击pom.xml,然后点击弹出页面中的Dependencies选项,接 ...