查看“JavaScript”的源代码

==库、框架==
<div id="indexContent">
[[jquery]] [[ExtJS]] [[ExtJS6]] [[BackboneJS]] [[ember]] [[reactjs]] [[RequireJS]] [[d3]] [[kendo ui]] [[Angular2]] [[Ant Design]]
</div>

* [http://www.highcharts.com/download Highcharts]
* [http://isotope.metafizzy.co/ Isotope]
* [http://masonry.desandro.com/ masonry]
* [http://www.melonjs.org/ melonJS]
* [http://www.jacklmoore.com/autosize/ autosize]
* [http://zeptojs.com/ Zepto.js]
* [http://bouncejs.com/ bounce.js]
* [http://www.gruntjs.net grunt]

==Js构造函数==

https://www.jianshu.com/p/5f38069a4acc


==function, new function, new Function之间的区别区别分析==

只要 new 表达式之后的 constructor 返回（return）一个引用对象（数组，对象，函数等），都将覆盖new创建的匿名对象，如果返回（return）一个原始类型（无 return 时其实为 return 原始类型 undefined），那么就返回 new 创建的匿名对象。

<source lang="javascript">
var yx01 = new function () {
    return "圆心"
};
console.log(yx01);

//我们运行代码，将返回显示“[object object] ”，此时该代码等价于：
//function 匿名类(){
//    return "圆心";
//}

var yx01 = new function () {
    return new String
};
console.log(yx01);

var yx02 = function () {
    return "圆心"
}();
console.log(yx02);
</source>

变量 doAdd 被定义为函数，然后 alsodoAdd 被声明为指向同一个函数的指针。用这两个变量都可以执行该函数的代码，并输出相同的结果 - "20"。

Function 对象也有与所有对象共享的 valueOf() 方法和 toString() 方法。这两个方法返回的都是函数的源代码，在调试时尤其有用。
<source lang="javascript">
var doAdd = new Function("iNum", "console.log(iNum + 10)");
var alsodoAdd = doAdd;
doAdd(10);	    //输出 "20"
alsodoAdd(10);	//输出 "20"

console.log(doAdd.valueOf());
console.log(doAdd.toString());
</source>

函数 doAdd() 定义了一个参数，因此它的 length 是 1；sayHi() 没有定义参数，所以 length 是 0。

<source lang="javascript">
function doAdd(iNum) {
    alert(iNum + 10);
}

function sayHi() {
    alert("Hi");
}

console.log(doAdd.length);	//输出 "1"
console.log(sayHi.length);	//输出 "0"

// 形式一
var foo01 = function () //or fun01 = function()
{
    var temp = 100;
    this.temp = 200;
    return temp + this.temp;
}

console.log(typeof(foo01));
console.log(foo01());

// 形式二
var foo02 = new function () {
    var temp = 100;
    this.temp = 200;
    return temp + this.temp;
};

console.log(typeof(foo02));
console.log(foo02.constructor());

// 形式三
var foo3 = new Function('var temp = 100; this.temp = 200; return temp + this.temp;');

console.log(typeof(foo3));
console.log(foo3());

// 形式四：这个方式是不常使用的，效果和方法三一样，不过不清楚不用new来生成有没有什么副作用，
// 这也体现了JavaScript一个最大的特性：灵活！能省就省。
var foo4 = Function('var temp = 100; this.temp = 200; return temp + this.temp;');

console.log(typeof(foo4));
console.log(foo4());
</source>

==JavaScript中以function定义的函数和以new Function定义的函数不等价？==

首先给一段代码：
<source lang="javascript">
window.local = 'hi';
(function () {
    var local = 1;
    console.log(typeof local);  //number
    Function("console.log(typeof local);")();  //string
}());
</source>
看完这段代码，相信应该有些模糊的猜测了。下面说结论：

# `Function(arg1, arg2, ..., body)`  等价于 `new Function(arg1, arg2, ..., body)`。
# 对 `function fn(){}` 和 `var fn = function(){}` 而言，以当前的  LexicalEnvironment  作为 scope 传给函数。
# 对 `new Function(arg1, arg2, ..., body)` 而言，以  Global Environment，浏览器上就是 window 为 scope。

所以你列出的那些例子中，`(new) Function("console.log(typeof local);")();` 中对local取得是 window.local， 这个是 undefined。

==最详尽的 JS 原型与原型链终极详解，没有「可能是」。==

https://www.jianshu.com/p/dee9f8b14771

===总论===

什么是原型、原型链？

它们有什么特点？

它们能做什么？

怎么确定它们的关系？

===一. 普通对象与函数对象===

凡是通过 new Function() 创建的对象都是函数对象，其他的都是普通对象。

每个对象都有 __proto__ 属性，但只有函数对象才有 prototype 属性。

原型对象（Person.prototype）是 构造函数（Person）的一个实例。

<source lang="javascript">
Person.prototype.constructor == Person;
person1.__proto__ == Person.prototype;
person1.constructor == Person;
</source>

JavaScript 是基于原型的。简单来说，就是当我们创建一个函数的时候，系统就会自动分配一个 prototype属性，可以用来存储可以让所有实例共享的属性和方法。

<source lang="javascript">
function Person() {
}

var p = new Person();

p.__proto__ === Person.prototype // true

Person.prototype.constructor === Person // true
</source>

* 每一个构造函数都拥有一个 prototype 属性，这个属性指向一个对象，也就是原型对象
* 原型对象默认拥有一个 constructor 属性，指向指向它的那个构造函数
* 每个对象都拥有一个隐藏的属性 __proto__，指向它的原型对象


原型特点

* 实例可以共享原型上面的属性和方法。
* 实例自身的属性会屏蔽原型上面的同名属性，实例上面没有的属性会去原型上面找。

原型重写

<source lang="javascript">
function Person(){}
var p = new Person();
Person.prototype = {
    name: 'tt',
    age: 18
}

Person.prototype.constructor === Person // false

p.name // undefined
</source>

* 在已经创建了实例的情况下重写原型，会切断现有实例与新原型之间的联系。
* 重写原型对象，会导致原型对象的 constructor 属性指向 Object ，导致原型链关系混乱，所以我们应该在重写原型对象的时候指定 constructor( instanceof 仍然会返回正确的值)。

<source lang="javascript">
Person.prototype = {
    constructor: Person
}
</source>

注意：以这种方式重设 constructor 属性会导致它的 Enumerable 特性被设置成 true(默认为false)。

==js正则表达式==
<source lang="javascript">
var currency = /((^([1-9]\d*))|^0)(\.\d{1,2})?$|(^0\.\d{1,2}$)/;
var people = /^([1-9]\d*)?$/;
</source>

==js浮点运算bug的解决办法==
使用big.js。

==jQuery中.bind() .live() .delegate() .on()的区别==
<source lang="javascript">
//为每个匹配元素的特定事件绑定事件处理函数
bind(type,[data],fn) 
$("a").bind("click",function(){alert("ok");});

//给所有匹配的元素附加一个事件处理函数，即使这个元素是以后再添加进来的
live(type,[data],fn) 
$("a").live("click",function(){alert("ok");});

//指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数
delegate(selector,[type],[data],fn) 
$("#container").delegate("a","click",function(){alert("ok");})

//在选择元素上绑定一个或多个事件的事件处理函数
on(events,[selector],[data],fn) 
</source>

差别

* .bind()是直接绑定在元素上

* .live()则是通过冒泡的方式来绑定到元素上的。更适合列表类型的，绑定到document DOM节点上。和.bind()的优势是支持动态数据。

* .delegate()则是更精确的小范围使用事件代理，性能优于.live()

* .on()则是最新的1.9版本整合了之前的三种方式的新事件绑定机制

==js 判断微信浏览器==

<source lang="javascript">
//JS
function isWeiXin(){
    var ua = window.navigator.userAgent.toLowerCase();
    if(ua.match(/MicroMessenger/i) == 'micromessenger'){
        return true;
    }else{
        return false;
    }
}
</source>

<source lang="php">
//PHP
function is_weixin(){
    if ( strpos($_SERVER['HTTP_USER_AGENT'], 'MicroMessenger') !== false ) {
        return true;
    }
    return false;
}
</source>

==script标签的async属性==

一般的script标签（不带async等属性）加载时会阻塞浏览器，也就是说，浏览器在下载或执行该js代码块时，后面的标签不会被解析，例如在head中添加一个script，但这个script下载时网络不稳定，很长时间没有下载完成对应的js文件，那么浏览器此时一直等待这个js文件下载，此时页面不会被渲染，用户看到的就是白屏（网页文件已下载好，但浏览器不解析）

而使用async属性，浏览器会下载js文件，同时继续对后面的内容进行渲染

通常如果js不需要改变DOM结构时可以使用async进行异步加载（比如一些统计代码可以异步加载，因为此代码与页面执行逻辑无关，不会改变DOM结构）

==IE8中trim方法报错的问题==

<source lang="javascript">

//IE8下没有
str.trim()

//替代方案
Ext.string.trim(str) //Extjs用法
$.trim(str)             //jquery用法
</source>

==JS基础==

<div id="indexContent">
[[字符串]] [[数组]] 
</div>

[[window.location.hash属性介绍]]

[http://www.ecma-international.org/memento/history.htm History of Ecma]

[http://www.cnblogs.com/fumj/archive/2012/12/01/2797588.html javascript避免数字计算精度误差的方法之一]

[[如何判断Javascript对象是否存在]]

==JS中级==
<div id="indexContent">
[[jsoop|OOP]]
</div>

[[再谈javascript面向对象编程]]

* [http://www.cnblogs.com/rubylouvre/archive/2009/07/24/1530074.html javascript的闭包 - 司徒正美]
* [http://www.cnblogs.com/zhjjNo1/archive/2011/02/12/1951905.html js闭包]
* [http://blog.csdn.net/adwu73/article/details/7229564 JavaScript对象系统深入剖析-4.Scope和Closure]
* [http://hi.baidu.com/hu5210898/blog/item/0aa4fb476bd3ed036a63e52c.html js原型理解]
* [http://hi.baidu.com/52weber/blog/item/b2b39d360a2fc30a91ef3986.html 原型和继承]
* [http://www.ibm.com/developerworks/cn/web/wa-jsdom/index.html JavaScript 和文档对象模型（DOM）]
* [http://blog.csdn.net/vincent17113/article/details/5523539 那些相见恨晚的 JavaScript 技巧]
* [http://www.zhangxinxu.com/wordpress/?p=600 回流与重绘：CSS性能让JavaScript变慢？]
* [http://www.blogjava.net/BearRui/archive/2010/05/10/web_performance_repaint_relow.html 高性能WEB开发(8) - 页面呈现、重绘、回流]
* [http://www.cnblogs.com/sxwgf/archive/2011/11/14/2248425.html Javascript中的陷阱大集合]
* [http://www.itivy.com/ivy/archive/2011/11/13/my-javascript-gotchas.html Javascript中的陷阱大集合]
* [http://blog.csdn.net/a_heng/article/details/4135345 js数组的操作]
* [http://dxz506.blog.163.com/blog/static/103254696201091525048328/ JS刷新当前页面]
* [http://blog.csdn.net/shan9liang/article/details/7206440 JS操作DOM节点实现网页更新]
* [http://www.zhangxinxu.com/wordpress/2009/10/%e7%bf%bb%e8%af%91%ef%bc%9a%e8%ae%a9%e7%bd%91%e7%bb%9c%e6%9b%b4%e5%bf%ab%e4%b8%80%e4%ba%9b%e2%80%94%e2%80%94%e6%9c%80%e5%b0%8f%e5%8c%96%e6%b5%8f%e8%a7%88%e5%99%a8%e4%b8%ad%e7%9a%84%e5%9b%9e%e6%b5%81r/ 翻译：让网络更快一些——最小化浏览器中的回流(reflow) ? 张鑫旭-鑫空间-鑫生活]
* [http://developer.51cto.com/art/201106/267559.htm 快速判断JavaScript对象是否存在的十个方法]
* [http://developer.51cto.com/art/201106/267011.htm JavaScript重构深入剖析]

==JS高级==
<div id="indexContent">

</div>

* [http://kb.cnblogs.com/page/112185/ 反向Ajax，第1部分：Comet介绍]
* [http://www.ibm.com/developerworks/cn/web/wa-webappperformance/index.html 提升 web 应用程序的性能]
* [http://www.ibm.com/developerworks/cn/web/1107_zhouxiang_tunejs/index.html 提高 web 应用性能之 JavaScript 性能调优]
* [http://www.ibm.com/developerworks/cn/web/1011_shaoyu_web20bank2/index.html 基于 Web 2.0 技术的网上银行前端架构及开发，第 2 部分: 前端创新型设计]
* [http://www.ibm.com/developerworks/cn/web/0912_chenxm_web20bank/index.html 基于 Web 2.0 技术的网上银行前端架构及开发，第 1 部分: 基本元素和架构]
* [http://developer.51cto.com/art/201106/268387.htm Web开发前沿技术探索与实战]
* [http://www.ibm.com/developerworks/cn/web/wa-improve/index.html 让您的 web 应用程序飞起来]
* [http://developer.51cto.com/art/201106/270802.htm 一位反JavaScript主义者的觉醒]
* [http://developer.51cto.com/art/201105/260992.htm 15款超棒的JavaScript开发工具推荐]
* [http://www.cnblogs.com/muguaworld/archive/2011/11/27/2264741.html 如何快速成为javascript高手的思考]
* [http://www.ibm.com/developerworks/cn/java/j-lo-javawebhiperf1/index.html Java Web 高性能开发，第 1 部分: 前端的高性能]
* [http://developer.51cto.com/art/201203/323057.htm 性能优化：如何更快速加载你的JavaScript页面]
* [http://www.cnblogs.com/hkncd/archive/2012/03/26/2417315.html 从今天开始，调试脚本，远离alert]
* [http://developer.51cto.com/art/201002/185161.htm JavaScript最让人费解的十件事]

==[[javascript代码片段]]==

==杂项==

[http://www.cnblogs.com/ShepherdIsland/archive/2012/05/22/Fiddler_AutoResponder_REGEX.html Fiddler自动响应AutoResponder正则匹配]

用正则批量替换

regex:http://cc-t\.ied\.com/(.+)\.js

http://localhost/$1.js

[[JS模板引擎jSmart]]

[[写一段最短的代码，用上js所有关键字]]

[[实用Javascript代码高亮脚本]]

[[JS正则表达式]]

[[精通JavaScript需要注意的细节：变量]]

[[确保链接不依赖于javascript]]

[[javascript 框架功能大剖析]]

[[12种JavaScript MVC框架之比较]]

[[JavaScript框架]]

[[ArtTemplate高性能JavaScript模板引擎]]

[[JavaScript开发者值得收藏的 7 个资源]]

[[一个Web前端攻城狮的收藏夹]]

[[前端招聘与前端卖身的困境]]

[[基于Web的打印方案比较分析]]

[[浏览器的两种模式quirks 和strict]]

==zebra-dialog==

http://sourceforge.net/projects/zebra-dialog/

http://stefangabos.ro/jquery/zebra-dialog/#how-to-use

==使用Chrome Console调试代码==

* [https://developers.google.com/chrome-developer-tools/docs/console Using the Console]
* [https://developers.google.com/chrome-developer-tools/docs/console-api Console API Reference]

==javascript代码风格==

[http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml google javascript styleguide]

==webstorm==

;JSLint was used before it was defined

As Quentin says, there's a /*global*/ directive.Here is an example (put this at the top of the file):

<source lang="javascript">
/*global var1,var2,var3,var4,var5*/
</source>

;webstorm 如何设置显示代码的行数
file>setting>editor>appearance>show line nmbers

;注释
Webstorm非常的知心，当你写好函数时候，输入“/**”加回车，会自动生成jsdoc格式的注释。

;combine this with the previous var statement

To avoid this JSLint errors you may

1、Define all variables together

var sGreeting = 'hello world', a, b, c;

2、Use JSLint directive Tolerate -> many var statements per function

;JSHint bad line breaking before '+'

Relaxing Options -> Supress warnings about unsafe line breaks laxbreak

==webstorm快捷键==

F2       向下错误或警告快速定位

Shift+F2 向上错误或警告快速定位

reformat code  (cltr+alt+L)

structure (alt+7)

ctrl+shift+ +/-	展开/折叠

Alt+1 快速打开或隐藏工程面板

Ctrl+X 删除行

Ctrl+D 复制行

shift+enter 重新开始一行（无论光标在哪个位置）

Ctrl+Shift+Up/Down 代码向上

Ctrl + shift + j 合并行

Shift + F6   Refactor Rename

SHIFT+ALT+INSERT  竖编辑模式

==JS定时器==

在javascritp中，有两个关于定时器的专用函数，分别为：

<source lang="javascript">
//倒计定时器：
timer = setTimeout(func_a, delaytime_ms); 
clearTimeout(timer);      //清除已设置的setTimeout对象

//循环定时器：
timer = setInterval(func_b, delaytime_ms); 
clearInterval(timer);     //清除已设置的setInterval对象
</source>