warwolf24-优快云博客

原创 JavaScript 中的执行环境、作用域（scope）以及变量提升（hoisting）

先看下面一段代码：var a = 0;alert("1st alert : a = " + a);function fun(){ alert("2nd alert : a = " + a); var a = 1; setTimeout(function(){ alert("3rd alert : a = " + a); a = 2;

2014-09-22 12:19:44 1434

原创 CSS中常见的BUG调试

1、布局——layout布局是windows提出的概念，用于控制元素的尺寸和定位。拥有布局的元素负责自身及其子元素的尺寸及定位，而没有布局的元素只能依靠最近的祖先元素进行控制。通常在IE6中出现的BUG，很可能是因为布局的缘故而产生的，因而修复IE中BUG的时候，第一件事就是尝试通过规则迫使元素拥有布局来看能否修复。默认情况下拥有布局的元素包括：body、html（标准模式下）、tab

2014-09-17 11:12:18 1558

原创 CSS 优先级和特指度

1、ID 选择符 > 类选择符 > 元素选择符，特指度高的优先级高2、行内样式 > 内嵌样式 > 链接样式3、设定的样式 > 继承的样式特指度的计算：特指度可以用一个公式 I-C-E 来计算，其中I 是 IDC 是 ClassE 是 Element对于一个 CSS 规则，若选择符中有一个 id，则 I 的值 +1；若选择符中有一个 class ，则 C 的值

2014-04-26 21:21:08 1473

原创 CSS 特殊选择符

1、子元素选择符 > ：父元素 > 子元素2、紧邻同胞选择符 + ：元素1 + 元素2 元素2 必须紧跟着元素13、兄弟选择符 ~ ：元素1 ~ 元素2 元素2 与元素1 同级并在元素1 之后，不一定紧跟4、通配选择符 * ：关于 * 有一个作用就是选择非子元素：p * a{ color: red;} 表示 p 的后代元素但非子元素中的 a

2014-04-25 13:58:05 1176 1

原创阿里巴巴Web前端面试的一道JS题目，求解答！！！

题目大概是这样的：function outer(){ return inner; var inner = "a"; function inner(){}; inner = 9;}alert(typeof inner());当时的回答是结果是——function （回来测试结果也是一样）本来的想法是，inner 在outer 执行的过程中，下面有一个函

2014-04-25 11:27:21 1950 5

原创块级元素与行内元素的区别

1、块级元素的盒子会扩展到与父元素同宽：这就是为什么块级元素独占一行的原因了。2、行内元素的盒子会收缩到包紧其内容：这也是为什么几个连续的行内元素会并排一行的原因。3、块级元素可以设置 width、height，而行内元素不行，行内元素的宽高是根据其内容定的。4、块级元素的margin 和 padding 设置没有问题，但是行内元素无法设置上下的 margin 和 padding。

2014-04-25 10:56:19 1276

转载 Web前端性能优化——CSS优化

1、避免使用 @import@import 最常见的用法是

2014-04-24 09:49:51 1305

转载 Web前端性能优化——使用Array.prototype.join代替字符串连接

一般情况下，我们会使用 “”

2014-04-24 09:49:31 1335

转载 Web 前端性能优化——控制DOM大小

（参考：http://www.gbtags.com/gb/share/1439.htm）

2014-04-24 09:49:16 1541

转载 Web 前端性能优化——使用索引对象

（参考：）

2014-04-24 09:48:51 1047

转载 Web 前端性能优化——把 JavaScript 中的对象存储在变量中

1、（参考：http://www.gbtags.com/gb/share/1482.htm）

2014-04-24 09:48:22 1282

原创 Web前端性能优化——高频触发事件的防抖

JS 提供了行为层的支持，为用户提供了交互的操作性。然而，部分事件却经常有意无意的被频繁触发，比如浏览器窗口的 resize 事件，某个元素的 mouseover 事件，如果处理触发事件的回调函数过重，那么最后的结果就是浏览器死掉。为此，如何提供一种对此类事件的高频触发的防抖是相当重要的。所谓的防抖，就是在一定时间内，规定事件被触发的最多次数。参考：http://www.gbtags.

2014-04-23 17:17:56 4015

转载 Web前端性能优化——DocumentFragment或innerHTML取代复杂的元素注入

转载自：http://www.gbtags.com/gb/share/1215.htm

2014-04-22 21:30:03 1627

原创 CSS 布局总结——变宽度布局

变宽度布局1-2-1 等比例变宽

2014-04-22 13:18:27 1586

原创 CSS 布局总结——固定宽度布局

固定宽度布局单列布局固定宽度的单列布局中，外层指定宽度（如果没指定宽度，会自动伸展），设置 margin: 20px auto; 实现居中即可。HTML结构：单列固定宽度 Page Header

2014-04-18 11:34:08 2040

原创腾讯web前端实习一面

参加了笔试后已经感觉要跪了，让一个搞前端的去做C++，整份卷子就一道JS选择题，还差点做错了。昨天大家陆续收到通知，等到晚上手机依然没有动静，在挣扎着要不要去霸面的时候，23：20左右，来了一封邮件，让去面试。半夜11点半，让第二天早上去面试，这下是真的跪了，简历都没打出来。赶紧各种准备，看JS，看CSS，所有关于前端的，能浏览多少算多少了。早上起来打了简历就往华工出发。到了酒店，排队签到，拿

2014-04-15 19:38:05 2625

原创 JavaScript 闭包及其机制

首先要区分两个概念，一是匿名函数，一是闭包。所谓匿名函数，就是创建函数没有给定函数名。经常出现的包括函数表达式，就是定义一个匿名函数，然后将函数赋值给某个变量，而此时这个变量就相当于该函数的函数名，例如：var sayHi = function(){ alert("Hi");}; //注意这个分号sayHi(); //调用函数还有一种常用匿名函数的情况是回调函数，如 JQue

2014-04-14 15:15:27 1688

原创 CSS 注意点

1、行内元素之间水平的 margin 取总和；块级元素之间竖直的 margin 取大者；子元素的 margin 会作为父元素的内容，超过时会发生溢出，但在 IE 低版本中会自动扩大父元素。2、没有设置 width 的盒子会自动向右伸展，直到不能伸展为止，即是伸展到父元素所能容纳的大小为止，此时的 width 值即为伸展之后的值。当设置了 float 后，则不会伸展，而是根据内容确定 w

2014-04-11 16:34:20 875

原创 JS 基础知识点总结

1、标签加载外部 JS ： 1）defer="defer" ：延迟脚本，脚本立即下载，但延迟执行，按顺序执行。 2）async="async" ：异步脚本，脚本立即下载，但延迟执行，顺序不定。注：实现 JS 异步的另一个方法是动态创建 wen2、文档模式：混杂模式和标准模式。（主要是影响 CSS，但会对部分 JS 有影响） 1）混杂模式：令 IE

2014-04-11 16:31:30 1720

原创 WinJS 初体验

利用 HTML + CSS + JS 就可以在 VS 中开发出一个 win8 app 对于前端开发人员来说无疑是令人兴奋的。首先看看在 VS 中新建一个项目后的基本架构（刚刚结束的 Build 2014 大会的 VS2013 update1 提供了一种 universal app 模版，以支持 app 在 Windows 和 Windows Phone 上运行，这里只关注 Windows Ap

2014-04-03 21:45:31 3289

原创 Silverlight 8.1 关键变化

对比 Windows Phone 8 apps ，Sliverlight 8.1 apps 的主要变化有以下几点：1、异常处理将 app 升级到 Sliverlight 8.1 后可能会出现运行时错误。部分 API 可能会抛出潜在的错误，若没有将涉及的代码放在 try 中，则可能会是引起运行时错误的源头。2、Sliverlight 8.1 apps 与 Windows Store ap

2014-04-03 09:16:53 1233

原创 Visual Studio 中创建 Sliverlight 8.1 App

为 Visual Studio 2013 安装 update 1 后，就可以创建 App由于 Windows 和 Windows Phone 共享一个开发平台，Visual Studio 2013 提供了一种 universal app 模版，以支持 app 在 Windows 和 Windows Phone 上运行。windows app 提供更多的模版，所以在

2014-04-03 09:16:16 1179

原创 JavaScript DOM 基础知识点

《JavaScript DOM 编程艺术》《JavaScript 高级程序设计》平稳退化和渐进增强在 JavaScript DOM 编程艺术一书中，个人认为，最核心的思想是作者提到的平稳退化和渐进增强。所谓的平稳退化，就是让JS代码适应所有的用户，这是一个基础，不管用户处于什么环境，都要为用户提供最基本的可访问性。而渐进增强则是为高级用户提供更好的体验效果，利用JS去包装原

2014-03-31 20:48:23 1233

原创 JavaScript 继承

参考《JavaScript 高级程序设计（第3版）》在 JavaScript 中实现继承，有两种基本方法，一种是使用原型链，令子类的原型是父类的一个对象；另一种是借用构造方法，在子类的构造方法中使用call方法或apply方法调用父类的构造函数。但这两种方法基本上都很少单独使用，而是采用组合式的继承。一、原型链//定义父类function Person(){

2014-03-27 22:11:54 1015

原创创建 JavaScript 对象

参考《JavaScript 高级程序设计（第3版）》一、工厂模式采用广为人知的工厂模式，抽象了创建具体对象的过程，定义函数来创建对象。说的简单点，就是定义一个可以返回一个对象的函数，然后将对象的属性方法封装在函数中。function makeCar(id,name){ var car = new Object(); car.id = id; car

2014-03-26 12:02:25 718

原创事件委托

常见的导航栏中，li 的 onclick 事件，常常需要为每个 li 添加各自的事件。而采用事件委托的话，则可以通过事件冒泡，只需要为 ul 指定处理事件，就可以管理各个 li 的事件。 A B C若需要为三个 li 添加处理程序，常见的是：var a = document.getElementById("a");var b = docum

2014-03-26 11:04:39 982

原创 JavaScript 通用函数整理——事件对象

参考《JavaScript 高级程序设计（第3版）》《JavaScript DOM 编程艺术（第2版）》实现平稳退化和渐进增强，就必须分离结构层、表示层、行为层。定义跨浏览器的 EventUtil 对象：var EventUtil = { //获取事件对象 getEvent： function(event){

2014-03-26 10:33:55 749

原创 JavaScript 通用函数整理——添加/删除事件处理程序

参考《JavaScript 高级程序设计（第3版）》《JavaScript DOM 编程艺术（第2版）》实现平稳退化和渐进增强，就必须分离结构层、表示层、行为层。定义跨浏览器的 EventUtil 对象：2014/3/251、添加事件处理程序和删除事件处理程序var EventUtil = { //添加事件处理程序 addHandle

2014-03-25 17:54:20 1269

warwolf