前端开发
文章平均质量分 75
iteye_18428
这个作者很懒,什么都没留下…
展开
-
jquery插件开发快速入门
1、添加jQuery对象方法添加jQuery对象方法:jQuery.prototype.myMethod。在jQuery源码中有一句:jQuery.fn = jQuery.prototype,也就是给jQuery的prototype对象取了个别名,所以 jQuery.prototype.myMethod 等价于 jQuery.fn.myMethod 等价于 $.fn.myMethod。...原创 2009-05-04 10:56:35 · 97 阅读 · 0 评论 -
常用Grunt任务
目的:自动化构建项目;完成压缩,编译,单元测试,代码检查以及打包发布的任务。生成线上调试source map,代码行统计。 常用Grunt任务:Cache :cache-breaker、usemin + revCSS :grunt-recess、less、cssmin、uncss、csslint(CSS检测)JS :ugl...原创 2012-12-20 16:13:08 · 187 阅读 · 0 评论 -
工程师,请优化你的代码
AjaxjQuery ready事件事件处理DOM操作 Ajax 大部分项目这么写: function getName(personid) { var dynamicData = {}; dynamicData["id"] = personID; $.ajax({ url: "getName.php", ...原创 2012-12-21 15:55:27 · 314 阅读 · 0 评论 -
严格模式
1、介绍严格模式2、严格模式影响范围变量: var、delete、变量关键字对象: 只读属性、 对象字面量属性重复申明函数:参数重名、arguments对象、申明其他:this、eval、关键字...严格模式 ECMAScript 5 引入严格模式('strict mode')概念。通过严格模式,在函数内部选择进行较为严格的全局或局部的错误条件检测,使...原创 2012-12-24 14:20:00 · 314 阅读 · 0 评论 -
PhantomJS
这里下载,如果下载不了到这个备份下载v1.9.7 配置环境变量 D:\Program Files\phantomjs-1.9.7-windows;原创 2014-02-20 11:41:16 · 105 阅读 · 0 评论 -
K前端架构
先了解一个概念“软件架构”软件架构:软件系统的架构将系统描述为计算组件及组件之间的交互。(Mary Shaw)前端架构:和前端相关的软件架构。 前端架构 = 前端组件 + 组件之间的交互。 K的前端架构 K前端要解决的问题 1、Bootstrap Enhanced/Extend未覆盖的场景2、Bootstrap 修改成本高的部分3、不满...原创 2014-03-11 16:56:25 · 218 阅读 · 0 评论 -
IIFE详解
介绍IIFE;IIFE的性能;使用IIFE的好处;IIFE最佳实践;jQuery优化; 在Bootstrap源码(具体请看《Bootstrap源码解析》)和其他jQuery插件经常看到如下的写法: +function ($) { }(window.jQuery); 这种写法称为:IIFE (Imdiately Invoked Function E...原创 2014-03-31 20:39:37 · 728 阅读 · 0 评论 -
Bootstrap 源码解析
1、Bootstrap的作用域2、Bootstrap的类定义3、Bootstrap的插件定义4、Bootstrap的事件代理5、Bootstrap的对象数据缓存6、Bootstrap的防冲突7、作用域外如何使用Button类8、Bootstrap的单元测试 Bootstrap的作用域Bootstrap每个插件都定义在下面这段作用域代码中: +f...2014-04-03 10:12:48 · 197 阅读 · 0 评论 -
关于字体大小适配:根文档使用px,组件使用rem,文本元素使用em
rem是一个非常酷的CSS3属性,它相对于根元素<html>的字体大小适配。举一个非常简单的场景,要根据3种屏幕大小适配字体:通常这么实现:/* Document level adjustments */html { font-size: 17px;}@media (max-width: 900px) { html { font-size: 15...原创 2014-04-09 22:10:59 · 408 阅读 · 0 评论 -
又到一周 周报时
先说个段子:公司有个技术牛人,某产品专员向他提单,牛人一看内容很扯,质问“你觉得这个需求有价值吗?”对方诚恳回答:“没价值,但是我总得写周报啊。”牛人想了一分钟,回答说好吧我帮你做,因为我也得写周报啊。 周报越写越流水账,怎么让周报有意义。形式不重要,是让别人了解自己工作的价值,也是自己一周的汇总思考。可以写什么呢, 结合部门的要什么、不要什么,周报里面体...原创 2014-04-11 11:06:19 · 130 阅读 · 0 评论 -
关于前端线上故障
先说明一点,对于故障的认识:任何事情都是团队的事情,不是一个人能承担的。仅仅是个人意识靠不住,需要团队合作来保证。 事故预防处理注重流程:先部署到测试环境,验证后,部署到线上;交叉测试代码质量控制:code review;相互review管理TC,明确校验点部署控制:定时部署,控制修改线上需求任务分级:轻重缓急自动回归… 事故处理:恢复时...2014-04-11 11:32:42 · 369 阅读 · 0 评论 -
Chrome Console使用技巧
打开浏览器,按F12,选择console标签页;出现浏览器控制台。在Chrome下为了演示JS, 有时候我们需要将改变console的字体大小,将console的字体放大。方法是改变chrome自定义文件Custom.css的样式,路径在Windows: C:\Users\<user>\AppData\Local\Google\Chrome\User Data\Default\...原创 2013-12-19 11:12:42 · 550 阅读 · 0 评论 -
IIFE
介绍IIFEIIFE的性能使用IIFE的好处IIFE最佳实践jQuery优化 在Bootstrap源码(具体请看《Bootstrap源码解析》)和其他jQuery插件经常看到如下的写法: +function ($) { }(window.jQuery); 这种写法称为:IIFE (Imdiately Invoked Function Expres...原创 2013-12-04 19:45:31 · 425 阅读 · 0 评论 -
轻松理解JS中的 this
this的8种使用场景 // 1. Basic thisfunction foo() { return this;}foo();// 2.(function(){ return this;})()(function(){ 'use strict'; return this;})()// 3. Object this...原创 2013-12-04 19:43:17 · 99 阅读 · 0 评论 -
如何挑选jQuery插件
jQuery的插件提供了一个很好的方法来节省时间和简化开发,避免程序员从头开始编写每个组件。但是,插件也将一个不稳定因素引入代码中。一个好的插件节省了无数的开发时间,一个质量不好的插件会导致修复错误的时间比实际从头 开始编写组件的时间还长。 幸运的是,人们通常具有各种不同的插件可供选择。但是,即使你只用一个,也要弄清楚它是否值得使用的。永远不要在你的代码库中引入错误的代...2010-09-01 11:37:47 · 177 阅读 · 0 评论 -
chrome下拦截ctrl + S保存页面事件
在浏览器下编辑,用户潜意识习惯按住Ctrl+S键保存编辑内容。而网页的“Ctrl + S”被默认为保存页面。用户体验很不好。需要增加快捷保存方式Ctrl+S。在Chrome下测试通过,其他Firefox、IE神马的都不支持。 $(window).keydown(function(event) { //alert( event.ctrlKey + ' ' + event.me...原创 2011-07-05 08:56:20 · 1746 阅读 · 2 评论 -
HTML5框架Modernizr
Modernizr http://www.modernizr.com/ - 测试超过40种特性,都在几毫秒内完成- 创建了一个js对象 Modernizr,包含测试的布尔结果- 向html添加class表明是否支持某个特性- 给出旧的浏览器兼容的解决办法 polyfill:通过JS为老浏览器提供标准API...原创 2012-02-09 17:28:13 · 119 阅读 · 0 评论 -
Mobile开发的前端框架和产品思考
看了2个框架,jQuery Mobile和Sencha Touch。 jQueryMobilejQuery Mobile 现在官方发布的是1.0.1,每3个月定期发布一个版本,说明有一个稳定强大的团队开发和维护。这个月内会升到1.1,主要对元素进行改进。 主旨jQuery Mobile旨在“为jQuery社区创建一个优雅的能够兼容当前所有主流移动平台的HT...原创 2012-02-15 17:33:56 · 147 阅读 · 0 评论 -
Jekyll
Jekyll 静态网站生成器。这里有个QuickStart。 Ruby环境安装$ gem install jekyll 默认基于Liquid语法 :输出标记 & 标签标记输出标记:由两个大括号分隔 {{ }}标签标记:由大括号 百分号分隔 {% %}注意 :Angular框架中使用了相同的标记{{}},也就是Angular表达...原创 2012-09-12 10:25:32 · 185 阅读 · 0 评论 -
CSS3实现的player播放按钮
完成的效果如下 查看效果并下载 Step 1:先了解border的原理: Step 2:HTML代码结构 <section class="playContainer"> <li class="playBtn"> <a href="#" title="start">Star原创 2012-04-26 18:35:38 · 2932 阅读 · 0 评论 -
jQuery .on() and .off() 命名空间
jQuery1.7开始,jQuery引入了全新的事件绑定机制,jQuery .on() 和 off() 两个函数统一处理事件绑定,也是jQuery触发DOM元素事件的最佳方法。有时候既要trigger手动触发事件,也要从DOM元素上解绑事件,比如:$('.item').on('click', doThisCoolThing);$('.item').on('click', doThisO...原创 2012-05-16 21:17:29 · 131 阅读 · 0 评论 -
CSS3:实现2个页面切换的平滑过渡效果
【示例地址】 做学习用, 1、速度放慢,大家可以看清移动过程,使用时可设置成0.2s; 2、为保证代码简洁,只写了webkit内核的效果,请用chrome打开查看。 【初始状态】 【拉开】 【页面前后顺序颠倒】 【收起】 <div class="translate3d"> <span class="f...2012-06-14 10:51:44 · 4804 阅读 · 0 评论 -
怎样低成本的实现网页在移动端的适配
问题:同一个网页,在web端显示良好,在移动端访问可读性非常差。目的:One page for all devices。网页在不同的设备打开,在不同的分辨率下打开时可读可用。网页能够兼容多个终端——而不是为每个终端做一个特定的版本。 也就是我们常说的如何构建“响应式网页设计”(responsive web design)。示例网站 250个响应式页面模板 解决方案涉...原创 2013-12-04 19:42:32 · 271 阅读 · 0 评论 -
Bootstrap 源码解析
1、Bootstrap的作用域2、Bootstrap的类定义3、Bootstrap的插件定义4、Bootstrap的事件代理5、Bootstrap的对象数据缓存6、Bootstrap的防冲突7、作用域外如何使用Button类8、Bootstrap的单元测试 Bootstrap的作用域Bootstrap每个插件都定义在下面这段作用域代码中: +f...原创 2013-12-04 19:43:03 · 521 阅读 · 0 评论 -
前端模块化
前端模块化解决什么问题?有了模块,我就可以很方便的使用别人的代码,想要什么功能,就用加载什么模块。但是,这样做需要有一个前提,那就是大家必须以同样的方式编写模块,否则就乱套了。所以组内需要有一套统一的模块规范。 如何实现模块?1、对象字面量的变体2、JS设计模式的模块模式3、采用成熟的库文件。前两种方式各模块的脚本被串在一起注入到DOM中,整个体系架构在这种模式下,可能...原创 2014-04-21 17:26:40 · 157 阅读 · 0 评论