JavaScript

库、框架

jquery ExtJS ExtJS6 BackboneJS ember reactjs RequireJS d3 kendo ui

• Highcharts
• Isotope
• masonry
• melonJS
• autosize
• Zepto.js
• bounce.js
• grunt

jQuery中.bind() .live() .delegate() .on()的区别

//为每个匹配元素的特定事件绑定事件处理函数
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)

差别

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

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

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

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

红鸟面试题

var td_num = 5, is_odd = true, max_cell = 100, tbody = '', is_gray = '', tds = '';
 
for (var i = 1; i <= max_cell; i++) {
    is_gray = (i % 2 === 0 ? '' : ' class="gray-cell"');
    tds += '<td' + (is_odd ? is_gray : '') + '>' + i + '</td>';
 
    if (i % td_num === 0) {
        tbody += '<tr>' + tds + '</tr>';
        tds = '';
        is_odd = (is_odd ? false : true);
    }
}
 
var table = document.getElementById('my');
table.innerHTML = tbody;
table.style.width = '100%';
 
var sheet = document.styleSheets[0];
sheet.insertRule(".gray-cell { background-color: gray;}", 1);

js 判断微信浏览器

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

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

script标签的async属性

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

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

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

IE8中trim方法报错的问题

//IE8下没有
str.trim()
 
//替代方案
Ext.string.trim(str) //Extjs用法
$.trim(str)             //jquery用法

JS基础

字符串 数组

window.location.hash属性介绍

History of Ecma

javascript避免数字计算精度误差的方法之一

如何判断Javascript对象是否存在

JS中级

OOP

再谈javascript面向对象编程

• javascript的闭包 - 司徒正美
• js闭包
• JavaScript对象系统深入剖析-4.Scope和Closure
• js原型理解
• 原型和继承
• JavaScript 和文档对象模型（DOM）
• 那些相见恨晚的 JavaScript 技巧
• 回流与重绘：CSS性能让JavaScript变慢？
• 高性能WEB开发(8) - 页面呈现、重绘、回流
• Javascript中的陷阱大集合
• Javascript中的陷阱大集合
• js数组的操作
• JS刷新当前页面
• JS操作DOM节点实现网页更新
• 翻译：让网络更快一些——最小化浏览器中的回流(reflow) ? 张鑫旭-鑫空间-鑫生活
• 快速判断JavaScript对象是否存在的十个方法
• JavaScript重构深入剖析

JS高级

• 反向Ajax，第1部分：Comet介绍
• 提升 web 应用程序的性能
• 提高 web 应用性能之 JavaScript 性能调优
• 基于 Web 2.0 技术的网上银行前端架构及开发，第 2 部分: 前端创新型设计
• 基于 Web 2.0 技术的网上银行前端架构及开发，第 1 部分: 基本元素和架构
• Web开发前沿技术探索与实战
• 让您的 web 应用程序飞起来
• 一位反JavaScript主义者的觉醒
• 15款超棒的JavaScript开发工具推荐
• 如何快速成为javascript高手的思考
• Java Web 高性能开发，第 1 部分: 前端的高性能
• 性能优化：如何更快速加载你的JavaScript页面
• 从今天开始，调试脚本，远离alert
• JavaScript最让人费解的十件事

杂项

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调试代码

• Using the Console
• Console API Reference

javascript代码风格

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):

/*global var1,var2,var3,var4,var5*/

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中，有两个关于定时器的专用函数，分别为：

//倒计定时器：
timer = setTimeout(func_a, delaytime_ms); 
clearTimeout(timer);      //清除已设置的setTimeout对象
 
//循环定时器：
timer = setInterval(func_b, delaytime_ms); 
clearInterval(timer);     //清除已设置的setInterval对象