小哪吒
小哪吒

AST 与前端工程化实战

AST : 全称为 Abstract Syntax Tree，意为抽象语法树，它是源代码语法结构的一种抽象表示。

AST 是一个非常基础但是同时非常重要的知识点，我们熟知的 TypeScript、babel、webpack、vue-cli 得都是依赖 AST 进行开发的。本文将通过 AST 与前端工程化的实战向大家展示 AST 的强大以及重要性。

直播分享视频地址：AST 与前端工程化实战

一、初识 AST

1、demo-1

第一次看见 AST 这个概念的时候还是在《你不知道的 JavaScript》一书中看到的。我们先看个例子

const a = 1
复制代码

传统编译语言中，源代码执行会先经历三个阶段

  • 词法分析阶段：将字符组成的字符串分解成一个个代码块（词法单元），例子中代码会被解析成 const、a、=、1 四个词法单元。

  • 语法分析阶段：将词法单元流转换成一个由元素逐级嵌套组成的语法结构树，即所谓的抽象语法树。例子中被解析出来的 const、a、=、1 这四个词法单元组成的词法单元流则会被转换成如下结构树

[图片上传中...(image-143ec0-1567048431087-7)]

  • 代码生成阶段：将 AST 转换成一系列可执行的机器指令代码，对应例子的话就是机器通过执行指令会在内存中创建一个变量 a，并将值 1 赋值给它。

2、demo-2

我们再来拆解一个 recast 官方的例子，相对来说也会复杂一些

function add (a, b) {
  return a + b
}
复制代码
  • 首先，进入到词法分析阶段，我们会拿到 function、add、(、a、,、b、)、{、return、a、+、b、} 13 个代码块
  • 然后进入语法分析阶段，具体如图所示

[图片上传中...(image-560773-1567048431086-6)]

上图中的 FunctionDeclaration、Identifier、BlockStatement 等这些代码块的类型的说明请点击链接自行查看：AST 对象文档

二、recast

由于文章中用到的 AST 相关的依赖包是 recast ，加上它本身是木有文档的，只有一个非常简短的 README.md 文件，所以这里单独开一篇对其常见的一些 API 做个介绍。开始之前，先给大家推荐一个在线查看 AST 结构的平台，非常好用

  • AST Explorer

相信对 babel 稍有了解的同学都知道，babel 有一系列包对 AST 进行了封装，专门来处理编译这块的事宜。而 recast 也是基于 @babel/core、@babel/parser 、@babel/types等包进行封装开发的。

引入

引入 recast 有两种方法，一种是 import 的形式，一种则是 CommonJs 的形式，分别如下

  • import 形式
import { parse, print } from 'recast'
console.log(print(parse(source)).code)

import * as recast from 'recast'
console.log(recast.print(recast.parse(source)).code)
复制代码
  • CommonJs 形式
const { parse, print } = require('recast')
console.log(print(parse(source)).code)

const recast = require('recast')
console.log(recast.print(recast.parse(source)).code)
复制代码

引入了 recast 之后，我们一起来看看 recast 都能做些什么吧

1、recast.parse

我们回到我们例子，我们直接对它进行 parse ，看看 parse 后的 AST 结构是如何的

// parse.js
const recast = require('recast')

const code = `function add (a, b) {
  return a + b
}`

const ast = recast.parse(code)
// 获取代码块 ast 的第一个 body，即我们的 add 函数
const add = ast.program.body[0]
console.log(add)
复制代码

执行 node parse.js 即可在我们的终端查看到 add 函数的结构了

FunctionDeclaration {
  type: 'FunctionDeclaration',
  id: Identifier...,
  params: [Identifier...],
  body: BlockStatement...
}
复制代码

当然你想看更多内容直接去 AST Explorer 平台 将模式调成 recast 模式即可看到 ast 的全览了，和我们上面分析的内容基本是一致的。

[图片上传中...(image-68f72c-1567048431086-5)]

2、recast.print

目前为止，我们只是对其进行了拆解，如果将 ast 组装成我们能执行的代码呢？OK，这就需要用到 recast.print 了，我们对上面拆解好的代码原封不动的组装起来

// print.js
const recast = require('recast')

const code = `function add (a, b) {
  return a + b
}`

const ast = recast.parse(code)

console.log(recast.print(ast).code)
复制代码

然后执行 node print.js ，可以看到，我们打印出了

function add (a, b) {
  return a + b
}
复制代码

官方给的解释就是，这就只是一个逆向处理而已，即

recast.print(recast.parse(source)).code === source
复制代码

3、recast.prettyPrint

除了我们上面提及的 recast.print 外，recast 还提供一个代码美化的 API 叫 recast.prettyPrint

// prettyPrint.js
const recast = require('recast')

const code = `function add (a, b) {
  return a +                b
}`

const ast = recast.parse(code)

console.log(recast.prettyPrint(ast, { tabWidth: 2 }).code)
复制代码

执行 node prettyPrint.js ，会发现 code 里面的 N 多空格都能被格式化掉，输出如下

function add(a, b) {
  return a + b;
}
复制代码

详细的配置请自行查看：prettyPrint

4、recast.types.builders

i. API

关于 builder 的 API ，别担心，我肯定是不会讲的，因为太多了。

[图片上传中...(image-e34c1f-1567048431086-4)]

想要具体了解每一个 API 能做什么的，可以直接在 Parser API - Builders 中进行查看，或者直接查看 recast builders 定义

ii. 实战阶段

OK，终于进入到 recast 操作相关的核心了。我们要想改造我们的代码，那么 recast.types.builders 则是我们最重要的工具了。这里我们继续通过改造 recast 官方案例来了解 recast.types.builders 构建工具。

搞个最简单的例子，现在我们要做一件事，那就是将 function add (a, b) {...} 改成 const add = function (a, b) {...} 。

我们从第一章节了解到，如果我们需要将其做成 const 声明式的话，需要先一个 VariableDeclaration 以及一个 VariableDeclarator，然后我们声明一个 function 则有需要创建一个 FunctionDeclaration，剩下的则是填充表达式的参数和内容体了。具体操作如下

// builder1.js
const recast = require('recast')
const {
  variableDeclaration,
  variableDeclarator,
  functionExpression
} = recast.types.builders

const code = `function add (a, b) {
  return a + b
}`

const ast = recast.parse(code)
const add = ast.program.body[0]

ast.program.body[0] = variableDeclaration('const', [
  variableDeclarator(add.id, functionExpression(
    null, // 这里弄成匿名函数即可
    add.params,
    add.body
  ))
])

const output = recast.print(ast).code

console.log(output)
复制代码

执行 node builder1.js ，输出如下

const add = function(a, b) {
  return a + b
};
复制代码

看到这，是不是觉得很有趣。真正好玩的才刚开始呢，接下来，基于此例子，我们做个小的延伸。将其直接改成 const add = (a, b) => {...} 的格式。

这里出现了一个新的概念，那就是箭头函数，当然，recast.type.builders 提供了 arrowFunctionExpression 来允许我们创建一个箭头函数。所以我们第一步先来创建一个箭头函数

const arrow = arrowFunctionExpression([], blockStatement([])
复制代码

打印下 console.log(recast.print(arrow))，输出如下

() => {}
复制代码

OK，我们已经获取到一个空的箭头函数了。接下来我们需要基于上面改造的基础进一步进行改造，其实只要将 functionExpression 替换成 arrowFunctionExpression 即可。

ast.program.body[0] = variableDeclaration('const', [
  variableDeclarator(add.id, b.arrowFunctionExpression(
    add.params,
    add.body
  ))
])
复制代码

打印结果如下

const add = (a, b) => {
  return a + b
};
复制代码

OK，到这里，我们已经知道 recast.types.builders 能为我们提供一系列 API，让我们可以疯狂输出。

5、recast.run

读取文件命令行。首先，我新建一个 read.js ，内容如下

// read.js
recast.run((ast, printSource) => {
  printSource(ast)
})
复制代码

然后我再新建一个 demo.js，内容如下

// demo.js
function add (a, b) {
  return a + b
}
复制代码

然后执行 node read demo.js，输出如下

function add (a, b) {
  return a + b
}
复制代码

我们能看出来，我们直接在 read.js 中读出了 demo.js 里面的代码内容。那么具体是如何实现的呢？

其实，原理非常简单，无非就是直接通过 fs.readFile 进行文件读取，然后将获取到的 code 进行 parse 操作，至于我们看到的 printSource 则提供一个默认的打印函数 process.stdout.write(output)，具体代码如下

import fs from "fs";

export function run(transformer: Transformer, options?: RunOptions) {
  return runFile(process.argv[2], transformer, options);
}

function runFile(path: any, transformer: Transformer, options?: RunOptions) {
  fs.readFile(path, "utf-8", function(err, code) {
    if (err) {
      console.error(err);
      return;
    }

    runString(code, transformer, options);
  });
}

function defaultWriteback(output: string) {
  process.stdout.write(output);
}

function runString(code: string, transformer: Transformer, options?: RunOptions) {
  const writeback = options && options.writeback || defaultWriteback;
  transformer(parse(code, options), function(node: any) {
    writeback(print(node, options).code);
  });
}
复制代码

6、recast.visit

这是一个 AST 节点遍历的 API，如果你想要遍历 AST 中的一些类型，那么你就得靠 recast.visit 了，这里可以遍历的类型与 recast.types.builders 中的能构造出来的类型一致，builders 做的事是类型构建，recast.visit 做事的事则是遍历 AST 中的类型。不过使用的时候需要注意以下几点

  • 每个 visit，必须加上 return false，或者 this.traverse(path)，否则报错。
if (this.needToCallTraverse !== false) {
  throw new Error(
    "Must either call this.traverse or return false in " + methodName
  );
}
复制代码
  • 在需要遍历的类型前面加上 visit 即可遍历，如需要遍历 AST 中的箭头函数，那么直接这么写即可
recast.run((ast, printSource) => {
  recast.visit(ast, {
    visitArrowFunctionExpression (path) {
      printSource(path.node)
      return false
    }
  })
})
复制代码

7、recast.types.namedTypes

一个用来判断 AST 对象是否为指定类型的 API。

namedTypes 下有两个 API，一个是 namedTypes.Node.assert：当类型不配置的时候，直接报错退出。另外一个则是 namedTypes.Node.check：判断类型是否一致，并输出 true 或 false。

其中 Node 为任意 AST 对象，比如我相对箭头函数做一个函数类型判定，代码如下

// namedTypes1.js
const recast = require('recast')
const t = recast.types.namedTypes

const arrowNoop = () => {}

const ast = recast.parse(arrowNoop)

recast.visit(ast, {
  visitArrowFunctionExpression ({ node }) {
    console.log(t.ArrowFunctionExpression.check(node))
    return false
  }
})
复制代码

执行 node namedTypes1.js，能看出打印台输出结果为 true。

同理，assert 用法也差不多。

const recast = require('recast')
const t = recast.types.namedTypes

const arrowNoop = () => {}

const ast = recast.parse(arrowNoop)

recast.visit(ast, {
  visitArrowFunctionExpression ({ node }) {
    t.ArrowFunctionExpression.assert(node)
    return false
  }
})
复制代码

你想判断更多的 AST 对象类型的，直接做替换 Node 为其它 AST 对象类型即可。

三、前端工程化

现在，咱来聊聊前端工程化。

前段工程化可以分成四个块来说，分别为

  • 模块化：将一个文件拆分成多个相互依赖的文件，最后进行统一的打包和加载，这样能够很好的保证高效的多人协作。其中包含

    1. JS 模块化：CommonJS、AMD、CMD 以及 ES6 Module。
    2. CSS 模块化：Sass、Less、Stylus、BEM、CSS Modules 等。其中预处理器和 BEM 都会有的一个问题就是样式覆盖。而 CSS Modules 则是通过 JS 来管理依赖，最大化的结合了 JS 模块化和 CSS 生态，比如 Vue 中的 style scoped。
    3. 资源模块化：任何资源都能以模块的形式进行加载，目前大部分项目中的文件、CSS、图片等都能直接通过 JS 做统一的依赖关系处理。

  • 组件化：不同于模块化，模块化是对文件、对代码和资源拆分，而组件化则是对 UI 层面的拆分。

    1. 通常，我们会需要对页面进行拆分，将其拆分成一个一个的零件，然后分别去实现这一个个零件，最后再进行组装。
    2. 在我们的实际业务开发中，对于组件的拆分我们需要做不同程度的考量，其中主要包括细粒度和通用性这两块的考虑。
    3. 对于业务组件，你更多需要考量的是针对你负责业务线的一个适用度，即你设计的业务组件是否成为你当前业务的 “通用” 组件，比如我之前分析过的权限校验组件，它就是一个典型的业务组件。感兴趣的小伙伴可以点击 传送门 自行阅读。

  • 规范化：正所谓无规矩不成方圆，一些好的规范则能很好的帮助我们对项目进行良好的开发管理。规范化指的是我们在工程开发初期以及开发期间制定的系列规范，其中又包含了

    1. 项目目录结构
    2. 编码规范：对于编码这块的约束，一般我们都会采用一些强制措施，比如 ESLint、StyleLint 等。
    3. 联调规范：这块可参考我以前知乎的回答，前后端分离，后台返回的数据前端没法写，怎么办？
    4. 文件命名规范
    5. 样式管理规范：目前流行的样式管理有 BEM、Sass、Less、Stylus、CSS Modules 等方式。
    6. git flow 工作流：其中包含分支命名规范、代码合并规范等。
    7. 定期 code review
    8. … 等等

    以上这些，我之前也写过一篇文章做过一些点的详细说明，TypeScript + 大型项目实战

  • 自动化：从最早先的 grunt、gulp 等，再到目前的 webpack、parcel。这些自动化工具在自动化合并、构建、打包都能为我们节省很多工作。而这些前端自动化其中的一部分，前端自动化还包含了持续集成、自动化测试等方方面面。

而，处于其中任何一个块都属于前端工程化。

四、实战：AST & webpack loader

而本文提及的实战，则是通过 AST 改造书写一个属于我们自己的 webpack loader，为我们项目中的 promise 自动注入 catch 操作，避免让我们手动书写那些通用的 catch 操作。

1、AST 改造

讲了这么多，终于进入到我们的实战环节了。那么我们实战要做一个啥玩意呢？

场景：日常的中台项目中，经常会有一些表单提交的需求，那么提交的时候就需要做一些限制，防止有人手抖多点了几次导致请求重复发出去。此类场景有很多解决方案，但是个人认为最佳的交互就是点击之后为提交按钮加上 loading 状态，然后将其 disabled 掉，请求成功之后再解除掉 loading 和 disabled 的状态。具体提交的操作如下

this.axiosFetch(this.formData).then(res => {
  this.loading = false
  this.handleClose()
}).catch(() => {
  this.loading = false
})
复制代码

这样看着好像还算 OK，但是如果类似这样的操作一多，或多或少会让你项目整体的代码看起来有些重复冗余，那么如何解决这种情况呢？

很简单，咱直接使用 AST 编写一个 webpack loader，让其自动完成一些代码的注入，若我们项目中存在下面的代码的时候，会自动加上 catch 部分的处理，并将 then 语句第一段处理主动作为 catch 的处理逻辑

this.axiosFetch(this.formData).then(res => {
  this.loading = false
  this.handleClose()
})
复制代码

我们先看看，没有 catch 的这段代码它的 AST 结构是怎样的，如图

[图片上传中...(image-afa359-1567048431085-3)]

其 MemberExpression 为

this.axiosFetch(this.formData).then
复制代码

arguments 为

res => {
  this.loading = false
  this.handleClose()
}
复制代码

OK，我们再来看看有 catch 处理的代码它的 AST 结构又是如何的，如图

[图片上传中...(image-8b6938-1567048431085-2)]

其 MemberExpression 为

this.axiosFetch(this.formData).then(res => {
  this.loading = false
  this.handleClose()
}).catch
复制代码

其中有两个 ArrowFunctionExpression，分别为

// ArrowFunctionExpression 1
res => {
  this.loading = false
  this.handleClose()
}
// ArrowFunctionExpression 2
() => {
  this.loading = false
}
复制代码

所以，我们需要做的事情大致分为以下几步

  1. 对 ArrowFunctionExpression 类型进行遍历，获得其 BlockStatement 中的第一个 ExpressionStatement，并保存为 firstExp
  2. 使用 builders 新建一个空的箭头函数，并将保存好的 firstExp 赋值到该空箭头函数的 BlockStatement 中
  3. 对 CallExpression 类型进行遍历，将 AST 的 MemberExpression 修改成为有 catch 片段的格式
  4. 将改造完成的 AST 返回

现在，按照我们的思路，我们一步一步来做 AST 改造

首先，我们需要获取到已有箭头函数中的第一个 ExpressionStatement，获取的时候我们需要保证当前 ArrowFunctionExpression 类型的 parent 节点是一个 CallExpression 类型，并且保证其 property 为 promise 的then 函数，具体操作如下

// promise-catch.js
const recast = require('recast')
const {
  identifier: id,
  memberExpression,
  callExpression,
  blockStatement,
  arrowFunctionExpression
} = recast.types.builders
const t = recast.types.namedTypes

const code = `this.axiosFetch(this.formData).then(res => {
  this.loading = false
  this.handleClose()
})`
const ast = recast.parse(code)
let firstExp

recast.visit(ast, {
  visitArrowFunctionExpression ({ node, parentPath }) {
    const parentNode = parentPath.node
    if (
      t.CallExpression.check(parentNode) &&
      t.Identifier.check(parentNode.callee.property) &&
      parentNode.callee.property.name === 'then'
    ) {
      firstExp = node.body.body[0]
    }
    return false
  }
})
复制代码

紧接着，我们需要创建一个空的箭头函数，并将 firstExp 赋值给它

const arrowFunc = arrowFunctionExpression([], blockStatement([firstExp]))
复制代码

随后，我们则需要对 CallExpression 类型的 AST 对象进行遍历，并做最后的 MemberExpression 改造工作

recast.visit(ast, {
  visitCallExpression (path) {
    const { node } = path

    const arrowFunc = arrowFunctionExpression([], blockStatement([firstExp]))
    const originFunc = callExpression(node.callee, node.arguments)
    const catchFunc = callExpression(id('catch'), [arrowFunc])
    const newFunc = memberExpression(originFunc, catchFunc)

    return false
  }
})
复制代码

最后我们在 CallExpression 遍历的时候将其替换

path.replace(newFunc)
复制代码

初版的全部代码如下

// promise-catch.js
const recast = require('recast')
const {
  identifier: id,
  memberExpression,
  callExpression,
  blockStatement,
  arrowFunctionExpression
} = recast.types.builders
const t = recast.types.namedTypes

const code = `this.axiosFetch(this.formData).then(res => {
  this.loading = false
  this.handleClose()
})`
const ast = recast.parse(code)
let firstExp

recast.visit(ast, {
  visitArrowFunctionExpression ({ node, parentPath }) {
    const parentNode = parentPath.node
    if (
      t.CallExpression.check(parentNode) &&
      t.Identifier.check(parentNode.callee.property) &&
      parentNode.callee.property.name === 'then'
    ) {
      firstExp = node.body.body[0]
    }
    return false
  }
})

recast.visit(ast, {
  visitCallExpression (path) {
    const { node } = path

    const arrowFunc = arrowFunctionExpression([], blockStatement([firstExp]))
    const originFunc = callExpression(node.callee, node.arguments)
    const catchFunc = callExpression(id('catch'), [arrowFunc])
    const newFunc = memberExpression(originFunc, catchFunc)

    path.replace(newFunc)

    return false
  }
})

const output = recast.print(ast).code
console.log(output)
复制代码

执行 node promise-catch.js ，打印台输出结果

this.axiosFetch(this.formData).then(res => {
  this.loading = false
  this.handleClose()
}).catch(() => {
  this.loading = false
})
复制代码

所以能看出来，我们已经是完成了我们想要完成的样子了

[图片上传中...(image-be2925-1567048431085-1)]

  1. 但是我们还得对一些情况做处理，第一件就是需要在 CallExpression 遍历的时候保证其 arguments 为箭头函数。

  2. 紧接着，我们需要判定我们获取到的 firstExp 是否存在，因为我们的 then 处理中可以是一个空的箭头函数。

  3. 然后防止 promise 拥有一些自定义的 catch 操作，则需要保证其 property 为 then。

  4. 最后为了防止多个 CallExpression 都需要做自动注入的情况，然后其操作又不同，则需要在其内部进行 ArrowFunctionExpression 遍历操作

经过这些常见情况的兼容后，具体代码如下

recast.visit(ast, {
  visitCallExpression (path) {
    const { node } = path
    const arguments = node.arguments

    let firstExp

    arguments.forEach(item => {
      if (t.ArrowFunctionExpression.check(item)) {
        firstExp = item.body.body[0]

        if (
          t.ExpressionStatement.check(firstExp) &&
          t.Identifier.check(node.callee.property) &&
          node.callee.property.name === 'then'
        ) {
          const arrowFunc = arrowFunctionExpression([], blockStatement([firstExp]))
          const originFunc = callExpression(node.callee, node.arguments)
          const catchFunc = callExpression(id('catch'), [arrowFunc])
          const newFunc = memberExpression(originFunc, catchFunc)

          path.replace(newFunc)
        }
      }
    })

    return false
  }
})
复制代码

然后由于之后需要做成一个 webpack-loader，用在我们的实际项目中。所以我们需要对 parse 的解析器做个替换，其默认的解析器为 recast/parsers/esprima，而一般我们项目中都会用到 babel-loader ，所以我们这也需要将其解析器改为 recast/parsers/babel

const ast = recast.parse(code, {
  parser: require('recast/parsers/babel')
})
复制代码

2、webpack loader

到这里，我们对于代码的 AST 改造已经是完成了，但是如何将其运用到我们的实际项目中呢？

OK，这个时候我们就需要自己写一个 webpack loader 了。

其实，关于如何开发一个 webpack loader，webpack 官方文档 已经讲的很清楚了，下面我为小伙伴们做个小总结。

i. 本地进行 loader 开发

首先，你需要本地新建你开发 loader 的文件，比如，我们这将其丢到 src/index.js 下，webpack.config.js 配置则如下

const path = require('path')

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          // ... 其他你需要的 loader
          { loader: path.resolve(__dirname, 'src/index.js') }
        ]
      }
    ]
  }
}
复制代码

src/index.js 内容如下

const recast = require('recast')
const {
  identifier: id,
  memberExpression,
  callExpression,
  blockStatement,
  arrowFunctionExpression
} = recast.types.builders
const t = recast.types.namedTypes

module.exports = function (source) {
  const ast = recast.parse(source, {
    parser: require('recast/parsers/babel')
  })

  recast.visit(ast, {
    visitCallExpression (path) {
      const { node } = path
      const arguments = node.arguments

      let firstExp

      arguments.forEach(item => {
        if (t.ArrowFunctionExpression.check(item)) {
          firstExp = item.body.body[0]

          if (
            t.ExpressionStatement.check(firstExp) &&
            t.Identifier.check(node.callee.property) &&
            node.callee.property.name === 'then'
          ) {
            const arrowFunc = arrowFunctionExpression([], blockStatement([firstExp]))
            const originFunc = callExpression(node.callee, node.arguments)
            const catchFunc = callExpression(id('catch'), [arrowFunc])
            const newFunc = memberExpression(originFunc, catchFunc)

            path.replace(newFunc)
          }
        }
      })

      return false
    }
  })

  return recast.print(ast).code
}
复制代码

然后，搞定收工。

ii. npm 发包

这里我在以前的文章中提及过，这里不谈了。如果还没搞过 npm 发包的小伙伴，可以点击下面链接自行查看

揭秘组件库一二事（发布 npm 包片段）

OK，到这一步，我的 promise-catch-loader 也是已经开发完毕。接下来，只要在项目中使用即可

npm i promise-catch-loader -D
复制代码

由于我的项目是基于 vue-cli3.x 构建的，所以我需要在我的 vue.config.js 中这样配置

// js 版本
module.exports = {
  // ...
  chainWebpack: config => {
    config.module
      .rule('js')
      .test(/\.js$/)
      .use('babel-loader').loader('babel-loader').end()
      .use('promise-catch-loader').loader('promise-catch-loader').end()
  }
}
// ts 版本
module.exports = {
  // ...
  chainWebpack: config => {
    config.module
      .rule('ts')
      .test(/\.ts$/)
      .use('cache-loader').loader('cache-loader').end()
      .use('babel-loader').loader('babel-loader').end()
      .use('ts-loader').loader('ts-loader').end()
      .use('promise-catch-loader').loader('promise-catch-loader').end()
  }
}
复制代码

然后我项目里面拥有以下 promise 操作


复制代码

然后在浏览器中查看 source 能看到如下结果

[图片上传中...(image-1fb21f-1567048431084-0)]

关于代码，我已经托管到 GitHub 上了，promise-catch-loader

总结

到这步，我们的实战环节也已经是结束了。当然，文章只是个初导篇，更多的类型还得小伙伴自己去探究。

AST 它的用处还非常的多，比如我们熟知的 Vue，它的 SFC(.vue) 文件的解析也是基于 AST 去进行自动解析的，即 vue-loader，它保证我们能正常的使用 Vue 进行业务开发。再比如我们常用的 webpack 构建工具，也是基于 AST 为我们提供了合并、打包、构建优化等非常实用的功能的。

总之，掌握好 AST，你真的可以做很多事情。

最后，希望文章的内容能够帮助小伙伴了解到：什么是 AST？如何借助 AST 让我们的工作更加效率？AST 又能为前端工程化做些什么？

作者：qiangdada
链接：https://juejin.im/post/5d50d1d9f265da03aa25607b
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

你可能感兴趣的:(AST 与前端工程化实战)

  • 斤斤计较的婚姻到底有多难？ 白心之岂必有为
    很多人私聊我会问到在哪个人群当中斤斤计较的人最多？我都会回答他，一般婚姻出现问题的斤斤计较的人士会非常多，以我多年经验，在婚姻落的一塌糊涂的人当中，斤斤计较的人数占比在20～30%以上，也就是说10个婚姻出现问题的斤斤计较的人有2-3个有多不减。在婚姻出问题当中，有大量的心理不平衡的、尖酸刻薄的怨妇。在婚姻中仅斤斤计较有两种类型：第一种是物质上的，另一种是精神上的。在物质与精神上抠门已经严重的影响
  • QQ群采集助手，精准引流必备神器 2401_87347160 其他经验分享
    功能概述微信群查找与筛选工具是一款专为微信用户设计的辅助工具，它通过关键词搜索功能，帮助用户快速找到相关的微信群，并提供筛选是否需要验证的群组的功能。主要功能关键词搜索：用户可以输入关键词，工具将自动查找包含该关键词的微信群。筛选功能：工具提供筛选机制，用户可以选择是否只显示需要验证或不需要验证的群组。精准引流：通过上述功能，用户可以更精准地找到目标群组，进行有效的引流操作。3.设备需求该工具可以
  • 机器学习与深度学习间关系与区别 ℒℴѵℯ心·动ꦿ໊ོ꫞ 人工智能学习深度学习python
    一、机器学习概述定义机器学习（MachineLearning,ML）是一种通过数据驱动的方法，利用统计学和计算算法来训练模型，使计算机能够从数据中学习并自动进行预测或决策。机器学习通过分析大量数据样本，识别其中的模式和规律，从而对新的数据进行判断。其核心在于通过训练过程，让模型不断优化和提升其预测准确性。主要类型1.监督学习（SupervisedLearning）监督学习是指在训练数据集中包含输入
  • 随笔 | 仙一般的灵气 海思沧海
    仙岛今天，我看了你全部，似乎已经进入你的世界我不知道，这是否是梦幻，还是你仙一般的灵气吸引了我也许每一个人都要有一份属于自己的追求，这样才能够符合人生的梦想，生活才能够充满着阳光与快乐我不知道，我为什么会这样的感叹，是在感叹自己的人生，还是感叹自己一直没有孜孜不倦的追求只感觉虚度了光阴，每天活在自己的梦中，活在一个不真实的世界是在逃避自己，还是在逃避周围的一切有时候我嘲笑自己，嘲笑自己如此的虚无，
  • 一百九十四章. 自相矛盾 巨木擎天
    唉！就这么一夜，林子感觉就像过了很多天似的，先是回了阳间家里，遇到了那么多不可思议的事情儿。特别是小伙伴们，第二次与自己见面时，僵硬的表情和恐怖的气氛，让自己如坐针毡，打从心眼里难受！还有东子，他现在还好吗？有没有被人欺负？护城河里的小鱼小虾们，还都在吗？水不会真的干枯了吧？那对相亲相爱漂亮的太平鸟儿，还好吧！春天了，到了做窝、下蛋、喂养小鸟宝宝的时候了，希望它们都能够平安啊！虽然没有看见家人，也
  • 微服务下功能权限与数据权限的设计与实现 nbsaas-boot 微服务java架构
    在微服务架构下，系统的功能权限和数据权限控制显得尤为重要。随着系统规模的扩大和微服务数量的增加，如何保证不同用户和服务之间的访问权限准确、细粒度地控制，成为设计安全策略的关键。本文将讨论如何在微服务体系中设计和实现功能权限与数据权限控制。1.功能权限与数据权限的定义功能权限：指用户或系统角色对特定功能的访问权限。通常是某个用户角色能否执行某个操作，比如查看订单、创建订单、修改用户资料等。数据权限：
  • 学点心理知识，呵护孩子健康 静候花开_7090
    昨天听了华中师范大学教育管理学系副教授张玲老师的《哪里才是学生心理健康的最后庇护所，超越教育与技术的思考》的讲座。今天又重新学习了一遍，收获匪浅。张玲博士也注意到了当今社会上的孩子由于心理问题导致的自残、自杀及伤害他人等恶性事件。她向我们普及了一个重要的命题，她说心理健康的一些基本命题，我们与我们通常的一些教育命题是不同的，她还举了几个例子，让我们明白我们原来以为的健康并非心理学上的健康。比如如果
  • 《投行人生》读书笔记 小蘑菇的树洞
    《投行人生》----作者詹姆斯-A-朗德摩根斯坦利副主席40年的职业洞见-很短小精悍的篇幅，比较适合初入职场的新人。第一部分成功的职业生涯需要规划1.情商归为适应能力分享与协作同理心适应能力，更多的是自我意识，你有能力识别自己的情并分辨这些情绪如何影响你的思想和行为。2.对于初入职场的人的建议，细节，截止日期和数据很重要截止日期，一种有效的方法是请老板为你所有的任务进行优先级排序。和老板喝咖啡的好
  • Long类型前后端数据不一致 igotyback 前端
    响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
  • 店群合一模式下的社区团购新发展——结合链动 2+1 模式、AI 智能名片与 S2B2C 商城小程序源码 说私域 人工智能小程序
    摘要：本文探讨了店群合一的社区团购平台在当今商业环境中的重要性和优势。通过分析店群合一模式如何将互联网社群与线下终端紧密结合，阐述了链动2+1模式、AI智能名片和S2B2C商城小程序源码在这一模式中的应用价值。这些创新元素的结合为社区团购带来了新的机遇，提升了用户信任感、拓展了营销渠道，并实现了线上线下的完美融合。一、引言随着互联网技术的不断发展，社区团购作为一种新兴的商业模式，在满足消费者日常需
  • 2021-08-26 影幽
    在生活中，女人与男人的感悟往往有所不同。人生最大的舞台就是生活，大幕随时都可能拉开，关键是你愿不愿意表演都无法躲避。在生活中，遇事不要急躁，不要急于下结论，尤其生气时不要做决断，要学会换位思考，大事化小小事化了，把复杂的事情尽量简单处理，千万不要把简单的事情复杂化。永远不要扭曲，别人善意，无药可救。昨天是张过期的支票，明天是张信用卡，只有今天才是现金，要善加利用！执着的攀登者不必去与别人比较自己的
  • ArcGIS栅格计算器常见公式（赋值、0和空值的转换、补充栅格空值） 研学随笔 arcgis经验分享
    我们在使用ArcGIS时通常经常用到栅格计算器，今天主要给大家介绍我日常中经常用到的几个公式，供大家参考学习。将特定值（-9999）赋值为0，例如-9999.Con("raster"==-9999,0,"raster")2.给空值赋予特定的值（如0）Con(IsNull("raster"),0,"raster")3.将特定的栅格值(如1)赋值为空值，其他保留原值SetNull("raster"==
  • 高级编程--XML+socket练习题 masa010 java开发语言
    1.北京华北2114.8万人上海华东2,500万人广州华南1292.68万人成都华西1417万人（1）使用dom4j将信息存入xml中（2）读取信息，并打印控制台（3）添加一个city节点与子节点（4）使用socketTCP协议编写服务端与客户端，客户端输入城市ID，服务器响应相应城市信息（5）使用socketTCP协议编写服务端与客户端，客户端要求用户输入city对象，服务端接收并使用dom4j
  • 2018-07-23-催眠日作业-#不一样的31天#-66小鹿 小鹿_33
    预言日：人总是在逃避命运的路上，与之不期而遇。心理学上有个著名的名词，叫做自证预言；经济学上也有一个很著名的定律叫做，墨菲定律；在灵修派上，还有一个很著名的法则，叫做吸引力法则。这3个领域的词，虽然看起来不太一样，但是他们都在告诉人们一个现象：你越担心什么，就越有可能会发生什么。同样的道理，你越想得到什么，就应该要积极地去创造什么。无论是自证预言，墨菲定律还是吸引力法则，对人都有正反2个维度的影响
  • 回溯 Leetcode 332 重新安排行程 mmaerd Leetcode刷题学习记录leetcode算法职场和发展
    重新安排行程Leetcode332学习记录自代码随想录给你一份航线列表tickets，其中tickets[i]=[fromi,toi]表示飞机出发和降落的机场地点。请你对该行程进行重新规划排序。所有这些机票都属于一个从JFK（肯尼迪国际机场）出发的先生，所以该行程必须从JFK开始。如果存在多种有效的行程，请你按字典排序返回最小的行程组合。例如，行程[“JFK”,“LGA”]与[“JFK”,“LGB
  • 每日一题——第九十题 互联网打工人no1 C语言程序设计每日一练c语言
    题目：判断子串是否与主串匹配#include#include#include//////判断子串是否在主串中匹配//////主串///子串///boolisSubstring(constchar*str,constchar*substr){intlenstr=strlen(str);//计算主串的长度intlenSub=strlen(substr);//计算子串的长度//遍历主字符串，对每个可能得
  • Python数据分析与可视化实战指南 William数据分析 pythonpython数据
    在数据驱动的时代，Python因其简洁的语法、强大的库生态系统以及活跃的社区，成为了数据分析与可视化的首选语言。本文将通过一个详细的案例，带领大家学习如何使用Python进行数据分析，并通过可视化来直观呈现分析结果。一、环境准备1.1安装必要库在开始数据分析和可视化之前，我们需要安装一些常用的库。主要包括pandas、numpy、matplotlib和seaborn等。这些库分别用于数据处理、数学
  • 2022-04-18 Apbenz
    语重心长的和我说，不要老是说不行，人至而立之年危机四伏，内在的，外在的，感觉就是心力憔悴，让人无所适从。面对职场的无情，突然好羡慕干体力劳动的外卖小哥。难道命运是想让我去送外卖了吗？干体力活才能让我活下去？fastadmin打卡成功,淘宝金币任务完成。ㅏㅓㅗㅜㅡㅣㅐㅔㅑㅕㅛㅠㅢㅒㅖY行。야자여자요리우유의사얘기예
  • 《庄子.达生9》 钱江潮369
    【原文】孔子观于吕梁，县水三十仞，流沫四十里，鼋鼍鱼鳖之所不能游也。见一丈夫游之，以为有苦而欲死也，使弟子并流而拯之。数百步而出，被发行歌而游于塘下。孔子从而问焉，曰：“吾以子为鬼，察子则人也。请问，‘蹈水有道乎’”曰：“亡，吾无道。吾始乎故，长乎性，成乎命。与齐俱入，与汩偕出，从水之道而不为私焉。此吾所以蹈之也。”孔子曰：“何谓始乎故，长乎性，成乎命？”曰：“吾生于陵而安于陵，故也；长于水而安于
  • 水泥质量纠纷案代理词 徐宝峰律师
    贵州领航建设有限公司诉贵州纳雍隆庆乌江水泥有限公司产品质量纠纷案代理词尊敬的审判长、审判员：贵州千里律师事务所接受被告贵州纳雍隆庆乌江水泥有限公司的委托，指派我担任其诉讼代理人，参加本案的诉讼活动。下面，我结合本案事实和相关法律规定发表如下代理意见，供合议庭评议案件时参考：原告应当举证证明其遭受的损失与被告生产的水泥质量的因果关系。首先水泥是一种粉状水硬性无机胶凝材料。加水搅拌后成浆体，能在空气中
  • Goolge earth studio 进阶4——路径修改与平滑 陟彼高冈yu Googleearthstudio进阶教程旅游
    如果我们希望在大约中途时获得更多的城市鸟瞰视角。可以将相机拖动到这里并创建一个新的关键帧。camera_target_clip_7EarthStudio会自动平滑我们的路径，所以当我们通过这个关键帧时，不是一个生硬的角度，而是一个平滑的曲线。camera_target_clip_8路径上有贝塞尔控制手柄，允许我们调整路径的形状。右键单击，我们可以选择“平滑路径”，这是默认的自动平滑算法，或者我们可
  • Python教程：一文了解使用Python处理XPath 旦莫 Python进阶python开发语言
    目录1.环境准备1.1安装lxml1.2验证安装2.XPath基础2.1什么是XPath？2.2XPath语法2.3示例XML文档3.使用lxml解析XML3.1解析XML文档3.2查看解析结果4.XPath查询4.1基本路径查询4.2使用属性查询4.3查询多个节点5.XPath的高级用法5.1使用逻辑运算符5.2使用函数6.实战案例6.1从网页抓取数据6.1.1安装Requests库6.1.2代
  • 18-115 一切思考不能有效转化为行动，都TM是扯淡！ 成长时间线
    7月25号写了一篇关于为什么会断更如此严重的反思，然而，之后日更仅仅维持了一周，又出现了这次更严重的现象。从8月2号到昨天8月6号，5天！又是5天没有更文！虽然这次断更时间和上次一样，那为什么说这次更严重？因为上次之后就分析了问题的原因，以及应该如何解决，按理说应该会好转，然而，没过几天严重断更的现象再次出现，想想，经过反思，问题依然没有解决与改变，这让我有些担忧。到底是哪里出了问题，难道我就真的
  • 山东大学小树林支教调研团青青仓木队——翟晓楠 山东大学青青仓木队
    过了半年，又一次启程，又一次回到支教的初心之地。比起上一次的试探与不安，我更多了一丝稳重与熟练。心境、处境也都随着半个学期的过去而变得不同，半个学期中，身体上的，心理上的，太多的逆境让我变得步履维艰，曲曲折折，弯弯绕绕，我仿佛打不起精神，没有胃口，没有动力。感觉走的不顺畅的时候，支教这个旅程，给了我力量。自告奋勇承担起队长这一职务的我，从组织时的复杂和困难的经历，协调各种问题，从无到有，和校长和队
  • 直返最高等级与直返APP：无需邀请码的返利新体验 古楼
    随着互联网的普及和电商的兴起，直返模式逐渐成为一种流行的商业模式。在这种模式下，消费者通过购买产品或服务，获得一定的返利，并可以分享给更多的人。其中，直返最高等级和直返APP是直返模式中的重要概念和工具。本文将详细介绍直返最高等级的概念、直返APP的使用以及与邀请码的关系。【高省】APP（高佣金领导者）是一个自用省钱佣金高，分享推广赚钱多的平台，百度有几百万篇报道，运行三年，稳定可靠。高省APP，
  • DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计 网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
    ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
  • 2020-04-12每天三百字之连接与替代 冷眼看潮
    不知道是不是好为人师，有时候还真想和别人分享一下我对某些现象的看法或者解释。人类社会不断发展进步的过程，就是不断连接与替代的过程。人类发现了火并应用火以后，告别了茹毛饮血的野兽般的原始生活（火烧、烹饪替代了生食）人类用石器代替了完全手工，工具的使用使人类进步一大步。类似这样的替代还有很多，随着科技的发展，有更多的原始的事物被替代，代之以更高效、更先进的技术。在近现代，汽车替代了马车，高速公路和铁路
  • 探索OpenAI和LangChain的适配器集成：轻松切换模型提供商 nseejrukjhad langchaineasyui前端python
    #探索OpenAI和LangChain的适配器集成：轻松切换模型提供商##引言在人工智能和自然语言处理的世界中，OpenAI的模型提供了强大的能力。然而，随着技术的发展，许多人开始探索其他模型以满足特定需求。LangChain作为一个强大的工具，集成了多种模型提供商，通过提供适配器，简化了不同模型之间的转换。本篇文章将介绍如何使用LangChain的适配器与OpenAI集成，以便轻松切换模型提供商
  • 利用Requests Toolkit轻松完成HTTP请求 nseejrukjhad http网络协议网络python
    RequestsToolkit的力量：轻松构建HTTP请求Agent在现代软件开发中，API请求是与外部服务交互的核心。RequestsToolkit提供了一种便捷的方式，帮助开发者构建自动化的HTTP请求Agent。本文旨在详细介绍RequestsToolkit的设置、使用和潜在挑战。引言RequestsToolkit是一个强大的工具包，可用于构建执行HTTP请求的智能代理。这对于想要自动化与外
  • 数组去重 好奇的猫猫猫
    整理自js中基础数据结构数组去重问题思考？如何去除数组中重复的项例如数组：[1,3,4,3,5]我们在做去重的时候，一开始想到的肯定是，逐个比较，外面一层循环，内层后一个与前一个一比较，如果是久不将当前这一项放进新的数组，挨个比较完之后返回一个新的去过重复的数组不好的实践方式上述方法效率极低，代码量还多，思考？有没有更好的方法这时候不禁一想当然有了！！！hashtable啊，通过对象的hash办法
  • Java实现的基于模板的网页结构化信息精准抽取组件：HtmlExtractor yangshangchuan 信息抽取HtmlExtractor精准抽取信息采集
    HtmlExtractor是一个Java实现的基于模板的网页结构化信息精准抽取组件，本身并不包含爬虫功能，但可被爬虫或其他程序调用以便更精准地对网页结构化信息进行抽取。   HtmlExtractor是为大规模分布式环境设计的，采用主从架构，主节点负责维护抽取规则，从节点向主节点请求抽取规则，当抽取规则发生变化，主节点主动通知从节点，从而能实现抽取规则变化之后的实时动态生效。 如
  • java编程思想 -- 多态 百合不是茶 java多态详解
    一: 向上转型和向下转型 面向对象中的转型只会发生在有继承关系的子类和父类中（接口的实现也包括在这里）。父类：人    子类：男人向上转型： Person p = new Man() ; //向上转型不需要强制类型转化向下转型： Man man =
  • [自动数据处理]稳扎稳打,逐步形成自有ADP系统体系 comsci dp
          对于国内的IT行业来讲,虽然我们已经有了"两弹一星",在局部领域形成了自己独有的技术特征,并初步摆脱了国外的控制...但是前面的路还很长....       首先是我们的自动数据处理系统还无法处理很多高级工程...中等规模的拓扑分析系统也没有完成,更加复杂的
  • storm 自定义 日志文件 商人shang stormclusterlogback
    Storm中的日志级级别默认为INFO，并且，日志文件是根据worker号来进行区分的，这样，同一个log文件中的信息不一定是一个业务的，这样就会有以下两个需求出现： 1. 想要进行一些调试信息的输出 2. 调试信息或者业务日志信息想要输出到一些固定的文件中   不要怕，不要烦恼，其实Storm已经提供了这样的支持，可以通过自定义logback 下的 cluster.xml 来输
  • Extjs3 SpringMVC使用 @RequestBody 标签问题记录 21jhf
    springMVC使用 @RequestBody(required = false) UserVO userInfo 传递json对象数据，往往会出现http 415，400,500等错误，总结一下需要使用ajax提交json数据才行，ajax提交使用proxy，参数为jsonData，不能为params；另外，需要设置Content-type属性为json，代码如下： （由于使用了父类aaa
  • 一些排错方法 文强chu 方法
    1、java.lang.IllegalStateException: Class invariant violation at org.apache.log4j.LogManager.getLoggerRepository(LogManager.java:199)at org.apache.log4j.LogManager.getLogger(LogManager.java:228) at o
  • Swing中文件恢复我觉得很难 小桔子 swing
           我那个草了！老大怎么回事，怎么做项目评估的？只会说相信你可以做的，试一下，有的是时间！        用java开发一个图文处理工具，类似word，任意位置插入、拖动、删除图片以及文本等。文本框、流程图等，数据保存数据库，其余可保存pdf格式。ok,姐姐千辛万苦，
  • php 文件操作 aichenglong PHP读取文件写入文件
    1 写入文件 @$fp=fopen("$DOCUMENT_ROOT/order.txt", "ab"); if(!$fp){ echo "open file error" ; exit; } $outputstring="date:"." \t tire:".$tire."
  • MySQL的btree索引和hash索引的区别 AILIKES 数据结构mysql算法
    Hash 索引结构的特殊性，其 检索效率非常高，索引的检索可以一次定位，不像B-Tree 索引需要从根节点到枝节点，最后才能访问到页节点这样多次的IO访问，所以 Hash 索引的查询效率要远高于 B-Tree 索引。     可能很多人又有疑问了，既然 Hash 索引的效率要比 B-Tree 高很多，为什么大家不都用 Hash 索引而还要使用 B-Tree 索引呢
  • JAVA的抽象--- 接口 --实现 百合不是茶
    抽象 接口 实现接口   //抽象 类 ,方法   //定义一个公共抽象的类 ,并在类中定义一个抽象的方法体 抽象的定义使用abstract   abstract class A 定义一个抽象类 例如： //定义一个基类 public abstract class A{     //抽象类不能用来实例化，只能用来继承 //
  • JS变量作用域实例 bijian1013 作用域
    <script> var scope='hello'; function a(){ console.log(scope); //undefined var scope='world'; console.log(scope); //world console.log(b);
  • TDD实践（二） bijian1013 javaTDD
    实践题目：分解质因数 Step1： 单元测试： package com.bijian.study.factor.test; import java.util.Arrays; import junit.framework.Assert; import org.junit.Before; import org.junit.Test; import com.bijian.
  • [MongoDB学习笔记一]MongoDB主从复制 bit1129 mongodb
    MongoDB称为分布式数据库，主要原因是1.基于副本集的数据备份， 2.基于切片的数据扩容。副本集解决数据的读写性能问题，切片解决了MongoDB的数据扩容问题。   事实上，MongoDB提供了主从复制和副本复制两种备份方式，在MongoDB的主从复制和副本复制集群环境中，只有一台作为主服务器，另外一台或者多台服务器作为从服务器。 本文介绍MongoDB的主从复制模式，需要指明
  • 【HBase五】Java API操作HBase bit1129 hbase
    import java.io.IOException; import org.apache.hadoop.conf.Configuration; import org.apache.hadoop.hbase.HBaseConfiguration; import org.apache.hadoop.hbase.HColumnDescriptor; import org.apache.ha
  • python调用zabbix api接口实时展示数据 ronin47
    zabbix api接口来进行展示。经过思考之后，计划获取如下内容：     1、  获得认证密钥     2、  获取zabbix所有的主机组     3、  获取单个组下的所有主机     4、  获取某个主机下的所有监控项  
  • jsp取得绝对路径 byalias 绝对路径
    在JavaWeb开发中，常使用绝对路径的方式来引入JavaScript和CSS文件，这样可以避免因为目录变动导致引入文件找不到的情况，常用的做法如下： 一、使用${pageContext.request.contextPath} 　　代码” ${pageContext.request.contextPath}”的作用是取出部署的应用程序名，这样不管如何部署，所用路径都是正确的。
  • Java定时任务调度：用ExecutorService取代Timer bylijinnan java
    《Java并发编程实战》一书提到的用ExecutorService取代Java Timer有几个理由，我认为其中最重要的理由是： 如果TimerTask抛出未检查的异常，Timer将会产生无法预料的行为。Timer线程并不捕获异常，所以 TimerTask抛出的未检查的异常会终止timer线程。这种情况下，Timer也不会再重新恢复线程的执行了;它错误的认为整个Timer都被取消了。此时，已经被
  • SQL 优化原则 chicony sql
    一、问题的提出 　在应用系统开发初期，由于开发数据库数据比较少，对于查询SQL语句，复杂视图的的编写等体会不出SQL语句各种写法的性能优劣，但是如果将应用系统提交实际应用后，随着数据库中数据的增加，系统的响应速度就成为目前系统需要解决的最主要的问题之一。系统优化中一个很重要的方面就是SQL语句的优化。对于海量数据，劣质SQL语句和优质SQL语句之间的速度差别可以达到上百倍，可见对于一个系统
  • java 线程弹球小游戏 CrazyMizzz java游戏
    最近java学到线程，于是做了一个线程弹球的小游戏，不过还没完善 这里是提纲 1.线程弹球游戏实现 1.实现界面需要使用哪些API类 JFrame JPanel JButton FlowLayout Graphics2D Thread Color ActionListener ActionEvent MouseListener Mouse
  • hadoop jps出现process information unavailable提示解决办法 daizj hadoopjps
    hadoop jps出现process information unavailable提示解决办法   jps时出现如下信息： 3019 -- process information unavailable3053 -- process information unavailable2985 -- process information unavailable2917 --
  • PHP图片水印缩放类实现 dcj3sjt126com PHP
    <?php class Image{ private $path; function __construct($path='./'){ $this->path=rtrim($path,'/').'/'; } //水印函数，参数：背景图，水印图，位置，前缀,TMD透明度 public function water($b,$l,$pos
  • IOS控件学习：UILabel常用属性与用法 dcj3sjt126com iosUILabel
    参考网站： http://shijue.me/show_text/521c396a8ddf876566000007 http://www.tuicool.com/articles/zquENb http://blog.csdn.net/a451493485/article/details/9454695 http://wiki.eoe.cn/page/iOS_pptl_artile_281
  • 完全手动建立maven骨架 eksliang javaeclipseWeb
    建一个 JAVA 项目 ： mvn archetype:create -DgroupId=com.demo -DartifactId=App [-Dversion=0.0.1-SNAPSHOT] [-Dpackaging=jar] 建一个 web 项目 ： mvn archetype:create -DgroupId=com.demo -DartifactId=web-a
  • 配置清单 gengzg 配置
    1、修改grub启动的内核版本 vi /boot/grub/grub.conf 将default 0改为1 拷贝mt7601Usta.ko到/lib文件夹 拷贝RT2870STA.dat到 /etc/Wireless/RT2870STA/文件夹 拷贝wifiscan到bin文件夹，chmod 775 /bin/wifiscan 拷贝wifiget.sh到bin文件夹，chm
  • Windows端口被占用处理方法 huqiji windows
    以下文章主要以80端口号为例，如果想知道其他的端口号也可以使用该方法..........................1、在windows下如何查看80端口占用情况?是被哪个进程占用?如何终止等.        这里主要是用到windows下的DOS工具,点击"开始"--"运行",输入&
  • 开源ckplayer 网页播放器， 跨平台(html5, mobile)，flv, f4v, mp4, rtmp协议. webm, ogg, m3u8 ！ 天梯梦 mobile
    CKplayer，其全称为超酷flv播放器，它是一款用于网页上播放视频的软件，支持的格式有：http协议上的flv,f4v,mp4格式，同时支持rtmp视频流格 式播放，此播放器的特点在于用户可以自己定义播放器的风格，诸如播放/暂停按钮，静音按钮，全屏按钮都是以外部图片接口形式调用，用户根据自己的需要制作 出播放器风格所需要使用的各个按钮图片然后替换掉原始风格里相应的图片就可以制作出自己的风格了，
  • 简单工厂设计模式 hm4123660 java工厂设计模式简单工厂模式
           简单工厂模式（Simple Factory Pattern）属于类的创新型模式，又叫静态工厂方法模式。是通过专门定义一个类来负责创建其他类的实例，被创建的实例通常都具有共同的父类。简单工厂模式是由一个工厂对象决定创建出哪一种产品类的实例。简单工厂模式是工厂模式家族中最简单实用的模式，可以理解为是不同工厂模式的一个特殊实现。
  • maven笔记 zhb8015 maven
    跳过测试阶段： mvn package -DskipTests 临时性跳过测试代码的编译： mvn package -Dmaven.test.skip=true   maven.test.skip同时控制maven-compiler-plugin和maven-surefire-plugin两个插件的行为，即跳过编译，又跳过测试。   指定测试类 mvn test
  • 非mapreduce生成Hfile，然后导入hbase当中 Stark_Summer maphbasereduceHfilepath实例
    最近一个群友的boss让研究hbase，让hbase的入库速度达到5w+/s，这可愁死了，4台个人电脑组成的集群，多线程入库调了好久，速度也才1w左右，都没有达到理想的那种速度，然后就想到了这种方式，但是网上多是用mapreduce来实现入库，而现在的需求是实时入库，不生成文件了，所以就只能自己用代码实现了，但是网上查了很多资料都没有查到，最后在一个网友的指引下，看了源码，最后找到了生成Hfile
  • jsp web tomcat 编码问题 王新春 tomcatjsppageEncode
    今天配置jsp项目在tomcat上，windows上正常，而linux上显示乱码，最后定位原因为tomcat 的server.xml 文件的配置，添加 URIEncoding 属性： <Connector port="8080" protocol="HTTP/1.1" connectionTi
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他