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

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

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

一、前端模块化

二、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实现原理

六、代码人生

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

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

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