web前端
文章平均质量分 68
众乐-Ryan
字节gip前端业务架构团队
展开
-
为什么控制台打印{}+[]===[]+{}为false?
事由前几天有人在微博上发了一张图片(回微博找)原创 2014-06-13 00:44:08 · 1054 阅读 · 2 评论 -
使用1个标签,2个标签,3个标签,5个标签实现一个十字架
2、请使用1个标签,2个标签,3个标签,5个标签实现一个如下图的水平、垂直都居中短边为50px,长边为150px的在界面垂直和水平居中红色十字架。(网上已经很多答案,你还能想到哪些方法,不限浏览器)实现代码如下: /**包裹div样式*/ div.container{ width: 150px; height:150px; float:left;原创 2014-12-19 17:04:52 · 1098 阅读 · 0 评论 -
纯CSS实现IOS开关效果
同事早上展示了一款没有使用js完全使用CSS实现的模仿IOS开关的效果,很有意思。在跟其交流了基本的思路后模仿实现了一下。基本的原理利用label与checkbox类型的input的关联关系(点击关联的label引发checkbox不同的状态),然后根据checkbox不同的状态就能去做不同状态下的CSS3动态变换。实现代码 div.container{ } di原创 2015-01-07 11:55:28 · 2163 阅读 · 0 评论 -
为sublime text安装AngularJS插件
sublime能够支持AngularJS开发那绝对是一件很爽的事情。下面我一步步讲解如何为sublime安装AngularJS插件。1、添加控制包站点根据你安装sublime 版本不同,在控制台写入不同的代码 :控制台打开方法:View > Show Console 或者 快捷键 ctrl+` Sublime Text 3:import urllib.reques原创 2015-01-07 16:33:24 · 12309 阅读 · 0 评论 -
页面渲染:重绘,回流/重排,重塑
原文:Rendering: repaint, reflow/relayout, restyle5个翻译 2014-11-16 17:14:46 · 2357 阅读 · 0 评论 -
移动端meta标签搜集
原创 2014-09-25 17:39:38 · 920 阅读 · 0 评论 -
如何判断样式表何时真正加载完
我们经常有通过插入一个link节点来加载css文件的需求。翻译 2014-08-30 17:30:20 · 1480 阅读 · 0 评论 -
如何使用Uglify2.js分析函数中的依赖项
大家都知道,require.js遵循CMD规范,sea.js遵循自创的AMD原创 2014-08-27 00:43:50 · 1305 阅读 · 0 评论 -
一个代码滥用的例子
原文地址:Code Abuse吉姆的一个客户的翻译 2014-08-16 15:03:03 · 643 阅读 · 0 评论 -
从一段Deferred代码片段想到的
今天读到一篇解析jQuery源码的文章,从中抽象出了这么一段代码:$.Deferred(function(){ var me = this; setTimeout(function(){ console.log("执行结束"); me.resolve('参数'); }, 3000); return this.promise();}).done(function(){aler原创 2014-12-31 17:21:36 · 449 阅读 · 0 评论 -
初识Object.defineProperty
ECMAScript 262v5带来的新东西,FF把它归入为javaScript 1.8.5的功能之一。先看看MSDN上的描述:增加一个属性到对象,或者修改已经存在的属性。语法:Object.defineProperty(object,propertyname,decripter);obejct必须(也可以用null),增添或修改属性的对象,可以JavaScript原生对象原创 2014-12-31 15:34:10 · 976 阅读 · 0 评论 -
<转>监测用户浏览器是否有缩放
用于判断用户的浏览器是否有缩放库:!function(window){ var document = window.document; function user_agent(){ var ua = navigator.userAgent.toLowerCase(); if (ua.indexOf('msie')>=0) {转载 2015-01-02 16:54:22 · 872 阅读 · 0 评论 -
React:创建同时受控与非受控的组件
提示:考虑到react的少状态设计,这里提到的方案可能是反模式。 我们都知道,有许多的web组件可以被用户的交互发生改变,比如:<input>,<select>,或者是我现在正在使用的富文本编辑器。这些组件在日常的开发中很不显眼,我们可以很轻易的通过输入一些内容或者设置元素的value属性来改变组件的值。但是,因为React是单向数据流绑定的,这些组件可能会变得失控: 1.一个维护它自己s翻译 2016-08-04 18:21:35 · 3955 阅读 · 0 评论 -
优秀文章以及实用库记录
一、实用库1、雪花飘落效果:点击打开链接2、JavaScript与元素间的抛物线轨迹运动:点击打开链接二、优秀文章:1、前端代码规范及最佳实践:点击打开链接2、七天学会NodeJS:点击打开链接3、Vue.js入门教程:点击打开链接4、grunt新手上路:点击打开链接5、jQuery源码剖析:点击打开链接原创 2014-12-31 11:24:18 · 634 阅读 · 0 评论 -
GPU:合成加速
公司内部同事翻译的一篇技术文章,很多干货,讲解了浏览器渲染的一些原理的东西,值得一读。转载 2015-10-14 16:58:31 · 4186 阅读 · 0 评论 -
模拟新浪微博评论textarea输入框随着输入内容增多输入框高度自适应
新浪微博的评论,随着你输入文字增多,高度的增加,textarea也会随着不变的变高。该效果网上有现成的jQuery插件,但是并不是很好用。我改造了下,直接上代码:/** * TextAreaExpander plugin for jQuery * v1.0 * Expands or contracts a textarea height depending on the * quati原创 2014-12-31 11:33:39 · 2626 阅读 · 1 评论 -
jQuery判断一个元素是否是另一个元素的子元素(或其自身)
jQuery判断一个元素是否是另一个元素的子元素(或其自身)的简单实现://判断:当前元素是否是被筛选元素的子元素jQuery.fn.isChildOf = function(b){ return (this.parents(b).length > 0);};//判断:当前元素是否是被筛选元素的子元素或者本身jQuery.fn.isChildAndSelfOf = func转载 2015-03-26 19:19:58 · 2341 阅读 · 0 评论 -
Arale Base源码分析(含Attribute)
Attribute的源码解析:--注:这部分的源码阅读起来比较费劲,可能解析的还不太到位,后续会多读几遍增添新的解释,后面随时更新。// 负责 attributes 的初始化// attributes 是与实例相关的状态信息,可读可写,发生变化时,会自动触发相关事件exports.initAttrs = function(config) { // initAttrs 是在初始化原创 2015-03-27 15:44:09 · 793 阅读 · 0 评论 -
CSS3动态效果收集
CSS3能够给页面上的元素提供很多炫酷且有趣的效果。本篇博客就是记录各种CSS3动态效果的实现,以备需要时查询。当然,animate.css已经收集了足够多的动画效果,我们也可以积累属于自己的其中没有的一些动态效果,来增添网站的趣味性。1、:hover背景色更改,文字小的动画改变代码如下:HTML/CSScss代码如下:a{ display: block; width: 1原创 2014-12-27 10:31:10 · 919 阅读 · 0 评论 -
如何创建没有new能实例化的构造函数
众所周知,在js里是没有真正的类这个饿概念的(以后的版本会加入),通常我们所谓的类就是用new来构造实例的普通函数。通常实例化一个构造函数的时候,里面的this是指向被实例化的实例的。如下示例所示:function Ins(){ this.a = 1;//this指向类似于下面的ins实例 this.b = 2;}var ins = new Ins();但有的时候原创 2015-01-22 12:56:34 · 2469 阅读 · 0 评论 -
Backbone.js源码分析系列之Collection模块
// Backbone.Collection // ------------------- // If models tend to represent a single row of data, a Backbone Collection is // more analogous to a table full of data ... or a small slice or pag原创 2014-08-09 01:24:11 · 1101 阅读 · 0 评论 -
HTML5 canvas创建粒子效果
原文地址:http://modernweb.com/2014/06/25/creating-particles-in-html5-canvas/翻译 2014-07-25 00:33:47 · 5598 阅读 · 0 评论 -
不要给你的input元素设置“action”或“submit”
大多数的浏览器都有一个严格意义上来说不能算作bug的bug。翻译 2014-05-22 01:11:57 · 2069 阅读 · 0 评论 -
window.requestAnimationFrame()
window.requestAnimationFrame()方法告诉浏览器翻译 2014-05-19 23:33:55 · 3254 阅读 · 0 评论 -
Javascript – 原型继承真正的工作方式(by Vjeux)
作者:Vjeux原文链接:翻译 2014-05-18 20:34:14 · 844 阅读 · 0 评论 -
(译)如何在webkit中触发(避免)重排
原文地址:How (not) to trigger a layout in WebKit翻译 2014-05-18 11:00:53 · 1558 阅读 · 0 评论 -
简单的JavaScript继承(By John Resig)
我想萃取有关继承技术的精华部分到一个简单的、可重用、容易理解且不会有任何其他依赖的形式实现。此外,我也想让这个结果简单而且非常有用。这有一个我想要的效果的例子:var Person = Class.extend({ init: function(isDancing){ this.dancing = isDancing; }, dance: function(){ r翻译 2014-05-18 20:49:12 · 1391 阅读 · 0 评论 -
currentStyle、getComputedStyle
周末写了个原生的animation组件,其中使用原生的document.getElementByIdx_x('...').style来获取元素的相关样式值,但是奇怪的是获取不到相应的值:body{margin:0 auto;text-align:center;}div{position:relative;left:10px;}var dom1 = doc原创 2014-05-18 20:18:06 · 646 阅读 · 0 评论 -
javascript中的类式继承
作者:Douglas Crockford原文链接:http://www.crockford.com/javascript/inheritance.html翻译 2014-05-18 21:03:10 · 584 阅读 · 0 评论 -
IE7下jquery报“意外调用了方法和属性访问”错误的解决方案
在IE7下面若执行如下语句:原创 2014-05-16 16:49:17 · 1304 阅读 · 0 评论 -
对jQuery ajax请求成功(失败)回调执行前的统一处理(兼容较老版本jQuery)
目前的项目中有这样的需求,原创 2014-05-22 21:44:37 · 10260 阅读 · 0 评论 -
不要使用元素的value存取数据
元素value的一些问题元素的value原创 2014-06-07 00:30:04 · 1258 阅读 · 2 评论 -
关于位运算符的几点应用
位运算符是一种对数字进二进制运算原创 2014-06-26 17:52:00 · 772 阅读 · 0 评论 -
jQuery移除元素自动解绑事件实现
世界本该如此!所以,在现代浏览器,如果你将一个元素从DOM树种进行移除的时候,浏览器会自动帮你绑定的事件进行解绑以释放其占用的内存。也许你猜到了,较老版本的浏览器则不会主动去做这件事,所以,当你的应用在较老版本的浏览器运行的越久,其消耗内存越多,应用就会变得越来越卡。因此,需要我们自己对要删除的元素进行事件解绑。实现思路用jQuery将元素移除的基本方法有两个,一个是remove()方原创 2014-05-30 14:23:37 · 2226 阅读 · 0 评论 -
对JavaScript密码学的批判
介绍如果更考究一点翻译 2014-07-14 21:36:15 · 676 阅读 · 0 评论 -
纯css(无图片)实现带边框三角指示图标
我们在平常的开发过程中经常碰到需要一个三角的指示小图标,原创 2014-07-21 21:18:28 · 2397 阅读 · 0 评论 -
编写可测试的前端代码第二部分 – 从反模式进行重构
这是“如何编写可测试的Javascript代码”翻译 2014-05-25 21:09:06 · 652 阅读 · 0 评论 -
正则表达式巧妙实现字符串去重
今天上午看到新浪的一个面试题:将字符串 "adsfjjbkk"处理,就是连一起重复的字符删除,变成“adsfjbk”,写出实现代码。当然了,实现原创 2014-06-10 13:14:07 · 17840 阅读 · 2 评论 -
理解JavaScript函数调用和"this"
作者:Yehuda Katz原文链接:http://yehudakatz.com/2011/08/11/understanding-javascript-function-invocation-and-this/多年以来,我看到了许多人对于JavaScript函数调用方面存在困惑与不解。特别是许多人会抱怨,"this"在函数调用中的语义是令人疑惑的。在我看来,通过理解核心函数调用的原始翻译 2014-06-09 11:11:24 · 652 阅读 · 0 评论 -
Javascript将节点列表(NodeList)转化为数组(Array)
你有没有想过将数组的功能应用于翻译 2014-05-25 01:17:32 · 3507 阅读 · 0 评论