使用turbolinks和rails-ujs搭建website
这次开发的管理项目,比较简单,想选用一个比较快速而且简单的方式。于是我选择了turbolinks+ujs套装。
turbolinks
turbolinks的主要作用是在页面跳转时,不会存在白屏,看起来是一个spa,其原理是拦截所有的链接跳转,使用ajax得到页面的html,替换body,合并头部的js和css文件。其中你的js文件一定要放在head中,而不是body底部。如果你担心第一次加载页面,空白时间太长,可以给script加上defer属性。
在项目中,使用webpack去打包所有的js文件(没有分包啊),所以在每次“跳转”页面的时候,需要重新执行一遍js,这个时候需要监听turbolinks的事件:
document.addEventListener('turbolinks:load', () => {
// .....
});
ujs
对于rails的ujs,不得不称赞,真的很优秀。在页面中,你可以通过给元素增加data-remote=”true”来指示这是需要ujs来处理的。那么如何处理ujs返回的错误呢?
$(document).on('ajax:error', (event) => {
// ...
});
最后的代码如下:
export default () => {
RailsUJS.start();
turbolinks.start();
ajaxFeedback(); // handle ajax
document.addEventListener('turbolinks:load', () => {
// xxxx
});