• content
  {:toc}

由正则表达式如何匹配相同字符出发，讲讲正则表达式中的选择、分组和引用。

问题

在外刊君读者群中看到有人提出这样的一个需求：

把字符串切成连续相同字符的正则怎么写？比如abbcccdddd切成a,bb,ccc,dddd

之前我对正则表达式也是略有研究，想尝试一下。其实我对正则表达式的学习基本完全来源于犀牛书的第10章，真正看懂这一章，我觉得操作正则表达式应该不在话下。

我的答案

先给出我的答案吧：

1

'abbccddd'.match(/(\w)\1*/g) // ["a", "bb", "cc", "ddd"]

说明

拿到这个问题，首先要匹配字符[a-zA-Z0-9]，这里直接使用\w。然后是全局匹配，在最后加上g。难点在于怎么判断重复。

翻看了犀牛书后，又读了一遍分组和引用的部分。使用小括号()将字符作为一个最小单元，同时小括号还能记忆这个组合相匹配的字符串。再使用反斜杠\引用前面分组的表达式，数字1表示第一个小括号。这时完成了2个字符重复的要求。最后再使用*来匹配出现0次或n次。这个正则表达式就写完了。

下面详细说说分组和引用。

正则表达式的选择、分组和引用字符表

• content
  {:toc}

本文主要说明对这个博客主题的改版和代码重构的过程。这个简洁高雅的博客主题受到了很多朋友的喜欢。在写第一版界面时，我对前端并不是很熟悉，对Jekyll也不熟悉。现在距离当时也一年了，对自己当时写的代码也不太满意了，同时Jekyll如今也已经升级了，目前最新版为3.1.2。因此我在临近毕业尚未入职前做一下博客主题的代码重构和改版吧。

主要想做这些事情有：添加归档，添加标签，添加分类页面，主页显示文章摘要，代码去除 jQuery 和 BootStrap，优化移动端显示，将所有变量写入配置文件_config.yml中等。再优化一些细节吧。希望更多人会喜欢。

改版重构说明

• 使用 GitHub 风格的代码块 Markdown 写法 (Fenced code blocks)。

  即 GFM(github flavored markdown) 的方式。

  Jekyll 已经升级至 3.1.2（2016-03），其中有一些新的要注意的地方，比如官网上说使用了 Rouge 去做代码高亮而不是默认的 Pygments，因为 Jekyll 本身是基于 Ruby 的，因此我看到官方说希望不再使用基于 Python 的 Pygments 了，而是都使用基于 Ruby 的代码。详情见官网升级说明 syntax-highlighter-changed。

• 首页中添加摘要

  摘要可以在每一篇 md 文件头中使用 excerpt 属性写出来。也可以在正文中，4个换行符来分割，这个设置见配置文件_config.yml。

• 添加归档

  上一版中没有归档，现在专门做了一个归档页面，当文章很多时方便根据年份快速查阅。

• 添加标签

  标签还是很有必要添加的，上一版中也没有这个功能。现在也可以根据标签查找文章了。同时标签还有一个重要的作用是，用来获取相似文章的。

• 添加分类页

  之前的分类就是在首页中直接完成的，现在和标签和归档类似，我将分类单独制作为一页，方便查阅。

• 去掉 jQuery 和 BootStrap

  我觉得太重了，没必要使用这两个库，使用原生 JavaScript 和 CSS就可以做到一样的效果，代码量大大减轻，载入速度略有提高。

• 重写了demo页的瀑布流布局

  改变数据写死的方式，将数据用 json 格式录入，由 JavaScript 拼接为 HTML 代码。同时，使用 Masonry，重写了瀑布流布局。

• 简化评论配置，支持 多说 和 disqus

  在_config.yml中评论配置直接添加自己的short_name，评论就能正常使用了。

下面列举一些可能遇到的问题，至少我是遇到了：

RubyGems 无法访问，SSL 证书问题

以前我使用的是 RubyGems 的淘宝镜像https://ruby.taobao.org/。现在这个镜像已经不再维护了，作者 huacnlee (李华顺) 转到 Ruby China 中继续维护了，详情见 RubyGems 镜像- Ruby China。

错误呈现

在执行任何gem命令的时候出现以下错误：

1
2

ERROR:  While executing gem ... (Gem::RemoteFetcher::FetchError)
    SSL_connect returned=1 errno=0 state=SSLv3 read server certificate B: certificate verify failed (https://gems.ruby-china.org/specs.4.8.gz)

解决方法

根据 https://gems.ruby-china.org/ 页面最下方提供的 GitHub Issue 地址。

可以进入这个 issue：https://github.com/ruby-china/rubygems-mirror/issues/3

其中 sanlengjingvv 给出了一个链接地址 https://gist.github.com/fnichol/867550 里面提供了方法。我就是采用这里面的方法解决的。

我使用的是 The Manual Way，因为 The Ruby Way 我没有成功，不知道什么原因，有兴趣的朋友可以试试。下面说说我的具体操作吧。

首先从 https://curl.haxx.se/ca/cacert.pem 将文件cacert.pem下载至 C:\RailsInstaller\cacert.pem

然后执行

1

set SSL_CERT_FILE=C:\RailsInstaller\cacert.pem

就成功了，不会再出现 SSL 错误了。

最后原文中说，为了长久设置，将这个目录存入控制面板中。我没理解是什么意思，是指环境变量吗？有朋友知道的话，欢迎留言告知我。

我存入环境变量后，还是会出现 SSL 错误，这时再次执行上面那条命令即可。

jekyll-paginate 依赖缺失

因为 jekyll 3 中默认安装已经没有这个分页组件了，官方把这个分页组件插件化了，因此要独立安装。详情见 https://jekyllrb.com/docs/pagination/。

错误呈现

在启动 jekyll 服务的时候出现以下错误：

1
2
3
4

jekyll serve
Configuration file: c:/gitWorkSpace/blog-based-on-jekyll-3/_config.yml
  Dependency Error: Yikes! It looks like you don't have jekyll-paginate or one of its dependencies installed. In order to use Jekyll as currently configured, you'll need to install this gem. The full error message from Ruby is: 'cannot load such file -- jekyll-paginate' If you run into trouble, you can find helpful resources at http://jekyllrb.com/help/!
jekyll 3.1.2 | Error:  jekyll-paginate

解决方法

我们安装这个插件到本地即可。

1
2
3
4
5
6
7

gem install jekyll-paginate
Fetching: jekyll-paginate-1.1.0.gem (100%)
Successfully installed jekyll-paginate-1.1.0
Parsing documentation for jekyll-paginate-1.1.0
Installing ri documentation for jekyll-paginate-1.1.0
Done installing documentation for jekyll-paginate after 3 seconds
1 gem installed

被 Foxit pdf reader 占用4000端口

错误呈现

在本地使用命令

1

jekyll serve

出现错误，如下

1
2
3
4
5
6
7
8
9
10
11
12

jekyll serve
Configuration file: E:/GitWorkSpace/blog/_config.yml
           Source: E:/GitWorkSpace/blog
      Destination: E:/GitWorkSpace/blog/_site
Incremental build: disabled. Enable with --incremental
     Generating...
                   done in 0.547 seconds.
 Please add the following to your Gemfile to avoid polling for changes:
   gem 'wdm', '>= 0.1.0' if Gem.win_platform?
Auto-regeneration: enabled for 'E:/GitWorkSpace/blog'
Configuration file: E:/GitWorkSpace/blog/_config.yml
jekyll 3.1.1 | Error:  Permission denied - bind(2) for 127.0.0.1:4000

网上查阅后，这篇博文解决了我的问题。谁占了我的端口 for Windows –By Liu Xia, ThoughtWorks Senior Consultant. .NET Expert

上述报错主要原因是，jekyll 启动使用的4000端口被福昕pdf阅读器的自动更新进程占用了，关掉这个进程，jekyll在本地调试启动服务时就没有问题了。

解决方法

简单的解决方法是：

输入命令，查看各端口被占用情况

1

netstat -ano

找到4000端口被占用的PID

我的结果如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

协议  本地地址          外部地址          状态           PID
TCP  0.0.0.0:80        0.0.0.0:0         LISTENING     4
TCP  0.0.0.0:135       0.0.0.0:0         LISTENING     836
TCP  0.0.0.0:445       0.0.0.0:0         LISTENING     4
TCP  0.0.0.0:1801      0.0.0.0:0         LISTENING     2312
TCP  0.0.0.0:2103      0.0.0.0:0         LISTENING     2312
TCP  0.0.0.0:2105      0.0.0.0:0         LISTENING     2312
TCP  0.0.0.0:2107      0.0.0.0:0         LISTENING     2312
TCP  0.0.0.0:3306      0.0.0.0:0         LISTENING     2404
TCP  0.0.0.0:3389      0.0.0.0:0         LISTENING     1172
TCP  0.0.0.0:49664     0.0.0.0:0         LISTENING     584
TCP  0.0.0.0:49665     0.0.0.0:0         LISTENING     1072
TCP  0.0.0.0:49666     0.0.0.0:0         LISTENING     460
TCP  0.0.0.0:49667     0.0.0.0:0         LISTENING     1000
TCP  0.0.0.0:49670     0.0.0.0:0         LISTENING     696
TCP  0.0.0.0:49678     0.0.0.0:0         LISTENING     2312
TCP  0.0.0.0:49692     0.0.0.0:0         LISTENING     688
TCP  127.0.0.1:4000    0.0.0.0:0         LISTENING     2476
TCP  127.0.0.1:4000    127.0.0.1:55160   ESTABLISHED   2476
TCP  127.0.0.1:4012    0.0.0.0:0         LISTENING     12724

可以看到4000端口的PID是2476。下面查看是什么进程，命令行中输入：

1

tasklist /svc /FI "PID eq 2476"

得到结果：

1
2
3

映像名称                       PID 服务
========================= ======== ============================================
FoxitProtect.exe              2476 FxService

可以看到正是福昕阅读器。下面关掉这个服务就好了。在 win10 中进入任务管理器，选择服务选项卡，关闭这个服务就好了，如下图：

当然也可以在启动jekyll服务的时候指定端口号，如下：

1

jekyll serve --port 3000

这样在浏览器中输入 http://localhost:3000/ 就可以访问了。

还可以在配置文件_config.yml中添加端口号设置（参考官网文档-Serve Command OptionsPermalink），如下：

1
2

# port
port: 1234

此时，启动jekyll服务后，访问 http://localhost:1234/ 即可

• content
  {:toc}

起因

起因是这样的，在尝试前后端分离的这条道路上，我自己也在不断摸索，感觉要把大部分的坑都踩踩了。目前我用的技术是：

• webpack 自动构建
• AMD 模块化 js
• Sass 预处理 CSS
• 使用前端模板引擎 handlebars 解决动态操作将 html 拼接在 js 中的问题

但最近写了一个项目类似知乎这样的多页网站。前端 url 的处理让我觉得不够优雅。我使用的是 hash 的方式处理动态 url 的，为此我专门在知乎上提了一个问题：前端如何处理动态url？

这里我将问题描述如下：

前后端彻底分离的情况下，页面跳转页全部由前端控制。那么如何更好的处理动态url地址？
例如本问题的url为
https://www.zhihu.com/question/38802932
这肯定是用后台路由处理的url

纯前端怎么处理？用hash吗，如下:
https://www.zhihu.com/question#38802932
那如果本页跳转，只改变hash的话，页面不会刷新。
使用location.reload()倒是可以解决。

但总觉得这样处理不够优雅。大家在工作中是如何处理此类场景的？还是用传统的后台路由来提供动态url？

感谢郑海波和剧中人的热心回答。都提到了history对象中的pushState，这是我第一次接触到这方面的内容（顿时觉得自己真是才疏学浅）。

同时也有人提到了pjax，这个就是pushState+Ajax的封装，也很有意思。

下面就来研究和实践一下吧。

History

window对象通过history对象提供对浏览器历史记录的访问能力。它暴露了一些非常有用的方法和属性，让你在历史记录中自由前进和后退，而在 HTML5 中，更可以操纵历史记录中的数据。

back(), forward(), go(), length

浏览器的历史记录就好像一个栈，最新的在最上面，较早之前看过的在下面。

如下图，Chrome的历史记录：

下面介绍怎么在这些历史记录中跳转，但要注意，上图中的浏览器历史记录和本文说的 history 还不太同。

• back()

  在历史记录中后退

    history.back();
  

• forward()

  在历史记录中前进

    history.forward();
  

• go()

  移动到指定的历史记录点

    history.go(-1);
  

  通过指定一个相对于当前页面位置的数值，你可以使用go()方法从当前会话的历史记录中加载页面（当前页面位置索引值为0，上一页就是-1，下一页为1）。

  go()不填参数或参数为go(0)时，页面会刷新，即history.go()或history.go(0)相当于location.reload()

• length

  length为history的属性，显示history长度。

本节在线demo见：History & pjax demo 源代码：

经过亲自测试，history对象只记录同一个 tab 页内的历史。如果是在新窗口打开的，则无效。如：在a标签中添加target="_blank"，或按住ctrl点击，这类场景下，在新的tab页中，history对象也是新的。

且history对象记录的信息与是否同源也无关，所以唯一要满足的就是同一个标签页。

pushState(), replaceState()

HTML5 引进了history.pushState()方法和history.replaceState()方法，它们允许你逐条地添加和修改历史记录条目，能够在不加载新页面的情况下没改变浏览器的URL。这些方法可以协同window.onpopstate事件一起工作。

使用history.pushState()会改变referrer的值，而在你调用方法后创建的 XMLHttpRequest 对象会在 HTTP 请求头中使用这个值。referrer的值则是创建 XMLHttpRequest 对象时所处的窗口的 URL。

• pushState(any data, string title, [string url])

  第一个参数为history对象的state属性值，可以放任意数据，记录历史状态。第二个参数是新状态的标题，目前浏览器基本不支持。第三个参数为可选的相对url。

  执行pushState后，可以在不加载新页面的情况下，更改url。同时history栈中新增一条数据。

  例如，我们有这样一段代码：

    <button id="push1">pushState()</button>
  
    document.querySelector('#push1').addEventListener('click', function() {
        history.pushState('abc','pushStatePageTitle','pushState.html');
        document.querySelector('#length').innerHTML = history.length;//重新读取历史长度
    });
  

  当点击按钮的时候，页面不会刷新，但url地址的最后已经变为pushState.html。这一点非常像hash的作用，但比hash更优雅。

• replaceState(any data, string title, [string url])

  与pushState()类似，只是在history栈中不是新增记录，而是替换一条记录。

需要注意的是：pushState()和replaceState()方法存在安全方面的限制，本地测试是无效的，会报错，可以简单放到任何服务端测试，或者使用http-server开启简单服务器，通过访问localhost来查看效果。

本节demo见：History & pjax demo - pushState

pjax

现在再看本文一开始提出的问题，如何让前端优雅的控制 url，这里就可以考虑 pjax 技术了。我们把 pushState + ajax 进行封装，合起来简称为 pjax。虽然不是什么新的技术，但概念已然不同。

如果不使用 pjax。我们依然可以使用hash来实现文本开始的需求。但会不利于 SEO，看着也不够优雅。

Pjax的原理十分简单。

1. 拦截 a 标签的默认跳转动作或某些按钮的点击事件。
2. 使用 Ajax 请求新页面。
3. 将返回的 Html 替换到页面中。
4. 使用 HTML5 的pushState()修改Url。

个人理解3中也可以仅仅请求数据，再由浏览器渲染。

每当同一个文档的浏览历史（即history对象）出现变化时，会触发window.onpopstate事件。

window.onpopstate = function(event) {
    console.log(event.state);
    console.log(location);
};

这样在用户点击前进后退时也可以很好的监听url，来做相应的页面渲染。

若用户刷新了页面，但没有相应的页面资源，这时页面就会显示不存在。所以我认为较好的方法是在写pushState()第三个参数的时候，写为?a=1这样的参数形式。History.js 也是这么写的。但是这样应该会多一次请求。也许使用 nodeJS 作为中间层会好一些吧。

对于上述的探索，不知道是不是我还不够深入，总觉得还是不够完美。

参考

• MDN History
• MDN 操纵浏览器的历史记录
• pjax 是如何工作的？ 知乎
• PJAX的实现与应用 小胡子哥
• URL的井号-阮一峰
• history对象 JavaScript 标准参考教程（alpha） 阮一峰
• Pjax(pushState and Ajax) 黯羽轻扬
• 操纵历史，利用HTML5 History API实现无刷新跳转 蓝飞
• 前端：将网站打造成单页面应用SPA（一） Coffce
• coffce-pjax
• History.js
• defunkt/jquery-pjax GitHub
• welefen/pjax

• content
  {:toc}

问题描述

当我们点击一个空的、没有任何内容的 div 或者其他块级元素时。在 IE11 以下，是没有反应的。

使用场景

这类问题使用场景还是很普遍的。比如 UI 给了一张大图，要点击图上的某一块位置的时候。可以用一个空的 div 定位到相应的位置，然后对它进行绑定事件。

解决办法

解决方法很简单，即给这个块级元素填充任意颜色，然后将其透明度设置为0。代码如下：

background-color: #fff;
opacity: 0;
filter:alpha(opacity=0);

做了一张思维导图。总结这几个月对 JavaScript 的学习吧，也是一个复习。也是我目前的技能树。

• content
  {:toc}

什么是 weinre？

weinre官网 上有两句有意思的介绍：

weinre is WEb INspector REmote. Pronounced like the word “winery”. Or maybe like the word “weiner”. Who knows, really.

weinre is a debugger for web pages, like FireBug (for FireFox) and Web Inspector (for WebKit-based browsers), except it’s designed to work remotely, and in particular, to allow you debug web pages on a mobile device such as a phone.

上面说 weinre 是一个远程 web 调试器。说到了它的发音，还挺幽默，哈哈。

远程 web 调试器。先说调试器，就像火狐中的 FireBug，Chrome 中的调试器一样。就是在浏览器中按下 F12 出现的那个工具。但是在手机上，你没办法按 F12，而这个 weinre 就是在手机上的 F12，与传统的不同的是，它是在手机上浏览你的 web 页面，在 PC 上查看调试工具，非常方便，这就是所谓的远程。

为什么用 weinre？

现代浏览器中调试工具都非常强大了，可以直接模拟手机设备，为什么还要用 weinre 这么麻烦的东西呢？

我觉得 PC 端的浏览器虽说可以模拟，但模拟毕竟还是模拟，还只是鼠标长按滑来滑去。在开发过程中，使用手机或平板直接来感受是多么的酷，指尖在移动设备的屏幕上摩擦摩擦！给人的直观感受绝对秒杀浏览器的模拟。

原理

使用一种工具之前，了解它的原理和结构是很有帮助的。weinre 作为一种远程调试工具，在结构上分为三层：

• 目标页面（target）：被调试的页面，页面已嵌入 weinre 的远程 js，下文会介绍；
• Debug客户端（client）：本地的 Web Inspector 调试客户端；
• Debug服务端（agent）：一个 HTTP Server，为目标页面与 Debug 客户端建立通信。

三层结构如下图所示：

weinre 的 debug 客户端是基于 Web Inspector 开发，而 Web Inspector 只与以 WebKit 为核心的浏览器兼容，所以 Weinre 的客户端只能用 Chrome 或者 Safari 打开。

官网上也有相应的平台支持说明：

• Platforms supported - debug server 服务端

  任何支持 node.js 的平台。

• Platforms supported - debug client 客户端（跑 debugger 界面的浏览器）

  • Google Chrome
  • Apple Safari
  • Other recent-ish WebKit-based browsers 其他基于 webkit 内核的现代浏览器

• Platforms supported - debug target 目标页面（在移动设备中调试运行的目标页面）

  • Android Browser application
  • iOS Mobile Safari application
  • PhoneGap/Cordova
  • other

安装

1. weinre 是 nodeJS 的一个应用，首先要 安装 nodeJS 运行环境

2. 使用 npm 命令，安装 weinre

    npm -g install weinre
   

   安装成功后会有类似的信息：

    C:\Users\haoyang\AppData\Roaming\npm\weinre -> C:\Users\haoyang\AppData\Roaming\npm\node_modules\weinre\weinre
    weinre@2.0.0-pre-I0Z7U9OV C:\Users\haoyang\AppData\Roaming\npm\node_modules\weinre
    ├── underscore@1.7.0
    ├── nopt@3.0.2 (abbrev@1.0.7)
    └── express@2.5.11 (mime@1.2.4, qs@0.4.2, mkdirp@0.3.0, connect@1.9.2)
   

使用

1. 启动服务

    weinre --boundHost -all- --httpPort 8081
   

   • –boundHost [hostname | ip address | -all-]

     The ip address to bind the server to.

   • –httpPort [portNumber]

     The port to run the HTTP server on.

   更多配置项参考 官网的说明。

2. 启动成功后看到如下界面：

   

3. 给目标页面添加一行脚本

   可以看到 2.中的 Target Script 说要添加一行脚本到要调试的 web 页面中。

   Target Script

   You can use this script to inject the weinre target code into your web page.

   http://localhost:8081/target/target-script-min.js#anonymous

   Example:

    <script src="http://localhost:8081/target/target-script-min.js#anonymous"></script>
   

   这里要说明一下，要把上面的 localhost 换为本机的 ip 地址。

   我们可以在命令行中 使用 ipconfig 得到 ip 地址，如下（当然你的可能和我的不一样）：

    IPv4 地址 . . . . . . . . . . . . : 192.168.1.107
   

   即插入如下代码：

    <script src="http://192.168.1.107:8081/target/target-script-min.js#anonymous"></script>
   

4. 进入调试页面

   PC 端访问这个地址：

   debug client user interface: http://localhost:8081/client/#anonymous

   此时 target 为 none，如下图：

   

   现在我们要用手机访问同一个局域网下的这个目标页面。我们可以把要调试的页面放到这个路径下：

    C:\Users\haoyang\AppData\Roaming\npm\node_modules\weinre\web
   

   通过 http://192.168.1.107:8081/FILE_NAME 在手机上访问，就可以看到了。当然前提是同一个局域网。

   但是这样可能不太灵活，每次都要把目标页面放到指定的目录下。所以我们可以另外开一个服务器。

   我使用了基于 node.js 的 http-server 工具。将要调试的页面发布。这样我就能通过 ip 地址加端口号在手机上访问到了。

   我在手机上访问 http://192.168.1.107:8080 打开要调试的页面，此时 debug client user interface 中自动检测到 target。就可以进行调试了！

   如下图：

   

   

参考

• Web移动应用调试工具——Weinre
• weinre - WEb INspector REmote
• webapp开发调试环境–weinre配置

• content
  {:toc}

往前推2到3年，前端工程师还在忧心忡忡地想，移动互联网时代下，前端是不是没有生存空间了。但今天一看，在我们团队，前端工程师超过一半的工作都是在做移动端的Web或者APP的开发。移动Web或者APP在技术本质上是和做桌面端Web没有本质区别，但是移动端的坑那是非常的多，通过学习这部分内容，让你成为一名桌面移动通吃的前端开发工程师。

概念

• 参考： 移动 Web 开发入门

上面这个 slide 资料讲的非常好，算是一个入门的介绍吧。带我们建立基本的移动 web 开发知识体系和常见问题的实践。包含以下几个方面：

• 基本概念

  • Native

    本地应用 使用 Java \ Objective-C \ Swift 开发

  • WebApp

    网页应用 html5 开发

  • Hybrid

    混合应用 ooxx(native, web)

  • 对比

• 视觉

  • 设备的像素
  • 文字单位使用 rem
  • viewport 属性
  • 横屏竖屏
  • Flex 伸缩布局
  • 响应式设计
  • 软键盘
  • 隐藏地址栏
  • 苹果设备添加到主屏图标

• 交互

  • Touch
  • click 延迟
  • Scroll
  • Gestures(hammer –A javascript library for multi-touch gestures)
  • 手指友好设计
  • HTML5 APIS（图像，摇动，声音等）

• 实践

  • 屏蔽点击元素时的阴影
  • 图像（像素、矢量图标、base64 减少请求、lazyload）
  • CSS3（合理使用渐变/圆角/阴影、代替 js 动画、translate3d、解决动画闪烁）
  • localStorage
  • 避免（iframe、fixed + input）
  • SPA 或 Multi page
  • can I use
  • 压缩合并
  • @G/3G 下建立连接时间

• 调试

  • 浏览器自己的调试工具，模拟手机设备

  • weinre

    关于 weinre 我写了一篇博客介绍它。Weinre –WebApp 调试工具

head 标签

参考：

• 移动前端不得不了解的html5 head 头标签

上面的链接详细的讲解了：

• DOCTYPE

• charset

• lang属性

• 优先使用 IE 最新版本和 Chrome

• 360 使用Google Chrome Frame

• SEO 优化部分：页面标题