从Electron版本12.0.1开始，BrowserWindow默认的webPreferences配置里contextIsolation的默认值从false改成true了。先看看这个参数的描述：

是否在独立 JavaScript 环境中运行 Electron API和指定的 preload 脚本. 默认为 true。preload 脚本所运行的上下文环境只能访问其自身专用的 document 和global window，其自身一系列内置的JavaScript (Array, Object, JSON等等) 也是如此，这些对于已加载的内容都是不可见的。 Electron API 将只在 preload 脚本中可用，在已加载页面中不可用。 这个选项应被用于加载可能不被信任的远程内容时来确保加载的内容无法篡改 preload 脚本和任何正在使用的Electron API。 该选项使用的是与Chrome内容脚本相同的技术。 你可以在开发者工具Console选项卡内顶部组合框中选择 'Electron Isolated Context'条目来访问这个上下文。

把文档里面翻译成中文的内容适当改回来之后，应该容易理解吧？就是 contextIsolation = true 时你预加载的 preload 脚本和窗口加载的第三方网站内容是两个隔离的 window 对象， preload 脚本没办法访问第三方网站页面里的全局window对象！

当然这个修改对 <webview> 标签也是生效的，但因为Eelecton本身不鼓励使用 <webview> 标签的关系，文档里面没有明显的提示。如果你也遇到升级Electron版本后 <webview> 标签用的 preload 读取不到第三方页面的全局 window 对象的问题。可以在 <webview> 标签增加上webpreferences这个天博体育在线官网：

  <webview id="viewFrame" ref="webview" :src="pageUrl" :preload="preload" :useragent="userAgent" :partition="partition"></webview>
  <!-- 改成 -->
  <webview id="viewFrame" ref="webview" :src="pageUrl" :preload="preload" :useragent="userAgent" :partition="partition" webpreferences="allowRunningInsecureContent, contextIsolation=0" disablewebsecurity></webview>

这样旧版的preload脚本就能正常的在 <webview> 里面执行了！

最近手上用Element UI的项目有点多，很多像 el-table、el-pagination这样覆盖默认参数要写一大堆的组件，复制粘贴虽然很方便。但如果要统一修改某个天博体育在线官网，比如给el-dialog对话框都加一个禁用点击遮罩关闭窗口的功能，搜索起来一个一个添加就还是很吃力。

其实这些默认参数都是可以在注入Vue前批量修改的：

import Vue from 'vue'
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

function changeDefault (e, p, v) {
  Element[e].props[p].default = v
}
// 对话框默认都附加到body上，没有层级问题
changeDefault('Dialog', 'appendToBody', true)
// 禁用点击遮罩关闭对话框
changeDefault('Dialog', 'closeOnClickModal', false)
// 修改分页区域的默认显示顺序
changeDefault('Pagination', 'layout', '->,total,prev,pager,next,jumper,sizes')
// 修改分页区域每页显示几行的默认选项
changeDefault('Pagination', 'pageSizes', () => [30, 50, 100])
// 修改完再注入到Vue里面
Vue.use(Element)

注意一下格式！
第一个参数“组件名称”的首字母大写！
第二个参数“天博体育在线官网名”需要把“-”连接的格式修改成驼峰格式！
不然……会报错！！
第三个参数“天博体育在线官网值”为Array或者Object时，尽量用函数返回的形式！这个地方有一个警告信息，原因的话经常写Vue的估计都已经烂熟于心了。

另外，如果你修改了Element UI组件的默认值，最好在项目文档的显著位置注明一下哦！不然，后面接手的人，会惊叹于你那简单的标签格式的。

当然，还有一种自己给Element UI组件加一层包装的方案。相对于这种更加麻烦一点，这里就不赘述了。

重要的事情说三遍：
Vue2.0没有unmounted！
Vue2.0没有unmounted！
Vue2.0没有unmounted！

mounted里面注册的监听器要销毁的话，请用beforeDestroy！

unmounted和beforeUnmount是Vue3.0版本才加入的钩子！

Vue项目里面写错名字的钩子函数不会提示，这个确实有点麻烦……
一般情况下，只会注意到mounted函数没被调用，然后去查问题发现函数名写成mount了。
类似的还有一些带s的天博体育在线官网，例如props，mixins。写错了这些天博体育在线官网名或者函数名，报错的都不是这些天博体育在线官网定义的位置，而是你使用到这些天博体育在线官网里面的天博体育官方网时才会……
嘛，谁让你不认真核对变量名呢？

来源：GitHub - You-Dont-Need-jQuery

前端发展很快，现代浏览器原生 API 已经足够好用。我们并不需要为了操作 DOM、Event 等再学习一下 jQuery 的 API。同时由于 React、Angular、Vue 等框架的流行，直接操作 DOM 不再是好的模式，jQuery 使用场景大大减少。本项目总结了大部分 jQuery API 替代的方法，暂时只支持 IE10 以上浏览器。

目录

1. Query 选择器
2. CSS & Style
3. DOM 操作
4. Ajax
5. 事件
6. 实用工具
7. Promises
8. 动画
9. 替代品
10. 浏览器支持

Query 选择器

常用的 class、id、天博体育在线官网 选择器都可以使用 document.querySelector 或 document.querySelectorAll 替代。区别是

注意：document.querySelector 和 document.querySelectorAll 性能很差。如果想提高性能，尽量使用 document.getElementById、document.getElementsByClassName 或 document.getElementsByTagName。

// jQuery
$('selector');

// Native
document.querySelectorAll('selector');

// jQuery
$('.class');

// Native
document.querySelectorAll('.class');

// or
document.getElementsByClassName('class');

// jQuery
$('#id');

// Native
document.querySelector('#id');

// or
document.getElementById('id');

// jQuery
$('a[target=_blank]');

// Native
document.querySelectorAll('a[target=_blank]');

// jQuery
$el.find('li');

// Native
el.querySelectorAll('li');

// jQuery
$el.siblings();

// Native - latest, Edge13+
[...el.parentNode.children].filter((child) =>
child !== el
);
// Native (alternative) - latest, Edge13+
Array.from(el.parentNode.children).filter((child) =>
child !== el
);
// Native - IE10+
Array.prototype.filter.call(el.parentNode.children, (child) =>
child !== el
);

// jQuery
$el.prev();

// Native
el.previousElementSibling;

// next
$el.next();

// Native
el.nextElementSibling;