Seajs的使用
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Seajs的使用相关的知识，希望对你有一定的参考价值。
参考技术A seajs.config
alias
别名配置，配置之后可在模块中使用require调用 require(\'jquery\');
paths
设置路径，方便跨目录调用。通过灵活的设置path可以在不影响base的情况下指定到某个目录。
vars
变量配置。有些场景下，模块路径在运行时才能确定，这时可以使用 vars变量来配置。
vars 配置的是模块标识中的变量值，在模块标识中用 key来表示变量。
map
该配置可对模块路径进行映射修改，可用于路径转换、在线调试等。
preload
使用preload配置项，可以在普通模块加载前，提前加载并初始化好指定模块。
注：preload中的空字符串会被忽略掉。
注：preload中的配置，需要等到 use 时才加载。比如：
注：preload 配置不能放在模块文件里面：
debug
值为true时，加载器不会删除动态插入的 script 标签。插件也可以根据debug配置，来决策 log 等信息的输出。
base
Sea.js 在解析顶级标识时，会相对 base 路径来解析。
charset
获取模块文件时，<script> 或 <link> 标签的charset属性。 默认是utf-8
charset还可以是一个函数：
seajs.use
用来在页面中加载一个或多个模块。seajs.use(id, callback?)
注意：seajs.use 与 DOM ready 事件没有任何关系。如果某些操作要确保在 DOM ready 后执行，需要使用 jquery 等类库来保证。比如
注意：use方法第一个参数一定要有，但是可以是null，也可以是一个变量
seajs.cache
通过 seajs.cache，可以查阅当前模块系统中的所有模块信息。
比如，打开 seajs.org，然后在 WebKit Developer Tools 的 Console 面板中输入 seajs.cache，可以看到：
seajs.reslove
类似require.resolve，会利用模块系统的内部机制对传入的字符串参数进行路径解析。
seajs.data
通过 seajs.data，可以查看 seajs 所有配置以及一些内部变量的值，可用于插件开发。当加载遇到问题时，也可用于调试。
seajs使用记
1、seajs使用外部依赖（第三方工具库，譬如jQuery）
错误做法：
define(function(require, exports, module){ // require可以下载外部依赖，但是他不能将其解析为seajs自身的模块，所以不能这样使用。 var $ = require(‘../../depency/3rd_lib/jquery.js‘); $(‘#hi‘).html("aaaaaa"); });
正确做法1：
index.html <html> <head> <title>sea demo</title> <!-- <script type="text/javascript" src="../depency/3rd_lib/jquery.js"></script> --> <script type="text/javascript" src="../depency/3rd_lib/sea-debug.js"></script> </head> <body> <div id="hi"> </div> <script type="text/javascript"> seajs.use(‘../static/test/seaUtil.js‘, function(){ seajs.use(‘../static/test/seajsDemo.js‘); }); </script> </body> </html> seaUtil.js define(function(require, exports, module){ /** * require可以下载外部依赖，但是他不能将其解析为seajs自身的模块，所以不能这样使用。 * 外部依赖引入推荐做法： * 1、将外部依赖单独放到一个seajs文件模块中引入，在首页seajs.use的callback里use其他模块，在callback中引入其他初始模块可以防止依赖未引入时使用 * 2、将外部依赖放在首页HTML中加载，在seajs文件模块中直接使用 */ require(‘../../depency/3rd_lib/jquery.js‘); // $(‘#hi‘).html("aaaaaa"); }); seajsDemo.js define(function(require, exports, modeule){ var seaUtil = require(‘./seaUtil‘); eBase = window.eBase = window.eBase || {}; app = window.app = window.app || {}; $.extend(eBase, { sayHello: function(){ alert(‘hello , gray boy @‘); } }); app.userManager = app.userManager || {}; });
正确做法2：
index.html <html> <head> <title>sea demo</title> <script type="text/javascript" src="../depency/3rd_lib/jquery.js"></script> <script type="text/javascript" src="../depency/3rd_lib/sea-debug.js"></script> </head> <body> <div id="hi"> </div> <script type="text/javascript"> seajs.use(‘../static/test/seaUtil.js‘, function(){ seajs.use(‘../static/test/seajsDemo.js‘); }); </script> </body> </html> seajsDemo.js define(function(require, exports, modeule){ var seaUtil = require(‘./seaUtil‘); eBase = window.eBase = window.eBase || {}; app = window.app = window.app || {}; $.extend(eBase, { sayHello: function(){ alert(‘hello , gray boy @‘); } }); app.userManager = app.userManager || {}; });
以上是关于Seajs的使用的主要内容，如果未能解决你的问题，请参考以下文章