Articles

05 May 2016
微数据(microdata)和微格式(microformate)

语义网旨在让机器可以理解信息，旨在让网络更加智能，如提供信息获取、信息过滤、Web 自动服务等。语义网的实现有多种技术，如 HTML5的Microdata、RDF、Microformat 等。微数据 MicrodataMicrodat...
15 Apr 2016
浅谈Hybrid技术的设计与实现

前言随着移动浪潮的兴起，各种APP层出不穷，极速的业务扩展提升了团队对开发效率的要求，这个时候使用IOS&Andriod开发一个APP似乎成本有点过高了，而H5的低成本、高效率、跨平台等特性马上被利用起来形成了一种新的开发模式...
06 Apr 2016
浅谈缓存机制

此情可待成追忆，只是当时已惘然。使用缓存（Cache）是一种明智的选择，能够很好地利用本地资源。一个优秀的的缓存策略能够缩短资源请求的时长，减少延迟，能够合理地再次利用缓存文件，还能够减少带宽占用（节省流量）、降低服务器压力。除了...
18 Mar 2016
React 组件间的通信

盈盈一水间，脉脉不得语OverviewAngular 和 Vue 都是数据双向绑定的，然后React是单向数据流，这样使组件更清晰和独立。而习惯于类（class）或函数（function）的声明，以及函数式编程思想，显得格外重要。...
05 Mar 2016
再看 background

众里寻她千百度，蓦然回首，那人却在灯火阑珊处！OverViewbackground 是CSS里其中一个使用频率极高的复合属性。除了简写与默认值，更重要的是它的一些巧妙用法，比如 CSS sprites 和 gradient的运用。...
25 Dec 2015
单页应用进行时 - Vue.js篇

overview移动端的开发，选择较轻量级的MVVM框架 Vue.js，再结合 webpack 工具可以快速的实现SPA的开发。通过Vue很容易实现数据的双向绑定，而基于数据驱动的组件开发，又可以模块化组合和测试。相对于Angular...
10 Dec 2015
事件对象这点儿小事

overviewresource jQuery.Event
09 Dec 2015
npm install 时问题总结

overview鉴于在window环境下开发所遇到种种问题的阻碍，不得不以记录并总结出来，以供后车之鉴。##
18 Nov 2015
构建单页Web应用的野心 - 开篇

弄潮儿overview目前构建单页应用（single page application，SPA）主要通过ajax，URL hash和 HTML5 history API等方式实现。页面更加依赖于javascript，把功能都集中在...
15 Nov 2015
NPM 小技巧

overview开发环境基本都是在nodejs的开发环境里，少不了与npm打交道。这里记录了目前经常用到的命令。初始化npm init [-f|--force|-y|--yes]初始化时创建 package.json 文件，并有效提示...
24 Oct 2015
shell 脚本和自动部署 - 前奏曲

Where there is a shell，there is a way!Whatshell, 一个广义的解释就是在用户与操作系统之间，提供一个工具或接口给用户来操作计算机系统；用户在shell中通过输入命令行，按下回车键，sh...
12 Oct 2015
前端开发规范 - 小结

overview遵循规范，并不意味着因循守旧。鼓励个性，也并不代表随心所欲。遵循项目中共同的规范，能够确保每行代码都像同一个人编写，容易找到错误，同时错误量会减少。而合理的文件组织方式，又易于模块和业务的拓展，模块的依赖关系更加清晰，...
08 Oct 2015
自定义 javascript 模板引擎

overview巧妙利用构造函数 Function 和正则表达式，以及replace等方法，实现自定义javascript 模板引擎。其中模板中interpolate(即<%= %>) 表示输出值拼接在字符串里，而eva...
27 Aug 2015
数值(Number)，字符串(String)和布尔值(Boolean)

Overview对三种基本类型（原子类型）数值(Number)，字符串(String)和布尔值(Boolean)进一步认识。javascript 中涉及到小数数值计算总是那么地不可信。这里介绍和记录下基本的数值计算接口，以及相关的类型...
16 Aug 2015
JSONP(JSON with Padding)

Overview同源策略(协议、域名、端口相同)，它是由Netscape提出的一个著名的安全策略，现在所有的可支持javascript的浏览器都会使用这个策略。跨域的安全限制都是指浏览器端来说的.服务器端是不存在跨域安全限制的。在HT...
08 Aug 2015
移动屏幕设配的实践总结

overview 单位英寸像素数（Pixel Per Inch，PPI）：现实世界的一英寸内像素数，决定了屏幕的显示质量设备像素比率（Device Pixel Ratio，DPR）：物理像素与逻辑像素（px）的对应关系分辨率...
26 Jul 2015
类型判断(typeof、instanceof、toString)

overview原始类型包括三种数据类型。数值（number）字符串（string）布尔值（boolean）合成类型也包括三种数据类型。对象（object）数组（array） ...
25 Jul 2015
类数组对象(Array-like Object)

overview字符串，arguments和DOM元素集都可以看做类似数组的对象，即 “类数组”，有数字键和length属性。但不具有数组的所有特性。如无法使用push和pop等方法，以及length也不是动态变化的。自定义类数组对象...
20 Jul 2015
undefined 和 null

前言javascript 数据类型包括：原始类型（数值、字符串和布尔值）与合成类型（对象、函数和数组），以及两个特殊值 undefined 和 null相似点undefined 和 null 都是表示“无”，在if语句或布尔值转...
18 Jul 2015
关于 "Anchor" 的伪类和属性

overview HTML 中的 <a> 元素 (或HTML锚元素, Anchor Element) 用于定义一个超链接、指定的目标目的地一个超链接，或者两者都是。pseudo-classes: :hover, :act...
15 Jul 2015
gulp or grunt ? 向左向右? 向前看

overview构建工具从C时代的Make、Java的Ant、Ruby的Rake…，再到现在前端的Grunt和gulp，无疑是时代在不断地变迁和发展。这是一个工具的时代。隐忍和沉寂不是目的，而是手段，它终将爆发在最后那一刻。构建工...
12 Jul 2015
运算符 AND(&&)，OR(||)，NOT(!)

overview Logical operators are typically used with Boolean (logical) values. When they are, they return a Boolean va...
05 Jul 2015
项目中Browserify的使用

黑魔法，白魔法overivew前期主要工作，就是开始部署前端框架，这是从0到1的开始。适应不断变化的需求并能够满足需求，快速开发和迭代，以及结合后端开始推进进度。这里开始一切从简开始，从技术的选型和模块的划分，到一步步叠加和升级，...
30 Jun 2015
text-overflow

省略号 dot-dot-dot直接用字符串表示’…’ 或用HTML实体表示 & hellip; 或通过伪类 ::after实现单行通常方法.ellipsis { text-overflow: ellipsis; /* ...
18 Jun 2015
认识 requirejs

前要对项目模块合理地划分明确模块的依赖关系理解 AMD(Asynchronous Module Definition) 规范定义概述RequireJS是一个工具库，主要用于客户端的模块管理。它可以让客户端的代码分成一个个模块，...
14 Jun 2015
browserify 生成的源码分析

CommonJS 原理浏览器不兼容CommonJS的根本原因，在于缺少四个Node.js环境的变量(module,export,require,global)。简单实现 moudle 和 export 如下：var module = ...
11 Jun 2015
javascript 进制转换方法

区别 toString 和 parseInt在javascript中使用 Number的 toString 方法把相应的数值转换为特定radix ( 默认值 10) 的进制。【注意返回的是字符串】numObj.toString(...
09 Jun 2015
javascript 数值

1与1.0是相等的 ( 1 === 1.0 //true ) 1加上1.0得到的还是一个整数 ( 1+1.0 === 2 // true)由于浮点数不是精确的值，所以涉及小数的比较和运算要特别小心。概述根据国际标准IEEE 75...
08 Jun 2015
进制转换

概述进制之间的转换（二进制、八进制、十进制、十六进制……），数值包括正负整数，正负小数，以及它们的组合。进制，即逢几进一位。整数转换1.十进制转二进制方法为：十进制数除2取余法，即十进制数除2，余数为权位上的数，得到的商值继续除2，...
28 May 2015
javascript Element.insertAdjacentHTML()

概述insertAdjacentHTML() 将指定的文本解析为 HTML 或 XML，然后将结果节点插入到 DOM 树中的指定位置处。该方法不会重新解析调用该方法的元素，因此不会影响到元素内已存在的元素节点。从而可以避免额外的解析操...
27 May 2015
SVG Sprite

IntroductionSVG, 即可缩放矢量图形（Scalable Vector Graphics）。SVG 使用 XML（Extensible Markup Language,简称XML）格式定义图像。只涉及用SVG来替换ico...
20 May 2015
webpack TOOL

这是一份有关webpack的快速笔记，在做DEMO时零散记录下一些要点，主要阅读官网说明。之后将运用到小项目中，还有很多更多要深入。这几天阅读了doc和spec和example，以及动手实践的demo，感觉 webpack 像似集结了...
17 May 2015
再看 jQuery.Evnet

源于Bootstrap中使用了jQuery.Event() 创建事件对象，再一次让我感受到『世界那么大』。之前有关javascript 事件的整理，见javascript DOM Events关于自定义事件可以通过原生javascri...
16 May 2015
javascript 递归和尾递归

递归 (recursions)1.定义 Wiki [1]：Recursion is the process of repeating items in a self-similar way. 具体到计算机中去 [2]：递归（英语...
13 May 2015
bootstrap modal模块的源码解读

最近开发的后台管理系统，使用Bootstrap框架来快速开发和迭代，用起来可谓一气呵成。不过这只是在使用的层面上来讲的，再往其深层的源码分析来看，有太多值得学习的东西。今天就以modal模块来讲吧。Bootstrap的js模块是强依赖...
03 May 2015
CSS3 animation Part2 CSS3动画帧的计算

[循环动画]按循环方式可分为：1.单向循环： animation-iteration-count: infinite; animation-direction: normal;2.双向循环： animation-iteration-c...
03 May 2015
CSS3 animation Part1 初识

CSS3 aimation 已经毛皮地使用一段时间了，这里先粗浅地介绍一下，一方面记录一下笔记，同时也夯实一下基础功夫。总的来说，动画是使元素从一种样式逐渐变化为另一种样式的效果。通过使用 @keyframes规则声明动画中具体的帧变...
21 Apr 2015
say Hi to my new site

a advanced beginning.Learn more about What are GitHub Pages? and Using Jekyll with Pages. It is easy to find that tha...
20 Jan 2015
jQuery API - jQuery()

概要返回匹配的元素集合，无论是通过在DOM的基础上传递的参数还是创建一个HTML字符串。jQuery构造函数jQuery对象本质上是一个构造函数，主要作用是返回jQuery对象的实例。（1）CSS选择器作为参数（2）DOM对象作为参数...
18 Jan 2015
javascript Object

一、封装生成对象的原始模式这样的写法有两个缺点，一是如果多生成几个实例，写起来就非常麻烦；二是实例与原型之间，没有任何办法，可以看出有什么联系。var Cat = {　　　　name : '',　　　　color : ''　　};va...
15 Jan 2015
javascript settimeout

方法描述 setInterval 周期性地调用一个函数(function)或者执行一段代码。 clearInterval ...
16 Dec 2014
require.js

参考 RequireJS和AMD规范
07 Dec 2014
jQuery - return false, stopPropagation(), preventDefault()，stopImmediatePropagation()

return false在jQuery中，我们常用return false来阻止浏览器的默认行为，那”return false“到底做了什么？当你每次调用”return false“的时候，它实际上做了3件事情： event.pre...
05 Dec 2014
RequireJS

参考 RequireJS进阶:模块的定义与加载 RequireJS按需加载样式文件使用require.js构建优化项目实践 Javascript模块化编程（一）：模块的写法,Javascript模块化编程（二）：AMD规范,...
03 Dec 2014
SASS - @mixin, % and @function

前提 SASS变量：$ 引用父选择器：& 直接使用变量名的字符串：#{} list: $list: value1, value2,…; 或 $lists: (value1, value2,…),(valueA, val...
02 Dec 2014
jQuery-plugin

参考 jQuery插件教程浅析jQuery整体框架与实现（上）创建一个自定义 jQuery 插件
01 Dec 2014
javascript promise

##参考 ES6 JavaScript Promise的感性认知 JavaScript Promise 告别异步乱嵌套 JavaScript Promise启示录
25 Nov 2014
CSS3 flexbox -- 使用 CSS 弹性盒

前言CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。弹性盒中的子元素通过在各个方向放置就可以以弹性的尺寸适应父元素的显示区域。由于子...
22 Nov 2014
javascript DOM Events

概述DOM定义了一些事件，允许开发者指定它们的回调函数。指定回调事件的方法有三种。（1）HTML属性定义（2）Element对象的事件属性（3）addEventListener方法，removeEventListener方...
21 Nov 2014
CSS content counter

CSS content 属性content 属性与 :before 及 :after 伪元素配合使用，来插入生成内容。注：content: ‘\A’; 表示换行CSS计数器如果您指定了元素display:none，则content下的...
20 Nov 2014
requestAnimationFrame

前言相当一部分的浏览器的显示频率是16.7ms。这也是为何setTimeout的定时器值推荐最小使用16.7ms的原因（16.7 = 1000 / 60, 即每秒60帧）。概述window.requestAnimationFrame(...
19 Nov 2014
javascript keycodes 键盘键值

keyCode 和 ascii keyCode 之分 keypress 对应的是 ascii keyCode keyup/keydown 对应的是 keyCode… keycode是键...
15 Nov 2014
JavaScript函数节流与函数去抖

概念函数去抖（debounce）：让一个函数在一定间隔内没有被调用时，才开始执行被调用方法。函数节流（throttle）：是让一个函数无法在很短的时间间隔内连续调用，当上一次函数执行后过了规定的时间间隔，才能进行下一次该函数的...
13 Nov 2014
css 长度和角度单位

前言长度单位px px为单位emem为单位、百分比%为单位“em”就是一个相对值，而且是一个相对于父元素的值，其真正的计算公式是：1 ÷ 父元素的font-size × 需要转换的像素值 = em值以<body>的”fo...
12 Nov 2014
CSS3伪元素::section

前言伪元素 ::selection 用来定义反选的样式，（W3C规范）如：::-moz-selection{ color: white; background: hotpink; } ::selection{ col...
10 Nov 2014
jQuery validate 插件

前言支持ajax校验自定义的扩展，包括自定义校验规则，自定义错误显示的方式校验方式添加校验的方法总的说有两种：一种写在控件的标签上；另一种写在js脚本中。并且两种方法可混合使用。rules 默认校验规则```required:...
09 Nov 2014
CSS3 backgrounds

前言 background-color background-image background-repeat background-attachment background-positionCSS3 background-...
06 Nov 2014
jQuery on

.on( events [, selector] [, data] , handler(eventObject) )定义和用法on() 方法在被选元素及子元素上添加一个或多个事件处理程序。自 jQuery 版本 1.7 起，on() ...
03 Nov 2014
return false

break: 跳出循环continue: 跳出此次循环return return; // 将把握权返回给页面 return ture; // 或者 return !0; return false; // 或者 return !...
02 Nov 2014
CSS3 Gradients

定义CSS3 定义了两种类型的渐变（gradients）：线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向径向渐变（Radial Gradients）- 由它们的中心定义兼容前缀；-webkit...
27 Oct 2014
Setting to my blog on Github Pages

认识GithubGithub Page 的配置使用Git使用 jekyllFAQ