何幻
何幻

[FE] webpack群侠传（八）：childCompiler

前几篇文章中，我们介绍了webpack v4.20.2相关的内容，
但是很多老项目，还在使用webpack 3，
也要一些常用的代码库在webpack 4中是不兼容的。

例如，extract-text-webpack-plugin，目前仍不兼容webpack 4，
可以参考github中这个issue，Webpack 4 compatibility。

而且，我在学习webpack源码的过程中，
extract-text-webpack-plugin这个插件，确实给我造成了不小的困扰，
它用到了childCompiler这个概念，很值得一看。

本文我们自成体系，来看看webpack 3项目，以及extract-text-webpack-plugin的实现逻辑。
一图胜千言，

[FE] webpack群侠传（八）：childCompiler_第1张图片

1. webpack 3示例应用

1.1 初始化

$ mkdir ~/Test/debug-webpack3
$ cd ~/Test/debug-webpack3
$ npm init -f

1.2 安装依赖

$ npm i -D \
[email protected] \
[email protected] \
[email protected] \
[email protected] \
[email protected] \
[email protected] \
[email protected] \
[email protected]

1.3 配置webpack

新建webpack.config.js，

const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    entry: {
        index: path.resolve(__dirname, 'src/index.js'),
    },
    output: {
        path: path.resolve(__dirname, 'dist/'),
        filename: '[name].js',
    },
    module: {
        rules: [
            { test: /\.js$/, use: { loader: 'babel-loader', query: { presets: ['babel-preset-env'] } } },
            {
                test: /\.less$/,
                use: ExtractTextPlugin.extract({
                    use: [
                        { loader: 'css-loader' },
                        { loader: 'less-loader' },
                    ],
                }),
            },
        ]
    },
    plugins: [
        new ExtractTextPlugin({
            filename: '[name].css',
        }),
    ]
};

以上代码中，我们使用了extract-text-webpack-plugin，
（1）对于 .less 文件，使用ExtractTextPlugin.extract配置loader
（2）在plugins中，增加了一个ExtractTextPlugin的实例

注：
虽然我们已经为ExtractTextPlugin实例配置了filename，
但是extract-text-webpack-plugin仍然需要webpack.config.js导出output.filename，
所以，我们在第10行output属性中增加了filename字段。

1.4 添加npm scripts

打开package.json，为scripts属性添加一个build字段，值为"webpack"

{
  ...
  "scripts": {
    ...
    "build": "webpack"
  },
  ...
}

1.5 新建源码文件

（1）src/index.js

import './index.less';

alert();

（2）src/index.less

body {
    background: gray;
}

1.6 编译打包

$ npm run build

> [email protected] build ~/Test/debug-webpack3
> webpack

Hash: 1b8999f3bb679ecffd56
Version: webpack 3.11.0
Time: 673ms
    Asset      Size  Chunks             Chunk Names
 index.js   2.64 kB       0  [emitted]  index
index.css  29 bytes       0  [emitted]  index
   [0] ./src/index.js 49 bytes {0} [built]
   [1] ./src/index.less 41 bytes {0} [built]
    + 1 hidden module
Child extract-text-webpack-plugin node_modules/[email protected]@extract-text-webpack-plugin/dist node_modules/[email protected]@css-loader/index.js!node_modules/[email protected]@less-loader/dist/cjs.js!src/index.less:
       [0] ./node_modules/[email protected]@css-loader!./node_modules/[email protected]@less-loader/dist/cjs.js!./src/index.less 211 bytes {0} [built]
        + 1 hidden module

1.7 查看编译结果

（1）dist/index.js

/******/ (function(modules) { // webpackBootstrap
/******/    // The module cache
/******/    var installedModules = {};
/******/
/******/    // The require function
/******/    function __webpack_require__(moduleId) {
/******/
/******/        // Check if module is in cache
/******/        if(installedModules[moduleId]) {
/******/            return installedModules[moduleId].exports;
/******/        }
/******/        // Create a new module (and put it into the cache)
/******/        var module = installedModules[moduleId] = {
/******/            i: moduleId,
/******/            l: false,
/******/            exports: {}
/******/        };
/******/
/******/        // Execute the module function
/******/        modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/        // Flag the module as loaded
/******/        module.l = true;
/******/
/******/        // Return the exports of the module
/******/        return module.exports;
/******/    }
/******/
/******/
/******/    // expose the modules object (__webpack_modules__)
/******/    __webpack_require__.m = modules;
/******/
/******/    // expose the module cache
/******/    __webpack_require__.c = installedModules;
/******/
/******/    // define getter function for harmony exports
/******/    __webpack_require__.d = function(exports, name, getter) {
/******/        if(!__webpack_require__.o(exports, name)) {
/******/            Object.defineProperty(exports, name, {
/******/                configurable: false,
/******/                enumerable: true,
/******/                get: getter
/******/            });
/******/        }
/******/    };
/******/
/******/    // getDefaultExport function for compatibility with non-harmony modules
/******/    __webpack_require__.n = function(module) {
/******/        var getter = module && module.__esModule ?
/******/            function getDefault() { return module['default']; } :
/******/            function getModuleExports() { return module; };
/******/        __webpack_require__.d(getter, 'a', getter);
/******/        return getter;
/******/    };
/******/
/******/    // Object.prototype.hasOwnProperty.call
/******/    __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/    // __webpack_public_path__
/******/    __webpack_require__.p = "";
/******/
/******/    // Load entry module and return exports
/******/    return __webpack_require__(__webpack_require__.s = 0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports, __webpack_require__) {

"use strict";


__webpack_require__(1);

alert();

/***/ }),
/* 1 */
/***/ (function(module, exports) {

// removed by extract-text-webpack-plugin

/***/ })
/******/ ]);

（2）dist/index.css

body {
  background: gray;
}

2. 调试webpack3

2.1 新建debug.js

const webpack = require('webpack');
const options = require('./config/webpack.config');

const compiler = webpack(options);

compiler.run((...args) => {
    console.log(...args);
});

2.2 使用vscode进行调试

在以上代码第6行中，打个断点，保持光标位于该文件中，按F5。
然后程序停在了断点处，

[FE] webpack群侠传（八）：childCompiler_第2张图片

2.3 轻车熟路

前几篇中，我们已经对webpack v4.20.2有了一定的了解，
现在虽然是webpack3（v.3.11.0），我们还是能够驾轻就熟。

compiler.run，会跳入Compiler.js 第226行的run方法中，

run(callback) {
    ...
    this.applyPluginsAsync("before-run", this, err => {
        ...
        this.applyPluginsAsync("run", this, err => {
            ...
            this.readRecords(err => {
                ...
                this.compile(onCompiled);
            });
        });
    });
}

与之前的v4.20.2对比一下， webpack 4.20.2 Compiler.js 第198行，

run(callback) {
    ...
    this.hooks.beforeRun.callAsync(this, err => {
        ...
        this.hooks.run.callAsync(this, err => {
            ...
            this.readRecords(err => {
                ...
                this.compile(onCompiled);
            });
        });
    });
}

我们发现，webpack3中的this.applyPluginsAsync("before-run", this, err => {，
刚好对应与webpack4中的this.hooks.beforeRun.callAsync(this, err => { 。
其余几个hooks调用也类似。

下文中，我们仍然称插件中实现的切面为hooks。
所以，我们还是可以按以前的分析，知道compiler.run调用了this.compile，
于是我们在compile方法中打一个断点。

compile(callback) {
    // 断点
    
    ...
    this.applyPluginsAsync("before-compile", params, err => {
        ...
        this.applyPluginsParallel("make", compilation, err => {
            ...
            compilation.seal(err => {
                ...
                this.applyPluginsAsync("after-compile", compilation, err => {
                    ...
                });
            });
        });
    });
}

注意断点的位置，是在compile方法的入口处，
还没调用compiler.hooks.make，也没调用compilation.seal。

[FE] webpack群侠传（八）：childCompiler_第3张图片

然后，见证奇迹的时候到了。。
我们按下F5，让程序继续运行，
结果程序运行了一会之后，又跑到了现在这个断点。

这真是太奇怪了。
值得一提的是，run方法中的this.compile处如果打一个断点，
我们会发现this.compile却没有被第二次调用。

2.4 调用堆栈

还好vscode的调试工具提供了查看调用堆栈的功能，

[FE] webpack群侠传（八）：childCompiler_第4张图片

我们可以点击某个栈帧，来查看程序的执行过程。
点击第二行runAsChild，我们发现this.compile是由runAsChild调用的，
runAsChild是Compiler类的实例方法，位于 Compiler.js 第286行。

runAsChild(callback) {
    this.compile((err, compilation) => {
        ...
    });
}
[FE] webpack群侠传（八）：childCompiler_第5张图片

那么runAsChild是哪里调用的呢？
我们点击第三行pitch，结果runAsChild是由extract-text-webpack-plugin（v3.0.2）调用的，
代码位置在，extract-text-webpack-plugin loader.js 第81行，

childCompiler.runAsChild((err, entries, compilation) => {
    ...
}

这下就很清楚了，
extract-text-webpack-plugin创建了一个childCompiler，
然后调用了这个childCompiler的runAsChild方法，结果导致this.compiler再次被调用了。

extract-text-webpack-plugin这样做，会对我们调试compiler.hooks.make和compilation.seal产生困扰，
因为this.compile会触发两次，
结果compiler.hooks.make和compilation.seal也会触发两次。

注：
每次加载一个 .less 文件，都会新建一个childCompiler，
因此，如果工程中用到了很多 .less 文件，
this.compile方法会甚至会触发成百上千次。

至于为什么会这样，我们继续往下看。

3. extract-text-webpack-plugin

3.1 LOADER_EXECUTION

[FE] webpack群侠传（八）：childCompiler_第6张图片

我们继续跟踪调用堆栈，点到第四行LOADER_EXECUTION，
这个名字我们似曾相识，是的，我们在第四篇runLoaders一节介绍过它，
它位于 loader-runner LoaderRunner.js 第118行。

var result = (function LOADER_EXECUTION() {
    return fn.apply(context, args);
}());

LOADER_EXECUTION做的事情是，使用已载入的loader，来加载相匹配的资源。
此时，已载入的loader是extract-text-webpack-plugin extract方法返回的loader，
匹配的资源是待载入的less文件。

我们来验证下这个结论，在LOADER_EXECUTION 函数中打个断点，
然后重新启动调试。

程序第一次来到这里的时候，是为了加载src/index.js，
体现在context.resource字段，

~/Test/debug-webpack3/src/index.js

然后我们按F5，等待程序第二次来到这里，
此时，context.resource变成了，

~/Test/debug-webpack3/src/index.less

表示当前正在加载 src/index.less。

3.2 childCompiler

现在我们用单步调试，进入到fn.apply(context, args)这个调用里面。
结果程序跳转到了 extract-text-webpack-plugin loader.js pitch函数中。

export function pitch(request) {
    ...
    if (...) {
        ...
    } else if (...) {
        ...
    } else if (...) {
        ...
        const childCompiler = this._compilation.createChildCompiler(`extract-text-webpack-plugin ${NS} ${request}`, outputOptions);
        ...
        childCompiler.runAsChild((err, entries, compilation) => {
            ...
        });
    }
}

看到了吧，每一次加载 .less文件，都会执行LOADER_EXECUTION ，
每次执行LOADER_EXECUTION 都会调用pitch函数，
pitch函数中每次都会创建一个新的childCompiler，然后调用childCompiler.runAsChild。

3.3 this._compilation

如果我们想知道this._compilation.createChildCompiler 做了什么事情，
就必须知道this._compilation是怎么来的，
因此，也就必须搞清楚this是什么。

this实际上就是pitch的上下文，我们需要看pitch是如何被调用的，
翻看上文的调用链路，我们知道了，
pitch是通过fn.apply(context, args)调用的，其中fn的值就是pitch。

因此，pitch中的this指向了fn.apply(context, args)中的context。
通过查看调用堆栈，我们最终定位到，
这个context是在 webpack NormalModule.js doBuild中调用createLoaderContext创建的，

doBuild(options, compilation, resolver, fs, callback) {
    ...
    const loaderContext = this.createLoaderContext(resolver, options, compilation, fs);

    runLoaders({
        ...
        context: loaderContext,
        ...
    }, (err, result) => {
        ...
    });
}

createLoaderContext是NormalModule的实例方法，
它的定义在，NormalModule.js 第112行，

createLoaderContext(resolver, options, compilation, fs) {
    const loaderContext = {
        ...
        _compilation: compilation,
        ...
    };
    ...
    return loaderContext;
}

因此，这个_compilation，就是doBuild参数中的compiation。
而这个compiler就是在Compiler.js中第497行，触发compiler.hooks.make之前新建的那个compilation。

const compilation = this.newCompilation(params);
this.applyPluginsParallel("make", compilation, err => {
   ...
});

3.4 this._compilation.createChildCompiler

我们就可以去Compilation.js 第1416行中查看createChildCompiler方法了，

createChildCompiler(name, outputOptions, plugins) {
    ...
    return this.compiler.createChildCompiler(this, name, idx, outputOptions, plugins);
}

它调用了compiler.createChildCompiler，在Compiler.js 第413行，

createChildCompiler(compilation, compilerName, compilerIndex, outputOptions, plugins) {
    const childCompiler = new Compiler();
    ...
    for(const name in this._plugins) {
        if(["make", "compile", "emit", "after-emit", "invalid", "done", "this-compilation"].indexOf(name) < 0)
            childCompiler._plugins[name] = this._plugins[name].slice();
    }
    ...
    compilation.applyPlugins("child-compiler", childCompiler, compilerName, compilerIndex);

    return childCompiler;
}

它会新建一个Compiler实例，然后把原来父compiler上的_plugins都浅拷贝过去。
因此，以前挂载在compiler上的hooks同样也会挂载到childCompiler上，
只是，当hooks被调用时，才会触发回调。

其中"make", "compile", "emit", "after-emit", "invalid", "done", "this-compilation"，
这些_plugin不拷贝。

假如我们写了一个这样的webpack3插件，
（只需将webpack4中插件的写法从hooks改成plugin即可)

class Plugin {
    apply(compiler) {
        compiler.plugin('compilation', compilation => {
            compilation.plugin('seal', () => {
                ...
            });
        });
    }
}

则当childCompiler调用compiler.hooks.compilation时，
以上为父compiler注册的事件也会在childCompiler上触发，
唯一不同是参数compilation不同。

所以接下来，compilation.plugin('seal', () => { ，
就为这个新compilation实现了一个新的hooks.seal。

3.5 hooks的多次触发

我们来看下实际使用这个插件时的日志信息。

（1）新建plugin.js

const log = require('debug')('debug-webpack plugin.js');

class Plugin {
    apply(compiler) {
        compiler.plugin('compilation', compilation => {
            log('in: compilation');
            compilation.plugin('seal', () => {
                log('in: seal, compilation.entries: %s', compilation.entries.map(({ resource }) => resource).join());
            });
        });
    }
}

module.exports = Plugin;

（2）在webpack.config.js中使用它

...
const Plugin = require('./plugin');

module.exports = {
    ...
    plugins: [
        ...
        new Plugin,
    ]
};

（3）运行一下

$ DEBUG=debug-wepack* npm run build

> [email protected] build ~/Test/debug-webpack3
> webpack

  debug-webpack plugin.js in: compilation +0ms
  debug-webpack plugin.js in: seal, compilation.entries: ~/Test/debug-webpack3/src/index.js +600ms
  debug-webpack plugin.js in: compilation +7ms
  debug-webpack plugin.js in: seal, compilation.entries: ~/Test/debug-webpack3/src/index.less +28ms
Hash: 1b8999f3bb679ecffd56
Version: webpack 3.11.0
Time: 657ms
    Asset      Size  Chunks             Chunk Names
 index.js   2.64 kB       0  [emitted]  index
index.css  29 bytes       0  [emitted]  index
   [0] ./src/index.js 49 bytes {0} [built]
   [1] ./src/index.less 41 bytes {0} [built]
    + 1 hidden module
Child extract-text-webpack-plugin node_modules/[email protected]@extract-text-webpack-plugin/dist node_modules/[email protected]@css-loader/index.js!node_modules/[email protected]@less-loader/dist/cjs.js!src/index.less:
       [0] ./node_modules/[email protected]@css-loader!./node_modules/[email protected]@less-loader/dist/cjs.js!./src/index.less 211 bytes {0} [built]
        + 1 hidden module

我们看到compilation.hooks.seal总共触发了两次，
第一次的entry是~/Test/debug-webpack3/src/index.js，
第二次为~/Test/debug-webpack3/src/index.less。

[FE] webpack群侠传（八）：childCompiler_第7张图片

第二次 .less 文件触发compilation.hooks.seal的流程如下，
webpack在加载 .less 文件时，使用了extract-text-webpack-plugin，
每次加载一个 .less 文件，都会创建一个新的 childCompiler。

这个childCompiler会把父compiler中所有的hooks都拷贝过去，
然后就调用了childCompiler.runAsChild，它会调用this.compile，此时this是childCompiler，
然后this.compile中，会触发compiler.hooks.compilation这个hooks（见Compiler.js 第465行）。

这个hooks是从父compiler那里拷贝过来的，
因此就会触发我们的插件注册的那个回调，只是传入一个新创建的compilation实例作为参数。

compiler.plugin('compilation', compilation => {
    ...
});

接着为这个新compilation实例，在这个回调中注册了compilation.hooks.seal事件。
然后webpack在对 .less 文件 seal的时候，触发hooks.seal事件时，就引发了这个回调。

参考

extract-text-webpack-plugin: Webpack 4 compatibility
webpack v3.11.0
webpack v4.20.2
loader-runner v2.3.1

你可能感兴趣的:([FE] webpack群侠传（八）：childCompiler)

  • python八股文面试题分享及解析(1) Shawn________ python
    #1.'''a=1b=2不用中间变量交换a和b'''#1.a=1b=2a,b=b,aprint(a)print(b)结果：21#2.ll=[]foriinrange(3):ll.append({'num':i})print(11)结果:#[{'num':0},{'num':1},{'num':2}]#3.kk=[]a={'num':0}foriinrange(3):#0,12#可变类型，不仅仅改变
  • webpack图片等资源的处理 dmengmeng
    需要的loaderfile-loader（让我们可以引入这些资源文件）url-loader（其实是file-loader的二次封装）img-loader（处理图片所需要的）在没有使用任何处理图片的loader之前，比如说css中用到了背景图片，那么最后打包会报错的，因为他没办法处理图片。其实你只想能够使用图片的话。只加一个file-loader就可以，打开网页能准确看到图片。{test:/\.(p
  • 【华为OD技术面试真题 - 技术面】- python八股文真题题库（4) 算法大师 华为od面试python
    华为OD面试真题精选专栏：华为OD面试真题精选目录:2024华为OD面试手撕代码真题目录以及八股文真题目录文章目录华为OD面试真题精选**1.Python中的`with`**用途和功能自动资源管理示例：文件操作上下文管理协议示例代码工作流程解析优点2.\_\_new\_\_和**\_\_init\_\_**区别__new____init__区别总结3.**切片（Slicing）操作**基本切片语法
  • 【华为OD技术面试真题 - 技术面】-测试八股文真题题库（1） 算法大师 华为od面试python算法前端
    华为OD面试真题精选专栏：华为OD面试真题精选目录:2024华为OD面试手撕代码真题目录以及八股文真题目录文章目录华为OD面试真题精选1.黑盒测试和白盒测试的区别2.假设我们公司现在开发一个类似于微信的软件1.0版本，现在要你测试这个功能：打开聊天窗口，输入文本，限制字数在200字以内。问你怎么提取测试点。功能测试性能测试安全性测试可用性测试跨平台兼容性测试网络环境测试3.接口测试的工具你了解哪些
  • 第六集如何安装CentOS7.0，3分钟学会centos7安装教程 date分享
    从光盘引导系统按回车键继续进入引导程序安装界面，选择语言这里选择简体中文版点击继续选择桌面安装下面给系统分区选择磁盘，点击完成选择基本分区，点击加号swap分区,大小填内存的两倍在选择根分区，使用所有可用的磁盘空间选择文件系统ext4点击完成，点击开始安装设置root密码，点击完成设置普通用户和密码，点击完成整个过程持续八分钟左右根据个人配置不同，时间长短不同好，现在点击重启系统进入重启状态点击本
  • 【华为OD技术面试真题 - 技术面】- python八股文真题题库（1） 算法大师 华为od面试python
    华为OD面试真题精选专栏：华为OD面试真题精选目录:2024华为OD面试手撕代码真题目录以及八股文真题目录文章目录华为OD面试真题精选1.数据预处理流程数据预处理的主要步骤工具和库2.介绍线性回归、逻辑回归模型线性回归（LinearRegression）模型形式：关键点：逻辑回归（LogisticRegression）模型形式：关键点：参数估计与评估：3.python浅拷贝及深拷贝浅拷贝（Shal
  • 第二期心理咨询师培训 第1组分享第八天 张云511
    学会与问题共存—事情不会只有一个面读完本节，印象最深的点就是“扩大白色而非消灭黑色”。其实在班级管理中也是一样，我们暂时不要着急去消灭问题，而是注意学生哪些方面很不错，值得我们去扩大，我们要发现学生的资源与潜力，从正向的意义出发，发挥滴水穿石的力量，让一个个小改变汇集出巨大的改变！调整看事情的角度，不把生活问题扩大，是我们学习“与问题共存”的重要一步。换个角度看问题，会改变自己，也会感动别人！这样
  • 2021-07-31 比峰
    七月的最后一天，过了今天，就是八月，心脏在颤抖……昨天两点半才睡，一直在以两倍的语速的听之前的课程，虽然隔得时间不长，但是很多知识点已经忘了差不多了，为了让自己能够掌握的稍微全面一点，还是磨刀不误砍柴工的比较好。正因为晚上睡得晚，今天一上午的状态都不好，也可能因为上午都是待在家里，所以多数时间自己是在补觉。既然太累，那就睡觉吧，总比浪费时间的好。下午到咖啡馆做题，一道差错更正一下子让自己的实力暴露
  • 《感恩日志》第八天 祖乐
    1.感恩武老师给姑娘朋友的宝宝起了名字。2.感恩张淑珍老师及时发的红包让我和杜姐能按时听课学习。3.感恩今天所有的遇见
  • 2022-12-25 罗平凤a98
    让自己优秀起来吧睡觉前对今年的复盘。这一年有的变化是什么呢？不自知的开始难受。今年是我长这么大以来最难受，也将是我最难忘的一年吧！内卷到将近步入抑郁的一年。坚持了八年的工作在这个疫情情况下步入了进退两难的地步。再次回头才发现一直都在做着单线的收资，效益好就不太内卷。不好，那这一年就是坐着动荡的过山车，心惊胆战。这活法是不是太过于被动了？？上有老下有小，关键压力都在这个中年期体现出来了，回头看看自己
  • 《西游记》观后感 领读者李轩颖
    西游记相信大家都不陌生，但我还是要给有些人讲一讲。长话短说，当然了，开头就是孙悟空的讲解，孙悟空本为一块仙石，然而因风化作一石猴。猪八戒是天蓬元帅，后因调戏王母娘娘的孙女织女后被打入凡间，投胎为猪，后名猪八戒。沙和尚因常年居住在流沙河中千年未出，所以名为沙僧。唐僧原名唐三藏，后因被吴来佛祖西天取经简名为唐僧。师徒四人历经了九九八十一磨难，最终取到了西经。然而最后师傅唐僧让他们回去的时候，可四人都恋
  • (158)时序收敛---＞(08)时序收敛八 FPGA系统设计指南针 FPGA系统设计(内训)fpga开发时序收敛
    1目录（a）FPGA简介（b）Verilog简介（c）时钟简介（d）时序收敛八（e）结束1FPGA简介（a）FPGA（FieldProgrammableGateArray）是在PAL（可编程阵列逻辑）、GAL（通用阵列逻辑）等可编程器件的基础上进一步发展的产物。它是作为专用集成电路（ASIC）领域中的一种半定制电路而出现的，既解决了定制电路的不足，又克服了原有可编程器件门电路数有限的缺点。（b）F
  • 阅读《认知觉醒》读书笔记 就看看书
    本周阅读了周岭的《认知觉醒开启自我改变的原动力》，启发较多，故做读书笔记一则，留待学习。全书共八章，讲述了大脑、潜意识、元认知、专注力、学习力、行动力、情绪力及成本最低的成长之道。具体描述了大脑、焦虑、耐心、模糊、感性、元认知、自控力、专注力、情绪专注、学习专注、匹配、深度、关联、体系、打卡、反馈、休息、清晰、傻瓜、行动、心智宽带、单一视角、游戏心态、早起、冥想、阅读、写作、运动等相关知识点。大脑
  • 现在广州仿真手表最好的地方（盘点8个广州仿真手表市场） 美鞋之家
    广州，作为中国的大都市之一，是全国各地仿真手表的集散地。在这里，你可以找到各种品牌和类型的仿真手表，满足不同消费者的需求。今天我们就来盘点一下广州八个最好的仿真手表市场。微信:aaakkk908(下单赠送精美礼品)1.广州海珠表城：海珠商场是广州最大的小商品批发市场，其中的手表业是非常发达的。这里有多家专门经营仿真手表的商铺，品种齐全，并且价格优惠。2.广州天河城：天河城是广州著名的大型购物中心，
  • C++八股 Petrichorzncu 八股总结c++开发语言
    这里写目录标题C++内存管理C++的构造函数，复制构造函数，和析构函数深复制与浅复制：构造函数和析构函数哪个能写成虚函数，为什么？C++数据结构内存排列结构体和类占用的内存：==虚函数和虚表的原理==虚函数虚表（Vtable）虚函数和虚表的实现细节==内存泄漏==指针的工作原理函数的传值和传址new和delete与malloc和freeC++内存区域划分C++11新特性C++常见新特性==智能指针
  • 计算机网络八股总结 Petrichorzncu 八股总结计算机网络笔记
    这里写目录标题网络模型划分（五层和七层）及每一层的功能五层网络模型七层网络模型（OSI模型）==三次握手和四次挥手具体过程及原因==三次握手四次挥手TCP/IP协议组成==UDP协议与TCP/IP协议的区别==Http协议相关知识网络地址，子网掩码等相关计算网络模型划分（五层和七层）及每一层的功能五层网络模型应用层：负责处理网络应用程序，如电子邮件、文件传输和网页浏览。主要协议包括HTTP、FTP
  • 人要有自知之明 孟冬廿六
    今天中午跟一学妹聊天，谈起结婚找对象的问题，小姑娘年龄不算大，二十七岁，但是整个人很清醒很现实，她如今在一国企上班，吃住都不花钱，再加上她经常出差，补助奖金这一块儿也不少，一年下来七七八八的有个小二十万，这对于一个小姑娘来说已经非常不错了，她计划这两年自己付首付买房，然后想要买辆MINI，小姑娘一米七六的个子，长得漂亮有气质，家庭条件也不错，所以对于择偶方面也有一定的要求，最好是事业单位的，父母有
  • 寓美于心 琴韵无声
    今天是“语文湿地2021网络年会”第一天。年会早上七点在尹东老师和王君老师的激情开幕致辞中开始。一天下来听了八节课，真是“八仙过海，各显神通。”精彩纷呈。愚笨如我，真的是找不出一个恰切的词来形容她们的美妙绝伦。今天一口气吃下了饕餮盛宴，留待日后慢慢反刍吧。今天的压轴大戏是王君老师的《若爱，深深爱；若写，深情写》——跟《土地的誓言》学意象铺排”艺术。又加上是最后一节听的，印象最为深刻。凭着印象先略记
  • 27岁儿子不结婚，父亲决定先给自己相亲找个伴：我要给儿子打个样 清白路人
    你妈逼你结婚了吗？现在的年轻人普遍结婚都比较晚，有的三十好几了八字还没一撇，这个时候最操心的就是父母了，他们话里话外都是催促着子女找对象结婚，甚至还会用出让人意想不到的方法，其实说到底，这也是可怜天下父母心呐。亲自给儿子打样的大爷李荣国，54岁，离异，打工收入2000多左右，家住农村平房120平。李大爷年轻时一直在工厂和工地打工，4年前才回到村里在镇政府当起了保安。李大爷的收入来自于三个部分，第一
  • 火龙君·罗天 | 盘点中国风水宝地，你在的城市上榜了吗？（上） 震古开运
    中国从古到今造城建房的时候都要看风水，“风水好”用一个词来概括就是：人杰地灵。人杰地灵的城市，哪怕它地方很小但总是会人才辈出，而“地不灵”的地方，哪怕它占地再大，上下五千年也出不了几个名人。今天小编收集了一份“中国地理位置最好城市”榜单快来看看你的城市是否榜上有名吧地理位置好的城市对事业的发展也很利噢！排名不分先后~1.伊犁·特克斯-形如八卦、风水绝佳伊犁特克斯被称为“中国地理位置第一城”，它是现
  • 解忧信件5789 鱼羊姑娘
    第5789封来信爷爷您好:我结婚了，可我过的一点都不幸福。因为有了孩子，我放弃了读了一年的大学，奉子成婚了。本以为等待我的会是一家三口的甜蜜日常，可是啊，我的婚姻出现了危机，我的感情破裂了。彩礼六万八，我并不觉得过分，可男方觉得压力大，男方这边的习俗是娶媳妇不花钱。我们是异地恋，我们家这边的彩礼六万八不过分，不需要买车也不需要买房，只要给了订婚给了彩礼就可以了。彩礼，要的是个态度。订婚的那天我跟他
  • 爸妈：你可以成为别人家的爸妈吗 长也长不高的面包树
    图片发自App爸爸妈妈，请你看看别人家的父母无论什么时候，家长总喜欢在我们耳边说，你看看别人家的孩子怎么样。是啊，别人家的孩子什么都优秀，那别人家的爸爸妈妈还优秀呢。先讲三个微博上面的故事吧。有一个妈妈陪着八岁的孩子完成了一份报纸，报纸全是妈妈和孩子亲手做的，写的是整个寒假的生活。网友们纷纷说，我也想有个这样的妈妈。还有一位妈妈晒出了自己给女儿包的书皮，每一本书上面都有多彩的图案，简直美翻了，精致
  • 2022-5-23《儿童纪律教育》培训 手捧鲜花_54e3
    张子博春蕾八幼缺乏技能导致的问题，需要老师和家长教授儿童所需要的锻炼的技能。比如教授儿童如何处理情绪、与人相处以及有效的交流技巧。未满足的情感需要，如信任、尊重、爱与权利的需要，都应该让儿童充分得到满足时，才能解决问题。家庭互动与复杂的原因，需要教师建立以家庭为中心的实践，和家庭沟通，建立和谐的关系，为孩子的健康成长共同努力。
  • 详解“c:/work/src/components/a/b.vue“‘ has no default export报错原因 hw_happy 开发语言前端vue.jsjavascript
    前情提要在一个vue文件中需要引入定义的b.vue文件，但是提示b文件没有默认导出，对于vue2文件来说有exportdefault，在中，所有定义的变量、函数和组件都会自动被视为默认导出的组件内容。因此，不需要显式地使用exportdefault来导出组件。但是在我引用这个文件的时候还是提示了这个错误，原来是我的项目使用了ts和vite\webpack，因为TypeScript和Vue的默认导出
  • 《论语》日日谈 34期 wuhuaping9807
    《论语》日日谈第34期本章为《论语》：公冶长篇第八章【原文】孟武伯问：“子路仁乎？”子曰：“不知也。”又问。子曰：“由也，千乘之国，可使治其赋也。不知其仁也。”“求也何如？”子曰：“求也，千室之邑，百乘之家，可使为之宰也①，不知其仁也。、赤也何如②？”子曰：“赤也，束带立于朝，可使与宾客言也。不知其仁也。”【注释】①宰：古代县、邑一级的行政长官。卿大夫的家臣也叫宰。②赤：公西赤，字子华，孔子的学生
  • 少年冯菊芬（八） 一杯老酒
    七，愿做红鲤救灾民有一年夏天，本地大旱，就连营庄北边的鲁兰河，据说在1909年曾经因为发大水，导致鲁兰河两岸的连片村庄先后被洪水煙没，但是干旱的这一年，鲁兰河都干涸见底了，何况附近所有的小河。烈日之下，时常可见很多庶民百姓聚集在一起，烧香拜佛，试图祈祷感化上苍。说来奇怪，就在大埠街有一口古井特别神奇，即便是严重干旱的那一年，古井里的水位也没有大的变化，往往是一段时间，因为附近村民来往取水频繁，古井
  • 史上最全git命令,git回滚,git命令大全 騒周 其他git
    git命令大全一、Git整体理解二、由暂存区本地仓库三、由本地仓->远程仓库四、冲突处理五、Git分支操作六、bug的分支七、feature分支八、暂存的使用九、远程仓的操作十、标签的使用十一、Git配置全局信息十二、Linux的一些简单操作和一些符号的解释十三、符号解释十四、显示安装详细信息十五、gitconfig十六、Gitclone十七、Gitinit十八、gitstatus十九、gitre
  • 2023-09-21郝晓东教师专业阅读第一讲 每天坚持
    20230921六点零三星期四郝晓东教师专业阅读第一讲昨天早上起床比较晚，完成了八九百字，今天早上起床又是有点晚，估计今天早上又是完不成两千字的电子日记了。昨天晚上本来是打算去河里游泳的，但是到了河边感觉有点冷，不想下水了，刚好老表打电话，本来是打电话说去八里滩温泉洗澡的，但是没有人，我们就去河对面转了一圈，见了朱总、李总，走了两万多步，感觉很累，早上起来感觉腰比较不舒服，我就把厚睡衣穿上了，主要
  • 2018年12月23日 星期日 晴 刘一鸣妈妈
    早晨舒舒服服睡个懒觉，睁开眼已经快八点了。简单洗漱之后，准备吃早饭。嫂子给煎的牛排，七成熟，孩子吃的津津有味。我只能吃十二分熟的，可以外焦，不要里嫩。早饭后到世纪金源给然然选照片，几番挣扎后忍痛割爱删掉近百张，最后只保留三十张做相册。下午然然继续拍一套影楼赠送的台历照片，商家看到我带着孩子，也赠送了一套作为体验。拍照的过程特别欢乐，孩子很享受穿着帅气的衣服摆出帅帅的动作。然然拍过一套照片后明显找到
  • 《历史》与《战国策》札记（一百四） 刘子曰_b08e
    卫鞅亡魏入秦，孝公以为相，封之于商，号曰商君。商君治秦，法令至行，公平无私，罚不讳强大，赏不私亲近，法及太子，黥劓其傅。期年之后，道不拾遗，民不妄取，兵革大强，诸侯畏惧。然刻深寡恩，特以强服之耳。孝公行之八年，疾且不起，欲傅商君，辞不受。孝公已死，惠王代后，莅政有顷，商君告归。人说惠王曰：“大臣太重者国危，左右太亲者身危。今秦妇人婴儿皆言商君之法，莫言大王之法。是商君反为主，大王更为臣也。且夫商君
  • 分享100个最新免费的高匿HTTP代理IP mcj8089 代理IP代理服务器匿名代理免费代理IP最新代理IP
      推荐两个代理IP网站：   1. 全网代理IP：http://proxy.goubanjia.com/   2. 敲代码免费IP：http://ip.qiaodm.com/     120.198.243.130:80,中国/广东省 58.251.78.71:8088,中国/广东省 183.207.228.22:83,中国/
  • mysql高级特性之数据分区 annan211 java数据结构mongodb分区mysql
    mysql高级特性 1 以存储引擎的角度分析，分区表和物理表没有区别。是按照一定的规则将数据分别存储的逻辑设计。器底层是由多个物理字表组成。 2 分区的原理 分区表由多个相关的底层表实现，这些底层表也是由句柄对象表示，所以我们可以直接访问各个分区。存储引擎管理分区的各个底层 表和管理普通表一样(所有底层表都必须使用相同的存储引擎)，分区表的索引只是
  • JS采用正则表达式简单获取URL地址栏参数 chiangfai js地址栏参数获取
    GetUrlParam:function GetUrlParam(param){ var reg = new RegExp("(^|&)"+ param +"=([^&]*)(&|$)"); var r = window.location.search.substr(1).match(reg); if(r!=null
  • 怎样将数据表拷贝到powerdesigner (本地数据库表) Array_06 powerDesigner
    ================================================== 1、打开PowerDesigner12，在菜单中按照如下方式进行操作 file->Reverse Engineer->DataBase 点击后，弹出 New Physical Data Model 的对话框 2、在General选项卡中 Model name:模板名字，自
  • logbackのhelloworld 飞翔的马甲 日志logback
    一、概述 1.日志是啥？ 当我是个逗比的时候我是这么理解的：log.debug()代替了system.out.print(); 当我项目工作时，以为是一堆得.log文件。 这两天项目发布新版本，比较轻松，决定好好地研究下日志以及logback。 传送门1：日志的作用与方法： http://www.infoq.com/cn/articles/why-and-how-log 上面的作
  • 新浪微博爬虫模拟登陆 随意而生 新浪微博
    转载自：http://hi.baidu.com/erliang20088/item/251db4b040b8ce58ba0e1235     近来由于毕设需要，重新修改了新浪微博爬虫废了不少劲，希望下边的总结能够帮助后来的同学们。      现行版的模拟登陆与以前相比，最大的改动在于cookie获取时候的模拟url的请求
  • synchronized 香水浓 javathread
        Java语言的关键字，可用来给对象和方法或者代码块加锁，当它锁定一个方法或者一个代码块的时候，同一时刻最多只有一个线程执行这段代码。当两个并发线程访问同一个对象object中的这个加锁同步代码块时，一个时间内只能有一个线程得到执行。另一个线程必须等待当前线程执行完这个代码块以后才能执行该代码块。然而，当一个线程访问object的一个加锁代码块时，另一个线程仍然
  • maven 简单实用教程 AdyZhang maven
    1. Maven介绍  1.1. 简介 java编写的用于构建系统的自动化工具。目前版本是2.0.9，注意maven2和maven1有很大区别，阅读第三方文档时需要区分版本。 1.2. Maven资源 见官方网站；The 5 minute test，官方简易入门文档；Getting Started Tutorial，官方入门文档；Build Coo
  • Android 通过 intent传值获得null aijuans android
    我在通过intent 获得传递兑现过的时候报错，空指针,我是getMap方法进行传值，代码如下 1 2 3 4 5 6 7 8 9 public void getMap(View view){            Intent i =
  • apache 做代理 报如下错误：The proxy server received an invalid response from an upstream baalwolf response
    网站配置是apache＋tomcat,tomcat没有报错，apache报错是： The proxy server received an invalid response from an upstream server. The proxy server could not handle the request GET /. Reason: Error reading fr
  • Tomcat6 内存和线程配置 BigBird2012 tomcat6
    1、修改启动时内存参数、并指定JVM时区 （在windows server 2008 下时间少了8个小时） 在Tomcat上运行j2ee项目代码时，经常会出现内存溢出的情况，解决办法是在系统参数中增加系统参数：  window下， 在catalina.bat最前面 set JAVA_OPTS=-XX:PermSize=64M -XX:MaxPermSize=128m -Xms5
  • Karam与TDD bijian1013 KaramTDD
    一.TDD         测试驱动开发（Test-Driven Development,TDD）是一种敏捷（AGILE）开发方法论，它把开发流程倒转了过来，在进行代码实现之前，首先保证编写测试用例，从而用测试来驱动开发（而不是把测试作为一项验证工具来使用）。         TDD的原则很简单： a.只有当某个
  • [Zookeeper学习笔记之七]Zookeeper源代码分析之Zookeeper.States bit1129 zookeeper
    public enum States { CONNECTING, //Zookeeper服务器不可用，客户端处于尝试链接状态 ASSOCIATING, //？？？ CONNECTED, //链接建立，可以与Zookeeper服务器正常通信 CONNECTEDREADONLY, //处于只读状态的链接状态，只读模式可以在
  • 【Scala十四】Scala核心八：闭包 bit1129 scala
    Free variable A free variable of an expression is a variable that’s used inside the expression but not defined inside the expression. For instance, in the function literal expression (x: Int) => (x
  • android发送json并解析返回json ronin47 android
    package com.http.test; import org.apache.http.HttpResponse; import org.apache.http.HttpStatus; import org.apache.http.client.HttpClient; import org.apache.http.client.methods.HttpGet; import
  • 一份IT实习生的总结 brotherlamp PHPphp资料php教程php培训php视频
    今天突然发现在不知不觉中自己已经实习了 3 个月了，现在可能不算是真正意义上的实习吧，因为现在自己才大三，在这边撸代码的同时还要考虑到学校的功课跟期末考试。让我震惊的是，我完全想不到在这 3 个月里我到底学到了什么，这是一件多么悲催的事情啊。同时我对我应该 get 到什么新技能也很迷茫。所以今晚还是总结下把，让自己在接下来的实习生活有更加明确的方向。最后感谢工作室给我们几个人这个机会让我们提前出来
  • 据说是2012年10月人人网校招的一道笔试题-给出一个重物重量为X,另外提供的小砝码重量分别为1，3，9。。。3^N。 将重物放到天平左侧，问在两边如何添加砝码 bylijinnan java
    public class ScalesBalance { /** * 题目： * 给出一个重物重量为X,另外提供的小砝码重量分别为1，3，9。。。3^N。 （假设N无限大，但一种重量的砝码只有一个） * 将重物放到天平左侧，问在两边如何添加砝码使两边平衡 * * 分析： * 三进制 * 我们约定括号表示里面的数是三进制，例如 47=(1202
  • dom4j最常用最简单的方法 chiangfai dom4j
    要使用dom4j读写XML文档,需要先下载dom4j包,dom4j官方网站在 http://www.dom4j.org/目前最新dom4j包下载地址:http://nchc.dl.sourceforge.net/sourceforge/dom4j/dom4j-1.6.1.zip 解开后有两个包,仅操作XML文档的话把dom4j-1.6.1.jar加入工程就可以了,如果需要使用XPath的话还需要
  • 简单HBase笔记 chenchao051 hbase
     一、Client-side write buffer 客户端缓存请求 描述：可以缓存客户端的请求，以此来减少RPC的次数，但是缓存只是被存在一个ArrayList中，所以多线程访问时不安全的。 可以使用getWriteBuffer()方法来取得客户端缓存中的数据。 默认关闭。 二、Scan的Caching 描述： next( )方法请求一行就要使用一次RPC,即使
  • mysqldump导出时出现when doing LOCK TABLES daizj mysqlmysqdump导数据
    　　执行　mysqldump -uxxx -pxxx -hxxx -Pxxxx database tablename > tablename.sql　 导出表时，会报 mysqldump: Got error: 1044: Access denied for user 'xxx'@'xxx' to database 'xxx' when doing LOCK TABLES 解决
  • CSS渲染原理 dcj3sjt126com Web
      从事Web前端开发的人都与CSS打交道很多，有的人也许不知道css是怎么去工作的，写出来的css浏览器是怎么样去解析的呢？当这个成为我们提高css水平的一个瓶颈时，是否应该多了解一下呢？          一、浏览器的发展与CSS           
  • 《阿甘正传》台词 dcj3sjt126com
    Part Ⅰ: 《阿甘正传》Forrest Gump经典中英文对白 Forrest: Hello! My names Forrest. Forrest Gump. You wanna Chocolate? I could eat about a million and a half othese. My momma always said life was like a box ochocol
  • Java处理JSON dyy_gusi json
    Json在数据传输中很好用，原因是JSON 比 XML 更小、更快，更易解析。 在Java程序中，如何使用处理JSON，现在有很多工具可以处理，比较流行常用的是google的gson和alibaba的fastjson，具体使用如下： 1、读取json然后处理 class ReadJSON { public static void main(String[] args)
  • win7下nginx和php的配置 geeksun nginx
    1.  安装包准备 nginx :  从nginx.org下载nginx-1.8.0.zip php： 从php.net下载php-5.6.10-Win32-VC11-x64.zip， php是免安装文件。 RunHiddenConsole: 用于隐藏命令行窗口   2. 配置 # java用8080端口做应用服务器，nginx反向代理到这个端口即可 p
  • 基于2.8版本redis配置文件中文解释 hongtoushizi redis
    转载自： http://wangwei007.blog.51cto.com/68019/1548167        在Redis中直接启动redis-server服务时, 采用的是默认的配置文件。采用redis-server   xxx.conf 这样的方式可以按照指定的配置文件来运行Redis服务。下面是Redis2.8.9的配置文
  • 第五章 常用Lua开发库3-模板渲染 jinnianshilongnian nginxlua
    动态web网页开发是Web开发中一个常见的场景，比如像京东商品详情页，其页面逻辑是非常复杂的，需要使用模板技术来实现。而Lua中也有许多模板引擎，如目前我在使用的lua-resty-template，可以渲染很复杂的页面，借助LuaJIT其性能也是可以接受的。   如果学习过JavaEE中的servlet和JSP的话，应该知道JSP模板最终会被翻译成Servlet来执行；而lua-r
  • JZSearch大数据搜索引擎 颠覆者 JavaScript
    系统简介： 大数据的特点有四个层面：第一，数据体量巨大。从TB级别，跃升到PB级别；第二，数据类型繁多。网络日志、视频、图片、地理位置信息等等。第三，价值密度低。以视频为例，连续不间断监控过程中，可能有用的数据仅仅有一两秒。第四，处理速度快。最后这一点也是和传统的数据挖掘技术有着本质的不同。业界将其归纳为4个“V”——Volume，Variety，Value，Velocity。大数据搜索引
  • 10招让你成为杰出的Java程序员 pda158 java编程框架
    如果你是一个热衷于技术的  Java 程序员， 那么下面的 10 个要点可以让你在众多 Java 开发人员中脱颖而出。 　　 1. 拥有扎实的基础和深刻理解 OO 原则 　　对于 Java 程序员，深刻理解 Object Oriented Programming（面向对象编程）这一概念是必须的。没有 OOPS 的坚实基础，就领会不了像 Java 这些面向对象编程语言
  • tomcat之oracle连接池配置 小网客 oracle
    tomcat版本7.0 配置oracle连接池方式： 修改tomcat的server.xml配置文件： <GlobalNamingResources> <Resource name="utermdatasource" auth="Container" type="javax.sql.DataSou
  • Oracle 分页算法汇总 vipbooks oraclesql算法.net
        这是我找到的一些关于Oracle分页的算法，大家那里还有没有其他好的算法没？我们大家一起分享一下！ -- Oracle 分页算法一 select * from ( select page.*,rownum rn from (select * from help) page -- 20 = (currentPag
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他