用Yii2实现网站爬虫将bokee blog的旧博批量导入本站

本人在国内最早的博客网站bokee.com有过一段时间的日志记录,现在看来虽然没有什么特别的用处,也是一些回忆和纪念,因此决定批量导入到本站。

PHP Simple HTML DOM Parser

采用的是Yii2框架结合”PHP Simple HTML DOM Parser”,其地址为:http://sourceforge.net/projects/simplehtmldom/,我用的是它的yii2插件版本keltstr\simplehtmldom。但是由于年久失修,已经不兼容php7+语法,因此,我自己做了一个升级版本,放在我的github上,github地址:https://github.com/deaboway/yii2-simplehtmldom

继续阅读“用Yii2实现网站爬虫将bokee blog的旧博批量导入本站”

vultr主机选择

vultr主机

之前是Dallas主机,最近丢包越来越严重了,延迟也比较高,因此决定换个区域。参考vultr的https://www.vultr.com/resources/faq/#downloadspeedtests 链接,目前主要有17个区域,因此写了一个sh脚本来ping丢包和延迟,脚本如下:

#!/bin/bash
echo =======================================
echo 01 Tokyo
ping -c20 hnd-jp-ping.vultr.com
echo —————————————
echo 02 Singapore
ping -c20 sgp-ping.vultr.com
echo —————————————
echo 03 Seoul
ping -c20 sel-kor-ping.vultr.com
echo —————————————
echo 04 Amsterdam
ping -c20 ams-nl-ping.vultr.com
echo —————————————
echo 05 Paris
ping -c20 par-fr-ping.vultr.com
echo —————————————
echo 06 Frankfurt
ping -c20 fra-de-ping.vultr.com
echo —————————————
echo 07 London
ping -c20 lon-gb-ping.vultr.com
echo —————————————
echo 08 Atlanta
ping -c20 ga-us-ping.vultr.com
echo —————————————
echo 09 New York New Jersey
ping -c20 nj-us-ping.vultr.com
echo —————————————
echo 10 Chicago
ping -c20 il-us-ping.vultr.com
echo —————————————
echo 11 Dallas
ping -c20 tx-us-ping.vultr.com
echo —————————————
echo 12 Los Angeles
ping -c20 lax-ca-us-ping.vultr.com
echo —————————————
echo 13 Miami
ping -c20 fl-us-ping.vultr.com
echo —————————————
echo 14 Seattle
ping -c20 wa-us-ping.vultr.com
echo —————————————
echo 15 Silicon Valley
ping -c20 sjo-ca-us-ping.vultr.com
echo —————————————
echo 16 Toronto
ping -c20 tor-ca-ping.vultr.com
echo —————————————
echo 17 Sydney
ping -c20 syd-au-ping.vultr.com
echo =======================================

比较下来,我这边用移动和电信的情况下,Los Angeles丢包最少,延迟200ms左右;Tokyo和Soul延迟最低80ms左右,但是丢包20%左右。

考虑到丢包需要重传,延迟一些问题不大,还是选了Los Angeles,不知道各位现在访问本站速度如何呢?

Angular框架发展史

前端三大框架vue,angular,react,今天来聊聊Angular发展史。

0.背景

前端开发的基础仍然是HTML+CSS+Javascript。原始的Javascript(以下简称JS)写法是程序员撰写的JS代码和发布版JS基本相同,最多用混淆工具对单个文件做一些混淆处理。这个阶段的JS开发模式是手工+工具。

Jquery的出现让JS在前段开发中重要性大大提高,html和css的所有动态调整都可以由JS完成。但是由于Jquery只是对Javascript的框架封装,开发者的开发模式依然是手工+工具。

Node.js是对JS开发方式的一种重要改进。程序员基于Node.js编译器开发JS代码,开发后的文件由Node.js转换成发布版JS。发布过程中的优化、整合、混淆等等,完全有Node.js编译器完成。至此JS开发进入集成开发环境阶段。

Angular、React、Vue以及很多最新的前端开发框架(包括微信小程序)都是基于Node.js,因此它们都具有Node.js提供的特性。它们也被前端开发工程师形象称为“脚手架”

Angular开发的一个主要特点在于使用Typescript作为开发语言,源码文件以.ts结尾。Typescript是一种Javascript超集,最终也依赖Node.js编译器转化成发布的js文件。个人觉得使用Typescript的一个潜在好处是开发者可以明显的区分开发用的ts和发布的js文件。

1.AngularJS vs Angular

AngularJS指的是早期的Angular版本,就是从2009年诞生的那个版本,那个时候AngularJS版本更新很慢,直到2016年,AngularJS的版本才是1.7*,而在这之后,AngularJS不在继续老版本的更新了,而是推出了一个全新的版本Angular 2,这个版本因为从底层彻底重构了,所以它和之前的AngularJS可以说不是一个框架了,因此,现在人们讨论的Angular一般意义上是指Angular v2及以上版本。它是一种前端应用框架,使用TypeScript语言。第一个版本实际使用Javascript,因此被称为AngularJS。

具体时间线如下:

  • AngularJS 作为最早的版本,AngularJS于2009年开始开发,于2010年发布初始版本。由于Angular 和 AngularJS开发语言不通,Angular JS仍在维护,1.7.5 版本于2018年10月发布。
  • Angualr 2 于2014年十月宣布,于2016年五月推出第一个发布版。该版本不再受JS的作用域、控制器等特性要求,而是使用组件等更适应开发阶段的特性。
  • Angular 4 由于路由包已经占用了版本编号V3.3.0,为了避免混淆,Angular直接从 V2 跳到 V4。第一个发布版于 2017年3月发布,并完全向下兼容 Angular 2。
  • Angular 5 于2017年11月发布。新特性包括支持渐进式网站应用(PWA),并对Material设计框架等有更好的支持。
  • Angular 6 于2018年 5月发布。该版本主要改进了工具链,使其对开发者更加友好。
  • Angular 7 于2018年 10月发布。 该版本同步依赖 Typescript 3.1, RxJS 6.3 和 Node10(兼容 Node8)。
  • Angular 8 于2019年 5月发布。该版本改进了应用程序在现代浏览器上的启动时间,提供了开发 CLI 的新的 API,保持了 Angular 与业界生态和更多新的 Web 标准的同步。
  • Angular 9 于2020年 2月发布。该版本默认情况下将应用程序切换到Ivy编译器和运行时,并引入了改进的组件测试方法。
  • Angular 10 将于2020年6月发布。
  • 具体参考: https://github.com/angular/angular/blob/master/CHANGELOG.md

2.高速发展

Anguar 10马上要发布了,要知道之前用了8年才发布了一个主版本,而现在4年时间已经发布了8个版本。这是因为现在Angular采用了语义本版本控制,每个6个月就会升级一个大版本。

3.三大特性

angular能够高速发展是因为它有三驾马车全力牵引着它。

TypeScript

现在的ts已经成为了各个开发框架的首选的语言。vue3.0也是使用的TypeScript。TypeScript是JS的超集,提供了比js更多的语法特性,具有面向对象的全部特性,非常适合开发大型项目。而Angular就采用了typescript来进行框架的构建,这样使得它的开发迭代变得异常迅猛。

rxjs

它是使用Observables进行响应式编程库,表示我们可以订阅异步数据流。该库提供了内置的运算符,用于观察,转换和过滤流,甚至将多个流组合在一起以一次创建更强大的数据流。Angular将所有信息作为从路由参数到HTTP响应的可观察流处理。

Zone.js

js是异步执行的,当代码很多的时候,如果想要统计执行时间将变得非常困难,而zone.js解决了这些问题,zone.js能实现异步Task跟踪,分析,错误记录、开发调试跟踪等,通过它的钩子,我们只要将函数执行挂在到它的上面,我们就能统计分析函数执行效率。

4.依赖注入,控制反转

软件开发强调低耦合,而依赖注入就是将被依赖的对象(service)实例传递给依赖对象(client)的行为。将被依赖的对象传给依赖者,而不需要依赖者自己去创建或查找所需对象是依赖注入的基本原则。正是这样的设计思想,让angular的各个功能都通过依赖注入,使得代码耦合大大降低。

5.Ivy

它是angular提供的下一代编译和渲染引擎,通过使用Ivy,我们AOT编译速度将得到大幅度提升。代码将变得更加简洁,代码将会得到大幅压缩,而这也是Angular 9默认开启的,当然,如果你不想使用这个引擎的话,也可以进行关闭。

VUE框架发展史

1.基本介绍

“简单却不失优雅,小巧而不乏大匠”。很多使用过vue的程序员这样评价它,“vue.js兼具angular.js和react.js的优点,并剔除了它们的缺点”。授予了这么高的评价的vue.js,也是开源世界华人的骄傲,因为它的作者是位中国人–尤雨溪(Evan You)。

Vue.js 是一个JavaScript MVVM库,是一套构建用户界面的渐进式框架。它是以数据驱动和组件化的思想构建的,采用自底向上增量开发的设计。相比于Angular.js,Vue.js提供了更加简洁、更易于理解的API,使得我们能够快速地上手并使用Vue.js;同时比起 React + Redux 相对复杂的架构,Vue.js 更加轻量级也更加容易上手,是初创项目的首选前端框架。Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。并且作者是华人的关系,Vue拥有着对华人开发者最友好的api文档和官方教程。

时至今日,Vue已成为全世界三大前端框架之一,Github 上拥有近 17 万 Star 领先于 React 和 Angular,在国内更是首选。它的设计思想、编码技巧也被众多的框架借鉴、模仿。

2.重要版本发布

  • 2013年,在 Google 工作的尤雨溪,受到 Angular 的启发,开发出了一款轻量框架,最初命名为 Seed 。
  • 2013.12,更名为 Vue,图标颜色是代表勃勃生机的绿色,版本号是 0.6.0。
  • 2014.01.24,Vue 正式对外发布,版本号是 0.8.0。
  • 2014.02.25,0.9.0 发布,有了自己的代号:Animatrix,此后,重要的版本都会有自己的代号。
  • 2015.06.13,0.12.0,代号Dragon Ball,Laravel 社区(一款流行的 PHP 框架的社区)首次使用 Vue,Vue 在 JS 社区也打响了知名度。
  • 2015.10.26,1.0.0 Evangelion 是 Vue 历史上的第一个里程碑。同年,vue-router、vuex、vue-cli 相继发布,标志着 Vue从一个视图层库发展为一个渐进式框架。
  • 2016.10.01,2.0.0 是第二个重要的里程碑,它吸收了 React 的虚拟 Dom 方案,还支持服务端渲染。自从Vue 2.0 发布之后,Vue 就成了前端领域的热门话题。
  • 2019.02.05,Vue 发布了 2.6.0 ,这是一个承前启后的版本,在它之后,将推出 3.0.0。
  • 2019.12.05,在万众期待中,尤雨溪公布了 Vue 3 源代码,目前 Vue 3 的进展情况可以通过这个链接查看:https://github.com/vuejs/vue/projects/6

3.Vue 1.0

Vue最初的目标是成为大型项目的一个良好补充。

设计思想是一种“渐进式框架”,淡化框架本身的主张,降低框架作为工具的复杂度,从而降低对使用者的要求。

主要改进

  1. 提供指令的缩写。针对v-bind和v-on提供缩写形式:
  2. 清理精简所提供的接口
  3. 提高初始化的渲染效率
    将v-repeat指令换成了v-for指令。同时优化了这个指令的渲染,效率提升了一倍
  4. 两个官方工具的增强:vue-loader和vueify
  <!-- v-bind -->
  <div v-bind:class="box">全写</div>
  <div :class="box">缩写</div>
  <!-- v-on -->
  <button v-on:click="btn">全写</button>
  <button @click="btn">缩写</button>

4.Vue 2.0

2.0版本对Vue做了大幅度的重构,性能有了很大的提高,也为日后的跨端发展打下了基础。

性能提升
2.0 用一个 fork 自 snabbdom 的轻量 Virtual DOM 实现对渲染层进行了重写。在其上层,Vue 的模板编译器能够在编译时做一些智能的优化处理,例如分析并提炼出静态子树以避免界面重绘时不必要的比对。新的渲染层带来了巨大的性能提升,也让 Vue 2.0 成为了最快速的框架之一。

服务端渲染
Vue 2.0 支持服务端渲染 (SSR),并且是流式的,可以做组件级的缓存,这使得极速渲染成为可能。

5.Vue 3.0

3.0 是非常大的重构,源码使用 TypeScript 重写,目前的代码 98% 以上使用 TypeScript 编写。目前 Vue 3 的进展情况可以通过这个链接查看:https://github.com/vuejs/vue/projects/6

js中blur和click事件的冲突

问题:当焦点在输入框时,点击取消按钮会触发blur和click事件,导致需要点击两次取消按钮才能关闭弹窗

原因:这是因为blur事件比click事件先触发,而javascript为单线程,同一时间只能执行处理一个事件,所以当blur处理程序时,导致其后续click事件并不会执行

var popover = document.getElementById('popover');
var input = document.getElementById('category-name');
var btn = document.getElementById('btn-cancel');
var error = document.getElementById('error');

解决方案1:如果click事件比blur事件先触发就没有问题了,所以可以给blur事件延迟触发

var timer;
 input.onblur = function() {
    timer = setTimeout(function() {
        console.warn('onblur');
        error.style.display = 'block';
    }, 100);
 }
 btn.onclick = function() {
    console.warn('onclick');
    clearTimeout(timer);
    error.style.display = 'none';
    popover.style.display = 'none';
 }

解决方案2:将click事件改为mousedown事件,让其优先于blur事件执行(缺点是用户体验不好,鼠标按下便触发了事件)

 input.onblur = function() {
    console.warn('onblur');
    error.style.display = 'block';
 }
 btn.onmousedown = function() {
    console.warn('onmousedown');
    error.style.display = 'none';
    popover.style.display = 'none';
 }

解决方案3:给按钮添加一个mousedown事件,在其中执行event.preventDefault()阻止浏览器默认事件,这样点击按钮时输入框就不会失去焦点了

input.onblur = function() {
    console.warn('onblur');
    error.style.display = 'block';
}
btn.onmousedown = function(e) {
    console.warn('onmousedown');
    e.preventDefault();
}
btn.onclick = function() {
    console.warn('onclick');
    error.style.display = 'none';
    popover.style.display = 'none';
}

参考:https://www.jianshu.com/p/ad8569eaca0c