这是一个创建于 2881 天前的主题，其中的信息可能已经有所发展或是发生改变。
页面底部引入 require.js 和 main.js
<script src="require.js/2.3.2/require.min.js" defer="" async="true" data-main="js/main"></script>
main.js
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
}
})
});
首页 HTML
<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 上下文都没有，加个两引号可好？
|
Select Language