Silentash-默尘

背景

异步跨域请求时JSONP方式是最靠谱的选择，常规的，被请求页面应该返回诸如此类的数据格式：
handleName="xxx";doSomething();...;

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

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

最近我做了一个任务，要把后台生成的HTML模板文件改造成JSONP的形式输出，供前端异步调用。
模板文件大致这样的格式：
<div class="xxx">
<h3>something</h3>
<div class="xxx">
she's
beautiful
</div>
</div>

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

分析

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

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

php代码:
handleName = '<?php @include_once("filePath") ?>';

实际操作中遇到了麻烦，原因是模板内容都是换行的，最后组织好的内容成了这样：
handleName = '<div class="xxx">
<h3>something</h3>
<div class="xxx">
she's
beautiful
</div>
</div>';


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

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

一、容易被忽略的局部变量
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。在变量声明语句执行时才会把赋值表达式的值指派给该变量，而并不是在该变量被创建时。

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

dean.edwards在被问及“不写代码的时候都在干些什么？”时非常囧地答道：“在测试和修bug(testing&debugging)”，这便是开发工程师共同的命运=.=! 我们整天都在编码、测试、Debug，忙的不亦乐乎。不过还好，有很多现成工具可以帮助我们更容易更快速地定位页面内的脚本问题，抽空还能偷个懒，简单搞个例子，看看它们是如何帮助我们的…

题目不知道如何去归纳了，总之本文的重点在后面，this关键字在函数调用模式时为何会绑定到全局变量，答案真的在后面^_^

一、函数表达式与函数声明
/*函数表达式*/
var test = function(){
console.debug('hello world');
}
/*函数声明*/
function test(){
console.debug('hello world');
}

两种方式并不是一致的，看下面的比较代码

test();//不会被执行，因为虽然test已经声明是一个变量，但还未被赋予任何类型的值
var test = function(){
do something
}


项目中用到的一个模态对话框效果，样式可以通过独立的 CSS 控制，可以在不同浏览器下统一表现，这种弹窗效果应该是非常常见的，技术上也没什么难度，我就是又把 YUI 的方法用原生方法重写了一遍，算是一个独立版本吧，在这里做个记录，分享下，以后可以在其他场合用到。

实例：Javascript 模态对话框

Javascript不愧是灵活的语言，活用一些运算符可以让脚本代码提高性能。
使用位运算符强制转换类型
格式：表达式 >> 0 或 表达式 << 0
1.非数字转换为数字，数字则继续保持原值，这个方法用来代替=比parseInt再好用不过

var a;
    a = 'ABC'>>0;//0，等价于NaN转换为Number
    a = '123'>>0;//123
    a = false>>0;//0


2.布尔true会被转换为1;

var a;
    a = true>>0;//1
    a = true<<4;//16


关于什么是匿名函数，及它带来的优势在本文就不深究了，先抛出一个常用的匿名函数：

(function(){alert('yo');})();


很多同学知道怎么用这种匿名函数，却或许并不明白为什么这样写就能够调用匿名函数。也许知道后面的圆括号是执行前面的函数，而并不清楚前面的圆括号具有何种含义！本文将带你了解匿名函数的代码模式原理……

尝试用面向对象的思想来写这个鼠标拖选的 DEMO 。
主要在于创建选取框和对象列表，遍历出在选框内地对象并获取，对获取的对象还可以再做进一步处理，比如加上群体拖动等效果。
演示页面：Javascript 鼠标拖选 Demo

获取DOM节点的方法有很多，如常用的getElementById()、getElementsByTagName()，前者返回一个节点元素，后者返回的是节点的集合。看似相同，实际上其中大有文章：
1、getElementById()
返回的节点可以保存到变量中，即便使用removeChild()方法移除，也能再通过保存的变量使用该节点。
测试下面的代码：
[code=html]

[/code]

2、getElementsByTagName()
返回的值仅仅是对DOM节点地址的引用，如果使用removeChild()删除节点，返回值是会变化的。可能用图示更清晰吧

测试下面的代码加深印象：
[code=html]

• hello world
• hello world2

[/code]