JavaScript修炼之道の笔记

JavaScript修炼之道

章一 .JavaScript必备操作

1.动态选择方法和属性：

JavaScript允许使用方括号进行选择属性和方法

JavaScript两种等价成员访问语法：

obj[expressResultingInMembername]==obj.memberName

但是，JavaScript并不允许使用点操作符直接访问属性：

在方括号中可以使用任何代表成员名称的内容来访问对象的成员，这些内容包括字面量、保存着成员名称的变量、名称组合以及三元操作符实现的快速if/then选择。这些内容先被处理成字符串，然后JavaScript会用这个字符串来寻找对应的成员。

JavaScript中的函数也是对象，因此可以被引用。若一个表达式的结果是函数，可以直接使用括号操作符调用它，就像直接用函数名称调用函数一样。

2.通过模块模式实现代码访问控制：

模块模式的思想：为那些需要使用var关键字声明的标识符和函数创建一个私有作用域，只有定义在这个作用域里的函数才能直接访问这些数据。为了使外界能够访问到函数里的部分内容，有两种方法：1.返回一个包含选定值的对象，然后把这个对象赋给外界的变量；2.给函数传入一个外部作用域可访问的对象作为参数，使该函数能在这个对象中写入自己的属性。

Ps：var声明的标识符为局部的；未使用var声明的标识符为全局的

Ps：尽可能使用命名函数表达式定义函数，即function myFunctionName（…）{…}

3．使用可选/可变/命名参数;

Ps:JavaScript中所显示声明的形参不会对实参造成限制。形参实际上只是为实参提供了本地名称。如果形参与实参的数量一致，则这些形参会引用实参的内容，否则，空缺的参数会被赋予undefined

代码参考：

/**
 * Created by sxt on 2017/1/25.
 */
/*
var love={
    firstName:"Elodie",
    lastName:"Porteneuve"
};
var useFirstName=true;
console.log(love[useFirstName?'firstName':'lastName']);
*/

/*
var obj=(function(){
    var privateFiled=42;
    var publicFiled="foobar";
    function processInternals(){console.log('Internal stuff:'+privateFiled);}
    function run(){
        processInternals();
        console.log('Still private stuff:'+privateFiled);
        console.log('Public stuff:'+publicFiled);
    }
    return {
        publicFiled:publicFiled,
        run:run
    };
})();
obj.run();
obj.publicFiled;
//obj.processInternals();
obj.privateFiled;
*/

/*
function repeat(rant,times){
    while(--times>=0){
        console.log(rant);
    }
}
repeat("IE6 must die!",6);
*/

/*
function repeat(times){
    while(--times>=0){
        for(var index= 1,len=arguments.length;index<len;++index){
            console.log(arguments[index]);
        }
    }
}
repeat(2,'ie6','so should ie7');
*/

/*
function repeat(times,rant){
    if(undefined===rant){
        rant='ie6 must';
    }
    while(--times>=0){
        console.log(rant);
    }
}
repeat(3);
repeat(3,'so sould ie7');
*/

/*
function repeat(options){
    options=options||{};
    for(var opt in (repeat.defaultOptions||{})){
        if(!(opt in options)){
            options[opt]=repeat.defaultOptions[opt];
        }
    }
    for(var index=0;index<options.times;++index){
        console.log(options.rant);
    }
}
repeat.defaultOptions={times:2,rant:'ie6'};
repeat();
repeat({times:3});
repeat({times:2,rant:'flash must die'});
*/

章二．DOM、事件、定时器

1.获取dom元素的引用

Ps：任何依赖于document.getElememntById方法的代码都会成为IE怪异行为的牺牲品

2.动态修饰内容

所有的库都为常用的操作提供了一系列快捷的读写操作，比如操作可见性（隐藏/显示/切换）、透明度及维度等。

Jquery

$(element).css(‘prop’,’value’);

$(element).css(prop:’value’,prop2:’value2’);

$(element).css(‘prop’);

3.修改元素的内容

innerHTML可以修改元素的内容，但是在很多浏览器中，一些不规范的超文本可能导致innerHTML失效。而库会在需要的情况下使用其他机制来保证超文本顺利插入，

jQuery

$(element).html(‘<p>new internal HTML</p>’);

$(element).text(‘the <div> and <span> elements carry no inherent semantics,’);

$(element).before(‘<p> thos djds</p>’);

$(element).prepend(‘<p> thos djds</p>’);

$(element).append(‘<p> thos djds</p>’);

$(element).after(‘<p> thos djds</p>’);

4.在dom加载完成后运行脚本

JavaScript库处理方法的思想：以自定义方法或是自定义事件的形式提供了一个触发器，只需把执行的脚本写到一个函数里，再把这个函数指派到这个触发器上就可以了。

Jquery

$(fx)

5.监听及停止监听事件

在某个元素上监听某个事件

Prototype：$(element).observe(‘event’,handlerFx);

Jquery: $(elementOrSelector).bind(‘event’,handlerFx);

在多个元素上监听某个事件

Prototype：elements.invoke(‘observe’,’event’,handlerFx);

Jquery:$(elements).bind(‘event’,handlerFx)

停止监听

Prototype:$(element).stopObserving(‘event’,handlerFx)

Jquery:$(elementOrSelector).unbind(‘event’,handlerFx)

5.利用事件委托

Ps：优先使用事件委托

多数的事件可以冒泡，如鼠标或键盘事件。当这些事件在dom某处发生时，它们会沿着祖先元素从内向外依次触发各个元素，直到文档的根元素。（如果这些元素中的任何一个都没有监听器来阻止冒泡连续的话）

如果大量的元素需要共享一个行为，则需要在这些元素上监听事件，最好在dom的最高层，即离这些元素最近的公共祖先上或在document上监听事件，这样可以节省大量的内存和CPU时间。

在dom的高层监听事件对ajax内容的行为也有好处，由于在加载内容的外面进行监听，因此新添加进来的元素会自动获得现有的行为，而不需要在加载后设置额外的监听器。

有时触发事件不会冒泡，则需要对事件委托进行一些hack，或是完全抛弃事件委托。如submit、focus、blur这些事件不会冒泡

6．模拟后台处理

JavaScript本质上是单线程的，JavaScript运行线程实际上和你的页面共享了同样的资源。即意味着当你的JavaScript代码运行的时候，任何页面渲染都不会发生。

解决思路：伪并行处理技巧。一般依赖于全局window对象提供的一对方法：setTimeout（）和clearTimeout（）。具体而言，把大型任务分解成若干个小步骤，然后一边执行这些步骤，一边记录任务的进度，并在固定的时延对这些步骤进行调度。当一个步骤完成之后，经过一段时间再启动步骤。在这段空闲的时间里，浏览器会恢复对页面的控制，因此就可以正常处理页面行为，并运行其他执行脚本。

调用clearTimeout（）清理调用setTimeout（）时所存储的定时器并不是必需的，但可以减少内存的消耗，不会带来多少性能上的开销。

定时器模拟后台处理的两个核心方法：

Var handle=window.setTimeout(callback,intervalInMs);

Window.clearTimeout(handle);

章三．UI技巧

  1.预载入图片方法

  A．用JavaScript动态创建带有合适src属性的image对象

  B．用CSS隐藏已载入了的图片：给要预载入的图片使用隐藏的img标签，可以隐藏img标签本身，也可以隐藏这些img标签的公共容器标签。

  C．使用CSS精灵

章四．表单技巧

     （待整）

章五. 服务器端技术

1. Cookie

优势：cookie持久化可以免去用户每次页面刷新后重复设置，恢复树形控件中的展开/折叠节点状态

Ps：cookie位于客户端，处于相对暴露的环境中，要注意安全性问题，少放特别隐私的信息；cookie容易非常有限；有时可能不可用，失效期的cookie。

1. Ajax

 ps：计划赶不上变化，读着读着感觉不像期待的那样了。。。暂时先搁浅，回头继续重新整理思路。