src
├── compiler        # 编译相关 
├── core            # 核心代码 
├── platforms       # 不同平台的支持
├── server          # 服务端渲染
├── sfc             # .vue 文件解析
├── shared          # 共享代码

let person = {
  name: 'aaa',
  lesson: {
    name: 'english',
    type: 'basic'
  }
};

function deepFreeze(obj) {
  let propNames = Object.getOwnPropertyNames(obj);

  for (let name of propNames) {
    let value = obj[name];

    obj[name] = value && typeof value === 'object' ? deepFreeze(value) : value;
  }

  return Object.freeze(obj);
}

deepFreeze(person);

person.lesson.name = 123;

debounce(fn, delay) {
  let timer = null;

  return (...args) => {
    if (timer) {
      clearTimeout(timer);
      timer = null;
    } else {
      timer = setTimeout(() => {
        fn.apply(this, args);
      }, delay);
    }
  };
}

// 定时器实现
throttle(fn, delay) {
  let timer = null;

  return (...args) => {
    if (!timer) {
      timer = setTimeout(() => {
        fn.apply(this, args);
        clearTimeout(timer);
        timer = null;
      }, delay);
    }
  };
}

// 时间戳实现
throttle(fn, delay) {
  let startTime = Date.now();

  return (...args) => {
    let curTime = Date.now();

    if (curTime - startTime >= delay) {
      fn.apply(this, args);
      startTime = Date.now();
    }
  };
}

// 时间戳 + 定时器实现
// 保证第一次触发事件就能立即执行事件处理函数和每隔 delay 时间执行一次事件处理函数
throttle(fn, delay) {
  let timer = null;
  let startTime = Date.now();

  return (...args) => {
    let curTime = Date.now();
    let remainTime = delay - (curTime - startTime);

    clearTimeout(timer);

    if (remainTime <= 0) {
      fn.apply(this, args);
      startTime = Date.now();
    } else {
      timer = setTimeout(fn, remainTime);
    }
  };
}

const fs = require("fs");
const path = require("path");
const babylon = require("@babel/parser");
const traverse = require("@babel/traverse").default;
const babel = require("@babel/core");

let ID = 0;

//读取文件信息，并获得当前js文件的依赖关系
function createAsset(filename) {
  //获取文件，返回值是字符串
  const content = fs.readFileSync(filename, "utf-8");

  //讲字符串为ast（抽象语法树， 这个是编译原理的知识，说得简单一点就是，可以把js文件里的代码抽象成一个对象，代码的信息会存在对象中）
  //babylon 这个工具是是负责解析字符串并生产ast。
  const ast = babylon.parse(content, {
    sourceType: "module"
  });

  //用来存储 文件所依赖的模块，简单来说就是，当前js文件 import 了哪些文件，都会保存在这个数组里
  const dependencies = [];

  //遍历当前ast（抽象语法树）
  traverse(ast, {
    //找到有 import语法 的对应节点
    ImportDeclaration: ({ node }) => {
      //把当前依赖的模块加入到数组中，其实这存的是字符串，
      //例如 如果当前js文件 有一句 import message from './message.js'， 
      //'./message.js' === node.source.value
      dependencies.push(node.source.value);
    }
  });

  //模块的id 从0开始， 相当一个js文件 可以看成一个模块
  const id = ID++;

  //这边主要把ES6 的代码转成 ES5
  const { code } = babel.transformFromAstSync(ast, null, {
    presets: ["@babel/preset-env"]
  });

  return {
    id,
    filename,
    dependencies,
    code
  };
}

//从入口开始分析所有依赖项，形成依赖图，采用广度遍历
function createGraph(entry) {
  const mainAsset = createAsset(entry);
    
  //既然要广度遍历肯定要有一个队列，第一个元素肯定是 从 "./example/entry.js" 返回的信息
  const queue = [mainAsset];
  
  
  for (const asset of queue) {
    const dirname = path.dirname(asset.filename);

    //新增一个属性来保存子依赖项的数据
    //保存类似 这样的数据结构 --->  {"./message.js" : 1}
    asset.mapping = {};

    asset.dependencies.forEach(relativePath => {
      const absolutePath = path.join(dirname, relativePath);
        
      //获得子依赖（子模块）的依赖项、代码、模块id，文件名
      const child = createAsset(absolutePath);

      //给子依赖项赋值，
      asset.mapping[relativePath] = child.id;

      //将子依赖也加入队列中，广度遍历
      queue.push(child);
    });
  }
  return queue;
}

//根据生成的依赖关系图，生成对应环境能执行的代码，目前是生产浏览器可以执行的
function bundle(graph) {
  let modules = "";

  //循环依赖关系，并把每个模块中的代码存在function作用域里
  graph.forEach(mod => {
    modules += `${mod.id}:[
      function (require, module, exports){
        ${mod.code}
      },
      ${JSON.stringify(mod.mapping)},
    ],`;
  });

  //require, module, exports 是 cjs的标准不能再浏览器中直接使用，所以这里模拟cjs模块加载，执行，导出操作。
  const result = `
    (function(modules){
      //创建require函数， 它接受一个模块ID（这个模块id是数字0，1，2） ，它会在我们上面定义 modules 中找到对应是模块.
      function require(id){
        const [fn, mapping] = modules[id];
        function localRequire(relativePath){
          //根据模块的路径在mapping中找到对应的模块id
          return require(mapping[relativePath]);
        }
        const module = {exports:{}};
        //执行每个模块的代码。
        fn(localRequire,module,module.exports);
        return module.exports;
      }
      //执行入口文件，
      require(0);
    })({${modules}})
  `;

  return result;
}

const graph = createGraph("./example/entry.js");

const ret = bundle(graph);

// 打包生成文件
fs.writeFileSync("./bundle.js", ret);

/**
 * 读取内容
 * 
 * yarn add babylon babel-core babel-traverse babel-preset-env
 * 首先我们传入一个文件路径参数，然后通过 fs 将文件中的内容读取出来
 * 接下来我们通过 babylon 解析代码获取 AST，目的是为了分析代码中是否还引入了别的文件
 * 通过 dependencies 来存储文件中的依赖，然后再将 AST 转换为 ES5 代码
 * 最后函数返回了一个对象，对象中包含了当前文件路径、当前文件依赖和当前文件转换后的代码
 */
function readCode(filePath) {
  // 读取文件内容(以字符串的形式)
  const content = fs.readFileSync(filePath, 'utf-8')

  // 生成 AST(转换字符串为 AST 抽象语法树)
  const ast = babylon.parse(content, {
    sourceType: 'module'
  })

  // 寻找当前文件的依赖关系
  const dependencies = []
  // 遍历抽象语法树
  traverse(ast, {
    // 每当遍历到 import 语法的时候
    ImportDeclaration: ({ node }) => {
      // 依赖文件的相对路径
      // 把依赖的模块加入到数组中
      dependencies.push(node.source.value)
    }
  })

  // 转换为浏览器可运行的代码
  // 通过 AST 将代码转为 ES5
  const { code } = transformFromAst(ast, null, {
    presets: ['@babel/preset-env']
  })

  return {
    filePath,
    dependencies,
    code
  }
}

 /**
 * 提取依赖关系
 * 
 * 调用 readCode 函数，传入入口文件
 * 分析入口文件的依赖
 * 识别 JS 和 CSS 文件
 * 首先我们读取入口文件，然后创建一个数组，该数组的目的是存储代码中涉及到的所有文件
 * 接下来我们遍历这个数组，一开始这个数组中只有入口文件，在遍历的过程中，如果入口文件有依赖其他的文件，那么就会被 push 到这个数组中
 * 在遍历的过程中，我们先获得该文件对应的目录，然后遍历当前文件的依赖关系
 * 在遍历当前文件依赖关系的过程中，首先生成依赖文件的绝对路径，然后判断当前文件是 CSS 文件还是 JS 文件
 * 如果是 CSS 文件的话，我们就不能用 Babel 去编译了，只需要读取 CSS 文件中的代码，然后创建一个 style 标签，将代码插入进标签并且放入 head 中即可
 * 如果是 JS 文件的话，我们还需要分析 JS 文件是否还有别的依赖关系
 * 最后将读取文件后的对象 push 进数组中
 */
function getDependencies(entry) {
  // 读取入口文件
  // 从入口开始，分析所有依赖项，形成依赖图，采用深度优先遍历
  const entryObject = readCode(entry)
  // 定义一个保存依赖项的数组
  const dependencies = [entryObject]

  // 遍历所有文件依赖关系
  for (const asset of dependencies) {
    // 获得文件目录
    const dirname = path.dirname(asset.filePath)

    // 遍历当前文件依赖关系
    asset.dependencies.forEach(relativePath => {
      // 获得绝对路径
      const absolutePath = path.join(dirname, relativePath)
      // CSS 文件逻辑就是将代码插入到 `style` 标签中
      if (/\.css$/.test(absolutePath)) {
        const content = fs.readFileSync(absolutePath, 'utf-8')
        const code = `
          const style = document.createElement('style')
          style.innerText = ${JSON.stringify(content).replace(/\\r\\n/g, '')}
          document.head.appendChild(style)
        `
        dependencies.push({
          filePath: absolutePath,
          relativePath,
          dependencies: [],
          code
        })
      } else {
        // JS 代码需要继续查找是否有依赖关系
        const child = readCode(absolutePath)
        // 给子依赖项赋值
        child.relativePath = relativePath
        // 将子依赖也加入队列中，循环处理
        dependencies.push(child)
      }
    })
  }

  return dependencies
}

 /**
 * 实现打包的功能，生成浏览器可执行文件
 * 
 *（Babel 将我们 ES6 的模块化代码转换为了 CommonJS，浏览器不支持，所以自己实现 CommonJS 相关的代码）
 * 首先遍历所有依赖文件，构建出一个函数参数对象
 * 对象的属性就是当前文件的相对路径，属性值是一个函数，函数体是当前文件下的代码，函数接受三个参数 module、exports、require
 * module 参数对应 CommonJS 中的 module
 * exports 参数对应 CommonJS 中的 module.export
 * require 参数对应我们自己创建的 require 函数
 * 接下来就是构造一个使用参数的函数了，函数做的事情很简单，就是内部创建一个 require 函数，然后调用 require(entry)，也就是 require('./entry.js')，这样就会从函数参数中找到 ./entry.js 对应的函数并执行，最后将导出的内容通过 module.export 的方式让外部获取到
 * 最后再将打包出来的内容写入到单独的文件中
 */
 function bundle(dependencies, entry) {
  let modules = ''
  // 构建函数参数，生成的结构为
  // { './entry.js': function(module, exports, require) { 代码 } }

  dependencies.forEach(dep => {
    const filePath = dep.relativePath || entry
    modules += `'${filePath}': (
      function (module, exports, require) { ${dep.code} }
    ),`
  })

  // 构建 require 函数，目的是为了获取模块暴露出来的内容
  // module, exports, requir 不能直接在浏览器中使用，这里模拟了模块加载、执行、导出操作
  const result = `
    (function(modules) {
      // 创建一个 require 函数: 它接受一个 模块ID 并在我们之前构建的模块对象查找它
      function require(id) {
        const module = { exports : {} }
        // 
        modules[id](module, module.exports, require)

        return module.exports
      }

      // 执行入口文件
      require('${entry}')

    })({${modules}})
  `

  // 当生成的内容写入到文件中
  fs.writeFileSync('./bundle.js', result)
}

function observe(obj) {
  // 判断类型
  if (!obj || typeof obj !== 'object') {
    return
  }
  Object.keys(obj).forEach(key => {
    defineReactive(obj, key, obj[key])
  })
}

class Dep {
  constructor() {
    this.subs = []
  }
  // 添加依赖
  addSub(sub) {
    this.subs.push(sub)
  }
  // 更新
  notify() {
    this.subs.forEach(sub => {
      sub.update()
    })
  }
}
// 全局属性，通过该属性配置 Watcher
Dep.target = null

class Watcher {
  constructor(obj, key, cb) {
    // 将 Dep.target 指向自己
    // 然后触发属性的 getter 添加监听
    // 最后将 Dep.target 置空
    Dep.target = this
    this.cb = cb
    this.obj = obj
    this.key = key
    this.value = obj[key]
    Dep.target = null
  }
  update() {
    // 获得新值
    this.value = this.obj[this.key]
    // 调用 update 方法更新 Dom
    this.cb(this.value)
  }
}

function defineReactive(obj, key, val) {
  // 递归子属性
  observe(val)
  let dp = new Dep()
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: function reactiveGetter() {
      console.log('get value')
      // 将 Watcher 添加到订阅
      if (Dep.target) {
        dp.addSub(Dep.target)
      }
      return val
    },
    set: function reactiveSetter(newVal) {
      console.log('change value')
      val = newVal
      // 执行 watcher 的 update 方法
      dp.notify()
    }
  })
}

var data = { name: 'aaa' }
observe(data)
function update(value) {
  document.querySelector('div').innerText = value
}
// 模拟解析到 `{{name}}` 触发的操作
new Watcher(data, 'name', update)
data.name = 'bbb'

$> npm install onsenui vue-onsenui --save-dev
$> yarn add onsenui vue-onsenui -D

import 'onsenui/css/onsenui.css'; // Webpack CSS import
import 'onsenui/css/onsen-css-components.css'; // Webpack CSS import

import VueOnsen from 'vue-onsenui';
Vue.use(VueOnsen);

$> vue init OnsenUI/vue-cordova-webpack # For Cordova apps
$> vue init OnsenUI/vue-pwa-webpack # For PWA

function add(x, y) {
  return x + y;
}

add(3, 5); // returns 8

function addC(x) {
  return function (y) {
    return x + y;
  }
}

addC(3)(5); // returns 8

function curry(f) {
  return function(x) {
    return function(y) {
      return f(x, y);
    }
  }
}

function plus5(y) {
  return 5 + y;
}

plus5(3);  // returns 8

function partApply(f, x) {
  return function(y) {
    return f(x, y);
  }
}

if (color) {
  if (color === 'black') {
    printBlackBackground();
  } else if (color === 'red') {
    printRedBackground();
  } else if (color === 'blue') {
    printBlueBackground();
  } else if (color === 'green') {
    printGreenBackground();
  } else {
    printYellowBackground();
  }
}

switch(color) {
  case 'black':
    printBlackBackground();
    break;
  case 'red':
    printRedBackground();
    break;
  case 'blue':
    printBlueBackground();
    break;
  case 'green':
    printGreenBackground();
    break;
  default:
    printYellowBackground();
}

function printBackground(color) {
  if (!color || typeof color !== 'string') {
    return;
  }
}

let colorObj = {
  'black': printBlackBackground,
  'red': printRedBackground,
  'blue': printBlueBackground,
  'green': printGreenBackground,
  'yellow': printYellowBackground
};


if (color in colorObj) {
  colorObj[color]();
}

var fibonacci = function(n){
  return n < 2 ? n : fibonacci(n-1) + fibonacci(n-2);
}

var fibonacci = (function() {
  var cache = [0, 1]; // cache the value at the n index
  return function(n) {
    if (cache[n] === undefined) {
      for (var i = cache.length; i <= n; ++i) {
        cache[i] = cache[i-1] + cache[i-2];
      }
    }
    return cache[n];
  }
})()

var memoize = function(func){
    var cache = {};
    return function(){
        var key = Array.prototype.slice.call(arguments).toString();
        return key in cache ? cache[key] : (cache[key] = func.apply(this,arguments));
    }
}
fibonacci = memoize(fibonacci);

var memoize = function(func){
    const cache = {};
    return (...args) => {
        const key = [...args].toString();
        return key in cache ? cache[key] : (cache[key] = func(...args));
    }
}
fibonacci = memoize(fibonacci);

var gcd = memoize(function(a,b){
    var t;
    if (a < b) t=b, b=a, a=t;
    while(b != 0) t=b, b = a%b, a=t;
    return a;
})
gcd(27,183); //=> 3

var factorial = memoize(function(n) {
    return (n <= 1) ? 1 : n * factorial(n-1);
})
factorial(5); //=> 120

![] === false

+[] === 0

[]+[] === ""

"hello"[0] === "h"

+("1" + "1") === 11

![] === false

![]+[] === "false"

+!![] === 1

---------------------------------------------

(![]+[])[+!![]] === "a"  // same as "false"[1]

[][[]] + [] === "undefined"

[]["fill"]

[]["fill"]+[] === "function fill() { [native code] }"

true["constructor"] + [] === "function Boolean(){ [native code] }"

0["constructor"] + []    === "function Number() { [native code] }"

""["constructor"] + []   === "function String() { [native code] }"

[]["constructor"] + []   === "function Array() { [native code] }"

(12)["toString"](10) === "12" // base 10 - normal to us

(12)["toString"](2) === "1100" // base 2, or binary, for 12

(12)["toString"](8) === "14" // base 8 (octonary) for 12

(12)["toString"](16) === "c" // hex for 12

(10)["toString"](36) === "a"

(35)["toString"](36) === "z"

"test"["bold"]() === "<b>test</b>"

[]["fill"]["constructor"] === Function

Function("alert('test')");

Function anonymous() {  
    alert('test')
}

[]["fill"]["constructor"]("return escape(' ')")() === "%20"

[]["fill"]["constructor"]("return escape('<')")()[2] === "C"

""["constructor"]["fromCharCode"](65) === "A"

""["constructor"]["fromCharCode"](46) === "."