JavaScript
document
document的添加、移除、复制、创建、查找节点;
访问:
document.getElementById
document.getElementsByName(name)
document.getElementsByTagName(tagName)
document.getElementsByClassName(className)
创建:
document.createElement(eName)
obj.setAttribute(createAttribute("id='idName'"))
createTextNode("hi,baby");
添加:
document.insertBefore(newNode,referenceChild);
parentNode.appendChild("newChild");
复制:cloneNode(true);
删除:parentNode.removeChild(node);
修改文本:
appendData(data);
deleteData(data);
insertData(data);
replaceData(start,lenght,data);
splitData(offset),
substringData(start,length)
属性:
setAttribute()
getAttribute()
removeAttribute();
查找节点:
parentNode.firstChild
lastChild
childNodes
nearNode.previousSibling()毗邻的上个节点;
nearNode.nextSibling()下一个节点;
nearNode.parentNode()父节点;
node.replaceNode(newNode,oldNode);
怎么样使用事件|ie和dom事件模型的差异
浏览器js引擎解析事件,两种触发(冒泡【点击子元素click其父元素的click也被触发】|捕获(反之,从上往下传递click))
if(window.addEventListener){ //ff w3c
var fn = function (type,fn,useCapture){
el.addEventListener(type,fn,useCapture);
}
}else if(window.attachEvent){ //ie:
fn = function (type,fn){
el.attachEvent("onclick",fn);//只支持冒泡,不支持捕获;
}
}
addEventListener、attachEvent作用:注册事件处理顺序,this无用,一般obj.onClick=fn;多个只执行最后一个;obj.addEventListener("olnclick",fn,false【冒泡|true捕获】)
阻止浏览器默认行为:w3c:e.preventDefault();ie:window.event.returnValue=false;
阻止事件冒泡:w3c:e.stopPropagation();ie:window.event.cancelBubble=true;
设置Cookie:
http://www.oschina.net/code/snippet_156736_4923
设置:document.cookie=”name=”+name;
读取:var a=document.cookie.split(“;”)[0].split(“=”)[1];
删除:document.cookie=name+”=;expires=”+(new Data(0).toGTMString())
设置时间:expires=(new Data().getTime()+days).toGMTString();
值类型和引用类型区别和赋值:
值类型(现金):编译器在“栈”上分配一个空间,此空间对应改值类型变量(boolean | number)且空间存储该变量的值(true | 123);其赋值,则是先复制一份,在分配给另外一个;
var a = 10;
var b = a;
a ++ ;
console.log(a); // 11
console.log(b); // 10
引用类型(存折):编译器分配到“栈”上,引用类型的实例分配到“堆”上,得到的变量值对应该实例内存分配地址(银行账号);其赋值,变量中保存的是“指向实际数据的引用指针,与值类型一样,复制后指向实际数据的内存地址”;
检测:值类型(typeof A==”String”)引用类型(a instanceof Object==true|false)
var a = {}; // a保存了一个空对象的实例
var b = a; // a和b都指向了这个空对象
a.name = ‘jozo’;
console.log(a.name); // ‘jozo’
console.log(b.name); // ‘jozo’
b.age = 22;
console.log(b.age);// 22
console.log(a.age);// 22
console.log(a == b);// true
js类型转换:
- 定义:js语法var松散且多变,有两种转换:隐式(程序运行自动转换)显式(人为强制转);
- 隐式:
- ”22”+1=23;”2a”+1=”2a+1”;”2a”-1=”NaN”
- true+1=2;false+1=1;
- +”“=0
- -false=-0
- +new Date()=12…2223457
显式:转换成数字:Number(a)、parseInt(a,radix)、parseFloat(a);
- Number:
- Boolean值:Number(false)=0;Number(1)=true;
- null:Number(null)=0
- undefined:Number(undefined)=NaN;
- 字符串:(”a”,”10”,”023”,”23.00”)–>(NaN,10,23,23.00)
- 对象:调用对象的valueOf(),根据以上规则返回,如果为NaN,则滴啊用toString(),返回字符串;
parseInt(a,radix)|parseFloat(a,radix):
- 开头为字符,直到解析到非数字为止:parseInt(‘08e7’)–>8;parseInt(’ 0 8 3e7’)–>0
- 开头为非数字,则返回NaN;
- radix按照其解析
String(a):String(null)=”null”;String(undefined)=’undefined’;
转换成字符串:a.toString()、String(a)
- 转换成boolean:Boolean(0)=false;Boolean(1)=true;
false,”“,0,NaN,undefind,null都会空;其他为true;
- Number:
面向对象编程思想:
类(人,实例化前)
对象(张三,实例化后)
方法(张三有属性(嘴)和方法(说话))
原型对象(类的属性,人都有嘴,不用去new了)
(1)继承的方式:对象冒充(apply和call)、原型方式(函数prototype=new 函数();)
(2)工厂方式:简单的封装和调用;
(3)构造函数方式:在工厂方式的基础上加入this和new,大写首字母;
(4)原型方式:利用prototype原型的方式,对固定的方法或属性;
(5)构造函数+原型:构造函数针对属性,原型正对方法;
(6)动态原型方式:与构造函数+原型类似,唯一区别是,加入if(typeof Car._initialized==”undefined”){赋予原型,Car._initialiazed=true;}
(7)混合工厂方式:
对象的prototype:返回对象类型原型的引用;
js方法分为:function abc(name){alert(this.name);}
对象方法:function A(b){this.name=”name”;this.run=abc(name);}}
类方法:A.run=abc(name);
原型方法:A.prototype.run=abc(name);
A.prototype=new B();会将B所有的方法属性都克隆给A,但不会克隆相同的属性或方法;
函数执行环境:
js函数当做普通函数或对象方法执行,顺序:创建一个执行环境(构建:创建arguments调函数时的参数)的
实参形参:
实参:实际传入的参数;形参:不是实际存在的参数即虚拟变量,定义函数和函数体使用的参数为了接收调用函数传入的参数;
js new 运算符
new constructor();对象的构造函数;顺序是:开辟一块内存instance,把constructor包含的属性和方法(无prototype)注入到instance,添加proto属性且指向prototype对象;将this指向o新对象,将constructor的prototype指向给proto属性,返回this对象,如果constructor有返回对象则返回该对象,否则返回this;
注意:prototype不会被拷贝到实例中,而是指向它,所有实例共享父类的prototype;
原型和原型链:原型链即为一个实例继承多个父类的属性和方法;
function A() {} A.prototype = { method: function() {} }; function B() {} B.prototype = new Foo(); B.prototype.foo = function(){this.a=’ss’} B.prototype.constructor = Bar; var test = new B() test.foo; test.method; 注意:hasOwnPrototype查看是自己的属性而非原型链上面的属性方法;
proto:
一个对象的proto属性和自己内部属性Prototype指向相同的值即原型,原型值可以为Object或者Null,访问对象的原型用Object.getPrototypeOf.
对象一般有属性和方法及proto可以被更改即为可扩展Object.isExtensible,但是object.preventExtensions(阻止扩展)\Objec.seal(密封)\Object.freeze(冻结)都不可扩展;作用是:【创建指定对象为原型对象(用Object.create(mydefineProto)|proto:mydefineProto)、为内置类型添加子类型:function Super(x){this.x=x;}function Sub(x,z){Super.call(this,x);this.z=z;}如此,Sub拥有了Super的属性方法;如果超类是内置类型如Array】
var A=Object.create(Array.prototype);
A.foo=function(){}
function myDefineArray(){
var arr=Array.prototype.slice.call(arguments);
arr.proto=A;
return arr;
}
var myDefineArray1=myDefineArray(1,2,3);
http://www.cnblogs.com/mrsunny/archive/2011/05/09/2041185.html 关于js属性、方法、类实例、实例属性、实例方法、prototype、proto;
时间间隔:
setTimeout(延时时间:在载入后某Time后去执行一次表达式,仅仅执行一次;)
function setClock(){
console.log(new date());
setTimeout(‘setClock()’,1000)
}
setInterval(交互时间:载入后,没某Time后执行一次表达式,除非遇到clearInterval)
var settime=setInterval(function(){
if(xx=bb){
clearInterval(settime);
}
}
正则表达式:
apply|call|pop:
call:调用对象的一个方法,以另一个对象来替换当前对象;addItem.call(removeItem,3,1)=addItem(3,1);用addItem替换removeItem(3,1),addItem的方法应用到removeItem上面,且addItem方法的this指向了removeItem;
addItem.showNum.call(removeItem,[]),把addItem的showNum方法放到removeItem()用;实现了继承;
apply方法能劫持另一个对象的方法,继承另外一个对象的属性;
pop()移除数组中的最后一个元素并返回该元素;正对array()
concat()|push():
splice(index【添加|删除项目的位置,负数则从结尾开始】,howmany【删除的项目数量,为0时,不会删除项目,如果后面有item则是添加】,item1【向数组添加的新项目…】,item2…):对数组进行修改;返回Array被删除项目的新数组;
slice(startIndex【开始位置下标包括,-1表示倒数第一】,[endIndex【小于它的区间,无则向前加】]):从已有的数组中返回选定的元素,
$.isEmptyObject(datas.data):判断是否为空对象
arguments:
特殊对象,无需明确指出参数名,即可访问:arguments[0]==”” …..
各种编码:
encodeURI(解析整段URI);encodeURIComponent(解析某个片段字符串)
加密解密:
jquery.base64.js
var abc="dddddddsss" ;
var abcde=$.base64Encode(abc);//加密
var abcen=$.base64Decode(abcde);//解密
console.log(abc+ "-------"+abcde+"-------" +abcen);
字符转换:
Math.floor(Math.random()*100+1);
!isNaN(curJumpTxt )是否是数字
new Data();时间
JSON.stringify(obj);在ie下面,obj中文会变成ASCII编码,字符编码;http://tool.chinaz.com/Tools/native_ascii.aspx
var curStr=JSON.stringify(value).toLowerCase();
eval(“var str = ‘”+curStr+”’;”);
if(str.indexOf(keyword.toLowerCase())>=0){
isExist=true;
}
get|post区别:
参数形式不同,发送数据大小(256b(1024字节)、2M)不同,后台转码不同,post可以修改编码方式,get不行;对file文件的发送编码(表单上传图片,匿名上传正确的编码);
form表单和flash的成功示例:
1. ??
ajax:异步的js和xml,支持局部刷新的技术,
ajax交互模型:
(1)var xmlHttp=new XMLHttpRequest(); //得到XMLHttpRequest对象 ActiveXObject(“microsoft.XMLHTTP”)
(1.1)xmlHttp.onreadystatechange=function(){
if(xmlhttp.readyState==4&&xmlHttp.status=200){//readyState:0(请求未初始化)1(服务器连接已建立)2(请求已接收)3(请求处理中)4(请求完成,响应已就绪);status:200(ok)404(未找到页面)
obj.innerHTML=xmlHttp.responseText;
}
}
(2)xmlHttp.open(“GET”,”text.txt”,true); //打开URL通道并设置异步传输;true异步,false同步;get跟简单快,post稳定可靠,post无法用缓存文件,发送数据量大,发送未知字符;
(2.1)xmlHttp.setRequestHeader(“content-type”,”application/x-ww-form-rulencoded”);//请求添加http头
(3)xmlhttp.send(“fname=bill&name=gates”);//请求发送到服务器
(4)obj.innerHTML=xmlhttp.responseText; //xml则是responseXML;返回字符串形式的响应数据
同步异步区别:允许页面继续进程并处理可能的回复,反之,等待服务器发送后在继续
解决跨域?
闭包:
函数的“局部变量”集合;是引用非拷贝;函数可以使用函数之外定义的变量;就是能够读取其他函数内部的变量的函数;http://www.jb51.net/article/24101.htm
变量将保存到内存中,内存消耗大,不能滥用,否则有性能问题;在退出前,将局部变量删除;js中的一个对象不再被引用,对象将被GC回收;a被b引用,b引用a,可以回收;若b引用c,a将不会被回收;
实例:function A(name){
var person=”姓名:”+name+” 性别:女”;
return function(){alert(person)}//一个函数内定义另一个函数,就会产生闭包;
}
var person1=A(“张三”);
person1();//返回“姓名:张三 性别:女”;函数的堆栈在函数返回后并不释放,像是分配在堆上面,
跨页面传值:
查询字符串,url传参,量大不行且不安全;
cookie方式:量小,且不安全;
frame和子frame:
localstorage:
配合后台程序:session、application、静态属性;
快速排序、数组消重、各种算法
快排:(1)数组中选一个“基准”(2)小于基准放左边,大于基准放右边(3)左右两边的数据,不断重复(1)和(2)
var quickSort = function(arr) {
if (arr.length <= 1) { return arr; }
var pivotIndex = Math.floor(arr.length / 2);
var pivot = arr.splice(pivotIndex, 1)[0];
var left = [];
var right = [];
for (var i = 0; i < arr.length; i++){
if (arr[i] < pivot) {
left.push(arr[i]);
} else {
right.push(arr[i]);
}
}
return quickSort(left).concat([pivot], quickSort(right));
};
2. var i = 0, len = array.length, j, d;
for(; i<len; i++){
for(j=0; j<len; j++){
if(array[i] < array[j]){
d = array[j];
array[j] = array[i];
array[i] = d;
}
}
}
return array;
//去重
var hash = {};
var result = [];
for(var i = 0, len = ruleItemList.length; i < len; i++){
if(!hash[ruleItemList[i]]){
result.push(ruleItemList[i]);
hash[ruleItemList[i]] = true;
}
}
ruleItemList=result;
重构即对代码质量和性能的优化;
方式:(1)模块划分和命名空间(2)js冬天加载(3)javascript测试【jsUnit、JUnit】(4)js编码规范(5)利用原型和闭包完成组件开发;(6)多使用继承(7)JSDoc可以生成API文档(8)JSLint对js做静态检查的工具(9)自定义的js产品框架【通用的组件|共享UI组件|产品基础模块|扩展产品模块|】(10)强化对象的封装和模块封装;
图片懒加载|预加载:
正对图片多的情况;
js压缩工具:YUI compressor;
前端优化知识:
目的(用户要求很快,服务商要求减少请求)
(1)减少http请求【页面简单、合理设置缓存、资源合并压缩、css sprites、懒加载图片、外部脚本置底、避免重复】
(2)优化代码:少用dom,少用循环,慎用eval、function、字符串+、css优化
debug调试命令:
console.log();
console.info();一般信息
console.debug():除错信息;
console.warn():警告信息
console.error():错误信息
console.group();…console.groupEnd();
console.dir();显示一个对象的属性和方法;
console.dirxml();显示网页的某个节点包含的html/xml
console.assert():判断一个表达式或变量是否为真; 断言
console.trace():追踪函数调用轨迹
console.time();.Fn()..console.timeEnd();计算Fn运行时间
console.profile();..Fn()..console.profileEnd();计算Fn的性能
javascript模板:
http://www.oschina.net/news/27917/javascript-template-engine
mustache:胡子,
模板语言,应用于:js|node.js|php|ruby…,通过模板标签替换if、else、for等;
变量标记:{{tag}}==“为字符串,则是结果;加了html的将输出html;”{{{tag}}}={{&tag}}=输出结果,{{tag}};
节点:#和/将表示条件或循环,^和/类似if(!true)…;当字符串数组时,可以{{.}}输出所有;
数组列表:<#objName>{{objNameOfKey}};将循环所有objName下面的objNameOfKey
函数处理节点元素:http://www.csser.com/board/4f62fc447256caae1a000066#/post/4f67e87cb57535b43700072c
查看源码:需要Mustache.to_html(temp,viem,…)和Mustache.render(temp,viem,…);将返回一个html代码;
2. doT.js:http://olado.github.io/doT/|http://www.cnf2e.com/javascript/dot-js.html|http://www.cnf2e.com/javascript/dot-js.html
3. artTemplate:
4. juicer:
jquery:
将选择器引擎独立定名为sizzle,目的:在最常用的选择器使用比之前版本的引擎很快;
$.ajax({
type:”get”,
url:url,
data:{aa:”“},
dataType:”jsonp”,
jsonp:”callback”,
cache:true,
success:function(data){//beforeSend|dataFilter|success|complete|
callback();
},
error:function(){
callback();
},
statusCode:{404:function(){}}
});
3. 阻止事件累加:Obj.unbind(“click”).click( function(){….});
$(“#addItemDialog”).dialog( “option”, “title” , “修改限制名单” );