GongShengM
GongShengM

前端工程化

前端工程化

  • 前端工程化就是通过各种工具和拘束，提升前端开发效率的过程。

NOde.js

  • 官方网址：nodejs.org/
浏览器内核的组成部分
  • 渲染引擎：用来做内容渲染，比如html、css渲染。
  • js引擎：渲染JavaScript

node.js的作用

  • Node.js适合开发服务器端的应用层（BFF）
    • 为网站，APP，小程序等提供数据服务
  • Node.js适合用于开发前端方向的各种工具
    • 各种前端工程化的工具
  • Node.js可以用来做桌面应用开发
    • 各种跨平台的桌面应用开发

全局对象

Node.js下的全局对象是global。

  • 在交互模式下，声明的变量和函数都属于global。
    • 例如：var a = 1; global.a可以放文到 a 的值。
  • 在脚本模式下，声明的变量和函数都不属于global。
    • 例如：var a = 1; global.a访问不到a的值。

全局函数

  • JavaScript语言提供的全局函数，在Node.hs下依然可用。

setImmediate()

  • 表示立即执行事件，参数是一个函数，表示执行事件的函数。
  • setImmediate()是在队列事件中执行，与setTimeout()等函数都是在事件队列中执行，相当于异步执行。
  • 当主线程执行完之后，才会执行任务队列中的任务。

setImmediate()与process.nextTick()的区别

  • setImmediate()是存在于任务队列中，并且是任务队列中有限执行的事件。
  • process.nextTick()是存在于主进程中，并且在主进程中是最后执行的。
  • 任务队列中的任务需要等主进程中的任务执行结束后才会执行，也就是说理论上需要等process.nextTick()执行完成之后才会执行setImmediate()事件任务。

Node.js模块

模块是Node.js应用程序的基本组成部分，大部分前端工程化的工具，是以模块的形式存在的。
Node.js中的模块可以划分为内置模块、自定义模块、第三方模块三类。

内置模块是官方提供的，跟随Node.js一起安装。
自定义模块是自己定义的模块。
第三方模块社区维护的，需要单独下载才能使用。（https://www.npmjs.com/）

内置模块

文档地址：http://nodejs.cn/api/

内置模块-process

  • process 对象是一个全局变量，提供了有关当前 Node.js 进程的信息并对其进行控制。 作为全局变量，它始终可供 Node.js 应用程序使用，无需使用 require()。 它也可以使用 require() 显式地访问：
const process = require('process');
  • 获取操作系统：process.arch
  • 获取操作系统平台：process.platform
  • 获取当前工作目录：process.cwd()
  • 获取环境变量：process.env
  • 自定义环境变量：process.env.NODE_ENV = "develop"
  • 获取进程编号：process.pid
  • 杀死进程：process.kill("进程编号")

内置模块-path

  • 在使用之前，需要通过require引入
const path = require("path")
  • 获取当前文件所在的路径：console.log(__dirname)
  • 获取当前文件的完整路径：console.log(__filename)
  • 获取文件的扩展名：path.extname(__filename)
  • 获取路径中的目录部分：path.dirname(__filename)
  • 获取路径中的文件名：path.basename(__filename)
  • 合并路径：path.join("", "")

内置模块-fs

  • fs提供了文件操作的API。
    • 文件操作
    • 目录操作
  • 使用之前，需要通过require引入。
写入文件 writeFile()

写入文件 writeFile()，清空写入

  • 语法：fs.writeFile(file, data[, options], callback)
  • 参数说明：
    • file | | | 文件名或文件描述符。
    • data | | | 写入内容。
    • options |
      • encoding | 默认值: 'utf8'。
      • mode 默认值: 0o666。
      • flag 参见文件系统 flag 的支持。 默认值: 'w'。
    • callback 回调函数。
      • err
    • 示例：
      • const fs = require("fs");
const path = require("path");

// 构造文件路径
let fileName = path.join(__dirname, "1.txt");

// 写入文件
fs.writeFile(fileName, "写入内容", { flag: "a+" }, (err) => {
    // 如果有异常，则抛出异常
    if (err) throw err;
    console.log("写入成功");
});
      • 如果 options 是字符串，则它指定字符编码
      fs.writeFile('文件.txt', 'Node.js 中文网', 'utf8', callback);
      追加的方式写入文件 appendFile()

      以追加的方式写入文件

      • path | | | 文件名或文件描述符。
      • data |
      • options |
        • encoding | 默认值: 'utf8'。
        • mode 默认值: 0o666。
        • flag 参见文件系统 flag 的支持。默认值: 'a'。
      • callback
        • err
          如果文件不存在，则创建文件
        • fs.appendFile('文件.txt', '追加的数据', (err) => {
  if (err) throw err;
  console.log('数据已被追加到文件');
});

        如果 options 是字符串，则它指定字符编码：

        fs.appendFile('文件.txt', '追加的数据', 'utf8', callback);
        读取文件 readFile()
        • 语法：fs.readFile()path[, options], callback
        • 参数说明：
          • path | | | 文件名或文件描述符。
          • options |
            • encoding | 默认值: null。
            • flag 参见文件系统 flag 的支持。默认值: 'r'。
          • callback
            • err
            • data |
          • 示例：
            • fs.readFile(fileName, "utf8", (err, data) => {
    if (err) throw err;
    console.log(data);
});
            • 如果不写"utf8"，返回的data是一个二进制数据，是以十六进制展示，如果想正常展示，需要使用tostring()方法。
            • fs.readFile() 函数会缓冲整个文件。 若要最小化内存成本，则尽可能选择流式（使用 fs.createReadStream()）。
            删除文件 unlink()

            删除文件

            • path | |
            • callback
              • err 
            const fs = require("fs");
const path = require("path");

let fileName = __dirname;

fs.unlink(path.join(fileName, "err.txt"), (err) => {
    if (err) throw err;
    console.log("删除文件成功");
});
            创建目录 mkdir()

            创建目录：

            • fs.mkdir(path[, options], callback)
              参数：

            • path | |

            • options |

              • recursive 默认值: false。
              • mode | 在 Windows 上不支持。默认值: 0o777。

            • callback

              • err 
              • // 创建 `/目录1/目录2/目录3`，不管 `/目录1` 和 `/目录1/目录2` 是否存在。
fs.mkdir('/目录1/目录2/目录3', (err) => {
  if (err) throw err;
});
              midirSync()

              同步创建文件：

              • fs.mkdirSync(path[, options])
                参数：

              • path | |

              • options |

                • recursive 默认值: false。
                • mode | 在 Windows 上不支持。默认值: 0o777。
                删除目录 rmdir()

                注意：rmdir只能删除空目录
                语法：

                • fs.rmdir(path[, options], callback)
                  参数：

                • path | |

                • options

                  • maxRetries 如果遇到 EBUSY、 EMFILE、 ENFILE、 ENOTEMPTY 或 EPERM 错误，则 Node.js 会重试该操作（每次尝试时使用 retryDelay 毫秒时长的线性回退等待）。 此选项表示重试的次数。 如果 recursive 选项不为 true，则此选项会被忽略。 默认值: 0。
                  • recursive 如果为 true，则执行递归的目录删除。 在递归模式中，错误不会被报告（如果 path 不存在），并且操作会被重试（当失败时）。 默认值: false。
                  • retryDelay 重试之间等待的时间（以毫秒为单位）。 如果 recursive 选项不为 true，则此选项会被忽略。 默认值: 100。

                • callback

                  • err
                  • 文件重命名 rename()

                  异步地把 oldPath 文件重命名为 newPath 提供的路径名。 如果 newPath 已存在，则覆盖它。 除了可能的异常，完成回调没有其他参数。

                  语法：

                  • fs.rename(oldPath, newPath, callback)

                  参数：

                  • oldPath | |
                  • newPath | |
                  • callback
                    • err 
                  fs.rename('旧文件.txt', '新文件.txt', (err) => {
  if (err) throw err;
  console.log('重命名完成');
});
                  读目录 readdir()

                  读取目录，返回一个数组，数组中保存当前目录下的文件/文件夹名称。
                  语法：

                  • fs.readdir(path[, options], callback)

                  参数：

                  • path | |
                  • options |
                    • encoding 默认值: 'utf8'。
                    • withFileTypes 默认值: false。
                  • callback
                    • err
                    • files | |

                    • 读取目录的内容。 回调有两个参数 (err, files)，其中 files 是目录中文件的名称的数组（不包括 '.' 和 '..'）。

                    可选的 options 参数可以是字符串（指定字符编码）、或具有 encoding 属性（指定用于传给回调的文件名的字符编码）的对象。 如果 encoding 被设置为 'buffer'，则返回的文件名会作为 Buffer 对象传入。

                    如果 options.withFileTypes 被设置为 true，则 files 数组会包含 fs.Dirent 对象。

                    判断当前文件是否是目录 stat()

                    语法：

                    • fs.stat(path[, options], callback)

                    参数：

                    • path | |
                    • options
                      • bigint 返回的 fs.Stats 对象中的数值是否为 bigint 型。 默认值: false。
                    • callback
                      • err
                      • stats

                      • 回调有两个参数 (err, stats)，其中 stats 是 fs.Stats 对象。

                      若要只检查文件是否存在，但没有更多的操作，则建议使用 fs.access()。

                      .isDirectory() // 是否是目录
                      .isFile() // 是否是普通文件

                      路径是否存在 existsSync()

                      用于检查文件路径是否存在：

                      • fs.existsSync(path)

                      参数：

                      • path | |
                      • 返回: 
                      if (fs.existsSync('文件')) {
  console.log('该路径已存在');
}

                      文件流

                      文件操作可以是缓冲的方式，也可以是文件流的方式，缓冲的方式就是比如在写入文件的时候，首选读取源文件，然后将源文件读取到内存缓冲中，当缓存中的文件溢出的时候，在将内容写入到新的文件中，上述的文件写入方式就是通过缓冲方式实现。

                      文件流表示将读取的文件和写入的文件通过一个管道连接，直接将要读取的文件内容写入到新的文件中。

                      特点：

                      • 内存效率提高
                        • 无需加载大量数据。
                        • 流把大数据切成小块，占用内存更少。
                      • 时间效率提高
                        • 获取数据后立即开始处理。
                        • 无需等到内存缓冲填满。
                      // 1.创建读取流
const readStream = fs.createReadStream("文件路径");
// 2.创建写入流
const writeStream = fs.createWriteStream("文件路径");

// 3.把读取流通过管道传给读取流
readStream.pipe(writeStream)

                      内置模块-http

                      const http = require("http");

// 创建服务
// req = request 请求
// res = response 响应
const server = http.createServer((req, res) => {
    res.statusCode = 200;
    res.setHeader("Content-Type", "text/plain; charset=utf-8");
    res.end("你好");
});

// 发布web服务
const port = 1234;
const host = "localhost";
server.listen(port, host, () => {
    console.log(`服务器运行在：http://${host}:${port}`);
});

                      自定义模块

                      • Node.js中每个单独的.js文件，就是一个模块。
                      • 每个模块中都有一个module变量，其代表当前模块。
                      • module中的exports属性时对外的接口。
                        • 只有导出（module.exports）的属性或方法才能被外部调用
                        • 未导出的内容是模块私有，不能被外部访问。
                      • 使用时需要用require引入。引入的时候需要将完整的路径写入。可以省略后面的.js 
                      // modules.js
function info() {
    return "自定义模块";
}

module.exports = {
    info,
};

                      // app.js

const info = require("./modules");

console.log(info.info());

                      模块的加载逻辑

                      以路径开头引入：

                      • 文件模式：

                        • 可以直接通过require("文件路径")引入，后缀名可以省略不写。

                      • 目录模块：

                        • 通过require("目录路径")，然后引入入口文件。
                        • 默认入口文件是index.js，在目录路径中直接写入路径的时候，默认在这个目录下寻找index.js这个文件。
                        • 如果没有index.js这个文件，可以在目录下创建一个package.json文件，在文件中通过main属性指定入口文件。
                        • package.json是目录模块中的扫描文件。
                      // package.json
{
    "main": "modules.json"
}

                      不以路径开头引入：

                      • 文件模式：
                        • 引入官方的内置模块

                      目录模式：

                      * 会在当前目录下寻找`node_modules`文件，找到之后会引入`index.js`。
* 如果没有`index.js`文件，可以通过`package.json`指定入口文件。

                      第三方模块

                      网站：https://www.npmjs.com/
                      通过npm安装第三方包，npm是一个命令，跟随Node.js一起安装。
                      修改镜像源：npm config set registry https://registry.npm.taobao.org

                      全局安装资源：

                      • npm install --global
                      • npm i -g

                      minify ./style.css > ./style.min.css

                      项目安装：

                      • 创建项目目录（mkdir project）；
                      • 进入项目目录（cd project）；
                      • 初始化项目（npm init）；
                      • 在项目中安装包；
                      • npm install --sava
                      • npm i -S

                      ./node_modules/bin/minify ./style.css > ./style.main.css

                      --save/-S : 安装的包，开发和上线都需要
                      --save-dev/-D : 安装的包，只在开发环境使用

                      压缩css文件插件

                      • 安装： npm i minify -g
                      • 使用：minify output.css > output.min.css

                      将less转为css

                      • 安装：npm i less -g
                      • 使用：lessc input.less output.css

                      发布服务

                      • 安装：npm i serve -g
                      • 使用：serve .

                      脚手架工具

                      Yeoman

                      https://www.yeoman.io

                      • Yeoman是一款脚手架工具

                        • 可以帮助开发人员创建项目的基础结构代码

                      • yo是Yeoman的命令行管理工具

                        • 可以在命令行运行yeoman的命令

                      • 生成器：Yeoman中具体的脚手架

                        • 针对不同项目有不同的额脚手架（例如：网站，APP，小程序等）
                      Yeoman 使用说明
                      • 全局安装yo
                        • npm install --global yo
                      • 安装generator
                        • npm install --global generator-webapp
                      • 通过yo运行generator
                        • mkdir project-name
                        • cd project-name
                        • yo webapp
                      • 启动应用
                        • npm run start

                      自动化构建

                      npm scripts

                      • npm允许在package.json文件中，使用scripts字段定义脚本命令。

                      npm scripts 自定义脚本命令

                      • 1.声明命令：在package.json文件中，声明scripts字段定义的脚本命令。
                        • "scripts": {"foo": "node bar,js"}
                      • 2.执行命令：在终端中执行命令
                        • npm run foo

                      npm scripts 命令的执行方式

                      • 并行执行：

                        • 任务1 & 任务2
                        • 任务之间没有先后顺序，同时执行可以提高执行效率

                      • 串行执行：

                        • 任务1 && 任务2
                        • 任务之间有先后顺序，先执行一个任务，后执行下一个。

                      • 注意：并行执行 & 符号在windows中不起作用。

                      • 解决方法：

                        • 在项目中安装npm-run-all插件。npm i npm-run-all -D.
                        • 并行执行：npm-run-all -p 脚本1 脚本2 脚本3
                        • 并行执行简写：run-p 脚本1 脚本2 脚本3
                        • 串行执行：npm-run-all -s 脚本1 脚本2 脚本3
                        • 串行执行简写：run-s 脚本1 脚本2 脚本2

                      示例代码：

                      // package.json
{
    "name": "stylesFile",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        // 现将less文件转换成css文件，然后再压缩。
        "style": "lessc styles/index.less styles/index.css && minify styles/index.css > styles/index.min.css"
    },
    "keywords": [],
    "author": "",
    "license": "ISC"
}
                      脚本文件

                      在ES6中新增加了一些语法，可能在一些浏览器中不支持，所以需要将ES6+的新语法转成ES5的语法。可以使用Babel插件，将ES6的语法转换成ES5的语法。

                      • 安装Babel：npm install -g babel-core babel-cli
                      • 安装转码规则：npm install -g babel-preset-env
                      • 配置转换规则：.babelrc 一定要将文件放到根目录。不要省略文件名前面的 "."。
                      • 在npm scripts中添加转换命令（babel src -d dist）
                      • 执行转换命令
                      // .babelrc 配置转换规则
{
    "presets": [
        "env"
    ]
}
                      • 转换规则：babel-preset-env
                      • 转换命令：
                        • 单个文件：babel input.js --out-file output.js或babel input.js -o oupput.js
                        • 整个目录：babel src --out-dir dist或babel src -d dist

                      代码格式化的校验

                      • 不同的工程师，代码风格不统一。
                      • 项目代码提交时，需要保持统一的代码格式。
                      • 可以通过工具完成代码格式校验。
                      • 格式校验工具提供编码规范，根据编码规范，自动检查代码。
                      使用 ESLint，校验js代码。

                      官网：eslint.org

                      • 初始化项目（npm init --yes）
                      • 安装ESLint（npm i eslint -g）
                      • 初始化配置文件（eslint --init）
                      • 检查js代码格式。
                        • 单个文件检查：eslint path/filename.js
                        • 整个目录检查：eslint path/dirname

                      初始化配置文件中的rules表示规则，可以进行配置。

                      • indent：表示缩进，他的值是一个数组，里面可以配置两个参数。

                        • 第一个参数：

                          • off：表示关闭。
                          • warn：警告，不影响代码格式检测。
                          • error：错误，检查代码格式

                        • 第二个参数:

                          • 数字类型，表示缩进。
                      • quotes：表示引号。他的值是一个数组，里面可以配置两个参数。

                        • 第一个参数：

                          • off：表示关闭。
                          • warn：警告，不影响代码格式检测。
                          • error：错误，检查代码格式

                        • 第二个参数:

                          • double：表示双引号。

                      StyleLint 校验css代码

                      用于检测css代码格式规范

                      官网：stylelint.io

                      • 初始化项目：npm init --yes
                      • 安装StyleLint：npm i stylelint -g
                      • 安装检测标准：npm i stylelint-config-standard
                      • 创建配置文件：.stylelintrc.json
                        • {"extends": "stylelint-config-standard"}
                      • 检查CSS代码格式：
                        • 单个文件：stylelint path/filename.css
                        • 整个项目：stylelint */.css

                      自动化构建工具

                      Gulp

                      Gulp与npm scripts的区别

                      • Gulp与npm scripts都能够实现自动化构建

                      • Gulp语法简单

                        • Gulp语法就是JavaScript语法。
                        • npm scripts语法接近shell脚本。

                      • Gulp生态完善，构建效率高。

                      Gulp使用
                      • 全局安装gulp客户端：npm install -g gulp-cli
                      • 初始化项目：npm init --yes
                      • 安装gulp包：npm install gulp -D
                      • 新建gulpfile文件，文件必须在项目的跟目录下：gulpfile.js
                      • 在gulpfile.js中，创建gulp任务。
                      • 执行gulp任务：gulp
                      • 注意：
                        • gulp任务是一个异步任务，在创建任务的时候，需要创建异步任务，可以添加一个回调函数，在任务中执行回调函数。
                        • 任务创建成功之后，需要导出任务。
                      • 示例代码：
                      const gulp = require("gulp");

// 创建任务
const task1 = (cb) => {
    setTimeout(() => {
        console.log("task1 is running");
        cb();
    }, 1000)
};

module.exports = {
    task1,
};
                      Gulp组合任务

                      Gulp中的组合任务就是指任务并行执行或者串行执行。

                      并行执行：

                      • gulp.parallel(task1, task2, task3)

                      串行执行

                      • gulp.series(task1, task2, task3)

                      代码示例：

                      const gulp = require("gulp");

// 创建任务
const task1 = (cb) => {
    setTimeout(() => {
        console.log("task1 is running");
        cb();
    }, 1000);
};

const task2 = (cb) => {
    setTimeout(() => {
        console.log("task2 is running");
        cb();
    }, 1000);
};

const task3 = (cb) => {
    setTimeout(() => {
        console.log("task3 is running");
        cb();
    }, 1000);
};

// 并行执行
exports.p = gulp.parallel(task1, task2, task3);

// 串行执行
exports.s = gulp.series(task1, task2, task3);

// 终端执行命令方式：
// gulp p
// gulp s
                      gulp 文件操作

                      Gulp的文件操作是基于流的构建系统来操作文件的。

                      步骤：

                      • 输入(读取流)
                        • 对应函数：src()，读取文件。
                        • 参数1：读取的文件地址。
                        • 参数2：写入文件的参照路径，对象格式。
                          • {base: "src"} 表示参照src中的文件路径最终写入文件。
                      • 加工(转换流)
                        • 对应函数：pipe()
                        • 管道可以进行多次操作，称作为管道流
                      • 输出(写入流)
                        • 对应函数：dest()
                        • 参数：将文件写入的目标路径。

                      示例代码：

                      // 文件操作任务，本身就是异步任务，所以不需要回调函数
const fileStyle = () => {
    return gulp
        .src("src/style/main.less", { base: "src" })
        .pipe(gulp.dest("dest"));
};

module.exports = {
    fileStyle,
};

                      使用gulp插件完成文件转换

                      // 文件转换任务
// gulp-less  将less文件转换成css文件
const gulpLess = require("gulp-less");
// gulp-clean-css  压缩css文件
const cleanCss = require("gulp-clean-css");
// gulp-rename 文件重命名
const rename = require("gulp-rename");

const fileStyle = () => {
    return gulp
        .src("src/style/main.less", { base: "src" })
        .pipe(gulpLess())
        .pipe(cleanCss())
        .pipe(rename({ extname: ".min.css" }))
        .pipe(gulp.dest("dest"));
};

module.exports = {
    fileStyle,
};

                      CSS hack

                      • css代码也会存在兼容性问题。同一段css代码，在不同的浏览器上的呈现效果不同。
                      • 针对不同浏览器写相对应的css代码的过程，叫做 CSS hack。
                      • CSS hack的目的就是使css代码兼容不同的浏览器。

                      CSS hack属性前缀法

                      • 给css属性添加浏览器特有的前缀。称之为属性前缀法。
                      浏览器 前缀
                      IE -ms-
                      chrome -webkit-
                      Safari -webkit-
                      Firefox -moz-
                      Opera -o-

                      Autoprefixer

                      • Autoprefixer插件可以自动的将一些css的属性，添加前缀，不用自己手动书写属性的前缀名称。
                      • Autoprefixer使用caniuse.com的数据，来决定哪些属性需要加前缀。caniuse.com可以查询属性的兼容性。

                      安装：npm i gulp-autoprefixer

                      示例代码：

                      const gulp = require("gulp");
// gulp-less  将less文件转换成css文件
const gulpLess = require("gulp-less");
// gulp-clean-css  压缩css文件
const cleanCss = require("gulp-clean-css");
// gulp-rename 文件重命名
const rename = require("gulp-rename");
// gulp-autoprefixer  css自动添加前缀
const autoprefixer = require("gulp-autoprefixer");

const fileStyle = () => {
    return (
        gulp
        .src("src/style/main.less", { base: "src" })
        .pipe(gulpLess())
        .pipe(autoprefixer())
        // .pipe(cleanCss())
        // .pipe(rename({ extname: ".min.css" }))
        .pipe(gulp.dest("dest"))
    );
};

module.exports = {
    fileStyle,
};

                      Gulp 脚本文件转换

                      Gulp 构建脚本文件所需插件

                      • gulp-babel：将ES6新语法转换成ES5语法。

                        • npm install --save-dev gulp-babel@7 babel-core babel-preset-env

                      • gulp-uglify：压缩js代码。

                        • npm i gulp-uglify -D

                      • gulp-rename：对文件进行重命名。

                      示例代码：

                      const gulp = require("gulp");
// gulp-babel 将ES6新语法转换成ES5
const gulpBabel = require("gulp-babel");
// gulp-uglify 压缩js代码
const gulpUglify = require("gulp-uglify");
// gulp-rename 重命名
const rename = require("gulp-rename");

// 创建脚本文件转换任务
const scripts = () => {
    return gulp
        .src("src/js/main.js")
        .pipe(gulpBabel({ presets: "babel-preset-env" }))
        .pipe(gulpUglify())
        .pipe(rename({ extname: ".min.js" }))
        .pipe(gulp.dest("dest/script"));
};
module.exports = {
    scripts,
};

                      Gulp 构建HTML文件

                      Gulp HTML文件所需要的插件
                      • gulp-htmlmin：压缩html文件。

                      示例代码：

                      // 创建压缩html文件任务
const html = () => {
    return gulp
        .src("src/index.html")
        .pipe(
            htmlmin({
                collapseWhitespace: true,
                minifyCSS: true,
                minifyJS: true,
            })
        )
        .pipe(gulp.dest("dest"));
};

                      Gulp 构建图片文件

                      图片文件所需插件
                      • gulp-imagemin：压缩图片文件

                      Gulp 文件清除

                      文件清除所需插件
                      • del 删除文件和目录
                      const clearFile = () => {
    return del("dist");
};

                      Gulp 发布服务

                      通过插件将html，css，js等文件压缩之后，最终要发布的是压缩之后的文件。

                      开发服务器插件
                      • browser-sync：服务发布
                      const server = () => {
    watch("src/index.html", fileHtml);
    watch("src/css/*.css", fileStyle);
    watch("src/js/*.js", fileScript);

    browserSync.init({
        notify: false,
        files: "dist/**", // 监听dist下的所有文件
        server: {
            baseDir: "./dist", // 指定服务启动的目录
            routes: { "/node_modules": "node_modules", "/lib": "lib" },
        },
    });
};

                      Gulp 中使用Bootstrap

                      • 安装：
                        • bootstrap：提供常用的页面效果
                        • jquery：Bootstrap的依赖包

                      你可能感兴趣的:(前端工程化)

                      • 前端工程化详解 & 包管理工具 lin-lins 工程化实战前端
                        前端工程化详解&包管理工具1、工程化体系介绍1.1、什么是前端工程化1.2、前端工程化发展2、脚手架能力2.1准备阶段2.2开发阶段2.3发布流程3、npm能力3.1剖析package.json3.1.1必备属性3.1.2描述信息3.1.3依赖配置3.1.4协议3.1.5目录&文件相关3.1.5.1程序入口3.1.5.2命令行工具入口3.1.5.3发布文件配置3.1.5.4man3.1.5.5规范
                      • 前端工程化——脚手架及自动化构建 Jelly-JK 前端工程化javascriptnode.jshtml
                        定义一切以提高效率、降低成本、质量保证为目的的手段，都属于工程化前端工程化主要解决的问题传统语言或语法的弊端无法使用模块化/组件化重复性的机械工作代码风格统一、质量保证依赖后端服务接口的保证整体依赖后端项目工程化的表现体现在项目的整个流程：创建项目创建项目结构创建特定类型文件编码格式化校验校验代码风格编译/构建/打包预览/测试WebServer/MockLiveReloading/HMRSourc
                      • class 7: vue.js 3 前端工程化 Clarence Liu vue前端vue.jsjavascript
                        默认情况下，不能直接使用单文件组件来编写组件，因为浏览器不认识SFC(.vue)文件。因此，我们需要使用webpack或者Vite构建一个支持SFC开发的Vue.js3环境目录前端发展史webpackVueCLI脚手架前端发展史Web早期：也就是互联网发展早期，前端开发人员只负责写静态页面，纯粹地展示功能，JavaScript的作用只体现在一些表单的验证和增加特效上。当然，为了在页面中动态填充一些
                      • 28.前端工程化背后的项目组织设计（下） ikonan
                        承接上一节的内容，本节来继续学习前端工程化中依赖关系相关的内容。在此之前，先回顾一下「项目组织」主题的知识点：说到项目中的依赖关系，我们往往会想到使用yarn/npm解决依赖问题。依赖关系大体上可以分为：嵌套依赖扁平依赖项目中，我们引用了三个包：PackageA、PackageB、PackageC，它们都依赖了PackageD的不同版本。那么在安装时，如果PackageA、PackageB、Pac
                      • JavaWeb——前端工程化 A_Tai2333333 JavaWeb前端
                        一、前端工程化1.什么是前端工程化:前端工程化是使用软件工程的方法来单独解决前端的开发流程中模块化、组件化、规范化、自动化的问题，以提高效率和降低成本。2.前端工程化实现技术栈:ES6+Nodejs+npm+Vite+VUE3+Router+Pinia+Axios+Element-plusECMAScript6:VUE3中大量使用ES6语法;Nodejs:前端项目运行环境npm:依赖下载工具Vit
                      • 【前端面试题】前端工程化、Webpack、Vite、Git项目管理相关问题 快乐点吧 前端webpackgit
                        目录关于前端工程化关于Webpack关于Vite关于Git项目管理综合性问题关于前端工程化1.前端工程化的定义和好处问题：什么是前端工程化？它的主要好处是什么？答案：前端工程化是指在前端开发中应用系统化、自动化和标准化的方法，包括模块化、组件化、自动化构建、测试等，以提高开发效率和代码质量。主要好处包括提升开发效率、增强代码可维护性、提高代码质量和团队协作效率。2.前端项目的目录结构问题：你通常如
                      • 3、JavaWeb-Ajax/Axios-前端工程化-Element 所谓远行Misnearch #JavaWeb前端ajaxelementuijava前端框架
                        P34Ajax介绍Ajax:AsynchroousJavaScriptAndXML，异步的JS和XMLJS网页动作，XML一种标记语言，存储数据，作用：数据交换：通过Ajax给服务器发送请求，并获取服务器响应的数据异步交互：在不重新加载整个页面的情况下，与服务器交换数据并实现更新部分网页的技术，例如：搜索联想、用户名是否可用的校验等等。同步与异步：同步：服务器在处理中客户端要处于等待状态，输入域名
                      • 前端工程化面试题 | 15.精选前端工程化高频面试题 ai_todo 前端工程化前端javascripttypescript开发语言
                        前端开发工程师、技术日更博主、已过CET6阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》蓝桥云课签约作者、上架课程《Vue.js和Egg.js开发企业级健康管理项目》、《带你从入门到实战全面掌握uni-app》文章目录请解释一下前端中的代码分支管理和代码合并。你熟悉的代码合并工具有哪些？解释一下前端中的流程管理
                      • 前端工程化之：webpack3-7(PostCss) 小李老笨了 前端工程化前端postcssjavascript
                        目录一、PostCss1.什么是PostCss2.安装3.配置文件4.插件5.postcss-preset-env（1）自动的厂商前缀（2）未来的css语法（3）变量（4）自定义选择器（5）嵌套（6）postcss-apply（7）postcss-color-function（8）[扩展]postcss-import（9）stylelint一、PostCss内容与webpack无关！！！1.什么是
                      • 【前端工程化面试题】webpack proxy的工作原理，为什么能解决跨域问题 我有一棵树 前端webpacknode.js
                        在webpack的配置文件webpack.config.js中有一个配置项devServer里面有一个属性是proxy，这里面可以配置代理服务器，解决跨域问题，请参考官网。一般来说webpack的代理就是说的开发服务器webpack-dev-server。其实不光是webpack其他的打包工具比如是vite，也有代理的功能，也是开发服务器。webpack-dev-server的工作原理本质是利用了
                      • 【前端工程化面试题目】webpack 的热更新原理 我有一棵树 前端webpacknode.js
                        可以在顺便学习一下vite的热更新原理，请参考这篇文章。首先有几个知识点需要明确热更新是针对开发过程中的开发服务器的，也就是webpack-dev-serverwebpack的热更新不需要额外的插件，但是需要在配置文件中devServer属性中配置hot：true，需要安装webpack-dev-server这个npm包webpack的热更新也使用websocket具体的步骤如下运行webpack
                      • 【前端工程化面试题】webpack的module、bundle、chunk分别指的是什么？ 我有一棵树 前端webpacknode.js
                        首先从语法方面在配置文件中有module这个配置项，里面有rules选项用来配置各种loader，还有其他各种选项，参考官网。bundle和chunk在配置文件中是没有这个选项的，但是会出现在配置的值中。module模块指单个文件，可以是js、css、图片等，每个文件都是一个独立的模块，可以通过import.和require等方式导入和导出模块可以包含代码、依赖关系和其他相关资源。代表应用程序的组
                      • 【前端工程化面试题】什么是 CI/CD 我有一棵树 ci/cd
                        CI/CD是软件开发中的两个重要实践，分别代表持续集成（ContinuousIntegration）和持续交付/持续部署（ContinuousDelivery/ContinuousDeployment）。持续集成(ContinuousIntegration,CI)：持续集成是一种软件开发实践，通过将代码频繁地集成到共享存储库（如版本控制系统）中，并自动运行测试来验证新代码的正确性。主要目标是尽早地
                      • 【前端面试题】08—31道有关前端工程化的面试题(附答案) web前端开发V vuepythonjavascriptjavalinux
                        随着前端技术的发展，前端工程化变得越来越重要。前端工程化部分的面试题主要考察应试者对工程化的理解与运用，如何通过工程化来提高代码质量、编译代码、优化代码；如何提高网站性能，保障网站安全，提升用户体验；如何将开发的代码按照理想的方式发布和上线等。当然，一些新技术的实现（诸如EMAScript6、typescript、jsx、Less、Sass、Stylus等）都离不开前端工程化。1、谈谈你对WebP
                      • 【前端工程化面试题】说一下 webpack 的构建流程 我有一棵树 前端webpacknode.js
                        类似问题是，说一下vite的构建流程，参考这篇文章。初始化流程从配置文件和shell语句中读取合并参数，初始化需要使用的插件和执行环境所需要的参数配置文件默认是webpack.config.js编译构建流程解析入口模块，从入口模块开始串行调用对应的loader去翻译文件内容，依次编译模块的依赖输出流程根据配置文件中entry属性配置的模块，根据入口和模块之前的依赖关系，组装成一个个包含多个模块的c
                      • 【前端工程化面试题】使用 webpack 来优化前端性能/ webpack的功能 我有一棵树 前端webpacknode.js
                        这个题目实际上就是来回答webpack是干啥的，你对webpack的理解，都是一个问题。（1）对webpack的理解webpack为啥提出+webpack是啥+webpack的主要功能前端开发通常是基于模块化的，为了提高开发效率，webpack是一个基于模块的构建工具，是一个用于js应用程序的静态模块打包工具。Webpack是一个现代JavaScript应用程序的静态模块打包工具，它能够将多个Ja
                      • 【前端工程化面试题】vite热更新原理 我有一棵树 前端
                        vite在开发阶段，运行vite命令，会启动一个开发服务器，vite在开发阶段是一个服务器依赖esm：vite在开发阶段使用esm作为开发时的模块系统。esm具有动态导入的能力，这使得在代码中引入模块时可以动态地加载新的模块，从而实现了热更新。HMR机制：vite利用了webpack等构件工具中常用的热模块替换机制，在代码发生变化时，只将修改的模块动态的注入到运行中的应用程序中，不需要刷新整个页面
                      • JavaWeb 小小李学java web
                        目录1.初识Web前端2.HTML、CSS3.基础标签4.CSS样式5.CSS引入方式6.颜色表示形式7.CSS选择器8.超链接9.盒子模型10.JavaScript11.JS基础语法12.数据类型13.流程控制语句14.JS函数15.JS对象16.Vue17.Ajax18.前后端分离开发：19.YApi20.前端工程化21.Vue组件库Element22.打包部署23.Maven24.Sprin
                      • 前端工程化 miss-ddly javascriptvue.js
                        目录模块化包管理器构建工具脚手架模块化1.是为了解决全局污染（全局变量，全局函数）和依赖混乱问题（js引入顺序等问题）。2.标准：官方ESModule，社区：CommonJS3.mian中定义一个函数functionsum(a,b){  returna+b;}4.在html中引用（会导致全局污染）5.将模块导出functionsum(a,b){  returna+b;}exportdefaults
                      • 前端工程化面试题 | 05.精选前端工程化高频面试题 ai_todo 前端javascriptwindowstypescript
                        前端开发工程师、技术日更博主、已过CET6阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》蓝桥云课签约作者、上架课程《Vue.js和Egg.js开发企业级健康管理项目》、《带你从入门到实战全面掌握uni-app》文章目录前端中的测试是什么？请解释一下你熟悉的前端测试方法和工具。请举例说明前端自动化部署的流程，以及
                      • 前端工程化面试题 | 06.精选前端工程化高频面试题 ai_todo 前端javascripttypescript开发语言
                        前端开发工程师、技术日更博主、已过CET6阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》蓝桥云课签约作者、上架课程《Vue.js和Egg.js开发企业级健康管理项目》、《带你从入门到实战全面掌握uni-app》文章目录前端开发中如何处理静态资源的优化和管理？请解释一下你熟悉的优化工具。解释一下前端中的版本控制系
                      • 前端工程化面试题 | 07.精选前端工程化高频面试题 ai_todo 前端javascripttypescript开发语言
                        前端开发工程师、技术日更博主、已过CET6阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》蓝桥云课签约作者、上架课程《Vue.js和Egg.js开发企业级健康管理项目》、《带你从入门到实战全面掌握uni-app》文章目录请解释一下前端中的持续集成和持续交付。你熟悉的持续集成工具或持续交付工具有哪些？前端性能优化是
                      • 前端工程化面试题 | 08.精选前端工程化高频面试题 ai_todo 前端javascripttypescript开发语言
                        前端开发工程师、技术日更博主、已过CET6阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》蓝桥云课签约作者、上架课程《Vue.js和Egg.js开发企业级健康管理项目》、《带你从入门到实战全面掌握uni-app》文章目录解释一下前端中的代码复用和组件化。你熟悉的组件化框架有哪些？请解释一下前端中的国际化和本地化解
                      • 【从Jest入门到 TDD,BDD双实战】整体学习介绍① 不停喝水 #【Jest自动化测试】react.js前端vue.jsjest自动化测试
                        一：前端要学的测试Jest入门TDD实战BDD实战二：前端工程化的一部分前端自动化测试高质量代码设计高质量代码实现三：前端自动化测试的例子VueEchartsReactAnt-Design这些都有使用到了自动化测试1.比如Lodash2.比如Redux四：前端为什么需要自动化测试？1.该需求时，代码重构：导致修复时间长，成本高2.自动化测试，修复时间少，难度低五：涵盖内容2.学习安排六：学习前置需
                      • 【实战】一、Jest 前端自动化测试框架基础入门 —— 前端要学的测试课 从Jest入门到TDD BDD双实战（一） 程序边界 前端tdd
                        文章目录一、前端要学的测试课1.前端要学的测试2.前端工程化的一部分3.前端自动化测试的例子4.前端为什么需要自动化测试？5.课程涵盖内容6.前置技能7.学习收获二、Jest前端自动化测试框架基础入门1.自动化测试背景及原理前端自动化测试产生的背景及原理2.前端自动化测试框架3.使用Jest修改自动化测试样例4.Jest的简单配置学习内容来源：Jest入门到TDD/BDD双实战_前端要学的测试课相
                      • 什么是前端工程化？ tomzhangto
                        虽然前端工程化的概念兴起还没几年的时间，但是对于“工程化”这个词并不是一个新鲜词了，在其他软件开发的领域很早就已经有了高度的工程化，例如Web服务端开发。只不过那个时候，前端工程师并没有工程化的意识，也没有必要对前端进行工程化的操作，毕竟在那个时期，前端的开发工作只能算是整个项目开发过程中的“附属品”。那为什么这几年，前端工程化的概念又突然成为了热点话题了呢？要想讲好前端工程化其实并不容易，我就从
                      • 前端开发_Node.js Rainbow_1991 前端开发node.jsvim编辑器
                        Node.js概念Node.js是一个跨平台JavaScript运行环境，使开发者可以搭建服务器端的JavaScript应用程序Node.js是前端工程化的基础（前端工程化：开发项目直到上线，过程中集成的所有工具和技术）浏览器能执行JS代码，依靠的是内核中的V8引擎（C++程序）Node.js是基于ChromeV8引擎进行封装（运行环境）Node.js环境没有DOM和BOM等模块模块：类似插件，封
                      • vue-cli vue-cli
                        vue-cli一.vue-cli1.什么是vue-cliVueCLI（全称为Vue.jsCommandLineInterface）是一个基于Vue.js进行快速开发的完整系统。它不仅是一个工具，也是一个前端工程化的解决方案。VueCLI的主要目的是简化Vue.js项目的搭建和开发过程，让开发者能够更加专注于业务逻辑的实现，而不是重复性的配置工作。2.vue-cli安装npminstall-g@vu
                      • 前端工程化面试题 | 03.精选前端工程化高频面试题 ai_todo 前端javascripttypescriptnode.jsgulp
                        前端开发工程师、技术日更博主、已过CET6阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》蓝桥云课签约作者、上架课程《Vue.js和Egg.js开发企业级健康管理项目》、《带你从入门到实战全面掌握uni-app》文章目录前端开发中如何实现代码的压缩和混淆？你熟悉的压缩工具有哪些？解释一下前端代码的编译和转译。你熟
                      • 前端工程化面试题 | 02.精选前端工程化高频面试题 ai_todo 前端webpackjavascript
                        前端开发工程师、技术日更博主、已过CET6阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》蓝桥云课签约作者、上架课程《Vue.js和Egg.js开发企业级健康管理项目》、《带你从入门到实战全面掌握uni-app》文章目录前端开发中的包管理工具是什么？请解释一下你熟悉的包管理工具。请举例说明在前端工程化中如何进行代
                      • java封装继承多态等 麦田的设计者 javaeclipsejvmcencapsulatopn
                               最近一段时间看了很多的视频却忘记总结了，现在只能想到什么写什么了，希望能起到一个回忆巩固的作用。     1、final关键字       译为：最终的        &
                      • F5与集群的区别 bijian1013 weblogic集群F5
                                http请求配置不是通过集群，而是F5；集群是weblogic容器的，如果是ejb接口是通过集群。         F5同集群的差别，主要还是会话复制的问题，F5一把是分发http请求用的，因为http都是无状态的服务，无需关注会话问题，类似
                      • LeetCode[Math] - #7 Reverse Integer Cwind java题解MathLeetCodeAlgorithm
                        原题链接：#7 Reverse Integer   要求： 按位反转输入的数字 例1： 输入 x = 123, 返回 321 例2： 输入 x = -123, 返回 -321   难度：简单   分析： 对于一般情况，首先保存输入数字的符号，然后每次取输入的末位（x%10）作为输出的高位（result = result*10 + x%10）即可。但
                      • BufferedOutputStream 周凡杨
                             首先说一下这个大批量，是指有上千万的数据量。      例子：      有一张短信历史表，其数据有上千万条数据，要进行数据备份到文本文件，就是执行如下SQL然后将结果集写入到文件中！      select t.msisd
                      • linux下模拟按键输入和鼠标 被触发 linux
                        查看/dev/input/eventX是什么类型的事件， cat /proc/bus/input/devices 设备有着自己特殊的按键键码，我需要将一些标准的按键，比如0－9，X－Z等模拟成标准按键，比如KEY_0,KEY-Z等，所以需要用到按键 模拟，具体方法就是操作/dev/input/event1文件，向它写入个input_event结构体就可以模拟按键的输入了。 linux/in
                      • ContentProvider初体验 肆无忌惮_ ContentProvider
                        ContentProvider在安卓开发中非常重要。与Activity，Service，BroadcastReceiver并称安卓组件四大天王。 在android中的作用是用来对外共享数据。因为安卓程序的数据库文件存放在data/data/packagename里面，这里面的文件默认都是私有的，别的程序无法访问。 如果QQ游戏想访问手机QQ的帐号信息一键登录，那么就需要使用内容提供者COnte
                      • 关于Spring MVC项目（maven）中通过fileupload上传文件 843977358 mybatisspring mvc修改头像上传文件upload
                        Spring MVC 中通过fileupload上传文件，其中项目使用maven管理。   1.上传文件首先需要的是导入相关支持jar包：commons-fileupload.jar,commons-io.jar 因为我是用的maven管理项目，所以要在pom文件中配置（每个人的jar包位置根据实际情况定） <!-- 文件上传 start by zhangyd-c --&g
                      • 使用svnkit api，纯java操作svn，实现svn提交，更新等操作 aigo svnkit
                         原文：http://blog.csdn.net/hardwin/article/details/7963318   import java.io.File; import org.apache.log4j.Logger; import org.tmatesoft.svn.core.SVNCommitInfo; import org.tmateso
                      • 对比浏览器，casperjs，httpclient的Header信息 alleni123 爬虫crawlerheader
                        @Override protected void doGet(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException { String type=req.getParameter("type"); Enumeration es=re
                      • java.io操作 DataInputStream和DataOutputStream基本数据流 百合不是茶 java流
                        1，java中如果不保存整个对象，只保存类中的属性，那么我们可以使用本篇文章中的方法，如果要保存整个对象  先将类实例化  后面的文章将详细写到     2，DataInputStream 是java.io包中一个数据输入流允许应用程序以与机器无关方式从底层输入流中读取基本 Java 数据类型。应用程序可以使用数据输出流写入稍后由数据输入流读取的数据。
                      • 车辆保险理赔案例 bijian1013 车险
                        理赔案例： 一货运车，运输公司为车辆购买了机动车商业险和交强险，也买了安全生产责任险，运输一车烟花爆竹，在行驶途中发生爆炸，出现车毁、货损、司机亡、炸死一路人、炸毁一间民宅等惨剧，针对这几种情况，该如何赔付。 赔付建议和方案： 客户所买交强险在这里不起作用，因为交强险的赔付前提是：“机动车发生道路交通意外事故”； 如果是交通意外事故引发的爆炸，则优先适用交强险条款进行赔付，不足的部分由商业
                      • 学习Spring必学的Java基础知识(5)—注解 bijian1013 javaspring
                                文章来源：http://www.iteye.com/topic/1123823，整理在我的博客有两个目的：一个是原文确实很不错，通俗易懂，督促自已将博主的这一系列关于Spring文章都学完；另一个原因是为免原文被博主删除，在此记录，方便以后查找阅读。           有必要对
                      • 【Struts2一】Struts2 Hello World bit1129 Hello world
                        Struts2 Hello World应用的基本步骤 创建Struts2的Hello World应用，包括如下几步： 1.配置web.xml 2.创建Action 3.创建struts.xml，配置Action 4.启动web server，通过浏览器访问   配置web.xml <?xml version="1.0" encoding="
                      • 【Avro二】Avro RPC框架 bit1129 rpc
                        1. Avro RPC简介 1.1. RPC RPC逻辑上分为二层，一是传输层，负责网络通信；二是协议层，将数据按照一定协议格式打包和解包 从序列化方式来看，Apache Thrift 和Google的Protocol Buffers和Avro应该是属于同一个级别的框架，都能跨语言，性能优秀，数据精简，但是Avro的动态模式（不用生成代码，而且性能很好）这个特点让人非常喜欢，比较适合R
                      • lua　set get cookie ronin47 lua cookie
                        lua: local access_token = ngx.var.cookie_SGAccessToken if access_token then ngx.header["Set-Cookie"] = "SGAccessToken="..access_token.."; path=/;Max-Age=3000" end
                      • java-打印不大于N的质数 bylijinnan java
                        public class PrimeNumber { /** * 寻找不大于N的质数 */ public static void main(String[] args) { int n=100; PrimeNumber pn=new PrimeNumber(); pn.printPrimeNumber(n); System.out.print
                      • Spring源码学习-PropertyPlaceholderHelper bylijinnan javaspring
                        今天在看Spring 3.0.0.RELEASE的源码，发现PropertyPlaceholderHelper的一个bug 当时觉得奇怪，上网一搜，果然是个bug，不过早就有人发现了，且已经修复： 详见： http://forum.spring.io/forum/spring-projects/container/88107-propertyplaceholderhelper-bug
                      • [逻辑与拓扑]布尔逻辑与拓扑结构的结合会产生什么? comsci 拓扑
                           如果我们已经在一个工作流的节点中嵌入了可以进行逻辑推理的代码,那么成百上千个这样的节点如果组成一个拓扑网络,而这个网络是可以自动遍历的,非线性的拓扑计算模型和节点内部的布尔逻辑处理的结合,会产生什么样的结果呢?    是否可以形成一种新的模糊语言识别和处理模型呢?  大家有兴趣可以试试,用软件搞这些有个好处,就是花钱比较少,就算不成
                      • ITEYE 都换百度推广了 cuisuqiang GoogleAdSense百度推广广告外快
                        以前ITEYE的广告都是谷歌的Google AdSense，现在都换成百度推广了。   为什么个人博客设置里面还是Google AdSense呢？   都知道Google AdSense不好申请，这在ITEYE上也不是讨论了一两天了，强烈建议ITEYE换掉Google AdSense。至少，用一个好申请的吧。   什么时候能从ITEYE上来点外快，哪怕少点
                      • 新浪微博技术架构分析 dalan_123 新浪微博架构
                        新浪微博在短短一年时间内从零发展到五千万用户，我们的基层架构也发展了几个版本。第一版就是是非常快的，我们可以非常快的实现我们的模块。我们看一下技术特点，微博这个产品从架构上来分析，它需要解决的是发表和订阅的问题。我们第一版采用的是推的消息模式，假如说我们一个明星用户他有10万个粉丝，那就是说用户发表一条微博的时候，我们把这个微博消息攒成10万份，这样就是很简单了，第一版的架构实际上就是这两行字。第
                      • 玩转ARP攻击 dcj3sjt126com r
                        我写这片文章只是想让你明白深刻理解某一协议的好处。高手免看。如果有人利用这片文章所做的一切事情，盖不负责。 网上关于ARP的资料已经很多了，就不用我都说了。 用某一位高手的话来说，“我们能做的事情很多，唯一受限制的是我们的创造力和想象力”。 ARP也是如此。 以下讨论的机子有 一个要攻击的机子：10.5.4.178 硬件地址：52:54:4C:98
                      • PHP编码规范 dcj3sjt126com 编码规范
                        一、文件格式 1. 对于只含有 php 代码的文件，我们将在文件结尾处忽略掉 "?>" 。这是为了防止多余的空格或者其它字符影响到代码。例如：<?php$foo = 'foo';2. 缩进应该能够反映出代码的逻辑结果，尽量使用四个空格，禁止使用制表符TAB，因为这样能够保证有跨客户端编程器软件的灵活性。例
                      • linux 脱机管理（nohup） eksliang linux nohupnohup
                        脱机管理 nohup 转载请出自出处：http://eksliang.iteye.com/blog/2166699 nohup可以让你在脱机或者注销系统后，还能够让工作继续进行。他的语法如下 nohup [命令与参数] --在终端机前台工作 nohup [命令与参数] & --在终端机后台工作   但是这个命令需要注意的是，nohup并不支持bash的内置命令，所
                      • BusinessObjects Enterprise Java SDK greemranqq javaBOSAPCrystal Reports
                        最近项目用到oracle_ADF  从SAP/BO 上调用 水晶报表，资料比较少，我做一个简单的分享，给和我一样的新手 提供更多的便利。   首先，我是尝试用JAVA JSP 去访问的。   官方API：http://devlibrary.businessobjects.com/BusinessObjectsxi/en/en/BOE_SDK/boesdk_ja
                      • 系统负载剧变下的管控策略 iamzhongyong 高并发
                        假如目前的系统有100台机器，能够支撑每天1亿的点击量（这个就简单比喻一下），然后系统流量剧变了要，我如何应对，系统有那些策略可以处理，这里总结了一下之前的一些做法。 1、水平扩展 这个最容易理解，加机器，这样的话对于系统刚刚开始的伸缩性设计要求比较高，能够非常灵活的添加机器，来应对流量的变化。 2、系统分组 假如系统服务的业务不同，有优先级高的，有优先级低的，那就让不同的业务调用提前分组
                      • BitTorrent DHT 协议中文翻译 justjavac bit
                        前言 做了一个磁力链接和BT种子的搜索引擎 {Magnet & Torrent}，因此把 DHT 协议重新看了一遍。 BEP: 5Title: DHT ProtocolVersion: 3dec52cb3ae103ce22358e3894b31cad47a6f22bLast-Modified: Tue Apr 2 16:51:45 2013 -070
                      • Ubuntu下Java环境的搭建 macroli java工作ubuntu
                        配置命令： 　　$sudo apt-get install ubuntu-restricted-extras 　　再运行如下命令： 　　$sudo apt-get install sun-java6-jdk 　　待安装完毕后选择默认Java. 　　$sudo update- alternatives --config java 　　安装过程提示选择，输入“2”即可，然后按回车键确定。
                      • js字符串转日期（兼容IE所有版本） qiaolevip TODateStringIE
                        /** * 字符串转时间（yyyy-MM-dd HH:mm:ss） * result （分钟） */ stringToDate : function(fDate){ var fullDate = fDate.split(" ")[0].split("-"); var fullTime = fDate.split("
                      • 【数据挖掘学习】关联规则算法Apriori的学习与SQL简单实现购物篮分析 superlxw1234 sql数据挖掘关联规则
                        关联规则挖掘用于寻找给定数据集中项之间的有趣的关联或相关关系。 关联规则揭示了数据项间的未知的依赖关系，根据所挖掘的关联关系，可以从一个数据对象的信息来推断另一个数据对象的信息。 例如购物篮分析。牛奶 ⇒ 面包 [支持度：3%，置信度：40%] 支持度3%：意味3%顾客同时购买牛奶和面包。 置信度40%：意味购买牛奶的顾客40%也购买面包。 规则的支持度和置信度是两个规则兴
                      • Spring 5.0 的系统需求，期待你的反馈 wiselyman spring
                                       Spring 5.0将在2016年发布。Spring5.0将支持JDK 9。          Spring 5.0的特性计划还在工作中，请保持关注，所以作者希望从使用者得到关于Spring 5.0系统需求方面的反馈。