var Avatar = React.createClass({
    render: function() {
        return (
        <div>
            <ProfilePic filename={this.props.filename} />
            <ProfileLink {...this.props} />
        </div>
        );
}
});

var ProfilePic = React.createClass({
    render: function() {
        return (
        <img src={'http://s.amazeui.org/media/i/demos/' + this.props.filename} />
    );
}
});

var ProfileLink = React.createClass({
    render: function() {
        return (
        <a href={'http://s.amazeui.org/media/i/demos/' + this.props.filename}>
            {this.props.filedesc}
        </a>
    );
  }
});

ReactDOM.render(
<Avatar filename="bing-2.jpg" filedesc="晚霞" />,
document.getElementById('demo'));

ReactDOM.render(
<Avatar filename="bing-3.jpg" filedesc="里约内热卢" />,
document.getElementById('demo2'));

{
  let a = 10;
  var b = 1;
}

console.log(a); // ReferenceError: a is not defined.
console.log(b); // 1

'use strict';
const PI = 3.1415;
console.log(PI); // 3.1415
// 尝试赋值
PI = 3; // TypeError: "PI" is read-only

reqire('react-native'); // 老的写法（类似reqire.js）
import ReactNative from 'react-native'; // 作用类似于Java中的import

var {
    StyleSheet,
    View,
    Text,
    AppRegistry,
    Image,
  } = ReactNative;

/* 等价于 */

var StyleSheet = ReactNative.StyleSheet;
var View = ReactNative.View;
var Text = ReactNative.Text;
var AppRegistry = ReactNative.AppRegistry;
var Image = ReactNative.Image;

var Util = {
    //post请求
    post: function (url, data, callback) {
        var fetchOptions = {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(data)
        };
        // fetch 返回一个Promise对象
        fetch(url, fetchOptions)
        .then((response) => response.text())
        .then((responseText) => {
            callback(JSON.parse(responseText));
    });
}
};

function Point(x,y){
    this.x = x;
    this.y = y;
}

Point.prototype.toString = function () {
    return '(' + this.x + ', ' + this.y + ')';
}    

//定义类
class Point {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }
    // 静态方法，调用方式：Point.classMethod();
    static classMethod() {
        return 'hello';
    }
    // 静态属性
    static z:0

    toString() {
        return '(' + this.x + ', ' + this.y + ')';
    }
}

class ColorPoint extends Point {
    constructor(x, y, color) {
      super(x, y); // 调用父类的constructor(x, y)
        this.color = color;
    }

    toString() {
        return this.color + ' ' + super.toString(); // 调用父类的toString()
    }
}

    // CommonJS模块
    let { stat, exists, readFile } = require('fs');

    // 等同于
    let _fs = require('fs');
    let stat = _fs.stat, exists = _fs.exists, readfile = _fs.readfile;

    // ES6模块
    import { stat, exists, readFile } from 'fs';

// 写法一
export var m = 1;

// 写法二
var m = 1;
export {m};

// 写法三
var n = 1;
export {n as m};

// 报错
function f() {}
export f;

// 正确
export function f() {};

// 正确
function f() {}
export {f};

// main.js

import {firstName, lastName, year} from './person'; // 不用加扩展名“.js”

function setName(element) {
    element.textContent = firstName + ' ' + lastName;
}

    // export-default.js
    export default function () {
        console.log('foo');
    }
    /*
    上面代码是一个模块文件export-default.js，它的默认输出是一个函数。

    其他模块加载该模块时，import命令可以为该匿名函数指定任意名字。
    */
    // import-default.js
    import customName from './export-default'; 
    customName(); // 'foo'

// bad
if ($('#userName').length) {
    var userName = $('#username');
    // ...
    $('#username').val();
}

// good
var $userName = $('#userName');
if ($userName.length) {
    var userName = $userName.val();
    // ...
    $userName.val(userName);
}

var $txtUserName = $('txtUserName'),
    userName = $txtUserName.val();

// bad
$userName = $('#userName');
if ($userName.length) {
    var userName = $userName.val();
    // ...
    $userName.val(userName);
}

// good
var $userName = $('#userName');

// bad
var first = $('#first'); 
var second = $('#second'); 

// better - we use to put $ symbol before jQuery-manipulated objects
var $first = $('#first');
var $second = $('#second');
var value = $first.val(); 

var $first = $('#first'),
    $second = $('#second'),
    value = $first.val(),
    k = 3,
    cookiestring = 'SOMECOOKIESPLEASE',
    myArray = {},
    i,
    j;

// bad
$first.click(function () {
    $first.css('border', '1px solid red');
    $first.css('color', 'blue');
});

$first.hover(function () {
    $first.css('border', '1px solid red');
});

// better(比上面的写法要好点)
$first.on('click', function () {
    $first.css('border', '1px solid red');
    $first.css('color', 'blue');
});

$first.on('hover', function () {
    $first.css('border', '1px solid red');
});

// good
function changeStyle() {
    // 这样的写法同样不好
    $first.css('border', '1px solid red');
    $first.css('color', 'blue');
    /*
     * // 更好的写法，定义一个CSS样式,比如：.checked
     * $first.css('checked');
     */
}

function tiggerHoverStyle() {
    $first.css('border', '1px solid red');
}

$first.on('click', changeStyle)
      .on('hover', tiggerHoverStyle);

// bad
$second.html(value);
$second.on('click', function () { alert('hello everybody'); });
$second.fadeIn('slow');
$second.animate({ height: '120px' }, 500);

// good
$second.html(value);
$second.on('click', function () {alert('hello everybody');}).fadeIn('slow').animate({ height: '120px' }, 500);

// bad
$second.html(value);
$second.on('click', function () { alert('hello everybody'); }).fadeIn('slow').animate({ height: '120px' }, 500);

// good
$second.html(value);
$second.on('click', function () {
 alert('hello everybody'); })
       .fadeIn('slow')
       .animate({ height: '120px' }, 500);

// bad
function initVar($myVar) {
    if (!$myVar) {
        $myVar = $('#selector');
    }
}

// good
function initVar($myVar) {
    $myVar = $myVar || $('#selector');
}

// good 
function getValue($myVar) {
    var val;
    $myVar = $myVar || $('#selector');
    val = $myVar && $myVar.val();
}

// bad
if (collection.length > 0) {
    //..
}

// better
if (collection.length) {
    //..
}

// bad    
var $container = $('#container'),
    $containerLi = $('#container li'),
    $element = null;
$element = $containerLi.first();
// ... a lot of complicated things

// better
var $container = $('#container'),
    $containerLi = $container.find('li'),
    $element = null;
$element = $containerLi.first().detach();
// ...a lot of complicated things                               
$container.append($element);

// bad
$('#id').data(key, value);

// better (faster)
$.data('#id', key, value);

// bad
var $container = $('#container'),
    $containerLi = $('#container li'),
    $containerLiSpan = $('#container li span');

// better (faster)
var $container = $('#container'),
    $containerLi = $container.find('li'),
    $containerLiSpan = $containerLi.find('span');

// bad                                                         
$('.container > *');

// better                                                      
$('.container').children();

// bad     
$('.someclass :radio');

// better                                                     
$('.someclass input:radio');

// bad 
$('div#myid');                                                
$('div#footer a.myLink');

// better
$('#myid');
$('#footer .myLink');

// bad
$('#outer #inner'); 

// better
$('#inner'); 

// bad - live is deprecated
$('#stuff').live('click', function () {
    console.log('hooray');
});

// better
$('#stuff').on('click', function () {
    console.log('hooray');
});

var $products = $('div.products'); // 慢
var $products = $('.products'); // 快

var orderList;

var $products = $('div.products'); // 慢
var $products = $('.products'); // 快

// 丑陋
$('div.data .gonzalez');

// 优化后
$('.data td.gonzalez');

$('.data table.attendees td.gonzalez');

// 好的方式：去掉了中间的冗余
$('.data td.gonzalez');

// 劣质的代码：因为需要遍历整个DOM来找到.class
$('.class');

// 高品代码：因为只需在指定容器范围内进行查找
$('.class', '#class-container');

$('div.container > *'); // 差
$('div.container').children(); // 棒

$('div.someclass :radio'); // 差
$('div.someclass input:radio'); // 棒

$('#outer #inner'); // 脏
$('div#inner'); // 乱
$('.outer-container #inner'); // 差
$('#inner'); // 干净利落，后台只需调用document.getElementById()

var $myList = $("#list-container > ul").detach();
//...一大堆对$myList的处理
$myList.appendTo("#list-container");

// 这样不好
var $myList = $("#list");
for (var i = 0; i < 10000; i++) {
    $myList.append("<li>" + i + "</li>");
}

// 这样好
var $myList = $("#list");
var list = "";
for (var i = 0; i < 10000; i++) {
    list += "<li>" + i + "</li>";
}
$myList.html(list);

// 但这样更好var array = []; 
for (var i = 0; i < 10000; i++) {
    array[i] = "<li>" + i + "</li>";
}
$myList.html(array.join(''));

// 无良的做法：jQuery后台要跑完三个函数后才会知道这个元素其实根本不存在
$("#nosuchthing").slideUp();
// 应该这样
var $mySelection = $("#nosuchthing");
if ($mySelection.length) {
    $mySelection.slideUp();
}

// 不要这样
$("#myLink").on("click", function(){
    //...
});

// 这样
function myLinkClickHandler() {
 //...
}

$("#myLink").on("click", myLinkClickHandler);

$(function () {
    // ... 
}); // 糟糕的做法：无法利用此函数也无法为其写测试用例

// 好的做法
$(initPage);
// 或 $(document).ready(initPage);
function initPage() {
    // 这里你可以进行程序的初始化了
}

// 自己的写法
(function ($) {

    var MyApp = {};
    MyApp.init = function () {
        console.log('初始化工作');
    };

    $(MyApp.init);

}(jQuery));

<script src="my-document-ready.js"></script>
<script>
// 初始化一些必要的全局变量
    $(document).ready(initPage); // 或 $(initPage);
</script>

$("#myLink").on("click", myEventHandler); // GOOD

$("#myLink").on("click.mySpecialClick", myEventHandler); // 不错
// 之后，让我们优雅地解除绑定
$("#myLink").unbind("click.mySpecialClick");

// 不易阅读的代码
$.ajax({
    url: "something.php?param1=test1&param2=test2",
    //....
});

// 更易阅读
$.ajax({
    url: "something.php",
    data: {
        param1: test1,
        param2: test2
    }
});

$('#parent-container').on('click', 'a', delegatedClickHandlerForAjax);

$.ajax({
    //...
}).then(successHandler, failureHandler);

// 抑或
var jqxhr = $.ajax({
    // ...
});
jqxhr.done(successHandler);
jqxhr.fail(failureHandler);

var jqxhr = $.ajax({
    url: url,
    type: 'GET', // 默认为GET,你可以根据需要更改
    cache: true, // 默认为true,但对于script,jsonp类型为false,可以自行设置
    data: {}, // 将请求参数放这里.
    dataType: 'json', // 指定想要的数据类型
    jsonp: 'callback', // 指定回调处理JSONP类型的请求
    statusCode: { // 如果你想处理各状态的错误的话
        404: handler404,
        500: handler500
    }
});
jqxhr.done(successHandler);
jqxhr.fail(failureHandler);

$("#myDiv").addClass("error").show();

$("#myLink")
    .addClass("bold")
    .on("click", myClickHandler)
    .on("mouseover", myMouseOverHandler)
    .show();

// 糟糕：调用了三次attr
$myLink.attr('href', '#').attr('title', 'my link').attr('rel', 'external');

// 不错，只调用了一次attr
$myLink.attr({
    href: '#',
    title: 'my link',
    rel: 'external'
});

$('#mydiv').css({'color':red, 'font-weight':'bold'}); // 不好

$('#mydiv').addClass('error'); 

$("#myId"); // 多少还是会逊色于`document.getElementById("myId")`