心语2012
- 浏览: 45796 次
- 性别:
- 来自: 杭州
-
文章列表
先看一张图片 这张图片对每一位前端开发来说都不陌生，话说Chrome的控制台真心好用啊！cookie、Local Storage、Session Storage、Web SQL、IndexedDB、Application Cache等html5新增内容看的一清二楚，免去了很多调试代码工作。不过这里还不全面还有ie下的userData及flash的SharedObject。
cookie
cookie是我们用得最多的一种本地存储方式： 特点：
单域名容量不能超过4k
主域和子域共享cookie且httpt请求头部会带上cookie中的数据
canvas就像一个画板你画的每个东西都在一个板上没有元素的概念.canvas动画就是不断的重绘来实现的，也就是动画的每一帧都是一幅静态的图片。
其实canvas动画无外乎三个步骤：
1.准备要画的元素及其位置颜色等等....
2.用一个定时器不断改变元素的一些属性如位置
3.再用一个定时器清除画布，画变化中的元素
1.开始准备元素
/**画星星**/
function dragStar(a,b,ctx,r1,r2){
ctx.beginPath();
ctx.fillStyle="#f8 ...
jquery的Deferred
- 博客分类：
- jquery源码分析
Query Deferred主是是为了解决异步而生。也许我们对于Deferred可能不熟悉，但是我们必定对promise熟悉，这两着之间有紧密的联系又或者说deffered包含promise的所有方法，但是为什么还会有promise呢？我们接下来会介绍。
我们来看源码：
我们可以看到这是一个工厂函数，结果返回一个组装成的对像deferred，那么接下来我们看一下这个返回的deferred对像都有哪些方法。
// Add list-specific methods
jQuery.each( tuples, function( i, tuple ) {
var list ...
我们在日常开发中很少会用到Callbacks，但是我为什么会这么急着介绍Callbacks呢，因为接下我想说一下promise，这两部分有密切的联系至于什么联系到介绍promise时我们会明白的。
Callbacks它是一个多用途的回调函数列表对象，提供了一种强大的方法来管理回调函数队列。如下例子
function fn1(){ alert(111)}function fn2(){ alert(222)}var callBack = $.Callbacks();callBack.add(fn1);
读jquery数据缓存
数据缓存在jquery中很重要，可能平时你用的未必多，但是在jquery内部很多重要模块都有用到它，记得我们之前分析过的队列queue有用到数据缓存，还有一个很重要的模块也会用到数据缓存那就是事件。
对于对比data和attr及prop最大优点那就是防止内存泄露了。jquery源码里有很多设计很巧妙的点，都值得我们去揣摩和学习的。那我们现在开始读jquery数据缓存源码之路了。
我们看图可以很清楚的看出，实例方法是依赖工具方法实现的而工具方法是一个数据对像实现的，所以最终的实现是面像对像的这个函数。所以我们只需看这个函数就可以了。
首先构造函数中的 ...
jquery的追溯
- 博客分类：
- jquery源码分析
我们都很熟悉jquery中的end()方法就是回到上一级的节点指向如下图：
我们会考虑为什么呢，原理是什么？我们接着看下边的例子也许能发现点什么：
这里我们会发现其实$(".table").find(".cn-radio") 的属性“prevObject”指向的是 $(".table")。 说到这里我们就要说到我们jquery里栈和追溯源码了。
pushStack: function( elems ) {
// Build a new jQuery matched element set ...
看jquery源码更好使用API
看过源码我们会发现其实jquey中有很多很好用的api我们没有使用过，今天我们一起看一下队列(queue)的源码，看一下都有哪些好用的API。大纲如下图：
queue有三个工具方法： queue,dqueue,_queueHooks，四个实例方法 ：queue,dqueue,clearQueue,promise。jquery中很多模块都会同时有同名的工具和实例方法，但是实现功能的一般都是工具方法，而我们平常多用实例方法只因链式操作方便。我们来看一下它们之间的关系：
工具方法queue
queue: function( elem, ty ...
5个实用而不常用的git操作
- 博客分类：
- 工具
git stash --场景：如果不想提交只完成了一半的代码，但此时必须去修改一个紧急Bug
本地有修改，此时又需要pull远程代码，有时会因为修改了同一个文件导致无法pull，git提示可能有冲突无法merge，请先提交本地修改。
如果你还不想提交修改怎么办？就git stash吧，会把你的修改暂存，隐藏起来，然后你就可以pull了
git stash pop --场景：bug修改好了，把隐藏的代码找出来，接着写自己的代码吧
好了，你现在pull了远程的更新，看过之后觉得跟自己的更新不会有什么大冲突，就算有你也可以做到手动merge，那么就git stash pop， ...
解读jquery的extend
- 博客分类：
- jquery源码分析
jQuery的extend方法很有用，jquery的很多工具方法，和实例方法都是通过extend实现的。我们一起来看一下
这个方法是怎么写的。
jQuery.extend = jQuery.fn.extend = function() {
var options, name, src, copy, copyIsArray, clone,
3target = arguments[0] || {},
i = 1,
length = arguments.length,
deep = false;
// Handle a deep copy situation
if ( ...
老是有一些老同事跟我说，我想做个瀑布流怎么做，我说网上有组件啊，回答总是说我不需要用异步接口，我只需要把我静态demo转成瀑布流样式就可以了，我就简单做了一个，我把JS放到load 事件里主要是怕图片宽高不确定的情况下用。
$(window).on("load",function(){
var waterfalls ={
init:function(){
var self = this;
self.cfg={
colu:4/ ...
以前的老大说过一句话，一个页面谁都能做。关键是谁能做好，一个好是很关键的，首先是细节处理的好，性能优化的好。性能优化越来越重要，尤其是终端设备越来越普及的今天，我也看了好多这方面的资料，总结一下有以下几条:
1> 减少http请求数（减小css,js和图片的数量，据资料说明相同网速的情总下100kb的图片的下载要比两个50kb的速度要快）
2> 减少浏览器重绘和重排的次数（重绘会由改变元素的样式如颜色visibility,重排是改变元素的几何属性(宽高)或者是增加或都是移除dom节点）
3> 尽量减小dom操作（js和html的每次交互都要消耗一些性能）
4> ...
varTemplateEngine=function(html, options){var re =/<%([^%>]+)?%>/g, reExp =/(^( )?(if|for|else|switch|case|break|{|}))(.*)?/g, code ='var r=[];\n', cursor =0;var
移动调试-android
- 博客分类：
- 移动前端
做手机端最麻烦的就是调试，不如在PC端有chrome下的开发工具还有firebug用着可以很方便的调试。
所以这前我都是在电脑上做好页面用手机扫描二维码来测试页面碰到手机上和PC上表现不同的如电脑上表现好的，到手机上出现各种诡异的现像那头就大了。
对于androi手机我们也可以像电脑上chrome下的开发工具一样看到源码然后调试
看chrome给的官方文档https://developers.google.com/chrome-developer-tools/docs/remote-debugging
就是有几个过程
(1) 手机启用usb调试（系统设置 - 开发者选项 - usb ...
math中的asin的应用
- 博客分类：
- js
在上篇文章我们用math中的atan2来判断鼠标在一个区块的位置，接下来我们一起来学习一下math中的asin的应用。
先来看一下w3school的中的定义Math.asin(x)
返回x 的反正弦值。返回的值是 -PI/2 到 PI/2 之间的弧度值。
现在我们已经明白asin的用法了，再来看一我们的一个应用场景吧，在canvas里有一个rotate(x)方法
x是0-360deg的弧度值，我们可以传鼠标到一个图片中心点的弧度让这个图片跟着鼠标旋转，我们怎么计算这个弧度呢，这里我们就要用到math中的asin值了如图(1)：
a=鼠标x-圆心x
b=鼠标y-圆心y
c=Mat ...
math中atan2的应用
- 博客分类：
- js
在双十二活动中，视觉要求实现一个鼠标跟随运动的的效果，就像“觉”的那个效果类似
其实原理很简单，看鼠标从哪个方向进的及从哪个方向出的，然后区块里绝对定位的浮层就可以根据鼠标方向
运动;
如：在鼠标进入事件中判断鼠标从左边进入区块那么定位层就从left:区块宽走到区块零，在鼠标离开事件中判断鼠标是从上边离开的那么定位层就从top:零走到负的区块高度就可以的。是不是很简单呢，但是有一个问题就是怎么判断方向？那么我们的atan2就隆重出场了。
看一下w3cshool上是怎么介绍atan2()的
atan2(x,y)：返回-PI 到 PI 之间的值，是从 X 轴正向逆时针旋转到点 (x,y) ...