Silentash-默尘

doctype与hover伪类

nunumick — Tue, 24 Aug 2010 16:06:33 +0000

开发过程中将demo中的内容拆分进各子模块，发现之前好好的 hover 效果失效了，我排查的结果是因为在模块中没有定义doctype，页面默认使用 quirks mode，会导致非链接标签的 hover 伪类在 IE7/8 和 firefox 均失去效果。

我们通常认为的非 IE6 以下浏览器都支持链接以外元素的 hover 伪类，其实还需要依赖 doctype，比如这样的代码就在 IE7/8 和 firefox 失去效果：


    
        
    
    
        hover字体变红
        hover字体变红,Quirks mode下失效

从MSDN找到相关说法：

Internet Explorer 7 and later, in standards-compliant mode (strict
!DOCTYPE), can apply the :hover pseudo-class to any element, not merely
 links.

而 Firefox 与 IE 也有区别，Firefox 下用标签名作为选择器可以使 hover 伪类恢复效用：


    
        
    
    
        hover字体变红
        hover字体变红

用PHP将HTML页面转换为JSONP

nunumick — Sat, 24 Jul 2010 03:05:58 +0000

背景

异步跨域请求时JSONP方式是最靠谱的选择，常规的，被请求页面应该返回诸如此类的数据格式：

handleName="xxx";doSomething();...;

需要时，我们还可以返回其他的JS语句，只要符合语法即可。

- – - – - – -分割线- – - – - – -

最近我接手一个任务，要把后台生成的HTML模板文件改造成JSONP的形式输出，供前端异步调用。
模板文件大致这样的格式：


   something
   
      she's
      beautiful

制约条件：模板页面我不能动，因为它还需要被其他模板页面引用

分析

由于受到制约不能更改模板页面的内容，将其改造成JSONP形式很有难度，新建一个页面进行组织必不可少，我起初把步骤分为：

新建页面(php)
引入模板页面 @include
用单引号包含之
在其头部加上handleName = ，在其后加上分号结束
输出

php代码:

handleName = '';

实际操作中遇到了麻烦，原因是模板内容都是换行的，最后组织好的内容成了这样：

handleName = '
   something
   
      she's
      beautiful
   
';

赋值表达式换行在JS里是不合语法的！
she’s的单引号更是扰乱了这个赋值表达式…

格式化来源文件势在必行！

实现

1.编写过滤脚本：

2.用php的file_get_contents方法打开模板文件，取其内容赋值给变量

如果不放心模板文件是否存在是否可读，还可以加入判断

3.输出内容

handleName = '';

成果

handleName = 'something

 she\'s beautiful';

所有内容合并为一行，引号也做好转义，不必再担心不可控的问题引起脚本错误。

结言

此举关键是要获取外部文件内容，并能对之进行控制，file_get_contents很好用!

参考文献：http://www.ibm.com/developerworks/cn/opensource/os-php-readfiles/index.html

Comments

2010年08月24日, gonghao writes: 哈哈，这个东西我也是刚刚做一个需求的时候用到啊，前面的步骤基本一样哈，只是在处理引号的时候，用了addslashes这个函数直接来处理哈~
2010年08月24日, 狂热 writes: 来支持朋友你的好文章！

Embed标签src重载

nunumick — Tue, 25 May 2010 07:20:37 +0000

标签可用于在页面内嵌入 flash 文件，比较常见的就是在博客内嵌入视频，如嵌入世界杯主题曲：

接到一个小需求：需要动态更新 embed 标签的 src 属性，拿上面的代码为例，很容易找到思路：

1.获取embed标签
2.setAttribute('src')

类似于对待 img 标签。

遗憾的是，此法对于 ie 浏览器并不奏效，给 src 加上时间戳也无济于事。
最后无奈用更新dom节点的方式才得以实现。
各浏览器在处理 embed 重载时并不尽相同，在此简单做了测试：Demo

测试结果：
Y：响应重载
N：不响应重载

	IE(6/7/8)	Firefox	Chrome	Safari	Opera
重载(refresh movie)	N	Y	N	N	Y
更换(change movie)	N	Y	N	N	Y
Display显示/隐藏	N	Y	Y	Y	Y
Visibility显示/隐藏	N	N	N	N	N
设置innerHTML	Y	Y	Y	Y	Y
Display hide > Change movie > Display show	N	Y	Y	Y	Y

Comments

2010年05月25日, 龙藏 writes: 很好~~~ 转至本人blog
2010年05月26日, 博客外汇 writes: 这。。。到底那里是原来的呢？
2010年05月26日, nunumick writes: @博客外汇，什么情况？
2010年05月27日, 狂热 writes: 嗯，学习了，以后收藏来用！

容易被忽略的JS脚本特性

nunumick — Tue, 18 May 2010 18:52:17 +0000

一、容易被忽略的局部变量

var a = 5;
(function(){
   alert(a);
   var a = a ++;
   alert(a);
})()
alert(a);

思考这段代码的执行结果。

执行后，看看是否和你想象的一致？

ok，这段代码里核心的知识点是 var a = a++，其中两个变量 a 都是匿名函数内部的局部变量，是同一个，和全局变量 a 是不一样的。

为什么？我们来看看ECMA规范对变量声明语句的定义：

Description
If the variable statement occurs inside a FunctionDeclaration, the
variables are defined with function-local scope in that function, as
described in s10.1.3. Otherwise, they are defined with global scope
(that is, they are created as members of the global object, as described
in 10.1.3) using property attributes { DontDelete }. Variables are
created when the execution scope is entered. A Block does not define a new
execution scope. Only Program and FunctionDeclaration produce a new
scope. Variables are initialised to undefined when created. A variable with
an Initialiser is assigned the value of its AssignmentExpression when the
VariableStatement is executed, not when the variable is created.

声明中提到：进入作用域环境后，变量就会被创建，并赋予初始值undefined。在变量声明语句执行时才会把赋值表达式的值指派给该变量，而并不是在该变量被创建时。

因此上面的代码可以等价于:

var a;
a = 5;
(function(){
   var a;
   alert(a);
   a = a ++;
   alert(a);
})()
alert(a);

这样应该会更容易理解了吧。

二、容易被忽略的全局变量

(function(){
   var a = b = 5;
})()
alert(b);

这是玉伯几天前分享到的知识点，蛮有意义的，在此也做个分析。

首先，考虑执行结果为什么是：5。

ok,原因出在 var a = b = 5 这句。

为深入分析这个语句，我们继续要参照ECMA规范对声明语句的定义：

var a = b = 5;等同为 var a; a = b = 5;两条语句，后者是赋值表达式，其在ECMA中的定义是这样的：

Simple Assignment ( = )
The production AssignmentExpression : LeftHandSideExpression =
AssignmentExpression is evaluated as follows:
1. Evaluate LeftHandSideExpression.
2. Evaluate AssignmentExpression.
3. Call GetValue(Result(2)).
4. Call PutValue(Result(1), Result(3)).
5. Return Result(3).

对于a = b = 5;先执行左边表达式 a，这是一个标识符表达式，根据规范第 10.1.4，其执行方式如下：


During execution, the syntactic production PrimaryExpression : Identifier
is evaluated using the following algorithm:
1. Get the next object in the scope chain. If there isn't one, go to step 5.
2. Call the [[HasProperty]] method of Result(1), passing the Identifier as
the property.
3. If Result(2) is true, return a value of type Reference whose base
object is Result(1) and whose property name is the Identifier.
4. Go to step 1.
5. Return a value of type Reference whose base object is null and whose
property name is the Identifier.

搜寻作用域链，找到最近的一个 a 的引用，很明显，在匿名函数内部作用域就可以找到，于是变量 a 确定下来。

接着再执行右边的表达式 b = 5 ，还是一个赋值表达式，重复赋值规则第一步，因为变量 b 在匿名函数环境内未声明过，所以接着去 window 全局环境下去找 window.b ，被隐式声明为全局变量，最后赋值为 5，根据规则第五步，表达式的结果也会再赋值给 a。最终达到 a 和 b 都为 5 ，区别是 a 是局部变量，而 b 是全局变量。

我们再来理一下 (function(){var a = b = 5})() 表达式内部整体的执行顺序：

1.匿名函数内创建变量a;
2.赋予初始值undefined;
3.取得变量a的引用;   //a
4.取得变量b的引用;   //window.b
5.对数字5求值;
6.赋值5给b的引用：window.b;
7.返回b = 5的结果5给a的引用：a;
8.返回a = 5的结果5；

很明显，中间的一个步骤使得变量 b 被声明为全局变量，明白之后，我们不难找到代码的优化点：只需将变量 b 显式声明为局部变量：

(function(){
   var a,b;
   a = b = 5;
})()

Comments

2010年05月19日, simaopig writes: 呵呵，拿来当面试题不错。喜欢你们这种去查ECMA手册的方法，我就比较懒。知道结果，解释起来却费劲的很。
2010年05月19日, 涵宇 writes: 好文！包含了很多知识点，解释的简明易懂，佩服！究其所以然的方式方法值得学习

慎用通配符选择器

nunumick — Tue, 06 Apr 2010 13:53:38 +0000

一、通配符选择器没有优先级

   div{background:#f00}
   *{background:#000}

前者优先级更高。

   *.hello{color:#f00}
   .hello{color:#000}

两者优先级一样，后来至上。

二、通配符选择器样式污染

   #showEveryThing * {display:block}

将使 showEveryThing 内部所有元素显示为块元素，包括