javascript零散要点收集

1.this永远指向函数对象的所有者

2.ECMA-262 把对象（object）定义为“属性的无序集合，每个属性存放一个原始值、对象或函数”。严格来说，这意味着对象是无特定顺序的值的数组。

3.prototype只有函数对象才会有的属性。

4.对象创建之后为其附加的属性不会被继承。

5.new 创建对象只能来自于函数对象。

5.1也可以直接创建对象实例

6.for in可遍历对象属性

7.obj.prototype.constructor会输出obj创建时用的函数的文本。

8.极度延迟

9.getprototypeof、 instanceof、 typeof

10.可以复制一个函数对象function fun(){};var prune=fun;

11.eval就是一个宏。完全可以这么理解

12.$()[index]可以得到dom对象，内部实现在json对象里有提到。

 

13.var isIE = /MSIE/.test(ver); var isFF = /Firefox/.test(ver); //“/MSIE/”得到一个正则表达式对象，然后调用它的test方法

14.只能在输出流中使用document.write()方法，如果整个文档已经输出完毕，那么这时调用document.write()时会覆盖整个文档

<html>

<script>

document.write("abcd");

</script>

<p>aaaa</p>

<script>

document.write("<br/>abcd");

function clickme()

{

document.write("assda");

}

</script>

<input type="button" value="adljs" onclick="clickme()"/>

</html>

输出结果为

abcd

aaaa

abcd

点击按钮后变为assda

15.用name还是id，原先是只能用name来标记一个锚，现在可以用id了，可以把id看成是name的升级版，比如

<a href="#chapter1">第一章</a>

<p>asldjfalsdj</p>

<p>asldjfalsdj</p>

<p>asldjfalsdj</p>

<p>asldjfalsdj</p>

<p>asldjfalsdj</p>

<p>asldjfalsdj</p>

<p id="chapter1">asldjfalsdj</p>

 <!--<p name="chapter1">asldjfalsdj</p>等价于上一行-->

16.<link rel="stylesheet" type="text/css" href="style.css"/>  其中href=hypertext reference rel=relationship

17.apply 和call的区别和用法 
http://blog.csdn.net/myhahaxiao/article/details/6952321
两都作用是相同的，只不过语法略有不同，apply的第二个参数是参数数组，call的第一个参数之后是一个参数序列，随便举个例子吧
经常看到这种用法，如果一个函数接收的参数个数不是固定的，那么可以用apply将一个数组传给这个函数
我们常见到Func.apply(null,argsArr)实际上可以写成Func(arg1,arg2,...)的形式，但是以数组的方式来调用显然简洁了许多
arr=[1,3,5,9,2,8,6,0];
Math.max.apply(null,arr)因为max函数可以接收任意多个参数，并找出其中的最大值，一个个写这些参数显然是不合适的，这时传一个数组进去就解决了
可以说apply提供了函数传参的第二种选择，那就是让你可以以数组的形式传参。
 
function callme(name,age)
{
this.name=name;
this.age=age;
}
var p={name:"sdsd",age:56};
callme.apply(p,["sd",23]);//或者callme.call(p,"sd",23)
alert(p.name);//输出为sd

 18.bind http://msdn.microsoft.com/zh-cn/library/ff841995(v=vs.94).aspx

语法：function.bind(thisArg[,arg1[,arg2[,argN]]])

 

//In the following example, the thisArg object is different from the object that contains the original method.
//JavaScript
// Create an object that contains the original function.
var originalObject = {
    minimum: 50,
    maximum: 100,
    checkNumericRange: function (value) {
        if (typeof value !== 'number')
            return false;
        else
            return value >= this.minimum && value <= this.maximum;
    }
}

// Check whether 10 is in the numeric range.
var result = originalObject.checkNumericRange(10);
document.write(result + " ");
// Output: false

// The range object supplies the range for the bound function.
var range = { minimum: 10, maximum: 20 };

// Create a new version of the checkNumericRange function that uses range.
var boundObjectWithRange = originalObject.checkNumericRange.bind(range);

// Check whether 10 is in the numeric range.
var result = boundObjectWithRange(10);
document.write(result);
// Output: true
//The following code shows how to use the arg1[,arg2[,argN]]] arguments. The bound function uses the parameters specified in the bind method as the first and second parameters. Any parameters specified when the bound funct//ion is called are used as the third, fourth (and so on) parameters.
//JavaScript
// Define the original function with four parameters.
var displayArgs = function (val1, val2, val3, val4) {
    document.write(val1 + " " + val2 + " " + val3 + " " + val4);
}

var emptyObject = {};

// Create a new function that uses the 12 and "a" parameters
// as the first and second parameters.
var displayArgs2 = displayArgs.bind(emptyObject, 12, "a");

// Call the new function. The "b" and "c" parameters are used
// as the third and fourth parameters.
displayArgs2("b", "c");
// Output: 12

 综上 apply和call是直接调用函数本身，只是函数中this的含义发生了变化，而bind只是将两个对象先行捆绑，调用是发生在这之后。

 18.关于onsubmit的使用，如果通过webbrowser控件直接提交，比如pForm->submit();则html中的onsubmit="return checkForm(this);不会被执行，但使用javascript提交则会响应onsubmit事件。
注意直接onsubmit="checkform(this)" 如果表单验证不通过，表单仍会被提交，只有onsubmit="return checkform(this)";其中的验证函数的return false 语句才会阻止表单提交。
19.javascript 的时间和属性不要搞混了 document.closed这是属性，document.onclick这是事件。
20.多个返回值

function getViewPort1(){
    return [
        document.body.clientWidth,
        document.body.clientHeight
    ];
}

以上述方式返回值时，可以通过元素索引编号来获取返回值，代码如下：
var ret = getViewPort();
var width = ret[0];
var height = ret[1];

第二种：以键值对形式返回多个值
函数定义如下：
function getViewPort(){
    return {
        width: document.body.clientWidth,
        height: document.body.clientHeight
    };
}

以上述方式返回值时，可以通过键来获取相应的值，代码如下：
var ret = getViewPort();
var width = ret["width"];
var height = ret["height"];

或：

var ret = getViewPort();
var width = ret.width;
var height = ret.height;

21.appendChild 和cloneNode   appenChild并不增加新的元素，只是将元素从原先的位置移除，然后放置到新的位置，cloneNode会生成新的元素以备添加到新的位置。

22.onclick=function(e){}可以处理系统提供的事件，另外onclick只是对应函数的引用，因此不能带有参数。

23.window.event的应用

<script type="text/javascript">
function noNumbers(e)
{
var keynum
var keychar
var numcheck

if(window.event) // IE
    {
    keynum = e.keyCode
    }
else if(e.which) // Netscape/Firefox/Opera
    {
    keynum = e.which
    }
keychar = String.fromCharCode(keynum)
numcheck = /\d/
return !numcheck.test(keychar)
}
</script>

<form>
Type some text (numbers not allowed):
<input type="text" onkeypress="return noNumbers(event)" />
</form>

 24.cookie的设置和提取

<script>
function ckset(name,vlaue,exp)
{
var dt=new Date();
exdate.setDate(exdate.getDate()+exp);
if(name!=null)
{
document.cookie=name+"="+escape(value)+((exp==null)?"":";expires="+dt.toGMTString());
}
}
function ckget(name)
{
if(document.cookie.length>0)
{
stt=document.cookie.indexOf(name+"=");
if(stt!=-1)
{
stt+=(name.length+1);
end=document.cookie.indexOf(";",stt);
if(end==-1)return document.cookie.subString(stt,end);
return unescape(document.cookie.subString(stt,end));
}
}
else return "";
}
</script>

注意两点，一是写入的时候可以附加 expires 和path两个属性，二是读取的时候仅能读到name和value两个属性，先前设置的expires属性不可见

http://www.w3schools.com/js/js_cookies.asp cookie使用参考 

25.ajax get和post

/*一个普通的get请求*/
var ajx=new XMLHttpRequest();
ajx.onreadystatechange=function()
{
if(ajx.readyState==4 && ajx.status==200)
{
document.getElementById("mydiv").innerHTML=ajx.responseText;
}
}
ajx.open("GET","test.txt",true);
ajx.send();
/*一个设置请求头的post请求,以完成类似于get的ulr数据传递形式*/
ajx.open("POST","test.asp",true);
ajx.setRequestHeader("Content-type","application/x-www-form-urlencoded");
ajx.send("fstname=jack&lastname=peter");

jquery ajax包括三个主要的函数

a)$(selector).load(url,data,callbackfn)这里的data字符串和 上面的字符串有所不同它实际上是一个json对象，e.g. {}

其中callback function包括三个可选参数(responseTxt,statusTxt,xhr/*xmlhttprequest对象*/)

b)$.get(URL,callback);//需要发送的参数包含在URL中，callback的参数同上

c)$.post(URL,data,callback);data依然要求是值对的形式，callback参数同上

完整的ajax reference http://www.w3schools.com/jquery/jquery_ref_ajax.asp

 26.表单上传文件

<form method="POST" action="test.php" name="form" enctype="multipart/form-data">

<input type="file" name="upfile"/>

<input type="submit" value="上传" name="submit"/>

</form>

27.div的mouseover和mouseleave事件，不只对父元素本身有效，对其子元素同样有效。

28.function aa(){} var b=aa.prototype;这会复制aa所有的属性，和属性的值，但不会复制aa的函数体。

29.jquery对象转dom对象$("#id")[0]即是DOM对象

30.DOM元素的tagName属性用来获取标签名。

31.一个id映射到两个元素的方法

var IDs={};
var newElement=document.createElement("div");
var newDiv=document.createElement("div");
newDiv.count=-1;
newDiv.id="root"+"-"+parseInt(++this.parent.count);
IDs[newDiv.id]=newElement;

32.jquery遍历所有子元素 children()得到所有直接后代元素，用selector.find("*")得到所有子代元素。

33.操作iframe document.getElementById("frame1").contentDocument,window.frames[0].contentWindow获取frame元素中的dom对象

34.关闭当前窗口 if(confirm("要关闭吗？")window.close();

35.阻止事件冒泡preventDefault()阻止后续的事件相关的动作，如本来要提交表单，或者打开连接，执行该函数之后，这些动作都不会得到执行，stopPropagation()则是阻止事件继续派发，应该响应事件的元素，在这之后都不会收到该事件了。或者是在处理程序中直接return false，相当于同时执行上述两个函数。

36.提交表单<input type="submit" value="提交"/>(这样是一个提交按钮，点击后会提交表单），JS提交的办法document.getElementById("myForm").submit();或者$('myForm').path()//设置提交的地址，$('myForm').submit()//提交表单

37.<pre>标识，会保留文档的原有格式，比如换行回车等，通常用来显示程序代码 pre=preserve

38.var a=new Array("a","b","c");str=a.join("");将字符串所有元素都连接起来。alert(str)输出

39.阻止右键菜单弹出

window.onload=function(){document.getElementsByTagName("div")[0].oncontextmenu=clk;}
function clk(e)
{
return false;
}

 

40.获取元素属性document.getElementById("xx").getAttribute("title");注意一些元素的value属性并不能通过这方法获取，而应该是document.getElementById("xx").value;

jquery 的简化写法 $("selector").attr("title"); $("selector").removeAttr("title"); DOM的写法removeAttribute;

41.设置页面x秒后自动跳转，<meta http-equiv="refresh" content="3,http://www.baidu.com/">

其它跳转代码

js:window.location.href="http://www.baidu.com"

window.reload();

document.history.back();

42.获得焦点和失去焦点

onfocus="some javascirpt" onblur="some javascript"

element.attachEvent("onclick",function(){alert(1);}

 

 if(window.addEventListener){ // Mozilla, Netscape, Firefox
        td_value.addEventListener('click', alert('cc'), false);
        td_value.addEventListener('click', alert('cc'), false);

43.如果一个标签不在某个form标签内，则可以设置他的form属性来使它关联这个form,进而使自身内容也可以被随之提交e.g. <form action='xxxx.php' id="cartform"><div>some html code</div><select name="carlist" form="carform"></select>

44.jquery几种语法$(function a(){})等价于$(document).ready(function()a{});jquery创建节点$(<div></div>).text("some text");直接修改cssText $("selector").css("cssText", "width:100%"); 

 

alert('jQuery.prop()获取outerHTML');

 

alert($('textarea').prop('outerHTML'));

 

// 成功设置，已生效

 

alert('jQuery.prop()设置outerHTML');

 

$('textarea').prop('outerHTML', '<input>');

45.javascript中的续行符和C一样都是一个反斜杠，并且续行符前的空格为有效空格（尤其对字符串而言），其后紧跟回车

46.根据窗口调整div尺寸

var mydiv_resize=function(){
    mydiv.style.width=document.body.clientWidth;
    mydiv.style.height=document.body.clientHeight;
}
mydiv_resize();
window.onresize=mydiv_resize;

47.JSON.stringify函数将json对象转换成字符串

48.给div设置value属性，就可以随表单一起提交

49.role属性是干什么用的

50.JSON.stringify将数组或json对象转化成json字符串，相当于JSON.parse的逆操作

51.设置一个表单的名称为name[]时，在读取$_POST数列时，相应的表单域被转化成数组。

52.用innerhtml的方式和createelement的方式来添加元素的结果是不一样的。

53.可以用javascript配合输出  比如本来从数据库中传过来的是一个数字，这时候可以用js来将数字转化成相应的具有实际语意的字符串,e.g.<td><script>document.write(list[<?php echo {$item['id']} ?>])</script></td>

这里的document.write并不会造成重写整个文档，只是在适当的位置输出。

54.$.getJSON 和 $.load()可以直接加载文件 

55.array.map(callbackfunc)对每一个数组元素应用回调函数 ,参数即为单个的数组元素

56.js中in的用法 

一是遍历对象属性for(p in obj)....而是判断if(name in obj)....

57.一种配置的方法var conf={abc:"asdlj:23,asd:883,sdjjk:3889"}首先用split以逗号将字符串分割,再以冒号切分，得到最终属性值.

58.pageX,pageY是相对于当前网页的位置,是作为event的一个属性

59.toggle，slideToggle,animate show(500)这些都可以实现一些简单的动画效果 

60.element.className获取类名

61.jQuery.prop("outerHTML");以及DOM自带的outerHTML可以获取到元素的标签名和内容

62.history.pushstate可以实现无刷新，或者pjax

63.form实现无刷新上传.利用form的target属性指向一个 隐藏的iframe这样就使得form提交后，返回的页面提交给了iframe

64.document.location.pathName获取当前页面的地址名称

65.$.one(event,data,callbackfn)当事件发生时只运行一次绑定的函数,这函数由callbackfn指定

66.DOM属性document.documentElement.style元素的属性

67.elem.style.cssText用来设置元素的css样式

68.javascript的取反运算符不能对变量使用，但是在需要的情形下，比如布尔值的转换可以通过 !运算符来完成

69.前一段时间写一个匹配css引用的文件，还为匹配的文本纠结了一阵，现在了解到原来分组是可以匹配但不被加入到匹配结果中的,(?:exp)就是这样一个用法

70.

<script>
$(document).ready(function(){
$("p").each(function(i){
$(this).on("click",{x:i},function(event){
alert("The " + $(this).index() + ". paragraph has data: " + event.data.x);
});
});
});
</script>

注意两点，一是注册事件时可以向回调函数传递数据，二是each函数向回调函数传递一个index参数，有点和$.each类似

71.$('elem').index()返回元素的索引值

72.medea query的用法

@media screen and (max-width: 300px) {
    body {
         font-family: Consolas, 'courier new'; line-height: normal;"> lightblue;
    }
}

73.解决jquery绑定多个事件的问题，先 调用unbind解绑，再行绑定。

74.函数的嵌套定义，当深层的函数调用到更高层的函数的变量的时候,就实现了函数内部的变量的内存常驻。

75.jquery one函数不是说只绑定一个事件，绑定后这个事件函数只执行一次，jquery on函数可以用来绑定未来添加的函数。

76.call(this)实现继承  

function a(){this.name="jack"}

function b(){a.call(this);}

var person=new b();

77.用两个toggle实现两个类之间的切换

$('#div').toggleClass('cls1');

$('#div').toggleClass('cls2');

78.判断是否隐藏$('#ele').is(':hidden');

79.查找父元素$('div').parents('selector');

80.$.each函数只会遍历数字索引，而且他是取最大的一个数字索引作为遍历元素的个数，如果为定义也会取到,arr.length会以最大数字索引值加1返回，但是非数字索引却不会被计入length

81.window.onhashchange有这样一个事件。

82.window.location.hash获取当前url中的hash

83.精确到小数点后几位,number.toFixed(2)

84.Math.random()生成0-1之间的小数，不包括0，1本身

85.function (value){return "星期" + "日一二三四五六".charAt(value);'漂亮的用法

86.id和name属性可以用数字

87.浏览器弹出新窗口，并传递内容

var newwnd=window.open("","title","location=no,scrollbar=no,status=no,menubar=no,directories=no,toolbar=no,location=no,height=500,width=500");

newwnd.document.write("hello world");

也可以newwnd.onload=function(){newwnd.document.title='childWindowTitle';}

 88.两种新的js编程范式

1) obj.command("viewsource",this);

这样的话可以配置多个命令

2）把要用到的一组元素先行选取出来，并把他们归类，如var submitbtn=$("xxxbtn");

然后再submitbtn.click(function(){});

88.jquery animate 配合jquery easing function 完成一些动画过渡效果

一个弹出框

$("#msg-box").animate({
opacity:"1.0",
height: '500px',
width: '500px',
},
180,
"easeOutBack"
);

89.document.getElementById("#div").scrollTop+=5;可以设置元素的滚动条的位置，即使设置了overflow:hidden这个设置仍然有效

90.$('#div').offset().top$('#div').offset().left用于获取元素实际的位置 

91.substring 和 substr的区别 substring 是截取两个index的字符串，substr是从起始位置截取指定长度的字符串。

92.:checked是jquery提供的一个伪类，可以用来选择被选中的checkbox

93.mouseout和mouseleave是不同的，mouseout严格限制于的鼠标离去事件，mouseleave同时作用于目标元素的子元素

94.总算是碰到了一个对象拷贝的问题obj={"sdsd":"asdsd"};var obj2=obj;这个地方obj2并不是新建立了一个对象，而是对obj的一个引用，类似于指针，所以当delete obj.sdsd的时候，再调用obj.sdsd同样会遭遇无效的属性。

95.window.history.pushState(null,null,"asdsdds"),往增加一条历史记录，但页面保持不变，history.replaceState取代当前页面的历史记录为一条指定的历史记录

onpopstate监听后退事件

96.window.location对象使你可以操作url，你可以设置和读取一些有用的信息从URL中，如果你想通过URL传递一些信息的话，window.location.reload location.replace location.assign location.href都可以更改当前的文档为其他新的指定的文档

97.jquery获取 iframe元素 $('#ifrmid').contents().find("ifrmelem").html();

98.javascript or php 的短路写法 var1=p1 || "";

99.可以用一个图片占位，然后再判断鼠标滚动事件，当鼠标滚动到相应元素的时候再进行图片加载

100.注意jquery循环的时候不要用e[0],这种形式，这样就成了一个普通dom对象了，无法进行jquey的相关操作了，应该用e.eq(i);这种形式

101.$('#div1').appendTo('body');的时候并不是复制一个元素追加到body下面而是将元素移动到相应的节点下面.

102.$('#div').index()可以取到当前元素在其父元素中的序号。

103.注意一个坑  for(x in obj){obj[x]}应该用obj[x]这种方式来获取属性，否则x 会被视作obj的一个名为'x'的属性。

104.有时候需要传递this指针，于是又这种用法，that=this, function (that){this.asdfasdf;that.sdkfsdfsd;}这是防止弄混不同的this指针

105.

var myid= jQuery("#awesome").data('myid'); console.log(myid); 

你还可以在"data-*" 属性里使用json语法，例如，如果你写出下面的html： 

复制代码

代码如下:

<div id="awesome-json" data-awesome='{"game":"on"}'></div> 

106. $.inArray并不是返回一个bool值，而是返回被查找项在数组中的index，没找到返回-1

107.

//json树转换成DOM树

function jsonToMenu(data){
    var html="";
    html+="<ul class='ul-level-"+data['level']+"'>";
    if(data['isleaf']){
        html+="<li data-id='"+data['id']+"'>"+data['name']+"</li>";
    }else{
        html+="<li class='li-has-children' data-id='"+data['id']+"'>"+data['name'];
        for(var x in data['children_arr']){
            html+=jsonToMenu(data['children_arr'][x]);
        }
        html+="</li>";
    }
    html+="</ul>";
    return html;
}

108.jquery插件的一般形式

(function ($) {
    function Slider(option) {
        //深拷贝，修改每个对象的属性只能通过对象实例，避免初始化时候外部引用对象的影响
        this.opt = $.extend(true, {}, option);
    }
 
    $.fn.slider = function (option) {
        var defaults = {  //默认设置
            // 独立写出来，也许将来就用得到呢,也说不定...
        };
 
        //最终配置
        var opt = $.extend({}, defaults, option);
 
 
        //jQuery对象是一个伪数组对象，可能有多个元素
        return $.each(this, function (index, ele) {
            // code...
            var slider = new Slider(opt);
            $(ele).data("slider", slider);
        });
    };
})(jQuery);
 
109.在设计表单控件的时候，可以考虑用input hidden来存放一些表单控件的值，以方便验证.
110.getBoundingClientRect()获取元素到页面边界的距离
注意rect.left 是元素左边到页面左边的距离，rect.right并不是到页面右边的距离，而是元素右边到页面左边的距离
111.发现110的方法不能获取元素到浏览器右边和下边的距离，应该利用document.documentElement.clientWidth|clientHeight
112.在new一个对象的时候，若果通过this.prop来增加一个属性，当prototype中含有同名属性的时候，新增的属性会覆盖掉原有的属性，但不会删除prototype的属性
113.当处理一些没有blur事件的元素的时候,可以考虑用一个不可见的input来代理blur事件，但是如果弹出框中如果有一些input的话，好像就行不通
114.一些插件dateapicker,daterangepicker,fuel ux插件集合
115. http://raphaeljs.com/ snap.js 两个好用的svg库.
116.如果ajax频繁加载失败时，可以考虑用async :false
117.hashchange和hashchange.ajax是一样的而且这两个都不是自定义事件这实际上表示使事件有了作用域
比如 $(document).on("click",function(){alert(1)});和$(document).on("click.ajax",function(){alert(2)});只要是点击事件这两个函数都会被执行，但是如果$(document).trigger('click.ajax'),那么只有第二个函数会被执行。
118.jquery 的closest 和parents方法类似，但是parents()会遍历到根节点，如果没有加选择器，那么返回的jQuery会包含所有的父元素，但是closest则只包含第一个父元素
119.同一组的radio的change事件只触发一次
120.jquery wrapInner可以新生成一个元素来包裹指定元素的内部所有元素,wrap是包裹在外面，wrapAll是包裹所有被选中的元素
121.
 function phpVarToJSON($v){
var str=$v.replace(/array/g,"");
str=str.replace(/\(/g,"{");
str=str.replace(/\)/g,"}");
str=str.replace(/=>/g,":");
eval("var abc="+str);
return abc;
} 
 
122.javascript hoisting
var abc="sddsds";
function test () {
　　console.log(abc);
　　var abc='sdfasdfasdfsad';
}
test();
上面的代码输出undefined因为javascript会对变量进行提升处理 即使在中部声明的变量也被提升到函数的顶部，但是赋值仍然发生在变量实际所在的位置
123.有时候js执行的时候会阻塞页面的渲染，我在使用ajax 同步加载的时候碰到了这个问题，在等待资源拉取的过程中，js会停止执行，这同时会阻塞页面的渲染过程,我的解决办法是通过使用setTimeout将拉取资源的代码单独执行，这样js立即返回，就不会产生阻塞了。
124.原型链是通过__proto__串联起来的,__proto__指向的是function 的prototype， 所有对象都有__proto__当调用一个属性的时候会沿着__proto__往上找，直到找到为止
125.get 和eq的区别 get(index)用于取得集合中的第index个dom元素，eq(i)仍然是返回jquery 对象.
126. function foo(){this.name='jack';} 当new foo()的时候，this是指向foo本身的prototype的
127. 有意思的现象function foo(){}
foo.prototype.init=function (){console.log(123)}
var v=foo.prototype.init;
foo.prototype.init=function(){console.log(456)}
这时v的值和foo.prototype.init的值并不相同，也就是说v并不是代表一个指向foo.prototype.init的引用,这也说明prototype后面都是跟着实实在在的值，而不是一些对象了
this实际上指向了prototype，this代表的对象并不直接指向prototype,而是通过__porto__指向
可以这么说，对象有两种属性，一种是this.prop1这种，直接放在对象自己的空间内的属性，另一种是通过__proto__指向的prototype中的属性
 
128.关于$.extend  http://www.cnblogs.com/RascallySnake/archive/2010/05/07/1729563.html
只有1个参数时是将对象合并到jQuery的全局空间 $.extend({name:123})  $.name //123
合并到jquery的实例对象$.fn.extend({name:123}) $("#div").name //123
129.jquery 有$.grep 方法和$.map方法都是用来处理数组的，前者用来过滤数组元素，后者返回一个新数组.
130.function中的this在func() 和 obj=new func()含义是不同的，new func中的this是指将要生成的对象，而func()中的this指的是函数的拥有者，默认的一个全局函数，实际上是window.func也就是说这个func属于window对象，这也就不难理解为什么这时候func中的this指的就是window ，这一点其实是和c++想通的
联想到通过bind改变的this实际上是把func对象的拥有者换了而已
131.es6的lambda函数
arr=[1,2,3,4];
arr.map(function(x){return x+1;})  === arr.map(x=>x+1)  === arr.map(x=>{return x+1})这三者等价，只是中间一种打的字母最少。这种=>符号貌似是从c#学来的，因为C#中也有相同的用法.
[](int a) { return a > 0; } // C++
132. 循环变量在闭包中引用的问题
133.关于装饰函数，it's something tricky
function foo($param){
  console.log("foo is running with param "+$param);
}
 
function bar($func){
　　return function($param, $param2){
　　　　$func($param + "and" + $param2);
　　};
}
 
134. nodejs 的async 是这样的，nodejs的运行方式是这样的， 一份js代码他总是顺序的执行，即使中间有任务加入到了任务队列中，这些任务并不立即执行，而是一直到代码执行到最后，这些任务才一个个被执行，nodejs实际上是使用了类似于php中的yield机制，一份nodejs代码执行完毕就相当于布置好了一份任务清单，然后每执行完一个任务就调用回调函数执行相应的操作。
135. jquery 的deferred对象，通过这个对象jquery统一了一些延时操作的方式，主要的用法如下
var dtd = $.Deferred()//声明一个deferred对象 
dtd.resolve();表示deferred延时任务已经执行完毕，可以进行下一步的操作
dtd.reject();表示延时任务执行完毕，但是返回一个失败的结果
dtd.promise();同样是返回一个deferred 对象，但是通过这个对象调用resolve and reject会无效，dtd.promise(waitFn), 这样可以对目标函数做一下包装，使其具有done,fail,always,then等接口
$.when可以返回一个deferred对象，他的参数也必须是deferred对象，并且可以有多个 比如$.when(dtd1(),dtd2(),dtd3());
136. onkeydown 和 $("#elem").keydown是有区别的，jquery 实现的input mask 效果要好一些， 因为如果它返回了fasle 就不会看到你输入的字符，不像onkeydown如果你屏蔽了一次输入的字符，那么这个字符会先显示出来然后消失
137.jquery对data属性的处理比较特别,除了用$('#elem').attr('data-xxx')之外，你可以直接用$('#elem').data('xxx')得到元素的数据值，同时如果你调用$('#elem').data(),你将得到所有的data属性的一个数组，data-offset-top这种属性在数组中的键值为offsetTop
138.$.proxy和Function.bind有点类似
 
139.call,bind,apply的区别: 这三个都是改变函数上下文相关的，call apply是函数被立即执行了，bind 是新生成一个函数，apply是以数组的形式传递参数
140.js dimensions小结 
var dom = document.getElementById("elem")
var dimensions = dom.getBoundingClientRect()
dimensions.top 元素上边距客户区顶部的距离
dimensions.left 元素左边距客户区左边的距离
dimensions.right元素右边距客户区左边的距离
dimensions.bottom 元素底边距客户区顶部的距离
document.documentElement.clientWidth 客户区的宽度（可见部分，不包括边框）
document.documentElement.clientHeight客户区的高度（可见部分，不包括边框）
 
window.outerWidth 整个浏览器窗口的宽度 == $(window).outerWidth()
window.outerHeight整个浏览器窗口的高度 == $(window).outerHeight()
 
$('#elem').scrollTop()滚动条距上边的距离
$('#elem').scrollLeft()滚动条到左边的距离
$('#elem').offset().top 元素到页面顶部的距离
$('#elem').offset().left元素到页面左边的距离 
141.no conflict
var old = window.testfn; 
function testfn(){}
testfn.noConflict = function(){
　　window.testfn = old;
　　return this;
}
这里返回的this 表示的是函数本身
 
 142.jquery绑定的在统一元素上的事件，对于同一事件是先绑定先触发，这表明事件是向一个序列中追加，而不是像栈一样压入
143. 对于单击其他区域隐藏的效果,即可以通过给document绑定相应的事件，也可以通过响应blur事件来达到目的，这就是为什么一些 popover在点击浏览器之外的区域后仍然具有自动消失的效果的原因
145. $.contains(parent,child) 判断是否包含某个元素，参数必须是dom元素，不能是jquery对象或者plain js object
146. div:has(.p) div:contains(madexuan)这是jquery 的两个选择器，前一个是选择包含某种元素的元素，后者是选择包含某个字符串的元素
147. 
$(document)
  .on('click.bs.dropdown.data-api', clearMenus)
  .on('click.bs.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })//虽然这个事件后于上一个事件绑定，但是他会先被触发，而且会阻止事件冒泡
  .on('click.bs.dropdown.data-api', toggle, Dropdown.prototype.toggle)//这里需要特别注意绑定的事件执行的顺序，这个事件仍然是先于第一个事件执行
  .on('keydown.bs.dropdown.data-api', toggle, Dropdown.prototype.keydown)
  .on('keydown.bs.dropdown.data-api', '.dropdown-menu', Dropdown.prototype.keydown)

如果是事件回调函数中使用了return false;那么就相当于调用了event.stopPropagation() 和 event.preventDefault();

148.对于一些以代理形式调用的函数，也就是说以$("#parent").on("click","#child",function(){})这样一种形式绑定的事件，我们想阻止事件冒泡，用event.stopPropagation()是不行的，这是js原生的方式，这样确实会阻止事件冒泡，但这只是阻止#parent的父元素响应click事件，这却不是我们想要的，因为我们的本意是想不让#parent响应click事件，这时就应该用e.stopPropagation(),这是jquery 提供的阻止事件冒泡函数
149.UTC =  universal time coordinate  GMT = Greenwich Mean Time 可以把这两个时间看作等同，localtime 通常需要在UTC的基础上进行加减，比如北京时间就是UTC +8
150.$('#elem').detach(); 效果类似于hidden，并不真正删除元素
151.tether一个js类库，用来定位元素
152. 一些获取size的办法$(window).width() == document.doucmentElement.clientWidth, $(document).height()整个document的高度, $(document).scrollTop() == window.scrollTop获取滚动条向下滚动的距离
153. $('body,html').animate({scrollTop:st});平滑滚动到某个位置
154. css3也可以实现类似jsonp的功效， 方法是利用window.getComputedStyle和伪元素的content属性，监听动画事件，缺点是兼容性似乎有些问题。
155.$('#div').load('html')可以用来加载异步内容
156.在一个函数中，使用$('elem‘).css('style','xxx')这种方式来设置元素的样式，这个样式总是在函数执行完之后才生效，这么做一是因为js是单线程的，第二是因为js实现了单线程的任务调度，因此可以执行完整个脚本之后再处理标记好的异步操作。
157.code mirror可以高亮代码，同时是一个好的web代码编辑器，设置为readOnly 以及nocursor,其实就可以在网页中很好的展示高亮后的代码了
158. <a href="mailto:2424428867@qq.com">email</a>可以调用邮件发送程序
159. jsbin.com可以在线调试js
160.react首页可以动态的编译jsx代码
161.可以考虑在项目中使用react-php-v8js, 来实现在服务端渲染组件
162.es6中的延展操作符
var people=['Wayou','John','Sherlock'];
//sayHello函数本来接收三个单独的参数人妖，人二和人三
function sayHello(people1,people2,people3){
  console.log(`Hello ${people1},${people2},${people3}`);
}
//但是我们将一个数组以拓展参数的形式传递，它能很好地映射到每个单独的参数
sayHello(...people);//输出：Hello Wayou,John,Sherlock 
//而在以前，如果需要传递数组当参数，我们需要使用函数的apply方法
sayHello.apply(null,people);//输出：Hello Wayou,John,Sherloc

 163. 关于view model state machine 以及 stream的一些设计

首先是流，整个页面可以看成是一个main函数，他是事件驱动的，也可以叫做action, 每一个事件会启动一个stream, stream之后会返回一个函数，这个函数用来更新UI，UI部分负责解析action，同时返回state, state交给react处理最终更新UI状态, 其中state.data是一个函数，这个函数返回一组值，用到react组件的各个部分。

164. props实际上就是一种依赖注入，注入的可以是数据，也可以是event handler

165. ReactDOM.render返回的是component的引用，这是和component内部的this一样的，都是component 这和react.createelement是不一样的

166. export default 和 export的区别，default import的时候不用 加大括号，export的时候需要加，但是export可以使用多次，而且不能是匿名的函数或对象或数组

167. js数组的reduce 函数 [1,2,3].reduce(cbk, 0) reduce可以接收两个参数，第一个是callback, 第二个是作为初始值， cbk要求第一个参数是初始值，第二个参数是数组项, 这样就可以利用reduce遍历数组并且返回单一值

168. 才知道underscore.js是干什么用的， 它其实是对js的扩展，是一个库，只不过他使用"_"来代表这个库，类似于jquery的$，用这个库来扩展了一些map reduce函数

169. 关于验证的 主要是使用skiponempty skiponerror这两个选项 

170. html5 js 保存文件到本地

function download(data, filename, type) {
    var a = document.createElement("a"),
        file = new Blob([data], {type: type});
    if (window.navigator.msSaveOrOpenBlob) // IE10+
        window.navigator.msSaveOrOpenBlob(file, filename);
    else { // Others
        var url = URL.createObjectURL(file);
        a.href = url;
        a.download = filename;
        document.body.appendChild(a);
        a.click();
        setTimeout(function() {
            document.body.removeChild(a);
            window.URL.revokeObjectURL(url);  
        }, 0); 
    }
}

 171. https://eligrey.com/demos/FileSaver.js/

172. $.Event可以自定义事件 如果使用$('selector').trigger("test_event") 则事件不会冒泡，如果使用$.event.trigger("test_event")则事件会冒泡

173. 在js中如果不是new或者{} []的写法，那么赋值语句都是传递的都是引用

174.通过阅读d3风格的js代码，发现了两个比较有用的用法，一个是 +obj.value这种可以替代parseInt, 再就是逗号表达式的使用，其实就是类似于使用多个分号的用法，这样可以使代码更简洁一些，本质上就是串联起一串操作

posted @ 2013-08-08 20:42  SKY_VIEW  阅读(924)  评论(0)  编辑  收藏  举报