产品升级

公司产品经过一年的开发,已经日趋庞大,但是紧接着一系列的前端问题的出现,直叫我焦头烂额。

  • 产品依赖jquery库,但滥用jquery选择器及方法,导致了产品在IE 6下效率极差。
  • 产品好多组件是使用了一些开源的项目,例如jqgridhighchartjqueryui等,因为不同版本的冲突,导致后期版本升级困难
  • extTree组件的引入导致了许多问题,另:ext太庞大了。

紧接着便来解决问题吧。踌躇半天,准备升级到jquery     More....

闭包

闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现。

下面就是我的学习笔记,对于Javascript初学者应该是很有用的。

一、变量的作用域

要理解闭包,首先必须理解Javascript特殊的变量作用域。

变量的作用域无非就是两种:全局变量和局部变量。

Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量。

  var n=999;

function f1(){
alert(n);
}

f1(); // 999

另一方面,在函数外部自然无法读取函数内的局部变量。

  function f1(){
var n=999;
}

alert(n); //     More....

一些常用的css写法

1.让ie浏览器拥有display:inline-block属性:

*display:inline;*zoom:1;

2.IE和FIREFOX去除a标签的虚线框:

a { blr:expression(this.onFocus=this.blur()) } /*针对 IE*/
a { outline:none; } /*针对firefox等*/     More....

垂直居中的几种实现

用过 Fireworks / PhotoShop 的人应该都知道,在画布中将一个页面模块居中是多容易的事,可如果是垂直居中,前端就苦逼了。因为 CSS 本身并没有提供相应的 API 支持(确切来说是提供不全)。今天重新整理一下思路,说说前端在实现页面元素垂直居中的几种思路:

一、利用 position 和负边距

利用绝对定位,让元素的顶部与居中线对齐,再让元素上移 50% 的高度。这个应该不难理解。原理可以用下图来做一个可视化说明:

垂直居中

 

/* 代码实现:
 * 设定宽度和高度,父节点为 position:relative; CSS是这样写的:
 */
.selector {
     position:absolute;top:50%;。
     margin-top:-元素自身高度的一半;
}

二、使用 <table />

<table />     More....

ie Hack

在解决兼容方法上,想定出一个统一的规范,个人认为应该以下面3点为基本原则:

 

  1. 权衡成本:在浏览器被淘汰后,如何快速清理掉无用代码
  2. 可维护:在资源成本和完美间平衡的向后兼容
  3. 可读:省力、易记

这里把成本放在了第一位,并不是说我们不愿意追求完美,而只是,太刻意追求完美有时候可能会阻碍我们前进;在成本后,应该是可维护和可读,这点对于团队的合作来说至关重要,而最终结果也是为了减少成本。

先把这三个原则存起来,来看看我们平时解决兼容的写法(后面会附详细的Hack方法列表):

一、CSS 选择器     More....

css 背景半透明

透明作为一种效果增强的方案,被众多视觉设计师喜欢。但因为 IE 的原因,透明,特别是半透明,已经成为前端工程师最不愿意实现的东西。现在有一个需求,需要对一个纯色的层实现半透明效果。效果如下,边框需要透明,透明度为 #000000 的 30%:

背景半透明

用各种浏览器打开下面这个 DEMO, IE9 有特殊显示:

DEMO: 背景半透明最佳实践 »

一、使用 opacityAlpha Filter

看起来手挺简单的吧?嗯。挺简单的… 希望你能很方便实现这个方案!其实见到这个的时候,我们的第一想法当然是 background + opacity,在不支持 opacity 的 IE 使用 filter 的 alpha 滤镜来实现。然后,我们得到这样的效果:

    More....

CSS3 Animation

CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation;我们一起学习完了TransformTransition,让我们对元素实现了一些基本的动画效果,这些我想足以让大家激动了一阵子,今天我们趁着这个热劲继续第三个动画属性Animation的学习,单从Animation字面上的意思,我们就知道是“动画”的意思。但CSS3中的    More....

CSS3 Transition

W3C标准中对css3transition这是样描述的:“css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值。”

下面我们同样从其最语法和属性值开始一步一步来学习transition的具体使用

语法:

transition : [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'> [, [<'transition-property'> || <'transition-duration'> ||     More....

普人特福的博客cnzz&51la for wordpress,cnzz for wordpress,51la for wordpress