javascript模块化加载sea.js
【摘要】
简单总结sea.js 学习
文件目录结构
/sea/sea.js 下载地址 http://seajs.org/docs/#downloads
/sea/jQuery-sea.js 下载地址 http://jquery.com/...
简单总结sea.js 学习
文件目录结构
/sea/sea.js 下载地址 http://seajs.org/docs/#downloads
/sea/jQuery-sea.js 下载地址 http://jquery.com/download/
/sea/sea_config.js
/sea/home.jsdata.js
/sea/data.js
1.html页面代码文件
- <style>
- .ch{height:200px;width:200px;background:#ccc;}
- </style>
- <div class="cl"></div>
- <!-- 引入sea.js文件 -->
- <script src="/sea/sea.js"></script>
- <!-- 引入sea_config.js配置文件 -->
- <script src="/sea/sea_config.js"></script>
- <script type="text/javascript">
- seajs.use(['jquery','home'],function(a,b){ //
- alert(b.foo); //调用home中的foo属性
- b.init(); //调用home中的init接口
- b.all(); //调用home中的all接口
- })
- </script>
2.sea_config.js配置文件
- seajs.config({
- // 别名配置
- alias: {
- 'jquery': '/sea/jquery-sea',
- 'home': '/sea/home',
- 'data': '/sea/data'
- },
- // 路径配置
- //paths: {
- // 'gallery': 'https://a.alipayobjects.com/gallery'
- //},
- // 变量配置
- //vars: {
- // 'locale': 'zh-cn'
- //},
- // 映射配置
- //map: [
- // ['http://example.com/js/app/', 'http://localhost/js/app/']
- //],
- // 预加载项
- //preload: ['jquery','home'],
- // 调试模式
- debug: true,
- // Sea.js 的基础路径
- //base: 'http://example.com/path/to/base/',
- // 文件编码
- charset: 'utf-8'
- });
- define(function(require, exports, module){
- var data = require('data'); // 加载data模块 data.js
- function wo(){ //内部函数，init中调用
- alert("load $");
- };
- alert(data.blog); //直接执行函数
- module.exports = { //当前模块对外提供的接口
- foo:'hello', //属性
- init : function(){ //接口init
- wo(); //执行内部函数
- $(".cl").addClass("ch");
- },
- all : function(){ //接口all
- alert(data.author);
- }
- };
- console.log(require.resolve('jquery')); //require.resolve返回别名文件 解析后的绝对路径
- });
- define({
- author: 'cm',
- blog: 'http://www.XXX.cn'
- });
文章来源: markwcm.blog.csdn.net，作者：黄啊码，版权归原作者所有，如需转载，请联系作者。
原文链接：markwcm.blog.csdn.net/article/details/72867423
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）