想请教一下 require.js 的问题

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 2874 天前的主题，其中的信息可能已经有所发展或是发生改变。

页面底部引入 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 ，求指教

require

Bootstrap

Keyword

18 条回复 • 2017-01-12 11:21:44 +08:00

jybox

2017-01-11 13:31:19 +08:00

这是 JS 语法错误呀，先 document.getElementById 呀

i147

2017-01-11 15:13:37 +08:00

@jybox ....

otakustay

2017-01-11 15:31:35 +08:00

原因不是那个 superplaceholder 的配置里的 el: keyword 导致的么，你既没有全局的 keyword 变量，也没有一个 id 为 keyword 的元素……

i147

2017-01-11 15:35:39 +08:00

@otakustay 是啊，原因是在这，首页 <input class="form-control input-lg" type="search" id="keyword" name="keyword" placeholder=""> 中的 id 实际就是。这个页面一切正常也不报错，但是次页因为没有 input 和 id keyword 就报错了，所以，不知道怎么搞了。

kely

2017-01-11 15:37:04 +08:00

看一下 superplaceholder 的配置参数，拿其他地方的例子比对一下

i147

2017-01-11 15:47:03 +08:00

@kely 嗯，但这跟 superplaceholder 的配置参数没啥关系了！很显然就是，引用 requirejs 后，这样来写是全局的，所以像其它次页如果没有定义这个 id keyword 就会报错。

roist

2017-01-11 15:59:42 +08:00

头像似曾相识 https://cdn.v2ex.co/avatar/34c0/825b/207192_large.png

i147

2017-01-11 16:11:44 +08:00

@roist 帮我解决问题，我都是你的！

i147

2017-01-11 16:34:17 +08:00

@roist
@kely
@otakustay
@jybox

其实还是按需加载依赖的问题，第一次用 requirejs ，求指教

otakustay

2017-01-11 16:41:07 +08:00

1. superplaceholder 在报错的页有没有用，没用就想办法别加载
2. 如果有用，那为什么会没有 keyword 这个元素，在报错的页应该是用哪个元素

你告诉我是 1 还是 2 我再看看问题……

i147

2017-01-11 16:51:45 +08:00

@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>

i147

2017-01-11 16:53:45 +08:00

@otakustay 所以我的理解是，这个需要做按需加载依赖的配置！次页没有 input id=keyword 那么就不要加载 main.js 里的 superplaceholder

i147

2017-01-11 16:57:31 +08:00

@otakustay 您可能一直都不知道 keyword 到底是什么玩意儿。。。主帖写的了，效果效果如： https://kushagragour.in/lab/superplaceholderjs/

otakustay

2017-01-11 17:07:45 +08:00

@i147 你的 main 同时用于 2 个页，其中一个页需要 superplaceholder ，一个页不需要，自然是要你的 main.js 写逻辑来判断的

if (document.getElementById('keyword')) {
require(['superplaceholder'], ...)
}

这是很基本的程序逻辑，和 requirejs 也没啥关系

i147

2017-01-11 19:07:00 +08:00

@otakustay 谢谢，我刚才也是这样来做的虽然看起来解决了问题，但貌似失去了使用 requirejs 的初衷，本来用它就是想做库的按需加载依赖管理。因为第一天用 requirejs ，所以没太深入理解

otakustay

2017-01-11 19:33:49 +08:00

@i147 requirejs 的按需加载不是这个意思……如果你的 superplaceholder 还依赖其它的东西，它能帮你把这些依赖加载进来而不把其它不需要的一起下载，这是它的作用，但最入口的那一次判断是你要做的

i147

2017-01-11 19:39:50 +08:00

@otakustay 嗯嗯，谢谢指教！正在看文档！非常感谢你

allce231

2017-01-12 11:21:44 +08:00

keyword 上下文都没有，加个两引号可好？