JavaScript模块加载框架sea.js 学习

dapeng
dapeng 这家伙很懒,还没有设置简介

0 人点赞了该文章 · 2702 浏览

简单总结sea.js 学习 文件目录结构 /sea/sea.js 下载地址 ht-tp://seajs.org/docs/#downloads /sea/jquery-sea.js 下载地址 h-ttp://jquery.com/download/ /sea/sea_config.js /sea/home.jsdata.js /sea/data.js {{{ <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': 'ht-tps://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: 'ht-tp://example.com/path/to/base/', // 文件编码 charset: 'utf-8' }); }}} 3.home.js模块文件 {{{ 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返回别名文件 解析后的绝对路径 }); }}} 4.data.js模块文件 {{{ define({ author: 'ZhangYanpo', blog: 'http://www.ktuo.cn' }); }}}

发布于 2014-11-24 12:36

免责声明:

本文由 dapeng 原创发布于 WeCenter ,著作权归作者所有。

登录一下,更多精彩内容等你发现,贡献精彩回答,参与评论互动

登录! 还没有账号?去注册

暂无评论