<script src="require.js/2.3.2/require.min.js" defer="" async="true" data-main="js/main"></script>
require.config({ baseUrl: 'libs', paths: { jquery: 'jquery/2.2.4/jquery.min', bootstrap: 'twitter-bootstrap/3.3.7/js/bootstrap.min', superplaceholder: 'superplaceholder/0.1.1/superplaceholder.min' }, map: { '*': { 'css': 'require-css/0.1.8/css.min' } }, shim: { bootstrap: { deps: ['jquery'] }, superplaceholder: { deps: ['jquery'] } } }); // bootstrap require(['bootstrap'], function (bootstrap) { $('[rel=tooltip]').tooltip() // tooltip $('[rel=popover]').popover({trigger:"hover"}) // popover }); // superplaceholder require(['superplaceholder'], function (superplaceholder) { superplaceholder({ el: keyword, sentences: [ '关键词 1', '关键词 2', '关键词 3', '关键词 4' ], options: { letterDelay: 80, loop: true, startOnFocus: false } }) });
<input class="form-control input-lg" type="search" id="keyword" name="keyword" placeholder="">
效果如: https://kushagragour.in/lab/superplaceholderjs/
以上,一切正常
其它页面当然也同样引入了
<script src="require.js/2.3.2/require.min.js" defer="" async="true" data-main="js/main"></script>
但是报错, Uncaught ReferenceError: keyword is not defined
如图
因为只有首页才有 input 定义了 id keyword ,其它页没有 不太会用 requirejs ,求指教
1
jybox 2017-01-11 13:31:19 +08:00
这是 JS 语法错误呀,先 document.getElementById 呀
|
3
otakustay 2017-01-11 15:31:35 +08:00
原因不是那个 superplaceholder 的配置里的 el: keyword 导致的么,你既没有全局的 keyword 变量,也没有一个 id 为 keyword 的元素……
|
4
i147 OP @otakustay 是啊,原因是在这,首页 <input class="form-control input-lg" type="search" id="keyword" name="keyword" placeholder=""> 中的 id 实际就是。这个页面一切正常也不报错,但是次页 因为没有 input 和 id keyword 就报错了,所以,不知道怎么搞了。
|
5
kely 2017-01-11 15:37:04 +08:00
看一下 superplaceholder 的配置参数,拿其他地方的例子比对一下
|
6
i147 OP @kely 嗯,但这跟 superplaceholder 的配置参数没啥关系了!很显然就是,引用 requirejs 后,这样来写 是全局的,所以像其它次页 如果没有定义这个 id keyword 就会报错。
|
7
roist 2017-01-11 15:59:42 +08:00
|
9
i147 OP |
10
otakustay 2017-01-11 16:41:07 +08:00
1. superplaceholder 在报错的页有没有用,没用就想办法别加载
2. 如果有用,那为什么会没有 keyword 这个元素,在报错的页应该是用哪个元素 你告诉我是 1 还是 2 我再看看问题…… |
11
i147 OP @otakustay
1 、在报错的页 就是因为没有定义 id keyword ,因为是全局引用了 <script src="require.js/2.3.2/require.min.js" defer="" async="true" data-main="js/main"></script> 而当中的 main.js superplaceholder 的 el:keyword 其实就是 input 里 id keyword <pre> require(['superplaceholder'], function (superplaceholder) { superplaceholder({ el: keyword, sentences: [ '关键词 1', '关键词 2', '关键词 3', '关键词 4' ], options: { letterDelay: 80, loop: true, startOnFocus: false } }) }); </pre> |
12
i147 OP @otakustay 所以 我的理解是,这个需要做按需加载依赖的配置!次页没有 input id=keyword 那么就不要加载 main.js 里的 superplaceholder
|
13
i147 OP @otakustay 您可能一直都不知道 keyword 到底是什么玩意儿。。。主帖写的了,效果 效果如: https://kushagragour.in/lab/superplaceholderjs/
|
14
otakustay 2017-01-11 17:07:45 +08:00
@i147 你的 main 同时用于 2 个页,其中一个页需要 superplaceholder ,一个页不需要,自然是要你的 main.js 写逻辑来判断的
if (document.getElementById('keyword')) { require(['superplaceholder'], ...) } 这是很基本的程序逻辑,和 requirejs 也没啥关系 |
15
i147 OP @otakustay 谢谢,我刚才也是这样来做的 虽然看起来解决了问题,但貌似失去了使用 requirejs 的初衷,本来用它就是想做库的按需加载依赖管理。因为第一天用 requirejs ,所以没太深入理解
|
16
otakustay 2017-01-11 19:33:49 +08:00
@i147 requirejs 的按需加载不是这个意思……如果你的 superplaceholder 还依赖其它的东西,它能帮你把这些依赖加载进来而不把其它不需要的一起下载,这是它的作用,但最入口的那一次判断是你要做的
|
18
allce231 2017-01-12 11:21:44 +08:00
keyword 上下文都没有,加个两引号可好?
|