分类 原创 下的文章

关于dr490n.com域名的问题

这个域名我使用了十几年了（2011年注册），只是今年续费的时间点太忙没注意……就被Godaddy给拍卖掉了。关键是拍卖后whois里面不算新注册，新的使用者继承了我这十几年的域名年龄……现在这个域名还挂着一口价转让的广告。将近2000的价格……嗯，我是不打算再买回来了。

之前就知道Godaddy的风评很差，所以这个注册商只剩下这一个自己用的域名……没想到还是因为疏忽，弄丢了这个域名。不过这个域名对应的我的日常博客没啥访问量的，反而百度等平台对CN这个域名的数据比COM的高。

调整域名的用途

基于以上的原因，我准备从2024年11月起调整dr490n.cn和chenglong.fj.cn这两个域名的用途。由原先的工作经验分享（前端为主）改为生活日常分享。网站名称也会从“狠低调的前端”改为“尨的城事”。

而原先的工作经验分享博客“狠低调的前端”会在新的域名low-key.cn全新起航。这个域名要等ICP备案，所以暂时不确定更新开始的时间。

从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> 里面执行了！

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

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

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

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

记录几个Lodash在实际运用中遇到的小坑，提醒自己和看到这篇文章的所有人。
有时候一定要等BUG被别人发现了，才注意到是你没有理解开源库文档的含义……

1.你需要_.clone还是_.cloneDeep？

最简单的理解方法就是看代码！

let a = {
    aaa: "Hello,",
    bbb: "My",
    ccc: "Friend!",
    array: [{a:3}, {a:5}, {a:6}, {a:8}],
    object: { b:12, c:22}
}
let b = _.clone(a)
let c = _.cloneDeep(a)
// 我们直接给a添加属性
a.kkk = 789
console.log(b)
// >>> {"aaa":"Hello,","bbb":"My","ccc":"Friend!","array":[{"a":3},{"a":5},{"a":6},{"a":8}],"object":{"b":12,"c":22}}
// 好像没啥问题
// 但是修改了a.object里面的属性之后……
a.object.a = 7
console.log(b)
// >>> {"aaa":"Hello,","bbb":"My","ccc":"Friend!","array":[{"a":3},{"a":5},{"a":6},{"a":8}],"object":{"b":12,"c":22,"a":7}}
// 看到object里面的属性a=7了么？

// 同理，改数组array的操作也……
a.array.push({a:233})
a.array[0].b = 996
console.log(b)
// >>> {"aaa":"Hello,","bbb":"My","ccc":"Friend!","array":[{"a":3,"b":996},{"a":5},{"a":6},{"a":8},{"a":233}],"object":{"b":12,"c":22,"a":7}}
// 我只想克隆一份，但为啥内层的值都变了？
// 这时候我们再看看c
console.log(c)
// >>> {"aaa":"Hello,","bbb":"My","ccc":"Friend!","array":[{"a":3},{"a":5},{"a":6},{"a":8}],"object":{"b":12,"c":22}}

为啥要用深克隆（cloneDeep）就很明显了吧？

2._.extend和_.merge也有深浅的关系！

用_.extend来对配置进行合并，结果……

let a = {
  aaa: 1,
  bbb: 2,
  ccc: 3,
  object: {
    ddd: 4,
    eee: 5,
    fff: 6,
    sub: {
      ggg: 7,
      hhh: 8,
      iii: 9
    }
  }
}

let b = {
  ccc: 15,
  bbb: 19,
  kkk: 13,
  object: {
    eee: 26,
    zzz: 32,
    sub: {
      ccc: 19,
      kkk: 26
    }
  }
}
console.log(_.extend({}, a, b))
// >>> {"aaa":1,"bbb":19,"ccc":15,"object":{"eee":26,"zzz":32,"sub":{"ccc":19,"kkk":26}},"kkk":13}
// object里面的ddd和fff属性都没了？

如果要保留a的默认值，又要用b等子集去覆盖，建议使用_.merge

console.log(_.merge({}, a, b))
// >>> {"aaa":1,"bbb":19,"ccc":15,"object":{"ddd":4,"eee":26,"fff":6,"sub":{"ggg":7,"hhh":8,"iii":9,"ccc":19,"kkk":26},"zzz":32},"kkk":13}
// 这样才符合我的需求

发现问题

今天准备测试一些PHP脚本，于是打开了久违的XMAPP环境。
但是XMAPP环境并没有像以往的那样正常地启动起来，而是在日志区域显示了这样的一段提示：

XMAPP环境无法启动

XMAPP环境无法启动，红色提示说80口被PID为4的进程占用。

然后我看了下Netstat的记录，确实是被PID为4的进程占用了：
从NETSTAT里面查找占用端口的进程

说明一下netstat的指令：
我使用的指令是netstat -ano，其中：
-a是显示所有连接和监听端口；
-n是以数字IP地址的方式显示地址和端口号，如果不写这一项会看到“外部地址”一列有的会显示为域名或主机名；
-o是显示连接对应进程的ID
所以，要查明对应关系，必须至少输入“netstat -ao”。
当然，如果你发现列表太长找不到你要找的80口数据，你可以附加一个处理字符串的“|findstr 80”就可以精确定位出几条80口的连接记录了。

解决方法

遇到这种情况，首先要确定占用进程是哪个。
我们用到的是每个电脑都有的软件——“Windows任务管理器”。

什么？你不知道怎么打开“任务管理器”？
……同时按住Ctrl+Alt+Delete，就能看到“启动任务管理器”的选项（Win 7）或者直接打开了“任务管理器”（Windows XP）。
……或者在任务栏上面打开右键菜单也能找到“启动任务管理器”选项。

将“任务管理器”切换到“进程”面板，查找一下PID为4的进程。一般显示的都是System。这是一个系统进程，使用右下角的“结束进程”没有办法关闭这个进程。

在任务管理器中找到PID为4的进程

如果你的“Windows任务管理器”里面看不到“PID”一列，你可以将其显示出来。方法如下：

  • 打开“查看”菜单，点击“选择列...”菜单项。
    “查看”菜单中的“选择列...”菜单项
  • 在打开的新窗口中勾选“PID”一行，点击“确定”即可。
    “选择进程页列”窗口

遇到这种情况就只能重启么？不，不一定！

可以去看下你最近安装的服务，将他们关闭一下试试看！

比如说：
我前段时间为了测试IIS下面的伪静态路由，在这部Windows 7下面安装了IIS套件。而这个套件的万维网服务（W3SVC）也是隐藏在System进程中占用80口的罪魁祸首。

在Win XP中IIS相关的服务都是使用独立的inetinfo.exe进程，比较容易看出是IIS在占用，
而到了我使用的Win 7的时候，IIS服务的启动指令已经变成了

`C:\\Windows\\system32\\svchost.exe -k iissvcs`

这个“Windows服务主进程”的模式来运行，这个时候看到的监听端口的进程很有可能被显示成System。

这时候，只要关闭对应的服务就能释放出被监听的80端口了。
从服务列表中关闭W3SVC服务项目

打开“服务”管理页的方法：

  • “计算机”（或者“我的电脑”）右键菜单选择“管理”打开的窗口中展开左侧树的“服务和应用程序”节点，找到“服务”一项。
  • “控制面板”里面找到“系统和安全”（如果显示的是分类界面）里的“管理工具”，双击“服务”快捷方式打开。
  • 打开“开始”菜单，选择“运行...”，然后输入“services.msc”即可打开。

当然，并不是所有人都像我这样被IIS这样“愚蠢”的占用问题折腾地到处搜索答案。除了IIS以外，我搜索到的情况中有人是被SQL Server 2008中的报表服务所占用的。
所以，别因为多次重启后80口还是被占用而准备重装系统，很有可能是一些你前些时间安装的服务搞的鬼。