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精灵
章四.表单技巧
(待整)
章五. 服务器端技术
- Cookie
优势:cookie持久化可以免去用户每次页面刷新后重复设置,恢复树形控件中的展开/折叠节点状态
Ps:cookie位于客户端,处于相对暴露的环境中,要注意安全性问题,少放特别隐私的信息;cookie容易非常有限;有时可能不可用,失效期的cookie。
- Ajax
ps:计划赶不上变化,读着读着感觉不像期待的那样了。。。暂时先搁浅,回头继续重新整理思路。