- 博客(311)
- 资源 (19)
- 问答 (2)
- 收藏
- 关注
原创 从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
1738
原创 关于Redux的一些总结(一):Action & 中间件 & 异步
在浅说Flux开发中,简单介绍了Flux及其开发方式。Flux可以说是一个框架,其有本身的 Dispatcher 接口供开发者;也可以说是一种数据流单向控制的架构设计,围绕单向数据流的核心,其定义了一套行为规范,如下图:Redux的设计就继承了Flux的架构,并将其完善,提供了多个API供开发者调用。借着react-redux,可以很好的与React结合,开发组件化程度极高的现代Web应用。本文是笔
2016-08-26 10:42:23
11781
原创 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
2757
1
原创 浅说Flux开发
浅说Flux开发前段时间,写了篇关于React的文件:React:组件的生命周期,比较详细的说了下React组件的生命周期。说道 React,很容易可以联想到 Flux。今天以 React 介绍及实践教程 一文中的demo为示例,简单说说 Flux 的开发方式。Flux是什么Flux 是 Facebook 用户建立客户端 Web 应用的前端架构, 它通过利用一个单向的数据流补充了 React 的组合
2016-01-17 13:25:53
1591
原创 《精通CSS》阅读备忘
最近阅读了《精通CSS: 高级Web标准解决方案》,书的内容不错,初学者可以用来入门,有经验的人也可以用来查漏补缺,上面对于浏览器兼容和常见bug的解决方案值得参考。选择器的层叠和特殊性对于同一个元素,可能会有多个规则,为了解决规则之间的冲突,CSS 会利用 层叠 给每个规则分配一个重要度:1、标有 !important 的用户样式 2、标有 !important 的作者样式 3、作者样式 4
2016-01-17 13:23:45
1616
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
3499
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
3905
2
原创 React:组件的生命周期
在组件的整个生命周期中,随着该组件的props或者state发生改变,其DOM表现也会有相应的变化。一个组件就是一个状态机,对于特定地输入,它总返回一致的输出。一个React组件的生命周期分为三个部分:实例化、存在期和销毁时。实例化当组件在客户端被实例化,第一次被创建时,以下方法依次被调用:1、getDefaultProps 2、getInitialState 3、componentWillMo
2015-11-24 11:24:41
2072
原创 详解前端模块化工具-Webpack
React自发布以来吸引了越来越多的开发者,React开发和模块管理的主流工具webpack也被大家所熟知。那么webpack有哪些优势,可以成为最主流的React开发工具呢?webpack是什么CommonJS和AMD是用于JavaScript模块管理的两大规范,前者定义的是模块的同步加载,主要用于NodeJS;而后者则是异步加载,通过requirejs等工具适用于前端。随着npm成为主流的Jav
2015-11-09 14:58:47
4341
3
原创 Front-end Developer Handbook
Read Online: Front-end Developer Handbook
2015-10-28 23:47:48
2329
2
翻译 创建优雅表格的8个js工具
当需要呈现数百个表的数据时,展示和可访问性扮演着至关重要的角色。在这种情况下,倘若一个数据网格能够支持大量数据集的HTML Table并提供诸如排序、搜索、过滤和分页等功能,那是棒棒哒。在这篇文章中,将介绍8个用于创建优雅表格的js工具。SigmaGridSigmaGrid是一个开源的Ajax数据表格组件,可以在一个可滚动和可排序的表格中展示和编辑数据。了解更多,戳此:learn more Ing
2015-09-11 12:44:49
2392
3
翻译 29个你必须知道的Linux命令
虽然Linux发行版支持各种各样的饿GUI(graphical user interfaces),但在某些情况下,Linux的命令行接口(bash)仍然是简单快速的。Bash和 Linux Shell 需要输入命令来完成任务,因而被称为 命令行 接口。命令是计算机执行任务的指令。可以使用命令去关闭计算机,或者列出当前目录的文件列表,或当前文本的内容,或者屏幕显示一条消息。如果你是一个新手,并尝试使
2015-09-11 12:42:40
1471
4
翻译 18个网站优化技巧
快速的页面加载对提升搜索引擎排名、网站转化率和整体的用户体验是非常重要的。网站页面的加载速度也是衡量网站性能的一个重要因素。如果网站不是以最好的性能在运行,迟缓的加载会让你在低的排名和搜索流量上花费更大的代价。页面的加载速度会对用户的行为和转化率产生很大的影响。那么?有哪些简单的方式可以优化加载速度呢?1、图片优化首先,你需要优化你网站上的图片,来获得丝毫加速网站的机会。从原图上移除额外的注解、不必
2015-08-15 20:21:26
1598
原创 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
1688
翻译 CSS:你未必知道的@规则
at-rule是一个声明,为CSS提供执行或怎么表现的指令。每个声明以@开头,后紧跟一个可用的关键字,这个关键字充当一个标识符,用于表示CSS该做什么。这是一个通用的语法,尽管每个at-rule有其它语法变体。常规规则常规规则遵循下面的语法:@[KEYWORD] (RULE);@charset 这个规则定义了浏览器使用的字符集,如果样式表包含非ASCII characters (e.g:UTF-8
2015-07-07 11:32:45
1367
1
翻译 CSS3:clip-path详解
我的一个学生,Heather Banks,想要实现他在Squarespace看到的一个效果: 根据她的以往经验,这个网站的HTML和CSS是完全在她的能力范围以内,于是我帮助她完成了这个效果。显示nav被裁减的效果是一个不简单的任务,我看到图片的第一反应是创建一个相匹配的背景被部分裁剪的图像,然后把它设置为一个after元素。问题是,至少要解决响应式问题,并且响应式并不完全可控的。了解CSS属
2015-07-07 11:31:23
5353
原创 因一段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
1476
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
1737
原创 美团面试中被问到的问题汇总
美团的面试已经结束了将近半个月了,前后的三轮面试也经过了10天左右(人在广州,都是电话面试),结果也还是好的,顺利拿到了美团的暑期实习。本来不打算写什么面试总结,为什么?看下图: 按照0.01%的有效率转化,算了一下,大概也有174篇面试总结够看了。虽然说没有看过这么多,但前前后后也看过50篇上下的面试总结了,看到有点呕吐的感觉了。但是昨晚突然想到对于每一轮面试,都做了一些笔记,为了不浪费这些笔记
2015-06-24 14:34:41
8715
原创 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
1583
3
原创 JavaScript面向对象精要(一)
数据类型在JavaScript中,数据类型分为两类:原始类型:保存一些简单数据,如true,5等。JavaScript共有5中原始类型: boolean:布尔,值为true或falsenumber:数字,值为任何整型会浮点数值string:字符串,值为由单引号或双引号括出的单个字符或连续字符(JavaScript不区分字符类型)null:空类型,其仅有一个值:nulllundefined
2015-06-24 14:32:10
1328
翻译 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
17063
2
翻译 解决AJAX请求使PHP反应时间过长的问题
现在我们开发了很多依赖于Ajax请求的应用,在某些情况下,甚至全部页面都依赖Ajax。有时我们会注意到,当一个网页发送两个或者更多Ajax请求时,PHP的反应时间会很长并会同时返回响应内容。这个问题很可能是你处理PHP会话的方式造成的,跟着本文去理解这个问题,并做一些处理来避免这个问题。内容什么是PHP会话?什么是Ajax?具体问题造成的原因问题的解决方法总结什么是PHP会话?为了理解这个问题,有必
2015-06-13 09:38:08
8648
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
1485
翻译 HTML5: Screen Orientation API
媒体查询允许网站根据智能手机和平板的方向来调整布局。但有时候你希网站锁定到一个特定的方向,横屏或竖屏,此时,原生应用的格式是可以被指定的。APP只在预设格式下显示—独立于实际的设备方向。通过使用HTML5的 Screen Orientation API, 可以在JavaScript定义屏幕方向。 为一个文档定义屏幕方向通过screen.orientation属性的lock()方法可以调整屏幕方向,
2015-06-08 09:37:44
2916
翻译 JavaScript面试问题:事件委托和this
JavaScript不仅门槛低,而且是一门有趣、功能强大和非常重要的语言。各行各业的人发现自己最混乱的选择是JavaSscript编程语言。由于有着各种各样的背景,所以不是每个人都对JavaScript及其基本原理有广泛的认识。通常来书,除非你去参加工作面试才会去思考为什么或者怎么做,否则JavaScript只是你工作的内容。这个系类的目标是深入探讨JavaScript的一些概念和理论。主题来自于
2015-06-08 09:35:57
2273
翻译 有趣的JavaScript原生数组函数
在JavaScript中,创建数组可以使用Array构造函数,或者使用数组直接量[],后者是首选方法。Array对象继承自Object.prototype,对数组执行typeof操作符返回object而不是array。然而,[] instanceof Array也返回true。也就是说,类数组对象的实现更复杂,例如strings对象、arguments对象,arguments对象不是Array的实例
2015-06-08 09:35:12
1404
原创 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
2101
原创 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
1809
原创 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
1528
翻译 文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
2653
3
翻译 设计出色响应式网站的十个技巧
移动技术并没有渐退的迹象,反而对于个人和企业去建立门户网站,必须考虑移动用户已经变成了趋势。对于那些在不同设备上看起来很酷、功能十分有效的正在发展中的网站,响应式设计仍保持实践性。作为一个Web设计师,也会尝试用各种各样的网页设计技术。如果响应式设计趋势让你印象深刻,并且也打算用响应式设计深入研究网站创新,那么你已经来到了初学者的门口。这里,已经包含了10个关于设计一个完美的响应式网站的很酷的建议。
2015-05-26 09:42:22
2259
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
1769
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
1730
原创 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
2490
翻译 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
1329
翻译 PHP:40+开发工具推荐
PHP是为Web开发设计的服务器脚本语言,但也是一种通用的编程语言。超过2.4亿个索引域使用PHP,包括很多重要的网站,例如Facebook、Digg和WordPress。和其它脚本语言相比,例如Python和Ruby,Web开发者有很多不错的理由皮偏爱PHP。 对于PHP开发者,在互联网上有很多可用的开发工具,但是找到一个合适的PHP开发工具是很难的,需要花费很多努力和时间。今天,就为开发者介绍
2015-05-05 12:18:41
1429
1
翻译 编写更好的CSS必备的40个工具
众所周知,CSS是非常棒的,它使网站看起来很漂亮,可以为网站添加动画,并让呈现和内容分离。去了解CSS的一切是非常难做到的,它只会变得更加困难,因为我们想让我们的代码跨浏览器兼容。 这里介绍了很多第三方工具,从简化工作流程到生成真正的CSS,这些工具都提供了我们需要的代码,并且比我们自己写出的代码运行的更快。PurePure并不是一个框架。相反,它只是集成一些已经应用到模块中的CSS代码,方便我们
2015-05-05 12:15:13
2518
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
2580
PHP怎么提取图片上的文字?
2015-04-10
响应式设计下,怎么做移动端的条纹菜单?
2014-12-25
TA创建的收藏夹 TA关注的收藏夹
TA关注的人