js技术总结

JavaScript

document

document的添加、移除、复制、创建、查找节点；

访问：document.getElementByIddocument.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.firstChildlastChildchildNodesnearNode.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类型转换：

1. 定义：js语法var松散且多变，有两种转换：隐式（程序运行自动转换）显式（人为强制转）；
2. 隐式：
   
   1. ”22”+1=23;”2a”+1=”2a+1”;”2a”-1=”NaN”
   2. true+1=2;false+1=1;
   3. +”“=0
   4. -false=-0
   5. +new Date()=12…2223457

3. 显式：转换成数字：Number(a)、parseInt(a,radix)、parseFloat(a)；

   1. Number:
      
      1. Boolean值：Number(false)=0;Number(1)=true;
      2. null：Number(null)=0
      3. undefined：Number(undefined)=NaN;
      4. 字符串:（”a”,”10”,”023”,”23.00”）–>(NaN,10,23,23.00)
      5. 对象：调用对象的valueOf()，根据以上规则返回，如果为NaN，则滴啊用toString()，返回字符串；

   2. parseInt(a,radix)|parseFloat(a,radix):

      1. 开头为字符，直到解析到非数字为止：parseInt(‘08e7’)–>8；parseInt(’ 0 8 3e7’)–>0
      2. 开头为非数字，则返回NaN；
      3. radix按照其解析

   3. String(a):String(null)=”null”;String(undefined)=’undefined’;

   4. 转换成字符串：a.toString()、String(a)

   5. 转换成boolean：Boolean(0)=false;Boolean(1)=true；
      false,”“,0,NaN,undefind,null都会空；其他为true；

面向对象编程思想：

类（人，实例化前）
对象（张三，实例化后）
方法（张三有属性（嘴）和方法（说话））
原型对象（类的属性，人都有嘴，不用去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.jsvar 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.html3. 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” , “修改限制名单” );