【黑叔说】之《进阶必备知识》(一)

前言：每天一分钟，通勤跟我学！

《进阶知识点》系列的知识，来自互联网，由黑叔总结或改编，仅供参考。

一、前端模块化

二、webpack简易版实现

    (function (modules) {function require(fileName) {const fn = modules[fileName];const module = {exports: {}};fn(require, module, module.exports);return module.exports;}require('./src/index.js');})({'./src/index.js': function (require, module, exports) {"use strict";var _test = require("./test");var _test2 = _interopRequireDefault(_test);function _interopRequireDefault(obj) {return obj && obj.__esModule ? obj : {default: obj};}console.log(_test2.default);}, './test': function (require, module, exports) {"use strict";Object.defineProperty(exports, "__esModule", {value: true});var _message = require("./message");var _message2 = _interopRequireDefault(_message);function _interopRequireDefault(obj) {return obj && obj.__esModule ? obj : {default: obj};}var a = 'hello' + _message2.default;exports.default = a;}, './message': function (require, module, exports) {"use strict";Object.defineProperty(exports, "__esModule", {value: true});var b = 'world';exports.default = b;},})

三、跨域解决方案

• JSONP

• CORS

• postMessage

• websocket

• Node中间件代理

• nginx反向代理

• window.name + iframe

• location.hash + iframe

• document.domain + iframe

四、DOM DIFF

• 用JS对象模拟DOM（虚拟DOM）

• 把此虚拟DOM转成真实DOM并插入页面中（render）

• 如果有事件发生修改了虚拟DOM，比较两棵虚拟DOM树的差异，得到差异对象（diff）

• 把差异对象应用到真正的DOM树上（patch）

五、MVVM实现原理

六、代码人生

我将会持续更新，敬请期待。

入群交流学习或喜欢黑叔亦或

回顾历史文章，扫码关注噢！