Laravel Admin 自定义 JavaScript 的正确方式？
20 / 4 / 创建于 6年前 /
Summer 的个人博客 https://laravel-admin.org/ 使用的是 Pjax ，所以自定义 JS 时候需要按照 Pjax 的事件周期来。
第一步
加载 JS 文件
app/Admin/bootstrap.php
Admin::js('/js/admin-extended.js');第二步
public/js/admin-extended.js
(function($){ var AdminExtended = { init: function(){ var self = this; // Pjax 所有事件请见：https://github.com/defunkt/jquery-pjax#usage $(document).on('pjax:start', function() { }); // after replacing content $(document).on('pjax:end', function() { // Pjax 模式里页面加载成功后的初始化 self.siteBootUp(); }); // always fires after ajax, regardless of result $(document).on('pjax:complete', function() { }); // 正常页面加载成功后的初始化 self.siteBootUp(); }, siteBootUp: function(){ var self = this; self.replaceEnglish(); }, replaceEnglish: function(){ // 创建页面 $('.file-drop-zone-title').text("拖动文件到此上传..."); // 左边搜索框 $('.sidebar-form .input-group input.form-control.autocomplete').attr("placeholder", '搜索...'); }, }; window.AdminExtended = AdminExtended; })(jQuery); $(document).ready(function() { AdminExtended.init(); }); 本作品采用《CC 协议》，转载必须注明作者和本文链接
本帖由系统于 4年前 自动加精
关于 LearnKu 
粤公网安备 44030502004330号
这得把 .js 文件拆分出来，需要直接执行的语句必须塞进 pjax 定义的事件里面。可是，如果前端页面是用vue写的，pjax反倒成了累赘。vue组件里面调用axios实现无刷新，已经无需pjax过问了。要是能给pjax设置忽略规则就好了。例如像这样的链接
<a href='xxx' pjax-ignore>，当此链接被点击之后，pjax检测到 a 标签包含了 pjax-ignore 属性，不会进行请求拦截。可问题依然存在，就算可以设置pjax的忽略规则。如果点击的是普通链接，比如
<a href='yyy'>这样的没有设置忽略规则的标签，仍然会导致vue组件挂载失败。总而言之pjax和vue目前似乎不能很好的共存，还是要把
new Vue({ el: '#app' });这条语句从 .js 文件中分离出来，然后写进 pjax 事件里。我图省事，直接使用一行代码
这可能是最便利的写法：1、无需拆分 .js 文件；2、无需过问 pjax 具体事件。依然可以实现pjax和vue的和谐共存，尽管性能上有所损失（pjax管理了不该过问的细节问题）
按理说，没有结束的标签
<script src='$path/zzz.js'>浏览器应该报错。意外的是这里却能正常运行，可能是现代浏览器太聪明了。安全起见，可能想要加个正斜杠，改成这样
<script src='$path/zzz.js' />。后来测试发现，结尾的斜杠不能加。或许大家很不放心，怎么可以在里面放一个没有结束的script标签呢？竟然连正斜杠都不可以带？无论如何，
</script>必须加上！也行，按下面的写法就可以了这个非常安全，这里面采用加法运算，把可能会被浏览器误解的
</script>拆分了。这样一来，浏览器就不会误以为这是脚本结束的地方了。赞一个，但是会出现多个form表单出现字段重复的问题，尽管在初始化的时候默认值可能是一样的