let obj = {
  [Symbol()]: 'test',
  a: 1,
  b: 2,
};

Object.keys(obj); // ['a', 'b']

for (let p in obj) {
  console.log(p);   //  分别输出: a 和 b
}

Object.getOwnPropertyNames(obj);  //   ['a', 'b']

const TYPE_AUDIO = 'AUDIO'
const TYPE_VIDEO = 'VIDEO'
const TYPE_IMAGE = 'IMAGE'

function handleFileResource(resource) {
  switch(resource.type) {
    case TYPE_AUDIO:
      playAudio(resource)
      break
    case TYPE_VIDEO:
      playVideo(resource)
      break
    case TYPE_IMAGE:
      previewImage(resource)
      break
    default:
      throw new Error('Unknown type of resource')
  }
}

const TYPE_AUDIO = Symbol()
const TYPE_VIDEO = Symbol()
const TYPE_IMAGE = Symbol()

console.log('start')
setTimeout(() => {
  console.log('timer1')
  Promise.resolve().then(function() {
    console.log('promise1')
  })
}, 0)
setTimeout(() => {
  console.log('timer2')
  Promise.resolve().then(function() {
    console.log('promise2')
  })
}, 0)
Promise.resolve().then(function() {
  console.log('promise3')
})
console.log('end')

// 浏览器 start=>end=>promise3=>timer1=>promise1=>timer2=>promise2

// node start=>end=>promise3=>timer1=>timer2=>promise1=>promise2

import PropTypes from 'prop-types';

import styles from './style.less';

<div className={styles.content}>
    <div className="items"></div>
</div>

import './style.less';
<div className="content">
    <div className="items"></div>
</div>

Manage.contextTypes = {
    history: PropTypes.object.isRequired,
    store: PropTypes.object.isRequired
};

this.props.router.replace({
    pathname: `/admin/web/packageconfig/function.html`,
    query: {
        id: moduleList[0].f_id,
    },
});

this.props.history.replace({
    pathname: `/packageconfig/funModule`,
    search: `id=${moduleList[0].f_id}`,
});

if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) {
  macroTimerFunc = () => {
    setImmediate(flushCallbacks)
  }
} else if (
  typeof MessageChannel !== 'undefined' &&
  (isNative(MessageChannel) ||
    // PhantomJS
    MessageChannel.toString() === '[object MessageChannelConstructor]')
) {
  const channel = new MessageChannel()
  const port = channel.port2
  channel.port1.onmessage = flushCallbacks
  macroTimerFunc = () => {
    port.postMessage(1)
  }
} else {
  macroTimerFunc = () => {
    setTimeout(flushCallbacks, 0)
  }
}

npm init -y
yarn add webpack webpack-cli --dev

const path = require('path');

module.export = {
  entry: path.resolve(__dirname, 'src/index.js'),
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',    //  此处不设置，默认为 main.js
    publicPath: '/'
  }
}

webpack --mode production

yarn add html-webpack-plugin --dev

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // ... other code
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, 'src/index.html')
    })
  ]
}

yarn add webpack-dev-server --dev

const WebpackDevServer = require('webpack-dev-server');

module.exports = {
  //  ... other code
  devServer: {
    contentBase: './dist',
    port: '8080',
    host: 'localhost'
  }
}

dev: 'webpack-dev-server --mode development'

yarn add style-loader css-loader --dev

module.exports = {
  //  ...other code
  module: {
    rules: [
      {
        test: /\.css/,
        use: ['style-loader', 'css-loader'],
        exclude: /node_module/,
        include: path.resolve(__dirname, 'src')
      }
    ]
  }
}

module.exports = {
  //  other code
  module: {
    rules: [
      {
        use: [
          {
            loader: 'style-loader',
            options: {
              insertAt: 'top'
            }
          },
          'css-loader'
        ],
        // ...
      }
    ]
  }
}

yarn add url-loader file-loader --dev

module.exports = {
  //  ...other code
  module: {
    rules: [
      {
        test: /\.(gif|jpg|png|bmp|eot|woff|woff2|ttf|svg)/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,
              outputPath: 'images'
            }
          }
        ]
      }
    ]
  }
}

yarn add less less-loader --dev
yarn add sass sass-loader --dev

module.exports = {
  //  ..  other code
  module: {
    rules: [
      {
        test: /\.less/,
        use: ['style-loader', 'css-loader', 'less-loader'],
        exclude: /node_modules/,
        include: path.resolve(__dirname, 'src')
      },
      {
        test: /\.scss/,
        use: ['style-loader', 'css-loader', 'sass-loader'],
        exclude: /nodu_modules/,
        include: path.resolve(__dirname, 'src')
      }
    ]
  }
}

yarn add @babel/core babel-loader @babel/preset-env @babel/preset-react @babel/plugin-proposal-decorators @babel/plugin-proposal-object-rest-spread --dev

module.exports = {
  // ...other code
  module: {
    rules: [
      test: /\.jsx?$/,
      use: [
        {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/react'],
            plugins: [
              ['@babel/plugin-proposal-decorators', {'legacy': true}]
            ]
          }
        }
      ],
      exclude: /nodu_modules/,
      include: path.resolve(__dirname, 'src')
    ]
  }
}

yarn add uglifyjs-webpack-plugin --dev

const UglifyWebpackplugin = require('uglifyjs-webpack-plugin');

module.exports = {
  // ... other code
  optimization: {
    minimizer: [
      new UglifyWebpackPlugin({
        parallel: 4
      })
    ]
  }
}

yarn add webpack-parallel-uglify-plugin --dev

const WebpackParallelUglifyPlugin = require('webpack-parallel-uglify-plugin');

module.exports = {
  //  other code
  plugins: [
    new WebpackParallelUglifyPlugin({
      ugfilyJS: {
        output: {
          beautify: false,  //  是否保留空格和制表符
          comments: false,  //  是否保留注释
        },
        compress: {
          warnings: false,  //  删除没有用到的代码时的警告信息,
          drop_console: true,   //  是否删除代码中的console语句
        }
      }
    })
  ]
}

yarn add mini-css-extract-plugin --dev

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  module: {
    rules: [
      {
        test: /\.css/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
          }, 'css-loader'
        ],
        exclude: /node_modules/,
        include: path.resolve(__dirname, 'src')
      },
      {
        test: /\.less/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
          }, 'css-loader', 'less-loader'
        ],
        exclude: /node_modules/,
        include: path.resolve(__dirname, 'src')
      },
      {
        test: /\.sass/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader
          }, 'css-loader', 'sass-loader'
        ],
        exclude: /node_modules/,
        include: path.resolve(__dirname, 'src')
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'css/[name].css'
    })
  ]
}

yarn add optimiza-css-assets-webpack-plugin --dev

const OptimizaCssAssetsWebpackPlugin = require('optimiza-css-assets-webpack-plugin');

module.exports = {
  //  ... other code
  optimization: {
    minimizer: [
      new OptimizaCssAssetsWebpackPlugin()
    ]
  }
}

yarn add clean-webpack-plugin --dev

const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
  // ...other code
  plugins: [
    new CleanWebpackPlugin()
  ]
}

function sayHi() {
  console.log('Hello', this.name);
}
var name = 'achen';
sayHi();

function sayHi() {
  console.log('Hello', this.name);
}
var person = {
  name: 'achen',
  sayHi: sayHi
};
var name = 'achenjs';
persin.sayHi();

function sayHi() {
  console.log('Hello', this.name);
}
var person = {
    name: 'YvetteLau',
    sayHi: sayHi
}
var name = 'Wiliam';
var Hi = person.sayHi;
Hi.call(person);  // Hi.apply(person)

function SayHi(name) {
  this.name = name;
}
var Hi = new SayHi('achen');
console.log(Hi.name);   //  achen

var foo = {
  name: 'Selina',
}
var name = 'Chirs';
function bar() {
  console.log(this.name);
}
bar.call(null);   //  Chirs

var obj = {
  hi: function() {
    console.log(this);
    return () => {
      console.log(this);
    }
  },
  sayHi: function() {
    return function() {
      console.log(this);
      return () => {
        console.log(this);
      }
    }
  },
  say: () => {
    console.log(this);
  }
};
let hi = obj.hi();          //  obj
hi();                       //  obj
let sayHi = obj.sayHi();
let fun1 = sayHi();         //  window
fun1();                     //  window
obj.say();                  //  window

const PENDING = 'PENDING';
const RESOLVED = 'RESOLVED';
const REJECTED = 'REJECTED';

function MyPromise(fn) {
  const that = this;
  
  that.value = null;
  that.state = PENDING;

  that.resolvedCallbacks = [];
  that.rejectedCallbacks = [];

  function resolve(value) {
    if (value instanceof MyPromise) {
      return value.then(resolve, reject);
    }

    if (that.state === PENDING) {
      that.state = RESOLVED;
      that.value = value;
      that.resolvedCallbacks.map(cb => cb(that.value));
    }
  }

  function reject(value) {
    if (that.state === PENDING) {
      that.state = REJECTED;
      that.value = value;
      that.rejectedCallbacks.map(cb => cb(that.value));
    }
  }

  try {
    fn(resolve, reject);
  } catch(e) {
    reject(e);
  }
}

MyPromise.prototype.then = function(onFulfilled, onRejected) {
  const that = this;
  onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : v => v;
  onRejected = typeof onRejected === 'function' ? onRejected : r => {
    throw r
  };

  if (that.state === PENDING) {
    that.resolvedCallbacks.push(onFulfilled);
    that.rejectedCallbacks.push(onRejected);
  }
  if (that.state === RESOLVED) {
    onFulfilled(that.value);
  }
  if (that.state === REJECTED) {
    onRejected(that.value);
  }

  return that;
}

new MyPromise((resolve, reject) => {
  setTimeout(() => {
    resolve(111);
  }, 0);
}).then(value => {
  console.log(value);
}).then(value => {
  console.log(value);
})

$.fn.extend({
 check: function() {
    return this.each(function() {
      this.checked = true;
    }),
 }
 uncheck: function() {
    return this.each(function() {
      this.checked = false;
    })
  }
})

$("input[type='checkbox']").check();

function myPlugin($ele, options) {};

myPlugin.prototype = {
  method1: function() {},
  method2: function() {},
};

$.fn.myplugin = function(options) {
  new myPlugin(this, options);
}

class Animal {
  this.name = 'Animal';

  this.sleep = function() {
    console.log(this.name + '~~~');
  }
}

Animal.prototype.eat = function(food) {
  console.log(this.name + ' eat: ' + food);
}

function Cat() {}
Cat.prototype = new Animal();
Cat.prototype.name = 'cat';

var cat = new cat();
console.log(cat.name); // cat
console.log(cat.eat('fish')); // cat eat: fish
console.log(cat.sleep()); //  cat~~~
console.log(cat instanceof Animal); //  true
console.log(cat instanceof Cat);  //  true

function Cat() {
  Animal.apply(this);  // Animal.call(this);
  this.name = 'cat';
}

var cat = new Cat();
console.log(cat.name);  //  cat
console.log(cat.sleep()); //  cat~~~
console.log(cat instanceof Animal);   // false
console.log(cat instanceof Cat);  // true

function Cat(name) {
  var instance = new Animal();
  instance.name = name || 'Tom';
  return instance;
}

var cat = new Cat();
console.log(cat.name);  //  Tom
console.log(cat.sleep()); //  Tom~~~
console.log(cat instanceof Animal);  // true
console.log(cat instanceof Cat);  //  false

function Cat() {
  var animal = new Animal();
  for (var i in animal) {
    Cat.prototype[i] = animal[i];
  }

  Cat.prototype.name = name || 'Tom';
}

var cat = new Cat();
console.log(cat.name);  //  Tom
console.log(cat.sleep()); //  Tom~~~
console.log(cat instanceof Animal);  // false
console.log(cat instanceof Cat);  //  true

function Cat(name) {
  Animal.call(this);
  this.name = name || 'Tom';
}
Cat.prototype = new Animal();
Cat.prototype.constructor = Cat;  //  修复Cat的构造函数

var cat = new Cat();
console.log(cat.name);  //  Tom
console.log(cat.sleep()); //  Tom~~~
console.log(cat instanceof Animal);   // true
console.log(cat instanceof Cat);  // true

function Cat(name) {
  Animal.call(this);
  this.name = name || 'Tom';
}
(function() {
  //  创建一个没有实例方法的类
  var Super = function() {};
  Super.prototype = Animal.prototype;
  //  将实例作为子类的原型
  Cat.prototype = new Super();
  Cat.prototype.constructor = Cat;  //  修复Cat的构造函数

})();

var cat = new Cat();
console.log(cat.name);  //  Tom
console.log(cat.sleep()); //  Tom~~~
console.log(cat instanceof Animal); // true
console.log(cat instanceof Cat); //true

function testable(target) {
  target.isTestable = false;
}

@testabel
class MyTestableClass {}

function testable(isTestable) {
  return function(target) {
    target.isTestable = isTestable;
    target.prototype.name = 'achen';
  }
}

@testabel(false)
class MyTestabelClass {}

class Math {
  @log
  add(a, b) {
    return a + b;
  }
}

function log(target, name, descriptor) {
  var oldValue = descriptor.value;

  descriptor.value = function() {
    console.log(`Calling ${name} with`, arguments);

    return oldValue.apply(this, arguments);
  }

  return descriptor;
}

const math = new Math();

math.add(2, 4);

var conuter = 0;

var add = function() {
  counter++;
};

@add
function foo() {
}