sea.js的基本使用方法
2017-02-08 19:11
357 查看
关于SeaJS的概念,在这里就不多说了,自行百度吧~
下面是本人自己总结的sea.js的使用方法,有不对的地方请大家指出。
打开我们下载的文件,是这样的:
打开src文件夹,我们可以看到很多js文件:
我们想要的sea.js就在里面啦。
如果我们现在有module1和module2两个js文件
module1.js内容如下:
module2.js内容如下:
用sea.js引入其他js文件:
注意了注意了!:sea的默认根目录是sea.js这个文件,注意路径哦~
用sea.js实现模块化,解决冲突,依赖等问题:
对module1里面的代码做出如下改动:
对module2里面的代码做出如下改动:
在我们的html里面正确调用不同js文件里面的函数
差不多就是这样啦,get到了就会觉得不是很难吧,哈哈~
下面是本人自己总结的sea.js的使用方法,有不对的地方请大家指出。
1. 第一步当然是去官网下载我们需要的文件喽
http://seajs.org/docs/ 进入官网点击下载即可。打开我们下载的文件,是这样的:
打开src文件夹,我们可以看到很多js文件:
intro.js -- 全局闭包头部 sea.js -- 基本命名空间 util-lang.js -- 语言增强 util-events.js -- 简易事件机制 util-path.js -- 路径处理 util-request.js -- HTTP 请求 util-deps.js -- 依赖提取 module.js -- 核心代码 config.js -- 配置 outro.js -- 全局闭包尾部
我们想要的sea.js就在里面啦。
2. 根据需要在自己的页面里面引入sea.js
<script src="js/sea.js"></script>
3.开始使用!
关于怎样使用这个问题,还是从举个栗子开始吧~~~如果我们现在有module1和module2两个js文件
module1.js内容如下:
function show(){ alert(1); } function show(){ alert(2); }
module2.js内容如下:
function show(){ alert(3); }
用sea.js引入其他js文件:
seajs.use('./js/module1.js')
注意了注意了!:sea的默认根目录是sea.js这个文件,注意路径哦~
seajs.use('./js/module1.js',function (){ //两个参数:第一个参数:模块的地址;第二个参数:回调函数; alert(123); //当module1加载成功的时候弹出123 })
用sea.js实现模块化,解决冲突,依赖等问题:
对module1里面的代码做出如下改动:
define( function (require,exports,module){ //require,exports,module这三个参数是固定的,不允许修改的,相当于关键字 //可写可不写,如果要少写的话,只能少写后面的,不能少写前面的, //比如可以写require,exports,也可以写require,不能写exports,module,或者module。 //一般情况下都写上比较好 function show(){ alert(1); } exports.fn1 = show ; //exports:对外提供接口的对象,让show这个函数在外面能够找到 }) function show(){ alert(2); }
对module2里面的代码做出如下改动:
define(function (require,exports,module){
function show(){ alert(3); }
exports.fn2 = show ;
})
在我们的html里面正确调用不同js文件里面的函数
seajs.use('./js/module1.js',function (){ //两个参数:第一个参数:模块的地址;第二个参数:回调函; ‘./js/module1.js’:sea的默认根目录:sea.js这个文件 alert(123); //当module1加载成功的时候弹出123 }) seajs.use('./js/module1.js',function (ex){ //参数可以随意起名,代表exports ex.fn1(); //调用module1 的exports.fn1 show(); //调用module1 的show }) //show(); 这样调用不到module1里的内容 seajs.use('./js/module2.js',function (ex){ //参数可以随意起名,代表exports ex.fn2(); //调用module2 的exports.fn1 show(); //调用module1 的show // ex.fn1(); 调用不到module1 的exports.fn1 })
差不多就是这样啦,get到了就会觉得不是很难吧,哈哈~
相关文章推荐
- SlidesJS基本使用方法和官方文档解释
- Jquery 模板插件 jquery.tmpl.js 的使用方法(1):基本语法,绑定,each循环,ajax获取json数据
- SlidesJS基本使用方法和官方文档解释 【Jquery幻灯片插件 Jquery相册插件】
- js的基本语法与方法的使用
- [js高手之路] html5 canvas系列教程 - 认识canvas以及基本使用方法
- SlidesJS基本使用方法和官方文档解释 【Jquery幻灯片插件 Jquery相册插件】
- js数组的定义方法与基本使用
- js调用后台方法 (AjaxPro.2.dll的基本使用)
- js一个典型的对象写法,推荐使用这种格式,用于处理图像的基本方法、
- SlidesJS基本使用方法和官方文档解释 【Jquery幻灯片插件 Jquery相册插件】
- 使用Node.js为其他程序编写扩展的基本方法
- 使用Node.js为其他程序编写扩展的基本方法
- 1.1 js 面向对象的基本概念和基本使用方法
- js中Map之基本用法分开单独写方法,当做类库使用
- js模版引擎handlebars.js实用教程——each-基本循环使用方法
- SlidesJS基本使用方法和官方文档解释 【Jquery幻灯片插件 Jquery相册插件】
- SlidesJS基本使用方法和官方文档解释 【Jquery幻灯片插件 Jquery相册插件】
- SlidesJS基本使用方法和官方文档解释 【Jquery幻灯片插件 Jquery相册插件】
- AjaxPro的基本使用(js调后台方法)
- Vi 的基本使用方法