随笔分类 - 前端技术
Javascript/jQuery/Ajax/XHTML/CSS
摘要：/*1、width： viewport的宽度，css像素，三星S3的viewort默认宽度是980px。 当设置viewport width=device-width时，对应的媒体查询中width的值为：设备物理像素 / window.devicePixelRatio。 ----------------------------------------------------------*/ @media screen and (width:360px){ body{ background-color:#0f0; } } /*2、device-with： 屏幕宽度，and...
阅读全文
摘要：应用了seajs的模块化js文件不能像普通js文件一样直接合并和压缩，具体可以看这里为什么 SeaJS 模块的合并这么麻烦。下面演示了如何使用VS2012一键发布应用了seajs的asp.net项目，需要用到的工具有nodejs、grunt、msbuild等。项目目录结构其中base.js是一个公用的JS库，pulg-a.js，pulg-b.js是基于base的公用插件。对于开发环境的项目，在浏览器中访问Index.html 会加载base.js、sea.js、 common.js、 plug-a.js、plug-b.js。对于发布后的项目，在浏览器中访问Index.html只会加载 seas
阅读全文
摘要：在面向对象的JavaScript开发中使用继承可以提高代码重用性，javascript有多重方式可以实现继承，考虑代码的可维护性在项目中应该保持代码风格的一致性，下面是JavaScript中继承的实现方式之一：辅助对象：var global = window;(function(ns,undefined){ //辅助对象： var Class = { extends: function(SubClass, SuperClass){ var F = function() {}; F.prototype = SuperClass.prototype; SubClas...
阅读全文
摘要：观察者模式也被称作发布/订阅模式，下面是JAVASCRIPT的一种实现方式var global = window;(function(ns, base){ //被观察的对象 function Observable(){ this.observers = {}; } Observable.prototype = { //subscribe bind: function(name, observer){ var observers = this.observers[name] || ( this.observers[name] = [] ); var isbind = ...
阅读全文
摘要：AMD是"Asynchronous Module Definition"的缩写，意思是"异步模块定义"。模块定义define(id?, dependencies?, factory);其中：id: 模块标识，可以省略。dependencies: 所依赖的模块，可以省略。factory: 模块的实现，或者一个JavaScript对象。代码示例1: 定义一个alpha模块，依赖require，exports，beta模块define("alpha", ["require", "exports", &
阅读全文
摘要：网页中图片旋转一般有下面三种常见的实现方式：一、 ie 滤镜IE的图形旋转滤镜，通过指定BasicImage滤镜的rotation值旋转元素，旋转方向为顺时针，旋转的中心点为元素的左上角。rotation可以有4个旋转值：0, 1, 2,和3分别表示将元素旋转0度、90度、180度、270度。浏览器支持： IE5.5+CSS代码：.rotate{ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); } JS代码：element.style.filter = "progid:DXImageTransform
阅读全文
摘要：我们在看到物体的运动的时候，大脑会不由自主的分析其受力情况，会考虑它为什么会动，以及它何时会停下来。我们这里说的缓动也就是运动过程中速度受加速度影响的过程，这个加速度可能是正的或者是负的，其正负的不同会体现在运动是加速运动还是减速运动，也就是是缓入还是缓出。 我们再分析一下我们的例子，看看它在正常的基本符合实际情况下它是如何运动的。假设红色的方块是冰面上的一个箱子，我们现在要让箱子运动起来。红色 的方块开始的时候肯定是静止在那不动的，它要动起来我们就必须推它一把，然后它就开始运动了，这里我们再把情况简化一下，冰面的摩擦力很小，所以我们假设 摩擦力足够小，小到可以忽略，而且我们推动它的力是一个.
阅读全文
摘要：调用接口：/** * @param elem {HTMLElement} 执行动画的HTML元素 * @param params {JSON} 动画执行过过程中需要修改的HTML属性 * @param duration {Number} 可选，动画执行时间，单位毫秒 * @param easing {String} 可选，动画执行的方式，缓入easeIn、缓出easeOut * @param callback {Function} 可选，动画执行完成时的回调函数 * @return */effect.animate(elem, params, duration, easing, callba.
阅读全文
摘要：求数组中元素的最大值、最小值方法一 遍历数组方法二 使用数组自带的排序方法，如：array.sort() 。返回的数组中第一个元素值最小，最后一个元素值最大方法三 使用Math对象的Math.min(arg1, arg2[,...])、Math.max(arg1, arg2[,...])方法，经测试这种方式较前面两种性能更好。使用函数对象的apply方法可以将参数列表作为数组进行传递，如果数组元素是自定义对象可以先重写元素的valueOf方法再调用，下面是实现代码：//最大值Array.prototype.max = function(){return Math.max.apply(Math,
阅读全文
摘要：无缝连续滚动JS，工作中经常会用到整理出来需要用的时候可以直接拿来用。代码很简单主要就是修改元素的scrollLeft值。需要注意的是获取元素overflow:hidden中内容的真实宽高时，需要先克隆元素并内容设置样式setyle.cssText="position;absolute; visibility:visible;display:block;" 。 然后再使用元素的offsetWidth/offsetWidth属性才可以获取到元素的真实宽高。否则被隐藏部分的宽高无法获取到。点击这里查看显示效果代码：<!DOCTYPE html ><html&g
阅读全文
摘要：在FIREBUG控制台中输入 jQuery() 返回 []jQuery.fn = jQuery.prototype = { constructor: jQuery, init: function( selector, context, rootjQuery ) { var match, elem, ret, doc; // Handle $(""), $(null), or $(undefined) if ( !selector ) { return this; }代码执行到这里返回，[]表示数组字面量，返回对象按说应该显示 [object Object]; 经过反复调试发
阅读全文
摘要：网上收集整理的一些比较好建议 id和class的命名在保持语义性的同时尽可能的短. 不推荐的写法：#navigation {} .atr {} 推荐的写法 ： #nav {} .author {} 可以缩写单词，但缩写后务必能让人明白其含义。比如author缩写成atr就非常费解。 参考链接： http://www.36ria.com/5249属性书写顺序,首先定义显示属性 推荐的写法 ：.selector{float:left;width:300px;height:200px; font-size:14px;color:#f36;} 不推荐的写法：.selector{font-siz...
阅读全文
摘要：一些css书写规范建议将浏览器私有实现的CSS3属性写在前面标准属性写在后面如：{/*一些前缀私有属性*/ -webkit-border-radius:30px10px; border-radius:30px10px; }现在一些CSS3的属性还是草案，等到成为正式标准可能会有更改。这也是浏览器为什么采用私有属性方式实现的原因。但是如果私有属性和最后的标准属性不一致就会有兼容问题如：之前网页有CSS {/*一些前缀私有属性*/ -webkit-border-radius:30px10px; //标准之前草案的表现 border-radius:30px10px; //无效} 到了bo...
阅读全文
摘要：项目中有多个前端人员协同开发时，你们团队如何分工如何协作的？以前一直使用VSS的"锁定-修改-解锁模型"，后来发现svn的"拷贝-修改-合并"模型很不错，可以多人并行编辑同一个文件。具体到前端模块化开发可以多人同时签出同一个文件，然后并行开发不同模块，模块经测试通过后提交到版本库。提交时进行手动或自动的合并操作，下次修改前先从版本库获取最新内容，再做后续修改。HTML/CSS是可视话比较强的东西， 开发人员开发过程中只能看到自己开发的模块部分对于开发体验来说不太好。通过合并大家可以实时看到协作的成果，看到完整的部分。 比如有一个ps设计稿index.ht
阅读全文
摘要：http://msdn.microsoft.com/zh-cn/magazine/cc507641.aspxhttp://ajaxpatterns.org/Unique_URLsHistory API, hashchange, iframe唯一 URL 模式URL 是 Web 的基础。用户可以将中意的 URL 保存下来以供将来参考、可以按照 URL 所指开始新的内容体验，此外还可以使用 URL 回到先前的状态。在 AJAX 和 SPI 模型中，应用程序可以在单个 URL 中完成许多任务。这将使 Web 体验的核心支柱面临彻底的改变，即：应用程序的离散状态是由不同的 URL 来标识的。浏览器会在
阅读全文
摘要：功能强大的模板引擎大都需要对模板进行语法解析，会有性能问题。通过把一个大的模板引擎根据不同呈现需求分隔成多个互相独立模板控件，可以降低处理复杂度提供处理性能,可以根据需求灵活组合这些模板控件得到一个可以定制的模板功能库。一个模板控件规定了它的模板语法和js api，这是一个repeater控件的JS实现:<!DOCTYPE html><html><head><meta charset="gb2312" /><title>JavaScript Repeater控件</title></head>
阅读全文
摘要：Pinterest/瀑布流布局一 加载页面时,先页面中对已有元素进行定位。使用对象保存每一列的列高度和列索引如:var column = {index:0, height:0}；使用列数组存放来这些对象。如：var columns = [column1,column2....]；使用cloumns.sort(function(x,y){return x.height - y.height}); 可以找出最短/最长高度的列的索引。元素left= 列索引* 列宽 ； 元素top = 最短一列的高度；二 鼠标滚动到最短一列的底部时动态加载数据。if（文档scrollTop + 视口高度 > 容
阅读全文
摘要：返回顶部是经常会见到的效果，代码比较简单，使用2个对象和一个主函数。职责明确方便复用。在性能方面考虑了由于连续触发onscroll事件，频繁调用回调函数而产生的性能问题。可以将回调函数缓存一段时候后执行，即当这段时间内多次触发了onscroll事件，但回调函数只会执行一次。<!DOCTYPE html><html><head><meta charset="gb2312" /><title>结合淡入/淡出/减速运动效果实现的返回顶部功能</title><style>.fixed{ positi
阅读全文
摘要：减少DOM数可以加快浏览器的在解析页面过程中DOM Tree和render tree的构建，从而提高页面性能。为此我们可以把页面中那些首屏渲染不可见的部分HTML暂存在TextArea中，等完成渲染后再处理这部分HTML来达到这个目的。 要把TextArea 中暂存的HTML内容添加到页面中，使用元素的outerHTML属性是最简单方便的了,不过在DOM标准中并没有定义outerHTML，支持的浏览器有IE6+,safari, operal和 Chrome，经测试FF4.0- 中还不支持。所以我们就来实现一个可以跨浏览器的outerHTML。outerHTML 就是获取或设置包含元素标签本身在
阅读全文
摘要：CSS布局分为常规流，浮动流，和绝对定位。这篇文章是对在常规流中块元素和行内元素的区别所做的一个简单总结。块元素：块元素盒模型有margin box（left/right/top/bottom） ,padding box(left/right/top/bottom)， content box(width/height)组成。块元素单独占一行，在文档流中垂直排列。会与垂直方向的兄弟节点的margin发生重叠， 如果和它的后代元素之间不存在pading,border的情况的下，那么块元素垂直方向的margin也会和它的后代元素发生重叠。行内元素：行内元素在一行内水平排列，当内容超出它的包含块时会被
阅读全文
