Blog

19 search results for:

1

css盒模型彻底研究

/ in Blog / by simon
关于css盒模型的解说在网上到处都有详细的讲解,相信大家都有所了解了吧。今天借着与同事一起讨论关于css的一些难点问题,最后发现还是对css的核心了解的不是很透彻。借此雅兴重新谈谈css盒模型究竟是个什么玩意。 请看图(1): Margin Padding Content (图1) (图1)是通过CSS的background,padding,margin,color,border,text-align,width,height等属性进行样式化后得到的一个类似与css盒模型的表示图。 以下代码是图1部分的css样式表: [code lang="css"] .out-div { color: red; border: 1px dashed #aaa; width: 400px; height: 300px; margin: 0 auto; text-align: center; background: #fff; }…
2

javascript变量作用域之我见

/ in Blog / by simon
相信大家都知道,javascript中变量作用域只有两种,全局作用域与函数中的局部 作用域(有人认为不同script节点间也存在一种作用域,称之为段作用域,理由是在后面的script的节点中定义的变量,在这个script节点没有 被解析之前,前面的script节点是不能访问这个变量的,这种依赖于代码解析顺序的特殊情况,不在我们这篇文章的讨论之列)。 比如下面的代码: var a = 1; function f(b){ var c = 2; } a就是我们声明的全局变量,c就是我们声明的局部变量,b作为函数f的形参,也是一个局部变量。 我们再看下面的代码: function outer(){ var o; function inner(){ var i; } } 可以看到o和i都是局部变量,只不过o的作用域范围为函数outer的函数体,而i的作用域范围为inner的函数体。 我们再看一段代码: var…
3

javascript之prototype学习笔记

/ in Blog / by simon
首先,Javascript中每个对象都有prototype属性,他是用来返回对象类 型原型的引用的。我们使用prototype属性提供对象的类的一组基本功能。并且对象的新实例会"继承"赋予该对象原型的操作。但是这个 prototype到底是怎么实现和被管理的呢? 对于对象的prototype属性的说明,Javascript手册上如是说:所有 Javascript内部对象都有只读的 prototype 属性。可以向其原型中动态添加功能(属性和方法),但该对象不能被赋予不同的原型。然而,用户定义的对象可以被赋给新的原型。 下面我们看三个经典的prototype属性的使用示例。 为脚本环境内建对象添加方法 Array.prototype.max = function() { var i,max = this[0]; for(i=0; i<this.length; i++) { if (max<this[i]) max = this[i]; } return max; }…
4

JavaScript继承详解

/ in Blog / by simon
这一章我们将会重点介绍JavaScript中几个重要的属性(this、constructor、prototype), 这些属性对于我们理解如何实现JavaScript中的类和继承起着至关重要的作用。 this this表示当前对象,如果在全局作用范围内使用this,则指代当前页面对象window; 如果在函数中使用this,则this指代什么是根据运行时此函数在什么对象上被调用。 我们还可以使用apply和call两个全局方法来改变函数中this的具体指向。 先看一个在全局作用范围内使用this的例子: 函数中的this是在运行时决定的,而不是函数定义时,如下: // 定义一个全局函数 function foo() { console.log(this.fruit); } // 定义一个全局变量,等价于window.fruit = "apple"; var fruit = "apple"; // 此时函数foo中this指向window对象 // 这种调用方式和window.foo();是完全等价的 foo(); // "apple"…
5

使用javascript检测浏览器的相关特性

/ in Blog / by simon
一、检测浏览器的名称 问题: 不同的浏览器对JavaScript的标准支持也有不同,有时希望脚本能够在不同的浏览器上都能运行良好,这时需要对浏览器进行检测,确定其名称,以针对不同的浏览器编写相应的脚本。 解决方案: 使用navigator对象的appName属性。 比如,要检测浏览器是否为IE,可以这么做: var isIE = (navigator.appName == "Microsoft Internet Explorer"); document.write("is IE?" + isIE); 对于FireFox,navigator对象的appName属性值为"Netscape";Opera9.02的 appName属性值为"Opera"(其更早版本可能不同); 二、检测浏览器的版本号: 问题: 随着浏览器的版本的更迭,浏览器所支持的脚本特性也在变化,有时候就需要针对不同的版本编写相应的脚本,那么如何获得浏览器的版本号? 解决方案: 通过解析navigator对象的userAgent属性来获得浏览器的完整版本号。 IE将自己标识为MSIE,后面带一个空格,版本号以及分号。所以我们只要取空格和分号之间的部分即可。如Windows XP SP2所带的IE的userAgent属性值为"Mozilla/4.0 (compatible; MSIE…
6

优化网站性能 提高网站速度访问速度的14条实践

/ in Blog / by simon
相信互联网已经越来越成为人们生活中不可或缺的一部分。ajax,flex等等富客户端的应用使得人们越加“幸福”地体验着许多原先只能在C/S实 现的功 能。比如Google机会已经把最基本的office应用都搬到了互联网上。当然便利的同时毫无疑问的也使页面的速度越来越慢。自己是做前端开发的,在性能方面,根据yahoo的调查,后台只占5%,而前端高达95%之多,其中有88%的东西是可以优化的。 以上是一张web2.0页面的生命周期图。工程师很形象地讲它分成了“怀孕,出生,毕业,结婚”四个阶段。如果在我们点击网页链接的时候能够意识到 这个过程而不是简单的请求-响应的话,我们便可以挖掘出很多细节上可以提升性能的东西。今天听了淘宝小马哥的一个对yahoo开发团队对web性能研究的 一个讲座,感觉收获很大,想在blog上做个分享。 相信很多人都听过优化网站性能的14条规则。更多的信息可见 1. 尽可能的减少 HTTP 的请求数 [content] 2. 使用 CDN(Content Delivery Network) [server] 3. 添加 Expires 头(或者 Cache-control ) [server] 4. Gzip 组件 [server] 5.…

Need Translation Service?

Please enter your personal details and we will contact you shortly.