- 博客(249)
- 收藏
- 关注
RSS订阅原创 Javascript 继承模式
在面向对象的JavaScript开发中使用继承可以提高代码重用性，javascript有多重方式可以实现继承，考虑代码的可维护性在项目中应该保持代码风格的一致性，下面是JavaScript中继承的实现方式之一： 辅助对象： var global = window; (function(ns,undefined){ //辅助对象： ...
2014-05-29 10:59:55
221
原创 Javascript类定义语法,私有成员、受保护成员、静态成员等
JS只是一门支持面向对象编程的语言，通过OO可以让我们的代码组织更加人性化。可是与传统基与类的面向对编程语言不同它没有类概念并且没成员访问修饰符。这多少会给我们编程工作会带来一些束缚。 其实通俗的讲类就是对象的模板，为了增强JS的OO特性，受mootoos框架启发我们可以使用一个JSON对象来描述这个对象的模板。在这个模板中我们可以模拟实现私有成员，受保护成员，静态成员。 ...
2014-05-29 10:59:46
294
原创 CSS团队协作开发方式的思考
有效的团队协作开发，可以提高工作效率。但在实际的协作开发中情况并非总是这样一帆风顺，最常见的一种情况是当大家都完成各自负责的部分后需要进行集成时往往会让我们大费周章。如过您也有类似烦恼，下面是我对如何改善这一状况的思考，欢迎探讨交流。一 模块化模块化概念：和模块化相关的一个概念就是样式作用域，作用域是模块化基本条件。样式作用域是一条样式规则可以影响的范围，在不同样式作用域中的同名.c...
2014-05-29 10:59:32
287
原创 用JavaScript实现自己的DOM选择器
解释器模式（Interpreter）：定义一种语法格式，通过程序解释执行它并完成相应的任务。在前端编程场景中可以应用解释器模式来解释CSS选择符实现DOM元素的选择。 开放封闭原则：面向对象中的开放封闭原则是类或模块应该对扩展开放对修改封闭，在这个dom选择器中实现id选择器，元素选择器，类选择器，如果以后需要属性选择器的话定义一个属性选择器实现相应的方法，同时在简单工厂中增加相应的创建...
2014-05-28 14:27:20
184
原创 Javsript代码的注释和模块定义
可以这样定义模块： (function(ns, required){ })(window, base); 在上面的代码中使用一个匿名立即执行函数来限定代码的作用域在匿名函数内，用来封模块装逻辑并避免全局命名空间污染。其中ns表示命名空间，required表示依赖的模块。模块通过ns[name] = name; 这样导出，供外部使用。 ...
2014-05-28 14:21:02
219
原创 前端模块化协作
项目中有多个前端人员协同开发时，你们团队如何分工如何协作的？具体到前端模块化开发可以多人同时签出同一个文件，然后并行开发不同模块，模块经测试通过后提交到版本库。提交时进行手动或自动的合并操作，下次修改前先从版本库获取最新内容，再做后续修改。HTML/CSS是可视话比较强的东西， 开发人员开发过程中只能看到自己开发的模块部分对于开发体验来说不太好。通过合并大家可以实时看到协作的成果，看到完整的部分...
2014-05-28 14:16:23
172
原创 在JavaScript中应用单例模式管理命名空间
单例模式确保一个类在整个应用程序中只有一个是实例对象，在Javascript可以使用单例模式来管理命名空间；代码：function Namespace(name){ return window[name] || (window[name] = {}); } (function(){ ...
2014-05-28 10:56:51
155
原创 移动WEB开发中媒体查询里的width, device-width, resolution
/*1、width： viewport的宽度，css像素，三星S3的viewort默认宽度是980px。当设置viewport width=device-width时，对应的媒体查询中width的值为：设备物理像素 / window.devicePixelRatio。 ----------------------------------------------------------*/@medi...
2014-05-28 10:14:42
221
原创 前端性能优化
1. 请减少HTTP请求 基本原理： 在浏览器(客户端)和服务器发生通信时，就已经消耗了大量的时间，尤其是在网络情况比较糟糕的时候，这个问题尤其的突出。 一个正常HTTP请求的流程简述：如在浏览器中输入"www.xxxxxx.com"并按下回车，浏览器再与这个URL指向的服务器建立连接，然后浏览器才能向服务器发送请求信息，服务器在接受到请求的信息后再返回相应的信息，浏...
2014-05-27 15:16:41
125
原创 jquery sizzle 选择器浅析
看了jquery的源码，jquery用的选择器的引擎是sizzle，是jquery的作者另一开源项目，在github上面有，号称最快的dom选择器！不到2000行代码。 上面说了不是很精彩的开场白，我么来个 for example: $('.test') 在jquery的流程是怎么走的呢？ 1.首先会做如下的判断/***关于 querySelectorAll函...
2014-05-26 14:23:58
144
原创 jQuery 1.8，1.9和2.0分别带来的新特性
jQuery 1.8 可定制在jQuery 1.8中现在可以定制自己的jQuery版本，你可以移除不需要的模块从而使得jQuery尽可能得变小。可选模块包括ajax，css，dimension，effect和offset，下面是移除所以可选模块的例子：git clone git://github.com/jquery/jquery.gitcd jquery &&...
2014-05-26 14:17:12
640
原创 jquery点击div之外的地方div本身消失
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> &am
2014-05-15 12:22:13
327
原创 srcset属性获chrome 34支持
Chrome 34终于正式发布，最引人的特性是开始支持srcset属性了。其实在此之前，Safari已经开始支持了，而目前来看，这个属性就是为rMBP服务的，因为桌面电脑上只有rMBP需要更高分辨率的图片。但是其实这个属性的用途并不仅限于此。最常用的用法：<img src="normal.jpg"srcset="normal.jpg 1x, high-res....
2014-05-15 10:41:04
178
原创 jquery-migrate: 迁移旧的jQuery代码至jQuery1.9以上的版本
这个插件可以用来检测和恢复在jQuery1.9版本中已删除或已过时的API，比如常用的live方法https://github.com/jquery/jquery-migrate/ 测试页面：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/...
2014-05-14 16:31:58
2288
原创 移动WEB在线开发工具 – Codiqa
Codiqa，https://codiqa.com 简单试用了一下，强大，太强大了，百度APP平台的体验跟它比起来简直是就是渣了。你可以通过简单的拖拽来实现页面的布局，点击TEST查看效果，点击Inspect Code来生成代码。之后简单修改一下，一个移动WEB APP就诞生了。...
2014-05-12 15:43:34
248
原创 一种比CSS-Sprite更加方便在网页中嵌入大量图标的方法
这种思路是在一个国外的网站上发现的，设计者在网站中使用了很多小图标，但是并没有使用CSS-Sprite技术，而是使用了另外一种特殊的办法。那就是css3的font-face技术载入了一个自己做的字体文件，在需要显示的地方直接打上调用的字符。这种办法只适用于大量纯色，至于数量貌似没有上限，a-z+0-9+符号就够用了，狠一点，插入中文，动辄几千个单位…font-face图标 VS CSS-...
2014-05-12 15:34:25
138
原创 Google Developers的ResetCSS
@charset "utf-8";html { margin:0; padding:0; border:0}.bp-reset-element,body,h1,h2,h3,h4,h5,h6,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,blockqu...
2014-05-12 10:32:54
153
原创 Android如何区分app原生和webview实现
在开发Android app时，特别是强内容展现型的功能，会想在原生native实现和web实现中做选择，做这种选择的时候，难免想看看竞品或其它app类似功能是用哪种方式实现的。但是如何判断其它app是用原生控件实现还是用webview载入网页来实现呢？其实要想做到这一点不难，至少有两种办法：一、抓包这是比较原始，也是比较容易想到的，打开相应界面，抓取数据包看看，如果有url是返回比较完...
2014-05-08 11:18:33
846
原创 Android手机版浏览器DIV滚动条失效解决方案
除了BODY和HTML的滚动条,在触屏下几乎所有浏览器都不支持DIV的滚动条(说几乎是因为新版的IOS已经支持)这个应该算是完美解决方案了,需要注意的是setTimeout,必须要在内部的HTML解析完毕,JS获取它的高度不会出错的时候才可以执行,一般来说100毫秒差不多了.如果内部是个大图片,且高度不固定的时候,倒计时要久一点. <!DOCTYPE html...
2014-05-08 11:09:10
2458
原创 -前端冷知识集锦
前端已经被玩儿坏了！像console.log()可以向控制台输出图片等炫酷的玩意已经不是什么新闻了，像用||操作符给变量赋默认值也是人尽皆知的旧闻了，今天看到Quora上一个帖子，瞬间又GET了好多前端技能，一些属于技巧，一些则是闻所未闻的冷知识，一时间还消化不过来。现分类整理出来分享给大家，也补充了一些平时的积累和扩展了一些内容。HTML篇浏览器地址栏运行JavaScript代码这个很...
2014-04-28 15:03:39
99
原创 解耦HTML、CSS和JavaScript
当前在互联网上，任何一个稍微复杂的网站或者应用程序都会包含许多HTML、CSS和JavaScript。随着互联网运用的发展以及我们对它的依赖性日益增加，设定一个关于组织和维护你的前端代码的计划是绝对需要的。 当今的一些大型互联网公司，由于越来越多的人会接触到日益增加的前端代码，它们会试图去坚持代码的模块化。这样更改程序的部分代码，并不会无意中过多地影响后续不相关部分的执行过程。...
2014-02-14 11:32:33
79
原创 设置双核浏览器的浏览模式
如果访问的页面中有 CSS3 代码，双核浏览器会自动切换到 Webkit 内核吗？http://www.zhihu.com/question/20094625我的第一反应是：不会。目前我知道IE可以设置浏览模式： 12<meta http-equiv="X-UA-Compatible"content="IE=EmulateIE7" /&g...
2014-01-20 15:44:58
101
原创 使用console.table()调试javascript
或许你已经习惯了console.log()来调试js，非常好用，但是今天微博看到console.table()调试javascript，和console.log()类似，主要区别在于: 主要用来输出对象和数组;更加直接的可视化，以表格形式展现;可以单独输出某个或某几个属性；详情点击：http://www.mariusschulz.com/2013/11/13/advanc...
2014-01-20 15:42:50
92
原创 iOS下无法正常渲染按钮的问题
最近做移动端的页面，碰到了一个问题，就是css无法定义按钮样式，包括input :submit,:button及button标签等，如图，左边是设计稿，右边是iOS下显示的效果；stackoverflow搜索了一下，http://stackoverflow.com/questions/5438567/css-submit-button-weird-rendering-on-ipad-iphone...
2014-01-20 15:40:20
193
原创 禁止横竖屏时内容自动调整
iOS下当竖屏转向横屏的时候，发现内容字体会自动变大，通过各种方法设置字体大小都失败了 如上图所示，很明显当手机由竖屏转向横屏的时内容中的文字自动变大，跟你自己设置的大小无关。网上搜索了一下：发现有个text-size-adjust属性，具体文档请查看：https://developer.apple.com/library/ios/DOCUMENTATION/AppleAppl...
2014-01-20 15:36:19
268
原创 JS对象复制
在JavaScript很多人复制一个对象的时候都是直接用"="，因为大家都觉得脚本语言是没有指针、引用、地址之类的，所以直接用"="就可以把一个对象复制给另外一个对象，如下代码：代码１ var i1 = 1; var i2 = i1; i2 = 2; alert("i1:"+i1+",i2:"+i2); 输出结果：i1:1 , i2:2 但可能没有发现，这种“复制”用在对象（...
2014-01-17 16:18:33
112
原创 jQuery反向排序(倒序)子对象
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="author" content="ini.iteye.com" /> &a
2013-12-26 10:53:20
1390
原创 js object写法 参数传递jquery对象
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; char
2013-12-24 11:21:07
515
原创 JavaScript模拟QQ签名(HTML5 contenteditable属性)
一、思路1、单击元素时，使元素可以编辑，并获得焦点2、按下键盘检测用户编辑元素中的文本3、监听按下Enter键操作或离开可编辑元素焦点时，更新数据库二、代码<!doctype html><html><head><meta charset="utf-8"><title>contenteditable</title..
2013-12-24 11:08:31
129
原创 HTML5--JS API-新的选择器
新的选择器document.querySelector("selector");selector:根据CSS选择器返回第一个匹配到的元素，如果没有匹配到，则返回null;支持： Chrome 4.0+, FireFox 3.5+, Safari 3.2+, Opera 10.1+, IE 8+document.querySelectorAll("selector");selector:根据CSS...
2013-12-19 16:08:19
125
原创 ieBetter.js-让IE6-IE8拥有IE9+,Chrome等浏览器特性
IE6-IE8浏览器，按照现代浏览器的API来工作就好了！也就是，你只要关心在现代浏览器下如何使用，至于IE6-IE8，额外引入一个补丁JS，万事OK，歌舞升平，天下大吉！这个引入的补丁JS就是这里的ieBetter.js. 我将这种引入称之为JS的“趋同策略”。目前，ieBetter.js压缩后大小30K. 大小基本上是jQuery的1/3.如何使用IE9+以及Chrome, Fire...
2013-12-19 15:47:48
270
原创 视网膜New iPad与普通分辨率iPad页面的兼容处理
一、这是篇经验分享就算不是果粉也应该知道，iPad2与new iPad的重大区别之一就是显示屏的分辨率。new iPad显示屏被称之为“视网膜显示屏”，其设备分辨比（之前有详细介绍，点击这里查看）是iPad2的两倍。 – iPad mini也是普通分辨比。iPad2与new iPad同时显示一个页面，宽度都是1024像素的，那差别在什么地方呢？——就在于new iPad每个像素点实际上有...
2013-12-03 10:54:01
191
原创 手机网页项目一些心得
一、手机与浏览器据互联网分析公司StatCounter公布的2月份数据显示，数据显示：谷歌的Android默认浏览器成为了最流行的手机浏览器，欧朋浏览器占到了22.67％的市场份额，苹果的Safari浏览器占到了21.7%的市场份额。诺基亚的Symbian浏览器占到了11.24%的市场份额，黑莓浏览器占到了6.53%的市场份额。iPhone默认浏览器为Safari;Andro...
2013-12-03 10:42:19
291
原创 设备像素比devicePixelRatio
一、定义定义如下：window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。公式表示就是：window.devicePixelRatio = 物理像素 / dipsdip或dp,（device independent pixels，设备独立像素）与屏幕密度有关。dip可以用来辅助区分...
2013-12-03 10:41:15
168
原创 jquery 方块转盘 得 ###jiang####品
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta h
2013-12-02 14:42:58
116
原创 取代float基于display:inline-block的列表布局
display:inline-block感觉与display:table-cell有些相似，例如对内部元素的包裹性。但是，由于display:inline-block最大的不同就是其没有父元素的匿名包裹特性，这使得display:inline-block属性的使用非常自由，可与文字，图片混排，可内嵌block属性元素，可以可以置身于inline水平的元素中。可谓黑白通吃，左右逢源。inlin...
2013-11-22 10:57:23
109
原创 绝对定位元素的居中实现
如果要问如何CSS实现绝对定位元素的居中效果，很多人心里已经有答案了。兼容性不错的主流用法是：.element { width: 600px; height: 400px; position: aboslute; left: 50%; top: 50%; margin-top: -200px; /* 高度的一半 */ margin-...
2013-11-22 10:26:55
189
原创 检测用户是否连续输入减少ajax请求次数
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charse
2013-11-07 10:43:39
206
原创 JavaScript模拟QQ签名(HTML5 contenteditable属性)
<!doctype html><html><head><meta charset="utf-8"><title>contenteditable</title><style>body, p { margin: 0; padding: 0;}.layout-box { paddin
2013-11-05 15:51:33
179
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人