- 博客(40)
- 收藏
- 关注
RSS订阅转载 点击后形成扩散圈 和 z-index
点击后形成扩散圈这个名字有点奇怪，就是在一个div被点击后，会形成一个圈，往外扩散，直至塞满整个div。效果看这：http://codepen.io/crab/pen/aAbvf具体的实现就是在被点击的div中加入svg，然后其中的circle不断扩大，最后remove掉。在这里用了jquery库。js代码和css代码很简单，大家自己跑一下就知道了。<h...
2014-07-20 21:34:00
116
转载 前端感悟 ---入门级
这几周，看了各种各样的代码，经过一堆代码review，也有了一些基本上的码农感觉。打算记录下来，这样以后忘记了还能回来看看。本来上个星期就想写这篇文章的，结果星期天晚上被叫回去修bug了。。下面分css和js来记录。css：在传统意义上，css的书写，只要能够将效果表现出来，同时前面的selector不要太长就好。这样在项目比较小的时候，修改起来就十分方便。但是，当整个项目开...
2014-07-13 09:43:00
97
转载 初学Backbone
简介Backbone是一款不错的前端MVC框架，它主要由Router，Model，View，Collection构成。当我们在一个页面中有许多交互，js操作，即构建富应用程序(rich client-side applications)时，用Backbone这类的框架来管理自己的代码是十分有用的。在Backbone里，我们一般会用Model来处理数据，包括数据的校验，Ajax等。...
2014-07-05 22:34:00
99
转载 节点操作
js中DOM操作占了极大的部分，对于节点的操作主要有节点插入，节点移除，节点复制，还有一些innerHTML，innerText，outerHTML相关的东西。节点的插入原生的DOM接口非常简单，参数确定，方法调用方便。jQuery对这些原生接口进行利用，组装出了一些列更为犀利的方法，append、prepend、before、after、replace等。而且因为这几个方法是用...
2014-06-16 08:46:00
207
转载 css animation 关于step
此页面中的动画效果都是只用了-webkit前缀的，所以建议用chrome打开此页面animation-timing-functionanimation-timing-function 规定动画的速度曲线。速度曲线定义动画从一套 CSS 样式变为另一套所用的时间。在平常的取值中，主要有以下几个：值描述linear动画从头到尾的速度是相同的。eas...
2014-06-09 11:37:00
170
转载 js 类工厂
js中的类工厂就是因为js中一直没有真正的类。创建类工厂是为了模拟类，类工厂的主要部分就是prototype的扩展和返回一个基本的用来new的函数prototype扩展首先是prototype的扩展，可以用一个简单的for...in...循环来实现。for(var item in from){ if(from.hasOwnProperty(item)){ ...
2014-06-07 22:36:00
97
转载 js中神奇的运算
先看一段比较神奇的运算和他的结果：{}+[]//0[]+{}//"[object Object]"{}+[] == []+{}//false({}+[]) == []+{}//true运算结果不一样，很神奇啊。。。我们来看一下js中对Object和Array直接执行运算时会发生什么。由于数组不是一个基本类型，所以在运算过程中，js会尝试将a...
2014-06-05 12:22:00
82
转载 js 函数 杂
扩展浏览器原生对象原型用：function extend(target,source){ var toString = Object.prototype.toString, hasOwn = Object.prototype.hasOwnProperty,back = {}; if(toString.call(source) !== '[object...
2014-06-01 10:02:00
53
转载 js bug自动预警
这两天在看关于AMD中getCurrentScript函数时，突然想到，既然可以检测出当前出错的js文件，那么是不是可以做一个自动js bug预警的功能。以后只要有js错误出现，就会自动将错误上传到服务器。先看司徒正美大大书中写的一段关于检测js文件地址的函数，相关博客地址点这：function getCurrentScript(base) { // 参考 ...
2014-05-20 10:58:00
103
转载 类数组和类型判定
数组化数组是一个很好的存储结构，不过光像以下这样声明类数组功能略弱：var arrayLike = { 0: 'a', 1: 'b', 2: 'c', length: 3}为了使其拥有数组的功能，通常会将其进行数组化转化，一般的，我们只要使用[].slice.call就可以完成了。但是...
2014-05-15 16:08:00
68
转载 图片轮播插件
刚买了司徒大大的《Javascript框架设计》，准备开始研读。打算在读之前先随便写个图片轮播插件，到读完这本书再来看看现在的自己有多菜。。。。。。。顺便做图片轮播的时候用美女照片真影响效率。。。。。两三个小时写出来的。。代码略粗糙。。见谅。。上代码！先是如何使用：html:<div id='outer' style='width:591px;heigh...
2014-05-13 22:34:00
71
转载 关于模块化开发，CMD和AMD
模块化 首先要理解的是什么是模块化，模块化这个词来源于研究工程设计中的《Design Rules》，是指可组成系统的、具有某种确定独立功能的半自律性的子系统。 模块化在编程中的意义是为了减少软件的复杂度，使软件不会因为不断的扩大而导致功能维护、添加变得十分困难。而通过模块的拼接，就可以组成一些列的复杂的系统，同时 模块与模块之间耦合度低。这种拼凑是灵活的，...
2014-05-09 21:14:00
68
转载 css学习笔记(杂)
关于垂直居中：首先是用的比较频繁的line-height的设置，通过调整line-height值大小，对于行内非替换元素的垂直居中设置有奇效<div class='container' style='line-height:150px;'> hello World!</div>然后是通过将display修改为table-cell来...
2014-05-06 10:38:00
73
转载 jquery 源码分析十二 - Sizzle
在Sizzle中只剩下最后一段大的函数了，就是select，也就是在sizzle中联系compile和Sizzle函数的关键。它在Sizzle中主要处理那些并非是简单的选择器，如包含有:eq(1)的。直接看源码：function select( selector, context, results, seed ) { var i, tokens, token, ty...
2014-04-20 18:24:00
102
转载 jquery 源码分析十一 - Sizzle
这篇开始分析Sizzle中的终极匹配器。首先讲一下普通情况下，如:div a的匹配。在matcherFromToken函数中，可以看出匹配函数的组装方式，见源码：if ( (matcher = Expr.relative[ tokens[i].type ]) ) { matchers = [ addCombinator(elementMatcher( matcher...
2014-04-15 21:47:00
128
转载 jquery 源码分析十 --Sizzle
考虑到Sizzle里面函数互相调用的关系，接下来的函数就不会按从上到下的顺序分析，而是采用调用的顺序进行分析。这篇博客参考了这篇文章里的说明(靠这篇文章才理解的。。。。) 首先就是要讲到编译函数，JS是单线程语言，但是在执行程序时，一段函数的运行，会导致线程的阻塞，导致整个程序停顿。这时候异步就出现了，异步的原理不多说了。异步使得JS能够更加灵活的运行，克服了其单线程的限制...
2014-04-10 22:53:00
101
转载 jquery 源码分析九 - Sizzle
最近一直在搞毕设，实在是没时间写博客了，零碎的时间看代码进度也不快，所以写博客一拖再拖了，今天先补一篇上来。。。在上次写得setDocument以后，紧接着的是一些零碎的功能函数 1 Sizzle.matches = function( expr, elements ) { 2 return Sizzle( expr, null, null, elements )...
2014-04-07 21:58:00
193
转载 jquery 源码分析八 - Sizzle
在各种聚会，毕设任务后。。。我又回来了！！！继续分析jquery中的sizzle源码在Sizzle主函数以后，先是一些列的零散函数，为后面support检测，事件代理提供先期方法。这些函数内容比较简单，就直接分析掉了：// 为function作标记function markFunction( fn ) { fn[ expando ] = true; ...
2014-03-31 10:06:00
114
转载 seajs 源码分析四
这篇主要讲最后的seajs源码运行顺序。当然，前面那些零零碎碎的就直接忽略了，就从module那块开始seajs总的函数调用顺序图如下：seajs.use调用后会调用Module.preload，如果有预加载模块的话，就需要先调用Module.use(preloadMods,function(){..},...)，来完成模块的预加载，在其完成后再正式调用Module.use(id...
2014-03-23 17:54:00
60
转载 seajs 源码分析三
这次是seajs源码分析的倒数第二篇，因为涉及到后面的代码运行分析，所以比较长(终于要写一篇超长博客了。。。)首先还是和以前一样，对seajs的源码进行分析先是一系列的变量，这些是在seajs中的全局变量，用于储存一些要加载或加载完的js，css文件的module，还有加载的状态，源码如下： 1 var cachedMods = seajs.cache = {} 2 ...
2014-03-23 15:14:00
79
转载 seajs 源码分析二
继续接上一篇来分享剩下的seajs源码，计划这一篇写完以后再来一篇就结束了。这一篇就是分析moudle之前的部分首先是前面的一些变量声明 1 var doc = document 2 var cwd = dirname(doc.URL) 3 var scripts = doc.scripts 4 5 // 默认的是seajsnode作为id添加到dom中，或...
2014-03-17 21:44:00
61
转载 seajs 源码分析一
说明下，写这个不是说明接下去不分析jquery了，只是这两天在准备面试，顺便把seajs给读了，调节下心情。把seajs的源码分析速度写完以后，就会继续jquery。。。===================================================================================首先是seajs的大架构：1 /**...
2014-03-16 11:39:00
107
转载 jquery 源码分析七 - Sizzle
这篇主要是分析Sizzle引擎中最关键的一个函数Sizzle，这个函数接受四个参数selector,context,results,seed，这四个参数的意义分别是选择器，上下文环境，保存结果数组，还有一个未知。。 由于这个函数里面涉及了许多相关函数，所以先对主函数进行分析，并只是列出相关函数的作用。相关函数的分析会放在文章末尾。接下来先看主函数： 1 f...
2014-03-13 14:47:00
99
转载 jquery 源码分析六 - Sizzle
以下吐槽： 最近一直在面试啊找工作啊，然后学校里又有一堆事情，结果看代码的时间变少了。憋了好几天终于感觉可以写一篇文章了，早上就爬起来赶紧写下来，怕又忘了。吐槽下：小本科找工作真的好难。。。。正文开始：首先是Sizzle里面的一些基础方法，也可是说是用的比较多的东西。因为Sizzle一开始就定义了许许多多的变量，所以这边先讲一些这次会用到的变量(比较简单的。。) ...
2014-03-13 10:18:00
89
转载 jquery 源码分析五
突然发现接下来马上就是Sizzle的核心代码了，这次就简单分析下Sizzle前面的剩下的代码。这次的篇幅会很短，因为剩下的代码就两段了，就当为Sizzle分析蓄力吧~话说，尝试着把博客变成响应式布局了（简单粗略版），不知道有没有人发现~首先是class2type，class2type中保存了一下[object name]-name的键值对，就是为了在判断类型的时候使用。这里使用了...
2014-03-08 23:03:00
50
转载 jquery 源码分析四(下)
接下去分析那个extend块，接下来是一个each函数，它对传入的数组中的每个值进行特定处理，根据返回值确定操作（明确返回 false则停止循环）each: function( obj, callback, args ) { var value, i = 0, length = obj.length, isArray...
2014-03-07 20:00:00
53
转载 jquery 源码分析四(上)
这次分析的函数就是用extend添加到jQuery下的，这次分析将拆分成片段来讲，首先是最前面几个简单的变量和函数：//保证当前页面上的每个jQuery都是独一无二的expando: "jQuery" + ( version + Math.random() ).replace( /\D/g, "" ),isReady: true,//错误抛出函数error: ...
2014-03-07 18:13:00
53
转载 jquery 源码分析三(extend函数解析)
这次主要分析的是JQuery中的extend函数，extend函数在JQuery中占的作用十分明显，在后期JQuery方法的添加上，基本是使用这个函数来添加到JQuery对象和prototype上的。这个函数另一个重要作用是在框架开发的时候使用，可以直接对JQuery增加新的功能。说明了重要性之后，就开始讲解函数了（函数的使用方法就不讲了，具体可以看官方文档：http://api.j...
2014-03-04 22:32:00
52
转载 jquery 源码分析二
以下这一段函数出现在实例化jQuery对象函数之后，是jQuery的prototype的最基本的几个函数，分析前先看这几个相关的常量和一些函数：var deletedIds = [];var slice = deletedIds.slice;var concat = deletedIds.concat;var push = deletedIds.push;...
2014-03-04 10:11:00
43
转载 jquery 源码分析一
(function( global, factory ) { if ( typeof module === "object" && typeof module.exports === "object" ) { // For CommonJS and CommonJS-like environments where a proper wi...
2014-03-01 22:44:00
56
转载 css中的长度单位
很多css属性都依赖于长度单位来显示各种页面元素，所以就会有许多种方法来度量长度。所有的长度都可以表示为整数或负数。所有长度单位后面都会跟有两字母组成的缩写，表示长度单位。长度单位可以划分为两类：绝对长度单位和相对长度单位。绝对长度单位一共有5中绝对长度单位： in英寸 cm厘米 mm毫米 pt点：一般，一英寸是72点 pc派卡：1派卡相当...
2014-02-28 23:41:00
145
转载 js 高级应用 自定义事件
Javascript与浏览器交互的途径主要是事件的形式。事件是一种观察者的设计模式，对象可以发布时间，然后其它对象可以观察该对象，等待这些时刻到来并通过运行代码来响应。观察者模式主要由主体和观察者组成。主体负责发布事件，同时观察者通过订阅这些事件来观察该主体。该模式的一个关键概念是主体并不知道观察者的任何事情，也就是说它可以独自存在并正常运行即使观察者不存在。从另一方面来讲观察者知道...
2014-02-25 16:06:00
103
转载 js 对象中属性的来源
通过对对象的创建，继承的理解，我们可以发现，在平时使用时，prototype和实例中的属性都可以直接通过this.para来调用。而且优先使用实例中的属性，然后在根据原型链一步步的向上寻找属性的位置，直到找到为止。在平时，这些机制对于我们使用对象有很大帮助，但是有时候会产生实例属性覆盖原型属性，使我们调用不到正确的值。这时候我们就首先要判断我们现在能得到的属性来自于哪个位置。首先是i...
2014-02-24 10:29:00
113
转载 js 获得点击的鼠标按钮键
对于mousedown和mouseup来说，其event对象中存有一个button属性，表示按下或释放的按钮。DOM中属性有3个值：0表示主鼠标按钮，1表示中间的鼠标按钮，2表示次鼠标按钮（右键）。但是对于IE8及之前的版本来说，button中所存的值又是不同的： 0：表示没有按下鼠标按钮 1：表示按下主鼠标按钮 2：表示按下次鼠标按钮...
2014-02-21 15:22:00
371
转载 js contextmenu 自定义右键菜单
右键菜单的设定主要是通过contextmenu事件来激活，由于contextmenu事件是冒泡的，所以可以为document来指定事件，进行页面中该事件的统一处理。同时，因为contextmenu是一个鼠标事件，所以在event中包含有鼠标位置等一系列信息，可以通过这个来实现对浏览器右键菜单的模拟。为了兼容现在的主流浏览器，所以先做一个通用的事件加载函数：1 function...
2014-02-21 10:32:00
364
转载 HTML5 脚本
1.跨文本消息传递跨文本消息传递是指来自不同的域之间的页面相互传递消息，他的核心是postMessage()方法，即向另一个地方传递数据。对于psotMessage而言，另一个地方可以是页面中的iframe或者由当前页面弹出的窗口。它接受两个参数，一个消息和一个表示消息接收方来自哪个域，如下代码：1 var iframeWin = document.getElementByI...
2014-02-17 15:19:00
132
转载 富文本编辑器(js)
富文本编辑器，可以让我们更方便的设计规划我们自己想要的应用程序。富文本编辑器的原理是在HTML中嵌入一个空的HTML页面，然后通过设置designMode属性，使得这个空白HTML可被编辑，而编辑后的源码就是原理body中的HTML代码。designMode有两个属性，是on和off，当设置为on的时候，整个文档就处于可编辑的状态，然后就可以像word一样进行文字处理。先看一下实施...
2014-02-14 10:20:00
123
转载 DOM2级遍历和范围
DOM遍历现有用于辅助完成顺序遍历DOM结构的类型有两个，NodeIterator和Treewalker。在于DOM兼容的浏览器中，都可以访问这两个对象，IE不支持DOM遍历，使用下列代码可以检测浏览器对DOM2级遍历的支持情况：1 var supportTraversals = document.implementation.hasFeature('Traversal','...
2014-02-08 13:56:00
109
转载 html中样式操作
在HTML中使用样式有三种方式，link引入、style中编写和元素中定义具体style。DOM2对这三种提供了一系列API，要确定是否可以使用这些方法，可以用以下代码判断：var isSupportDom2CSS = document.implementation.hasFeature("CSS","2.0");var isSupportDom2Css2 = documen...
2014-02-07 13:29:00
78
转载 js中对象的继承
js中实现继承的方式主要是通过原型链的方式，这边就大概讲下各种方法的实现1.原型链原型链的原理就是让子对象的原型指向父对象的一个实例，然后再在子对象的原型里添加自己的方法。这样就可以做到引用父对象的方法属性的同时使用自己的方法属性。看一下代码：function Person(){ this.name = 'super';}Person.prototype...
2014-02-03 23:04:00
49
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人