通过时间扭曲实现缓动动画

2016-09-22
阅读 2 分钟
3.8k
经常会见到各类缓动函数,在CSS里面有现成的bounce、elastic等缓动效果直接用。如果在canvas动画中,我们要实现这些缓动函数。直接去思考怎么处理挺头疼的,介绍一种不错的实现方式,源自《HTML5 Canvas核心技术》。

canvas精灵封装

2016-08-30
阅读 4 分钟
4.2k
在做canvas动画时,精灵封装的好坏,直接影响后续的编程体验。 下文的封装方法来自《HTML5 Canvas核心技术 图形、动画与游戏开发》,实现了精灵与绘制对象的解耦,很好用,平时自己也用这种写法。 一个完整的Sprite包含两部分: Sprite的基本封装 Sprite Painter实现 拆开Sprite和Painter,实现了解耦,可以随意调整Pain...

一、WebGL——着色器和绘制

2016-08-24
阅读 2 分钟
2.4k
着色器 顶点着色器 控制点的位置和大小 {代码...} 类型和变量名字: vec4 gl_Position 表示顶点位置,vec4在GLSE中是由四个浮点数组成的矢量 float gl_Position 表示点的尺寸 片元着色器 控制点的颜色 {代码...} 绘制操作 {代码...} 获取attribute变量存储位置 {代码...} 向attribute 变量赋值 {代码...} <p style="c...

修复mac下mysql莫名挂掉

2016-07-14
阅读 1 分钟
3.2k
不知为何,mysql总是莫名其妙挂掉,很烦人有木有我们也放个大招: {代码...} 全部清空再安装,妥妥的 配置密码: {代码...}

React技术栈——HotModuleReplacement

2016-07-06
阅读 2 分钟
2.7k
Hot Module Replacement是webpack下实现热刷新的模块,由于webpack的坑爹文档,看了很久才搞明白这东西怎么用。

React技术栈——ReactJS

2016-07-04
阅读 4 分钟
3.2k
第一个是React的核心代码,第二react-dom.js是React里面操作DOM的部分,第三个browser.js将JSX转为Javascript语法。

React技术栈——webpack

2016-07-04
阅读 3 分钟
2.8k
一直在用fis3,也能完美满足目前业务需求。我厂的scrat也有大量的feature贴合业务线。 最近在看React,要打通React的技术栈,学习Webpack是必不可少的了。 从npm上安装很简单: {代码...} Webpack特色: {代码...} 简单demo 先上第一个demo: cats.js {代码...} app.js {代码...} webpack登场: {代码...} 这命令可以cat...

扒一下Git的工作原理

2016-06-16
阅读 1 分钟
3.4k
后知后觉原来自己并不懂git,只是会敲几个命令行。要花些时间来把git啃下来。 参考资料来自git官网 先挖个坑,整理好资料再填上来 Git基本操作 Git分支

常用js设计模式整理

2016-06-14
阅读 10 分钟
3.2k
在做canvas、webGL游戏时,很深切的感觉到,游戏编程玩的都是设计模式。架构没预先设计好,强耦合性代码在后期维护简直灾难。 大型单页应用里,复杂度上升到一定程度时,没有适当的设计模式进行降耦,后续的开发也难以下手。 而设计模式正是为了降耦而存在。 参考《javascript设计模式》——曾探 函数节流 {代码...} 分式...

【常忘系列1】—Function.prototype里面的call和apply

2016-04-26
阅读 1 分钟
1.8k
applyapply接受两个参数,第一个制定了函数体内this对象的指向,第二个参数为一个带下标的集合(可遍历对象),apply方法把这个集合中的元素作为参数传递给被调用的函数:

扒一下W3C规范里的BFC和IFC

2016-01-04
阅读 7 分钟
13.8k
一、盒子模型 页面任何一个元素都可以看成是box,box分block-level,inline-level和匿名的。 {代码...} 二、BFC 什么是BFC? BFC的全称是Block Formatting Context,直译过来是:块级格式化上下文。 在理解BFC时先理解三个概念: 1、Block-level elements属于diplay: block;的元素,都是Block-level elements(块级元素);...

NodeJS爬虫

2015-12-01
阅读 1 分钟
2.9k
基于phantomjs,语言是java,之前纠结了很久用java还是用node。因为后续还有分词、建索引balabala的,java有很多成熟的框架可以直接用。今天听海洋大大的一句话:“年轻人才会纠结用什么语言”

canvas绘图性能优化

2015-12-01
阅读 1 分钟
8.3k
drawImage()比putImageData要快一些,而且drawImage()可以把某个canvas绘制到另一个canvas上,绘制速度与绘制图像差不多;

离屏canvas

2015-11-30
阅读 1 分钟
7.8k
离屏canvas可以很好的解决canvas的性能问题 操作步骤: {代码...} domo: {代码...}

mac下mysql无法启动问题

2015-10-28
阅读 1 分钟
3.7k
不知道为什么,mysql没法启动了,试了很多种方法,最后决定还是重装吧- - 先卸载mysql sudo rm /usr/local/mysql (这一步: 必须的) sudo rm -rf /usr/local/mysql* (这一步: 必须的) sudo rm -rf /Library/StartupItems/MySQLCOM (这一步: 可选) sudo rm -rf /Library/PreferencePanes/My* (这一步: 可选) v...

ES6特性2—变量解构赋值

2015-10-12
阅读 2 分钟
2.2k
一、数组的解构赋值 {代码...} 如果等号右边不是数组。(严格说,不是可遍历的解构),则报错 {代码...} 解构赋值允许指定默认值( 默认值生效的条件是,对象的属性值严格等于undefined。) {代码...} 二、对象的解构赋值 {代码...} 对象解构跟数组解构不同。数据结构按位置取值,对象解构按属性名取值; {代码...} 如果变...

ES6特性1——let和const

2015-10-12
阅读 1 分钟
2.4k
let和const1、let增加了块级作用域。 {代码...} 2、const声明变量,声明后变量不能改变。跟let一样,声明的变量只在块级作用域内有效。 3、跨模块常量 {代码...} 4、全局对象属性 {代码...}

基于FIS的前端工程化实现

2015-09-12
阅读 1 分钟
3.9k
---------2015.9.10------------最近尝试了下基于FIS的前端工程化实现。(等下再吐槽FIS3)先列出要实现的功能:

jQuery源码阅读6.1— Sizzle架构

2015-08-12
阅读 3 分钟
2.7k
代码架构 (function(){ //引擎入口 var Sizzle = function(selector, context, result, seed){...}; //工具方法,排序、去重 Sizzle.uniqueSOrt = function(result){...}; //便捷方法,用指定的选这起expr对元素集合set进行过滤 Sizzle.matches = function(expr, set){...}; //便捷方法,检查某个元素node是否匹配选择器...

jQuery源码阅读5— jQuery原型属性和方法

2015-08-11
阅读 6 分钟
2.7k
整体架构: {代码...} 一、selector、.jquery、.length、.size() {代码...} 二、toArray()、.get([index]) {代码...} 三、each(function(index,Element))、jQuery.each(collection,callback(indexInArray, valueOfElement)) {代码...} 四、 .map(callback(index,domElement))、jQuery.map(arrayOrObject, callback(value...

jQuery源码阅读4— clean( )

2015-08-11
阅读 5 分钟
1.7k
function clean( elems, context, fragment, scripts ) { //elems:数组,包含了待转换的HTML带呀 //context:文档对象,参数在bulidFragment()中被修正为正确的文档对象 //fragment():文档片段,存放转换后的DOM元素占位符,在bulidFragment()中被创建 //scripts:用于存放转换后DOM元素中的script var checkScriptType;

jQuery源码阅读3— bulidFragment( )

2015-08-10
阅读 2 分钟
2k
jQuery的buildFragment函数,主要是将传入的HTML代码用document.createDocumentFragment转变成文档碎片,具体细节如下图:

jQuery源码阅读2—init( )

2015-08-04
阅读 5 分钟
2.2k
总架构图(摘自《jQuery技术内幕》): 代码逐步分析: {代码...}

jQuery源码阅读1—jQuery架构

2015-08-03
阅读 1 分钟
4.6k
今天借着《jQuery技术内幕》的指导开始阅读jQuery源码,第一篇先筛选出jQuery的架构 {代码...}

BigPipe的正确使用姿势

2015-07-18
阅读 1 分钟
8.1k
BigPipe目标:前后端分离,提高页面渲染速度 BigPipe解决的问题: 1、下载堵塞 2、服务端下载浪费 一般的网页加载是直接通过访问服务器,发送请求,收到返回数据,然后渲染 一般堵塞模型: 后端渲染页面→网络延迟→浏览器端页面渲染,所有的数据一次性渲染 BigPipe思路,分块加载,一次请求,多次返回 1、浏览器发送一次...

JSONP原理及实现跨域方式

2015-05-27
阅读 1 分钟
15.6k
同源策略限制了我们无法通过原生的XMLHttpRequest()对象获取到json数据。为了突破这个限制,我们的前辈们想出了一个解决方案:jsonp。