前端技术

前端技术
Hello World 对于每一个开发者来说都不陌生，因为在我们学习任何一个语言或框架的时候，都会有一个Hello World的案例来帮助我们快速入门。 如果我们使用JavaScript来输出Hello World的话，可以这样写： alert("Hello World"); 放入HTML： <html> <script type="text/javascript"> alert("Hello World"); </script></html> 在浏览器中打开就可以如下情况输出Hello World了： 挑战：仅用六个字符来编写JavaScripte上面我们在JavaScript中实现Hello World的时候，除去HTML相关的标签和属性，上面的实现语句alert("Hello World");一共使...

前端技术
前言因为工作中经常用到这些方法，所有便把这些方法进行了总结。 JavaScript1. type 类型判断isString (o) { //是否字符串 return Object.prototype.toString.call(o).slice(8, -1) === 'String'}isNumber (o) { //是否数字 return Object.prototype.toString.call(o).slice(8, -1) === 'Number'}isBoolean (o) { //是否boolean return Object.prototype.toString.call(o).slice(8, -1) === 'Boolean'}isFunction (o) { //是否函数 ...

前端技术
引言亲爱的读者朋友，如果你点开了这篇文章，说明你对正则很感兴趣。 想必你也了解正则的重要性，在我看来正则表达式是衡量程序员水平的一个侧面标准。 关于正则表达式的教程，网上也有很多，相信你也看了一些。 与之不同的是，本文的目的是希望所有认真读完的童鞋们，都有实质性的提高。 本文内容共有七章，用JavaScript语言完整地讨论了正则表达式的方方面面。 如果觉得文章某块儿没有说明白清楚，欢迎留言，能力范围之内，老姚必做详细解答。 具体章节如下： 引言 第一章 正则表达式字符匹配攻略 第二章 正则表达式位置匹配攻略 第三章 正则表达式括号的作用 第四章 正则表达式回溯法原理 第五章 正则表达式的拆分 第六章 正则表达式的构建 第七章 正则表达式编程 后记 下面简单地说说每一章都讨论了什么？ 正则是匹配模式，要么匹配字符，要么匹配位置。 第1章和第2章以这个角度去讲解了正则的基础。 在正...

前端技术
第七章 正则表达式编程什么叫知识，能指导我们实践的东西才叫知识。 学习一样东西，如果不能使用，最多只能算作纸上谈兵。正则表达式的学习，也不例外。 掌握了正则表达式的语法后，下一步，也是关键的一步，就是在真实世界中使用它。 那么如何使用正则表达式呢？有哪些关键的点呢？本章就解决这个问题。 内容包括： 正则表达式的四种操作 相关API注意要点 真实案例 1. 正则表达式的四种操作正则表达式是匹配模式，不管如何使用正则表达式，万变不离其宗，都需要先“匹配”。 有了匹配这一基本操作后，才有其他的操作：验证、切分、提取、替换。 进行任何相关操作，也需要宿主引擎相关API的配合使用。当然，在JS中，相关API也不多。 1.1 验证 验证是正则表达式最直接的应用，比如表单验证。 在说验证之前，先要说清楚匹配是什么概念。 所谓匹配，就是看目标字符串里是否有满足匹配的子串。因此，“匹配”的本质就是...

前端技术
第六章 正则表达式的构建对于一门语言的掌握程度怎么样，可以有两个角度来衡量：读和写。 不仅要看懂别人的解决方案，也要能独立地解决问题。代码是这样，正则表达式也是这样。 与“读”相比，“写”往往更为重要，这个道理是不言而喻的。 对正则的运用，首重就是：如何针对问题，构建一个合适的正则表达式？ 本章就解决该问题，内容包括： 平衡法则 构建正则前提 准确性 效率 1. 平衡法则构建正则有一点非常重要，需要做到下面几点的平衡： 匹配预期的字符串 不匹配非预期的字符串 可读性和可维护性 效率 2. 构建正则前提2.1 是否能使用正则 正则太强大了，以至于我们随便遇到一个操作字符串问题时，都会下意识地去想，用正则该怎么做。但我们始终要提醒自己，正则虽然强大，但不是万能的，很多看似很简单的事情，还是做不到的。 比如匹配这样的字符串：1010010001…. 虽然很有规律，但是只靠正则就是无...

前端技术
第五章 正则表达式的拆分对于一门语言的掌握程度怎么样，可以有两个角度来衡量：读和写。 不仅要求自己能解决问题，还要看懂别人的解决方案。代码是这样，正则表达式也是这样。 正则这门语言跟其他语言有一点不同，它通常就是一大堆字符，而没有所谓“语句”的概念。 如何能正确地把一大串正则拆分成一块一块的，成为了破解“天书”的关键。 本章就解决这一问题，内容包括： 结构和操作符 注意要点 案例分析 1. 结构和操作符编程语言一般都有操作符。只要有操作符，就会出现一个问题。当一大堆操作在一起时，先操作谁，又后操作谁呢？为了不产生歧义，就需要语言本身定义好操作顺序，即所谓的优先级。 而在正则表达式中，操作符都体现在结构中，即由特殊字符和普通字符所代表的一个个特殊整体。 JS正则表达式中，都有哪些结构呢？ 字符字面量、字符组、量词、锚字符、分组、选择分支、反向引用。 具体含义简要回顾如下（如懂，...

前端技术
第四章 正则表达式回溯法原理学习正则表达式，是需要懂点儿匹配原理的。 而研究匹配原理时，有两个字出现的频率比较高：“回溯”。 听起来挺高大上，确实还有很多人对此不明不白的。 因此，本章就简单扼要地说清楚回溯到底是什么东西。 内容包括： 没有回溯的匹配 有回溯的匹配 常见的回溯形式 1. 没有回溯的匹配假设我们的正则是/ab{1,3}c/，其可视化形式是： 而当目标字符串是”abbbc”时，就没有所谓的“回溯”。其匹配过程是： 其中子表达式b{1,3}表示“b”字符连续出现1到3次。 2. 有回溯的匹配如果目标字符串是”abbc”，中间就有回溯。 图中第5步有红颜色，表示匹配不成功。此时b{1,3}已经匹配到了2个字符“b”，准备尝试第三个时，结果发现接下来的字符是“c”。那么就认为b{1,3}就已经匹配完毕。然后状态又回到之前的状态（即第6步，与第4步一样），最后再用子表达...

前端技术
第三章 正则表达式括号的作用不管哪门语言中都有括号。正则表达式也是一门语言，而括号的存在使这门语言更为强大。 对括号的使用是否得心应手，是衡量对正则的掌握水平的一个侧面标准。 括号的作用，其实三言两语就能说明白，括号提供了分组，便于我们引用它。 引用某个分组，会有两种情形：在JavaScript里引用它，在正则表达式里引用它。 本章内容虽相对简单，但我也要写长点。 内容包括： 分组和分支结构 捕获分组 反向引用 非捕获分组 相关案例 1. 分组和分支结构这二者是括号最直觉的作用，也是最原始的功能。 1.1 分组 我们知道/a+/匹配连续出现的“a”，而要匹配连续出现的“ab”时，需要使用/(ab)+/。 其中括号是提供分组功能，使量词+作用于“ab”这个整体，测试如下： var regex = /(ab)+/g;var string = "ababa abbb ababab";c...

前端技术
第二章 正则表达式位置匹配攻略正则表达式是匹配模式，要么匹配字符，要么匹配位置。请记住这句话。 然而大部分人学习正则时，对于匹配位置的重视程度没有那么高。 本章讲讲正则匹配位置的总总。 内容包括： 什么是位置？ 如何匹配位置？ 位置的特性 几个应用实例分析 1. 什么是位置呢？位置是相邻字符之间的位置。比如，下图中箭头所指的地方： 2. 如何匹配位置呢？在ES5中，共有6个锚字符： **^** **$** **\b** **\B** **(?=p)** **(?!p)** 2.1 ^和$ ^（脱字符）匹配开头，在多行匹配中匹配行开头。 $（美元符号）匹配结尾，在多行匹配中匹配行结尾。 比如我们把字符串的开头和结尾用”#”替换（位置可以替换成字符的！）： var result = "hello".replace(/^|$/g, '#');console.log(result)...

前端技术
第一章 正则表达式字符匹配攻略正则表达式是匹配模式，要么匹配字符，要么匹配位置。请记住这句话。 然而关于正则如何匹配字符的学习，大部分人都觉得这块比较杂乱。 毕竟元字符太多了，看起来没有系统性，不好记。本章就解决这个问题。 内容包括： 两种模糊匹配 字符组 量词 分支结构 案例分析 1. 两种模糊匹配如果正则只有精确匹配是没多大意义的，比如/hello/，也只能匹配字符串中的”hello”这个子串。 var regex = /hello/;console.log( regex.test("hello") ); // => true 正则表达式之所以强大，是因为其能实现模糊匹配。 而模糊匹配，有两个方向上的“模糊”：横向模糊和纵向模糊。 1.1 横向模糊匹配 横向模糊指的是，一个正则可匹配的字符串的长度不是固定的，可以是多种情况的。 其实现的方式是使用量词。譬如{m,n}，表...

前端技术
距离年初定下开始写博客的计划以来已经1个半月了，不少朋友问我用的什么博客系统，为什么没有用WordPress？我想主要原因有两点：第一，为了进一步学习Node.js，可以通过使用Ghost从源码中学习大牛们的设计。第二，Ghost比起WordPress更纯粹、更简洁、更快速，相信这点大家在访问的时候都能体会得到。下面本文主要介绍一下Ghost的安装，并分享一下自己的博客主题，希望对准备自己建站的童鞋有所帮助。 准备工作 Node.js版本：0.10.x、0.12.x、4.2.x。安装步骤可参考：Node.js环境搭建 Ghost版本：0.7.4：中文集成版(33.6M)，中文标准版(3.39M)，英文原版(3.23.M) 推荐使用中文集成版，其中包含Node.js需要的模块包node_modules。 若使用中文标准版，需使用npm install --production进行...

前端技术
前几天发了《使用Node.js制作爬虫教程》之后，有朋友问如果要爬文件怎么办，正好之前也写过类似的，那就直接拿过来写个续篇吧，有需要的可以借鉴，觉得不好的可以留言交流。 案例回顾上一篇中，主要利用nodejs发起一个getData请求来得到4星角色的id列表。通过chrome开发者工具来查看页面结构，分析得出角色详细页面的URL规则和详细页面中想要抓取内容的位置。再循环遍历4星角色id列表去发起角色详细页面的请求并解析出想要收集的内容。 具体内容可再参考原文：使用Node.js制作爬虫教程 目标分析案例回顾中提到的角色详细页面（参考样例），有不少图片内容，本文就以抓取“主动技能”的GIF图片为例，来改造一下前文的代码以完成定向抓取图片的效果。 通过Chrome查看图片对象的URL规则为：/img/as2/角色id.gif 编码过程构建工程和引入框架 $npm init$npm...

前端技术
应邀写一点使用Node.js爬点资料的实例，对于大家建站爬一些初始资料或者做分析研究的小伙伴们应该有些帮助。 目标分析目标地址：http://wcatproject.com/charSearch/ 抓取内容：抓取所有4星角色的数值数据。如果我们采用手工采集的步骤，需要先进入目标地址，然后选择4星角色的选项，页面下方出现所有4星角色的头像，依次点击每个4星角色头像后会出现角色的详细页面，记录下详细页面中数据。显然这样的做法如果角色一多，手工处理是非常吃力的，所以我们就需要一个自动的脚本去完成这样的动作。大家不妨先手工试试这样的访问步骤，有助于后面的分析和实践。 页面分析： 进入http://wcatproject.com/charSearch/ 打开Chrome的“开发者工具”，选择“Network”标签。点亮“Record Network Log”按钮 第一步页面操作：在页面中...

前端技术
这两年Nodejs发展极其迅速，开始接触nodejs的时候版本还在0.10.x，现在居然已经到5.3.x了，发展如此迅速也说明了其在实战中获得广大开发者的认可程度之高。在实战中也忍不住使用了几次，总体体验还是非常不错的，开始向朋友推荐使用，于是应邀写一些关于Nodejs的实例，那么就先从环境搭建作为开始吧。 nvm安装nvm全称Node Version Manager，Node版本管理器。由于nodejs的更新速度，其版本众多，我们经常能找到的各种资料可能都是基于不同版本，我们写的程序可能也会依赖不同的版本，我们需要在本机上方便的切换不同版本的nodejs，所以我们需要它来帮助我们管理，其项目地址：https://github.com/creationix/nvm 几种常用的安装方式curl安装方式：curl -o- https://raw.githubusercontent.com...