tianma630 / note-book Goto Github PK

var arrayProto = Array.prototype;  // 获取数组的原型，原型中包含了数组所有的属性、方法
var arrayMethods = Object.create(arrayProto); // 用数组的原型创建一个新的对象示例

var methodsToPatch = [ // 枚举了所有可能改变数组自身的方法
  'push',
  'pop',
  'shift',
  'unshift',
  'splice',
  'sort',
  'reverse'
];

/**
 * Intercept mutating methods and emit events
 */
methodsToPatch.forEach(function (method) { // 遍历枚举的方法
  // cache original method
  var original = arrayProto[method]; // 获取方法名称 比如push
  def(arrayMethods, method, function mutator () { // 劫持数组中的方法，问题1: 为啥劫持的是arrayMethods， 而不是arrayProto
    var args = [], len = arguments.length;
    while ( len-- ) args[ len ] = arguments[ len ]; // 把参数放入数组args，问题2: 是否多此一举

    var result = original.apply(this, args); // 执行该方法，也可以用arguments
    var ob = this.__ob__;  // 获取observer，里面存储了dep，dep中存储了watcher
    var inserted;
    switch (method) { // 获取数组中新增的元素，比如list.push(item)：item即是新的元素
      case 'push':
      case 'unshift':
        inserted = args;
        break
      case 'splice':
        inserted = args.slice(2);
        break
    }
    if (inserted) { ob.observeArray(inserted); } // 劫持新增的元素
    // notify change
    ob.dep.notify(); // 执行watcher，触发生成vdom并patch
    return result // 返回数组方法执行结果
  });
});

var Observer = function Observer (value) {
  this.value = value; // 对象or数组
  this.dep = new Dep(); // 在oberver实例中创建dep
  this.vmCount = 0;
  def(value, '__ob__', this); // 定义value的__ob__属性为当前的oberver实例，对应上面的代码是如何获取observer的
  if (Array.isArray(value)) { // 如果是数组
    if (hasProto) {
      protoAugment(value, arrayMethods); // 将value的原型对象修改为arrayMethods，原来如此，进一步解释了上面的问题1
    } else {
      copyAugment(value, arrayMethods, arrayKeys);
    }
    this.observeArray(value); // 如果是数组，劫持递归劫持
  } else {
    this.walk(value); // 实现对象的属性劫持
  }
};

function protoAugment (target, src) { // 修改原型实例方法
  /* eslint-disable no-proto */
  target.__proto__ = src;
  /* eslint-enable no-proto */
}

// 卡死
while(true);
// 不会卡死
function loop() {
  setTimeout(() => {}, 0);
}
loop();

function enqueueInsertMarkup(parentInst, markup, toIndex) {
  updateQueue.push({
    parentInst: parentInst,
    parentNode: null,
    type: ReactMultiChildUpdateTypes.INSERT_MARKUP,
    markupIndex: markupQueue.push(markup) - 1,
    content: null,
    fromIndex: null,
    toIndex: toIndex,
  });
}

function enqueueMove(parentInst, fromIndex, toIndex) {
  updateQueue.push({
    parentInst: parentInst,
    parentNode: null,
    type: ReactMultiChildUpdateTypes.MOVE_EXISTING,
    markupIndex: null,
    content: null,
    fromIndex: fromIndex,
    toIndex: toIndex,
  });
}

function enqueueRemove(parentInst, fromIndex) {
  updateQueue.push({
    parentInst: parentInst,
    parentNode: null,
    type: ReactMultiChildUpdateTypes.REMOVE_NODE,
    markupIndex: null,
    content: null,
    fromIndex: fromIndex,
    toIndex: null,
  });
}

_updateChildren: function(nextNestedChildrenElements, transaction, context) {
  var prevChildren = this._renderedChildren;
  var nextChildren = this._reconcilerUpdateChildren(
    prevChildren, nextNestedChildrenElements, transaction, context
  );
  if (!nextChildren && !prevChildren) {
    return;
  }
  var name;
  var lastIndex = 0;
  var nextIndex = 0;
  for (name in nextChildren) {
    if (!nextChildren.hasOwnProperty(name)) {
      continue;
    }
    var prevChild = prevChildren && prevChildren[name];
    var nextChild = nextChildren[name];
    if (prevChild === nextChild) {
      // 移动节点
      this.moveChild(prevChild, nextIndex, lastIndex);
      lastIndex = Math.max(prevChild._mountIndex, lastIndex);
      prevChild._mountIndex = nextIndex;
    } else {
      if (prevChild) {
        lastIndex = Math.max(prevChild._mountIndex, lastIndex);
        // 删除节点
        this._unmountChild(prevChild);
      }
      // 初始化并创建节点
      this._mountChildAtIndex(
        nextChild, nextIndex, transaction, context
      );
    }
    nextIndex++;
  }
  for (name in prevChildren) {
    if (prevChildren.hasOwnProperty(name) &&
        !(nextChildren && nextChildren.hasOwnProperty(name))) {
      this._unmountChild(prevChildren[name]);
    }
  }
  this._renderedChildren = nextChildren;
},
// 移动节点
moveChild: function(child, toIndex, lastIndex) {
  if (child._mountIndex < lastIndex) {
    this.prepareToManageChildren();
    enqueueMove(this, child._mountIndex, toIndex);
  }
},
// 创建节点
createChild: function(child, mountImage) {
  this.prepareToManageChildren();
  enqueueInsertMarkup(this, mountImage, child._mountIndex);
},
// 删除节点
removeChild: function(child) {
  this.prepareToManageChildren();
  enqueueRemove(this, child._mountIndex);
},

_unmountChild: function(child) {
  this.removeChild(child);
  child._mountIndex = null;
},

_mountChildAtIndex: function(
  child,
  index,
  transaction,
  context) {
  var mountImage = ReactReconciler.mountComponent(
    child,
    transaction,
    this,
    this._nativeContainerInfo,
    context
  );
  child._mountIndex = index;
  this.createChild(child, mountImage);
},

export default 1;

export const b = 2;

export const c = 3;

export const plus = function(a, b) {
  return a + b;
}

export default function (a) {
  return  a * a;
};

import a, {b, c, plus} from './a';
import d from './b';

let ret = plus(a, b) + d(c);

console.log(ret);

(function(modules) {
	// 存储了所有模块化的信息
	var installedModules = {};
	// 按文件处理解析模块化信息，moduleId其实就是文件路径名称
	function __webpack_require__(moduleId) {
		// 检查该文件是否缓存了
		if(installedModules[moduleId]) {
			return installedModules[moduleId].exports;
		}
		// 新建一个空的
		var module = installedModules[moduleId] = {
			i: moduleId, // 模块id 其实就是文件路径，比如./src/b.js
			l: false,
			exports: {} // 这个文件中的所有export的内容，比如b.js中 {default: function(a) { return a * a; }}
		};
		// 处理文件中的模块化信息，并执行代码，具体逻辑在下面的参数中，先mark下
		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
		// 标记文件被加载，就是是否被使用
		module.l = true;
		// 返回模块化的信息
		return module.exports;
	}
	// 缓存一个模块，就是处理类似export const b = 2;的逻辑
	__webpack_require__.d = function(exports, name, getter) {
		if(!__webpack_require__.o(exports, name)) { // 判断下这个模块是否缓存过
			Object.defineProperty(exports, name, { enumerable: true, get: getter });
		}
	};
         // 入口执行函数，就是执行entry中的配置文件
	return __webpack_require__(__webpack_require__.s = "./src/entry.js");
})
({
// 处理具体的模块代码文件，按文件区分模块，执行的入口就是上面mark的call方法
  "./src/a.js": (function(module, __webpack_exports__, __webpack_require__) {
    "use strict";
    // 为了方便查看eval中的代码，我们在下面格式化一下
    eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"b\", function() { return b; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"c\", function() { return c; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"plus\", function() { return plus; });\n/* harmony default export */ __webpack_exports__[\"default\"] = (1);\n\nconst b = 2;\n\nconst c = 3;\n\nconst plus = function(a, b) {\n  return a + b;\n}\n\n//# sourceURL=webpack:///./src/a.js?");
  }),
  
  "./src/b.js": (function(module, __webpack_exports__, __webpack_require__) {
    "use strict";
    eval("__webpack_require__.r(__webpack_exports__);\n/* harmony default export */ __webpack_exports__[\"default\"] = (function (a) {\n  return  a * a;\n});;\n\n//# sourceURL=webpack:///./src/b.js?");
  }),
  
  "./src/entry.js": (function(module, __webpack_exports__, __webpack_require__) {
    "use strict";
    eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _a__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./a */ \"./src/a.js\");\n/* harmony import */ var _b__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./b */ \"./src/b.js\");\n\n\n\nlet ret = Object(_a__WEBPACK_IMPORTED_MODULE_0__[\"plus\"])(_a__WEBPACK_IMPORTED_MODULE_0__[\"default\"], _a__WEBPACK_IMPORTED_MODULE_0__[\"b\"]) + Object(_b__WEBPACK_IMPORTED_MODULE_1__[\"default\"])(_a__WEBPACK_IMPORTED_MODULE_0__[\"c\"]);\n\nconsole.log(ret);\n\n\n\n// (function(a, b) {\n//   let ret = a(1, 2) + b(2, 3);\n\n//   console.log(ret);\n// })(\n// {a: function(a, b) {\n//   return a + b;\n// }}, \n// function(a, b) {\n//   return a * b;\n// }\n// )\n\n\n//# sourceURL=webpack:///./src/entry.js?");
  })
  
});

// function(module, __webpack_exports__, __webpack_require__)

// __webpack_require__ 上面的模块化入口方法
// __webpack_exports__ 存储模块化信息的对象, 可以理解为{}

// a.js
__webpack_require__.r(__webpack_exports__); // 标记了这个是存储模块化信息的对象，没有直接作用
__webpack_require__.d(__webpack_exports__, "b" , function() { return b; }); // 放入到模块化对象中，可以理解为{b: function() { return b; }}
 __webpack_require__.d(__webpack_exports__, "c", function() { return c; });
 __webpack_require__.d(__webpack_exports__, "plus", function() { return plus; });
 __webpack_exports__["defalut"] = (1); // 处理export default
 const b = 2;
 const c = 3;
 const plus = function(a, b) {
     return a + b;
    }


// b.js
__webpack_require__.r(__webpack_exports__);
__webpack_exports__["default"] = (function (a) {
     return  a * a;
});


// entry.js
// 入口文件必须放在最下面执行
__webpack_require__.r(__webpack_exports__);
var _a__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("./src/a.js");  // 根据路径获取模块依赖，如果模块不存在，则先执行./src/a.js中的代码，如果已经执行过了，则直接获取缓存中的依赖
var _b__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__("./src/b.js");

// 将依赖对象和方法动态替换成引入的依赖
let ret = Object(_a__WEBPACK_IMPORTED_MODULE_0__["plus"])(_a__WEBPACK_IMPORTED_MODULE_0__["default"], _a__WEBPACK_IMPORTED_MODULE_0__["b"]) + _a__WEBPACK_IMPORTED_MODULE_0__["c"] * _b__WEBPACK_IMPORTED_MODULE_1__["default"];

console.log(ret);

// 本文的例子生成的installedModules对象
{ 
  "./src/entry.js": { 
    "i": "./src/entry.js", 
    "l": true, 
    "exports": {}
  },
  "./src/a.js": { 
    "i": "./src/a.js",
    "l": true,
    "exports": {
      "b": function () {
        return b;
      },
      "c": function() {
        return c;
      },
      "plus": function (a, b) {
        return a + b;
      },
      "default": 1
    }
  },
  "./src/b.js": { 
    "i": "./src/b.js",
    "l": true,
    "exports": {
      "default": function (a) {
        return a * a;
      }
    } 
  }
}

setTimeout(() => {
    import(/* webpackChunkName: "print" */ './print').then((print) => {
        print.log();
    })
}, 3000);

export function log() {
    console.log('print log');
}

module.exports = {
    entry: {
        app: './src/index.js'
    },
   ...
    output: {
        filename: '[name].bundle.js',
        chunkFilename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
};

(function(modules) { // webpackBootstrap
	// 动态引入的方法
	__webpack_require__.e = function requireEnsure(chunkId) {
        // 因为动态引入的过程是异步的，所以promise化
		var promises = [];


        var installedChunkData = installedChunks[chunkId];
        // 是否已经引入过， 0表示已经引入
		if(installedChunkData !== 0) { // 0 means "already installed".

			// 是否已经创建了promise
			if(installedChunkData) {
				promises.push(installedChunkData[2]);
			} else {
				// 创建一个promise
				var promise = new Promise(function(resolve, reject) {
					installedChunkData = installedChunks[chunkId] = [resolve, reject];
				});
				promises.push(installedChunkData[2] = promise);

				// 通过动态创建script引入js文件
				var script = document.createElement('script');
				var onScriptComplete;

				script.charset = 'utf-8';
				script.timeout = 120;
				if (__webpack_require__.nc) {
					script.setAttribute("nonce", __webpack_require__.nc);
				}
				script.src = jsonpScriptSrc(chunkId);

				// create error before stack unwound to get useful stacktrace later
                var error = new Error();
                // 回掉函数
				onScriptComplete = function (event) {
					// avoid mem leaks in IE.
					script.onerror = script.onload = null;
					clearTimeout(timeout);
					var chunk = installedChunks[chunkId];
					if(chunk !== 0) {
						if(chunk) {
							var errorType = event && (event.type === 'load' ? 'missing' : event.type);
							var realSrc = event && event.target && event.target.src;
							error.message = 'Loading chunk ' + chunkId + ' failed.\n(' + errorType + ': ' + realSrc + ')';
							error.name = 'ChunkLoadError';
							error.type = errorType;
							error.request = realSrc;
							chunk[1](error);
						}
						installedChunks[chunkId] = undefined;
					}
				};
				var timeout = setTimeout(function(){
					onScriptComplete({ type: 'timeout', target: script });
				}, 120000);
				script.onerror = script.onload = onScriptComplete;
				document.head.appendChild(script);
			}
		}
		return Promise.all(promises);
	};

	// Load entry module and return exports
	return __webpack_require__(__webpack_require__.s = "./src/index.js");
})
/************************************************************************/
({

"./src/index.js":
(function(module, exports, __webpack_require__) {

    eval(```
        setTimeout(() => {
            // 动态引入print文件
            __webpack_require__.e("print")
            // 引入之后执行__webpack_require__，模块化处理（print文件是app文件的一个模块，具体逻辑可以参考之前的文章：https://github.com/tianma630/note-book/issues/9）
            .then(__webpack_require__.bind(null,"./src/print.js"))
            // 执行代码
            .then((print) => {
                print.log();
            })
        }, 3000);
        ```
    )
})
    
});

function RenderFunctionComponent() {
  const [firstName, setFirstName] = useState("Rudi");
  const [lastName, setLastName] = useState("Yardley");

  return (
    <Button onClick={() => setFirstName("Fred")}>Fred</Button>
  );
}

let state = [];
let setters = [];
let firstRun = true;
let cursor = 0;

function createSetter(cursor) {
  return function setterWithCursor(newVal) {
    state[cursor] = newVal;
  };
}

// This is the pseudocode for the useState helper
export function useState(initVal) {
  if (firstRun) {
    state.push(initVal);
    setters.push(createSetter(cursor));
    firstRun = false;
  }

  const setter = setters[cursor];
  const value = state[cursor];

  cursor++;
  return [value, setter];
}

// Our component code that uses hooks
function RenderFunctionComponent() {
  const [firstName, setFirstName] = useState("Rudi"); // cursor: 0
  const [lastName, setLastName] = useState("Yardley"); // cursor: 1

  return (
    <div>
      <Button onClick={() => setFirstName("Richard")}>Richard</Button>
      <Button onClick={() => setFirstName("Fred")}>Fred</Button>
    </div>
  );
}

// This is sort of simulating Reacts rendering cycle
function MyComponent() {
  cursor = 0; // resetting the cursor
  return <RenderFunctionComponent />; // render
}

console.log(state); // Pre-render: []
MyComponent();
console.log(state); // First-render: ['Rudi', 'Yardley']
MyComponent();
console.log(state); // Subsequent-render: ['Rudi', 'Yardley']

// click the 'Fred' button

console.log(state); // After-click: ['Fred', 'Yardley']

let firstRender = true;

function RenderFunctionComponent() {
  let initName;
  
  if(firstRender){
    [initName] = useState("Rudi");
    firstRender = false;
  }
  const [firstName, setFirstName] = useState(initName);
  const [lastName, setLastName] = useState("Yardley");

  return (
    <Button onClick={() => setFirstName("Fred")}>Fred</Button>
  );
}

/**
 * 获取 browser 信息
 */
export function getBrowser() {
  const ua = window.navigator.userAgent || "";
  const isAndroid = /android/i.test(ua);
  const isIos = /iphone|ipad|ipod/i.test(ua);
  const isWechat = /micromessenger\/([\d.]+)/i.test(ua);
  const isWeibo = /(weibo).*weibo__([\d.]+)/i.test(ua);
  const isQQ = /qq\/([\d.]+)/i.test(ua);
  const isQQBrowser = /(qqbrowser)\/([\d.]+)/i.test(ua);
  const isQzone = /qzone\/.*_qz_([\d.]+)/i.test(ua);
  // 安卓 chrome 浏览器，很多 app 都是在 chrome 的 ua 上进行扩展的
  const isOriginalChrome = /chrome\/[\d.]+ Mobile Safari\/[\d.]+/i.test(ua) && isAndroid;
  // chrome for ios 和 safari 的区别仅仅是将 Version/<VersionNum> 替换成了 CriOS/<ChromeRevision>
  // ios 上很多 app 都包含 safari 标识，但它们都是以自己的 app 标识开头，而不是 Mozilla
  const isSafari =
    /safari\/([\d.]+)$/i.test(ua) &&
    isIos &&
    ua.indexOf("Crios") < 0 &&
    ua.indexOf("Mozilla") === 0;

  return {
    isAndroid,
    isIos,
    isWechat,
    isWeibo,
    isQQ,
    isQQBrowser,
    isQzone,
    isOriginalChrome,
    isSafari
  };
}

const env = (function() {
	return getBrowser();
})()

const getEvn = (function() {
	let env;
  return function() {
  	if (!env) {
    	env = getBrowser(); 
    }
    
    return env;
  }
})()

const getSingle = function(fn) {
    let ret;
  
    return function() {
        if (!ret) {
            result = fn.apply(this, arguments)
        }

        return ret;
    }
}

const getEnv = getSingle(getBrowser);

/**
 * 判断两个版本
 * 比如：'1.5.5'，'1.5.0'进行比较，返回的是5，前面的版本大于后面5个版本
 * @param {*} preV
 * @param {*} nextV
 */
export const compareVersion = (preV, nextV) => {
  const pvs = preV.split(".");
  const nvs = nextV.split(".");
  const rv = pvs[0] - nvs[0];

  return rv === 0 && preV !== nextV
    ? compareVersion(pvs.splice(1).join("."), nvs.splice(1).join("."))
    : rv;
};

const compareVersion = (preV, nextV) => {
  const pvs = preV.split(".");
  const nvs = nextV.split(".");

  function _compare(pvs, nvs) {
    const rv = pvs[0] - nvs[0];

    return rv === 0 && pvs.length > 1 && nvs.length > 1
    ? _compare(pvs.slice(1), nvs.slice(1))
    : rv;
  }

  return _compare(pvs, nvs);
};

const compareVersion = (preV, nextV) => {
  const pvs = preV.split(".");
  const nvs = nextV.split(".");

  let ret, i = 0;
  for (; i < pvs.length && i < nvs.length; i++) {
    ret = pvs[i] - nvs[i];
    if (ret !== 0) {
      break;
    }
  }
  return ret;
};

function fib(n) {
  if (n === 1) {
    return 0;
  } 
  
  if (n === 2) {
    return 1;
  }

  let t1 = 0, t2 = 1, i = 3;
  for (; i <= n; i++) {
    if (i === n) {
      return t1 + t2;
    } 

    [t1, t2] = [t2, t1 + t2];
  }
}

/**
 * 十进制数字精度转换
 * @param {待转换数字} num
 * @param {保留小数位数}} decimals
 * @param {是否返回“+”符号} withSign
 * 对于null, undefined, NaN均返回0.00
 */
function toFixed(num, decimals = 2, withSign, isOmitZero) {
  let number = num;
  if (typeof decimals !== "number") {
    throw new TypeError("传入toFixed的decimals参数类型不正确");
  }
  if (typeof num !== "number") {
    number = Number(num);
    if (Number.isNaN(number)) {
      return (0).toFixed(decimals);
    }
  }
  if (Number.isNaN(number)) {
    return (0).toFixed(decimals);
  }
  let result = number.toFixed(decimals);
  if (isOmitZero) {
    result = result.replace(/(?:\.0*|(\.\d+?)0+)$/, "$1");
  }
  if (withSign && num > 0) {
    result = `+${result}`;
  }
  return result;
}

function toFixed(num, decimals = 2, withSign, isOmitZero) {
  
  function zs(num, decimal) {
    return num + '.' + '0'.repeat(decimal);
  }

  function xs(num, decimal) {
    return parseFloat((num + '0'.repeat(decimal) + '1')).toFixed(decimal);
  }

  function isInt(n){
    return parseInt(n) == parseFloat(n)
  }
  
  function isFloat(n) {
    return parseInt(n) < parseFloat(n)
  }

  let ret = num;
  if (num == 0 && num !== 0 && num !== '0') {
    if (isOmitZero) {
      return '0.00';
    }
  } else if (typeof num === 'string' || typeof num === 'number') {
    if (isInt(num)) {
      ret = zs(num, decimals);
    } else if (isFloat(num)) {
      ret = xs(num, decimals);
    }

    if (withSign && ret > 0) {
      ret = '+' + ret;
    }
  }

  return ret;
}

const formats = {
  zs: function(num, decimal) {
    return num + '.' + '0'.repeat(decimal);
  },
  xs: function(num, decimal) {
    return parseFloat((num + '0'.repeat(decimal) + '1')).toFixed(decimal);
  },
  default: function(num, decimal) {
    return num;
  },
}

function whichFormat(n){
  const i = parseInt(n);
  const f = parseFloat(n);
  if (i == f) {
    return 'zs';
  } else if (i < f) {
    return 'xs';
  } else {
    return 'default';
  }
}

function toFixed(num, decimals = 2, withSign, isOmitZero) {
  let ret = num;
  if (num == 0 && num !== 0 && num !== '0') {
    if (isOmitZero) {
      return '0.00';
    }
  } else if (typeof num === 'string' || typeof num === 'number') {
    ret = formats[whichFormat(num)](num, decimals);

    if (withSign && ret > 0) {
      ret = '+' + ret;
    }
  }

  return ret;
}

{{'hello ' + name}}：{{age}}

let data = {
  abc: 2,
  efg: 3
}

let expr = '{{1 + abc / 2}} - {{efg * 2 }} + \'abc\'';

const exprReg1 = /{{([^{{}}]+)}}/g;

expr.replace(exprReg1, (r, $1) => {
    console.log($1);
})

1 + abc / 2
efg * 2 

const exprReg2 = /[\s|\+|-|\*|/]?([^\s|\+|-|\*|/]+)[\s|\+|-|\*|/]?/g;

let expr = '1 + abc / 2';

expr.replace(exprReg2, (r, $1) => {
  if (/^[a-zA-Z\$].*/.test($1)) { // 
    console.log($1);
  }
})

abc

function renderExpr(expr) {
  function renderParam(expr) {
    return expr.replace(exprReg2, (r, $1) => {
      if (/^[a-zA-Z\$].*/.test($1)) {
        return 'data.' + $1
      }
      return $1;
    })
  } 

  return expr.replace(exprReg1, (r, $1) => {
    return renderParam($1)
  })
}

function createRenderExpr() {
  function renderParam(expr) {
    return expr.replace(exprReg2, (r, $1) => {
      if (/^[a-zA-Z\$].*/.test($1)) {
        return 'data.' + $1
      }
      return $1;
    })
  }

  return function renderExpr(expr) {
    return expr.replace(exprReg1, (r, $1) => {
      return renderParam($1)
    })
  }
}

const renderExpr = createRenderExpr();

let data = {
  abc: 2,
  efg: 3
}

let expr = '{{ 1 + abc / 2}} - {{efg * 2 }} + \'abc\'';

console.log(renderExpr(expr));

/**
 * 冒泡排序比较任何两个相邻的项，如果第一个比第二个大，则交换它们。元素项向上移动至 正确的顺序，就好像气泡升至表面一样，冒泡排序因此得名
 */
function bubbleSort(arr = []) {
  if (arr.length <= 1) {
    return;
  }
  for(let i = 0; i < arr.length; i ++) {
    for (let j = 0; j < arr.length - i; j++) {
      if (arr[j] > arr[j + 1]) {
        [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]];
      }
    }
  }
}

/**
 * 选择排序算法是一种原址比较排序算法。选择排序大致的思路是找到数据结构中的最小值并 2 将其放置在第一位，接着找到第二小的值并将其放在第二位，以此类推。
 */
function selectionSort(arr = []) {
  if (arr.length <= 1) {
    return;
  }
  for (let i = 0; i < arr.length; i++) {
    let min;
    let minIdx;
    for (let j = i; j < arr.length; j++) {
      if (!min || arr[j] < min) {
        minIdx = j;
        min = arr[j];
      }
    }
    if (i !== minIdx) {
      [arr[i], arr[minIdx]] = [arr[minIdx], arr[i]]
    }
  }
}


/**
 * 插入排序是依次将将后面的元素插入到已经排好序的前面的元素中 
 */
function insertionSort(arr = []) {
  if (arr.length <= 1) {
    return;
  }
  for (let i = 1; i < arr.length; i++) {
    for (let j = i; j >= 0; j--) {
      if (arr[j] < arr[j - 1]) {
        [arr[j], arr[j - 1]] = [arr[j - 1], arr[j]];
      } else {
        break;
      }
    }
  }
}


/**
 * 归并排序是一种分治算法。其**是将原始数组切分成较小的数组，直到每个小数组只有一 个位置，接着将小数组归并成较大的数组，直到最后只有一个排序完毕的大数组。
 */
function mergeSort(arr = []) {
  if (arr.length <= 1) {
    return arr;
  }

  function merge(left, right) {
    const ret = [];
    let i = 0, j = 0;
    while (i < left.length && j < right.length) {
      if (left[i] < right[j]) {
        ret.push(left[i ++]);
      } else {
        ret.push(right[j ++]);
      }
    }
    
    while (i < left.length) {
      ret.push(left[i ++]);
    }

    while (j < right.length) {
      ret.push(right[j ++]);
    }

    return ret;
  }

  function sliceArr(arr) {
    if (arr.length <= 1) {
      return arr;
    }
    const midInx = Math.floor(arr.length / 2);
    const left = arr.slice(0, midInx);
    const right = arr.slice(midInx, arr.length);
    return merge(sliceArr(left), sliceArr(right));
  }

  return sliceArr(arr);
}

/**
 * 快速排序也使用分治的方法，将原始数组分 为较小的数组(但它没有像归并排序那样将它们分割开)。
 */
function quickSort(arr = []) {

  function sort(arr = []) {
    if (arr.length <= 1) {
      return arr;
    }

    if (arr.length == 2) {
      if (arr[0] > arr[1]) {
        return [arr[1], arr[0]];
      } else {
        return arr;
      }
    }

    let tmp = arr[0], left = [], right = [], i = 0;
    while (i < arr.length) {
      if (arr[i] < tmp) {
        left.push(arr[i]);
      } else {
        right.push(arr[i]);
      }
      i++;
    }

    return [...sort(left), ...sort(right)];
  }

  return sort(arr);
}