会飞的Pikachu的博客_CSDN博客-JavaScript,CSS,HTML领域博主

原创从vue-cli源码学习如何写模板

vue-cli 是 vuejs 官方提供的基于 vuejs 的项目脚手架工具, 可以很快的帮助 vuejs 开发者搭建一个 startup 项目, 免去环境配置的繁琐, 开箱即用. 今天就来看下 vue-cli 的实现. vue-cli 的版本是 2.8.2vue-initvue init 是基于第三方模板生成项目的命令. 先看下其整体流程:首先, vue cli 获取到输入的参数:# vue

2017-07-26 13:47:31 1437

原创关于Redux的一些总结(一)：Action & 中间件 & 异步

在浅说Flux开发中，简单介绍了Flux及其开发方式。Flux可以说是一个框架，其有本身的 Dispatcher 接口供开发者；也可以说是一种数据流单向控制的架构设计，围绕单向数据流的核心，其定义了一套行为规范，如下图：Redux的设计就继承了Flux的架构，并将其完善，提供了多个API供开发者调用。借着react-redux，可以很好的与React结合，开发组件化程度极高的现代Web应用。本文是笔

2016-08-26 10:42:23 11517

原创 Node+React小爬虫：从开发到部署

http://www.ido321.com/1674.html

2016-04-28 10:51:17 530

原创 js为什么不能正确处理小数运算？

先看看下面的程序：var sum = 0;for(var i = 0; i < 10; i++) { sum += 0.1;}console.log(sum);上面的程序会输出1吗？在你有必要知道的 25 个 JavaScript 面试题一文中，第 8 个题浅显的说了下 js 为什么不能正确处理小数运算的问题。今天重拾旧题，更深层次的剖析下这个问题。但要先说明的是，不能正确处理小数的运算

2016-01-17 13:27:34 2684 1

原创浅说Flux开发

浅说Flux开发前段时间，写了篇关于React的文件：React：组件的生命周期，比较详细的说了下React组件的生命周期。说道 React，很容易可以联想到 Flux。今天以 React 介绍及实践教程一文中的demo为示例，简单说说 Flux 的开发方式。Flux是什么Flux 是 Facebook 用户建立客户端 Web 应用的前端架构，它通过利用一个单向的数据流补充了 React 的组合

2016-01-17 13:25:53 1514

原创《精通CSS》阅读备忘

最近阅读了《精通CSS: 高级Web标准解决方案》，书的内容不错，初学者可以用来入门，有经验的人也可以用来查漏补缺，上面对于浏览器兼容和常见bug的解决方案值得参考。选择器的层叠和特殊性对于同一个元素，可能会有多个规则，为了解决规则之间的冲突，CSS 会利用层叠给每个规则分配一个重要度：1、标有 !important 的用户样式 2、标有 !important 的作者样式 3、作者样式 4

2016-01-17 13:23:45 1568 1

原创你有必要知道的 25 个 JavaScript 面试题

1、使用 typeof bar === "object" 判断 bar 是不是一个对象有神马潜在的弊端？如何避免这种弊端？使用 typeof 的弊端是显而易见的(这种弊端同使用 instanceof)：let obj = {};let arr = [];console.log(typeof obj === 'object'); //trueconsole.log(typeof arr ===

2015-12-22 09:55:25 3413 4

原创简洁轻便的博客平台: Hexo详解

什么是HexoHexo 是一个简单地、轻量地、基于Node的一个静态博客框架，可以方便的生成静态网页托管在github和Heroku上，引用Hexo作者 @tommy351 的话：快速、简单且功能强大的 Node.js 博客框架。 A fast, simple & powerful blog framework, powered by Node.js.GitHub Pages是什么？G

2015-11-24 11:29:24 3741 2

原创 React：组件的生命周期

在组件的整个生命周期中，随着该组件的props或者state发生改变，其DOM表现也会有相应的变化。一个组件就是一个状态机，对于特定地输入，它总返回一致的输出。一个React组件的生命周期分为三个部分：实例化、存在期和销毁时。实例化当组件在客户端被实例化，第一次被创建时，以下方法依次被调用：1、getDefaultProps 2、getInitialState 3、componentWillMo

2015-11-24 11:24:41 2009

原创详解前端模块化工具-Webpack

React自发布以来吸引了越来越多的开发者，React开发和模块管理的主流工具webpack也被大家所熟知。那么webpack有哪些优势，可以成为最主流的React开发工具呢？webpack是什么CommonJS和AMD是用于JavaScript模块管理的两大规范，前者定义的是模块的同步加载，主要用于NodeJS；而后者则是异步加载，通过requirejs等工具适用于前端。随着npm成为主流的Jav

2015-11-09 14:58:47 4262 3

原创 Front-end Developer Handbook

Read Online: Front-end Developer Handbook

2015-10-28 23:47:48 2229 2

翻译创建优雅表格的8个js工具

当需要呈现数百个表的数据时，展示和可访问性扮演着至关重要的角色。在这种情况下，倘若一个数据网格能够支持大量数据集的HTML Table并提供诸如排序、搜索、过滤和分页等功能，那是棒棒哒。在这篇文章中，将介绍8个用于创建优雅表格的js工具。SigmaGridSigmaGrid是一个开源的Ajax数据表格组件，可以在一个可滚动和可排序的表格中展示和编辑数据。了解更多，戳此：learn more Ing

2015-09-11 12:44:49 2308 3

翻译 29个你必须知道的Linux命令

虽然Linux发行版支持各种各样的饿GUI（graphical user interfaces），但在某些情况下，Linux的命令行接口(bash)仍然是简单快速的。Bash和 Linux Shell 需要输入命令来完成任务，因而被称为命令行接口。命令是计算机执行任务的指令。可以使用命令去关闭计算机，或者列出当前目录的文件列表，或当前文本的内容，或者屏幕显示一条消息。如果你是一个新手，并尝试使

2015-09-11 12:42:40 1413 4

翻译 18个网站优化技巧

快速的页面加载对提升搜索引擎排名、网站转化率和整体的用户体验是非常重要的。网站页面的加载速度也是衡量网站性能的一个重要因素。如果网站不是以最好的性能在运行，迟缓的加载会让你在低的排名和搜索流量上花费更大的代价。页面的加载速度会对用户的行为和转化率产生很大的影响。那么？有哪些简单的方式可以优化加载速度呢？1、图片优化首先，你需要优化你网站上的图片，来获得丝毫加速网站的机会。从原图上移除额外的注解、不必

2015-08-15 20:21:26 1473

原创 ECMAScript 6新特性介绍

箭头函数箭头函数使用=>语法来简化函数，在语句结构上和C#、Java 8 和 CoffeeScript类似，支持表达式和函数体。。=>`操作符左边为输入的参数，而右边则是进行的操作以及返回的值。var sum = (num1, num2) => num1 + num2;// 等同于var sum = function(num1, num2) { return num1 + num2;}

2015-07-07 11:35:40 1536

翻译 CSS：你未必知道的@规则

at-rule是一个声明，为CSS提供执行或怎么表现的指令。每个声明以@开头,后紧跟一个可用的关键字，这个关键字充当一个标识符，用于表示CSS该做什么。这是一个通用的语法，尽管每个at-rule有其它语法变体。常规规则常规规则遵循下面的语法：@[KEYWORD] (RULE);@charset 这个规则定义了浏览器使用的字符集，如果样式表包含非ASCII characters (e.g:UTF-8

2015-07-07 11:32:45 1312 1

翻译 CSS3:clip-path详解

我的一个学生，Heather Banks,想要实现他在Squarespace看到的一个效果：根据她的以往经验，这个网站的HTML和CSS是完全在她的能力范围以内，于是我帮助她完成了这个效果。显示nav被裁减的效果是一个不简单的任务，我看到图片的第一反应是创建一个相匹配的背景被部分裁剪的图像，然后把它设置为一个after元素。问题是，至少要解决响应式问题，并且响应式并不完全可控的。了解CSS属

2015-07-07 11:31:23 5041

原创因一段JavaScript代码引发的闲扯

前两天，一朋友给我发了一段JavaScript代码： function f1(){　　　　var n=999;　　　　nAdd=function(){　　　　 n+=1　　　　};　　　　function f2(){　　　　　　alert(n);　　　　}　　　　return f2;　　}　　var result1=f1(); var result2=f1();

2015-06-25 21:04:47 1294 1

翻译初探CSS 4选择器

2014年1月，我写了一篇文章：The Current Generation of CSS3 Selectors，这篇文章的目的是介绍一些CSS3中新增的选择器。文中的选择器已经有了很多文档，并且也被大多数浏览器支持（包括IE9+）。由于Selectors Level 4 specification 目前已是工作草案状态，并且Editor’s Draft of the same spec也在进行中(

2015-06-25 20:59:00 1668

原创美团面试中被问到的问题汇总

美团的面试已经结束了将近半个月了，前后的三轮面试也经过了10天左右（人在广州，都是电话面试），结果也还是好的，顺利拿到了美团的暑期实习。本来不打算写什么面试总结，为什么？看下图：按照0.01%的有效率转化，算了一下，大概也有174篇面试总结够看了。虽然说没有看过这么多，但前前后后也看过50篇上下的面试总结了，看到有点呕吐的感觉了。但是昨晚突然想到对于每一轮面试，都做了一些笔记，为了不浪费这些笔记

2015-06-24 14:34:41 8360

原创 JavaScript面向对象精要(二)

构造函数和原型对象构造函数也是函数，用new创建对象时调用的函数，与普通函数的一个区别是，其首字母应该大写。但如果将构造函数当作普通函数调用（缺少new关键字），则应该注意this指向的问题。var name = "Pomy";function Per(){ console.log("Hello "+this.name);}var per1 = new Per(); //"Hello

2015-06-24 14:33:13 1555 3

原创 JavaScript面向对象精要(一)

数据类型在JavaScript中，数据类型分为两类：原始类型：保存一些简单数据，如true，5等。JavaScript共有5中原始类型： boolean：布尔，值为true或falsenumber：数字，值为任何整型会浮点数值string：字符串，值为由单引号或双引号括出的单个字符或连续字符（JavaScript不区分字符类型）null：空类型，其仅有一个值：nulllundefined

2015-06-24 14:32:10 1280

翻译 CSS中的变量使用详解

CSS中的变量给了我们诸多优点：方便、代码重用、更可靠的代码库和提升防错能力。示例:root { --base-font-size: 16px; --link-color: #6495ed;}p { font-size: var( --base-font-size );}a { font-size: var( --base-font-size ); color: var( -

2015-06-13 09:39:23 16598 2

翻译解决AJAX请求使PHP反应时间过长的问题

现在我们开发了很多依赖于Ajax请求的应用，在某些情况下，甚至全部页面都依赖Ajax。有时我们会注意到，当一个网页发送两个或者更多Ajax请求时，PHP的反应时间会很长并会同时返回响应内容。这个问题很可能是你处理PHP会话的方式造成的，跟着本文去理解这个问题，并做一些处理来避免这个问题。内容什么是PHP会话？什么是Ajax？具体问题造成的原因问题的解决方法总结什么是PHP会话？为了理解这个问题，有必

2015-06-13 09:38:08 8407 1

翻译 Python优雅技巧

枚举不要这么做：i = 0 for item in iterable: print i, item i += 1而是这样：for i, item in enumerate(iterable): print i, itemEnumerate可以接受第二个参数，例如：>>> list(enumerate('abc')) [(0, 'a'), (1, 'b'), (2, '

2015-06-13 09:36:51 1449

翻译 HTML5: Screen Orientation API

媒体查询允许网站根据智能手机和平板的方向来调整布局。但有时候你希网站锁定到一个特定的方向，横屏或竖屏，此时，原生应用的格式是可以被指定的。APP只在预设格式下显示—独立于实际的设备方向。通过使用HTML5的 Screen Orientation API, 可以在JavaScript定义屏幕方向。为一个文档定义屏幕方向通过screen.orientation属性的lock()方法可以调整屏幕方向，

2015-06-08 09:37:44 2409

翻译 JavaScript面试问题：事件委托和this

JavaScript不仅门槛低，而且是一门有趣、功能强大和非常重要的语言。各行各业的人发现自己最混乱的选择是JavaSscript编程语言。由于有着各种各样的背景，所以不是每个人都对JavaScript及其基本原理有广泛的认识。通常来书，除非你去参加工作面试才会去思考为什么或者怎么做，否则JavaScript只是你工作的内容。这个系类的目标是深入探讨JavaScript的一些概念和理论。主题来自于

2015-06-08 09:35:57 2206

翻译有趣的JavaScript原生数组函数

在JavaScript中，创建数组可以使用Array构造函数，或者使用数组直接量[],后者是首选方法。Array对象继承自Object.prototype,对数组执行typeof操作符返回object而不是array。然而，[] instanceof Array也返回true。也就是说，类数组对象的实现更复杂，例如strings对象、arguments对象，arguments对象不是Array的实例

2015-06-08 09:35:12 1350

原创 trick：:target实现选项卡切换

:target是什么？MDN是这样描述的：:target The :target pseudo-class represents the unique element, if any, with >an id matching the fragment identifier of the URI of the document.在document中，可以设置锚链接，举个粟子：<a href="

2015-06-01 13:18:27 1947

原创 Trick:不用table，怎么等分DIV

在SF上，有人提出一个问题：不用table，如何把Div分成3行*3列。提供了三种思路：第一种方式html:<div id="box"> <div> <span>1</span> <span>2</span> <span>3</span> </div> <div> <span>4</span>

2015-06-01 13:17:50 1725

原创 trick:CSS 3+checkbox实现JQuery的6个基本动画效果

在JQuery中，有六个基本动画函数：show()/hide()、fadeIn()/fadeOut()、slideUp()/slideDown()。这篇文章，就利用CSS3+checkbox实现这六个基本动画。show()/hide()的实现show()/hide()的实现主要控制元素的display属性。 html:<div id="box"> <input type="checkbox

2015-06-01 13:15:31 1482

翻译文60个有用CSS代码片段

1、垂直对齐如果你用CSS，则你会有困惑：我该怎么垂直对齐容器中的元素？现在，利用CSS3的Transform，可以很优雅的解决这个困惑：.verticalcenter{ position: relative; top: 50%; -webkit-transform: translateY(-50%); -o-transform: translateY(-50%);

2015-05-26 09:43:41 2504 3

翻译设计出色响应式网站的十个技巧

移动技术并没有渐退的迹象，反而对于个人和企业去建立门户网站，必须考虑移动用户已经变成了趋势。对于那些在不同设备上看起来很酷、功能十分有效的正在发展中的网站，响应式设计仍保持实践性。作为一个Web设计师，也会尝试用各种各样的网页设计技术。如果响应式设计趋势让你印象深刻，并且也打算用响应式设计深入研究网站创新，那么你已经来到了初学者的门口。这里，已经包含了10个关于设计一个完美的响应式网站的很酷的建议。

2015-05-26 09:42:22 2169 3

原创 CSS3的content属性详解

CSS中主要的伪元素有四个：before/after/first-letter/first-line，在before/after伪元素选择器中，有一个content属性，能够实现页面中的内容插入。插入纯文字content:”插入的文章”，或者content:none不插入内容 html:<h1>这是h1</h1><h2>这是h2</h2>cssh1::after{ content:"h1

2015-05-26 09:39:13 1712 2

翻译一些你不知道的CSS属性

Box-sizing尽管box-sizing在CSS3中才被引入，其有一个值是border-box，让元素的高和宽包含了填充和边框。.div { width: 150px; height: 100px; border: 1px solid #ccc; box-sizing: border-box;}Chrome 31+, IE8+, Firefox 31+,

2015-05-14 08:35:51 1691

原创 CSS3模拟侧滑菜单

在APP应用上，常见的一种导航方式是侧滑导航，效果类似于这样：用CSS3可以对其进行模拟，代码如下： HTML：<nav> <div id="toggleMenu"> <span id="hide"></span> <span id="show"></span> </div> <ul id="lis

2015-05-14 08:34:31 2445

翻译 Python初学者的17个技巧

交换变量x = 6y = 5x, y = y, xprint x>>> 5print y>>> 6if 语句在行内print "Hello" if True else "World">>> Hello连接下面的最后一种方式在绑定两个不同类型的对象时显得很酷。nfc = ["Packers", "49ers"]afc = ["Ravens", "Patriots"]print nfc

2015-05-14 08:31:23 1285

翻译 PHP:40+开发工具推荐

PHP是为Web开发设计的服务器脚本语言，但也是一种通用的编程语言。超过2.4亿个索引域使用PHP，包括很多重要的网站，例如Facebook、Digg和WordPress。和其它脚本语言相比，例如Python和Ruby，Web开发者有很多不错的理由皮偏爱PHP。对于PHP开发者，在互联网上有很多可用的开发工具，但是找到一个合适的PHP开发工具是很难的，需要花费很多努力和时间。今天，就为开发者介绍

2015-05-05 12:18:41 1342 1

翻译编写更好的CSS必备的40个工具

众所周知，CSS是非常棒的，它使网站看起来很漂亮，可以为网站添加动画，并让呈现和内容分离。去了解CSS的一切是非常难做到的，它只会变得更加困难,因为我们想让我们的代码跨浏览器兼容。这里介绍了很多第三方工具，从简化工作流程到生成真正的CSS，这些工具都提供了我们需要的代码，并且比我们自己写出的代码运行的更快。PurePure并不是一个框架。相反，它只是集成一些已经应用到模块中的CSS代码，方便我们

2015-05-05 12:15:13 2437 1

原创 CSS3实现酷炫导航

上面是一个效果图，代码在下面： html<html><head> <meta charset="utf-8"/> <title>CSS3 实现的导航</title> <link type="text/css" rel="stylesheet" href="nav.css" /> <base target="_blank" href="http://www.ido3

2015-05-05 12:14:04 2520