前端工具包qdTool

qdTool工具包介绍

官网文档地址：https://www.qdtool.net/

qdTool工具包两种安装方式

有两种安装方式

1.直接下载min目录下的qdtool.min.js使用，支持UMD通用模块规范

2.使用npm安装

1. 浏览器

通过script的方式引入(下载后在项目中引用)

<script src="qdtool.min.js"></script>
<script>
  var OS = qdtool.getOS();
</script>

2. npm

推荐使用npm的方式安装，它能更好地和webpack打包工具配合使用。

npm install qdtool --save-dev
国内如果下载速度比较慢可以使用cnpm
cnpm install qdtool --save-dev

安装图

代码package.json显示安装版本

代码package-lock.json显示镜像地址

qdTool详细使用

详细使用1

npm使用方式有多种，完整引入、按需引入、全局配置及某些语言管道符(比如Vue.js)

快捷键：option+上箭头+F 格式化代码

浏览器使用

<script src="https://cdn.qdtool.net/qdtool-1.0.2.min.js"> </script>
    <script>
        // var OS = qdtool.getOS()
        console.log(qdtool)
    </script>

例1:获取操作系统类型

<script src="https://cdn.qdtool.net/qdtool-1.0.2.min.js"> </script>
    <script>
        var OS = qdtool.getOS()
        console.log(OS)
    </script>

结果

例2:获得版本号

console.log(qdtool.version())

结果

文档主要关注（示例）

<template>
  <div id="app">
    <div>Hello qdTool</div>
  </div>
</template>

<script>
const qdtool = require("qdtool");

export default {
  name: "App",
  components: {},
  created() {
    const OS = qdtool.getOS();
    console.log(OS);
  },
  data() {
    return {};
  },

  mounted() {},

  methods: {},
};
</script>

<style lang="scss" scoped>
</style>

完整引入
webpack、RequireJS、SeaJS…

import qdtool from 'qdtool'
const OS = qdtool.getOS()

const qdtool = require('qdtool')
const OS = qdtool.getOS()

vue举例子如下

APP.vue

<template>
  <div id="app"></div>
</template>

<script>
const qdtool = require("qdtool");
export default {
  name: "App",
  components: {},
  created() {
    const OS = qdtool.getOS();
    console.log(OS);
  },
};
</script>
<style>
</style>

结果

按需引入
不建议完整引入所有函数，所以只引入需要使用的方法即可，可以一定程度上提升性能。若项目中大量使用该工具包，更推荐下面的“全局配置”的方式引入

// 只引入部分方法('qdtool/lib/<方法名>')
const getOS = require('qdtool/lib/getOS')
const OS = getOS()

具体方法名在后面每个对应方法里面会写明具体方法名，只需要对应使用即可。

 created() {
    console.log(getOS());
  },

详细使用2

全局配置
如果项目中大量使用该工具包，推荐使用“全局配置”的方式引入，这样可以减少在每个地方都引入，只需要全局引入一次即可。没有特殊说明的情况下，该文档统一使用这种方式。
在main.js中引入代码

import qdtool from 'qdtool'
Vue.prototype.qdtool = qdtool

在需要使用的地方直接使用即可，比如

this.qdtool.getOS()

浏览器访问结果

管道符
管道符(使用方式以Vue.js为例，其它根据语言自行使用)。
在Vue.js中可以通过管道符(|)来使用，比如在模板中格式化日期等。
新建一个过滤器文件，这里在src/util下新建一个filter.js文件

// 这里使用全局引入为例，也可以自行按需引入或者全局配置使用
import qdtool from 'qdtool'

// 时间戳转换为时间方法，此处方法可以换为qdtool里的其他方法（参数参考文档） 
export function timestampToTime(date, args) {
  return qdtool.timestampToTime(date, args);
}

在main.js中引入代码

import * as filters from "@/util/filter"

Object.keys(filters).forEach(key=>{
  Vue.filter(key,filters[key])
})

在需要使用的地方直接使用

dtool {{ 1674051502315 | timestampToTime('yyyy-MM-dd hh:mm:ss') }}

结果

qdTool工具包使用举例

使用全局配置
main.js

// 全局配置
import qdtool from 'qdtool'
Vue.prototype.qdtool = qdtool

举例（写在script中）
字符串-去除字符串空格

<script>
export default {
  name: "App",
  components: {},
  created() {
    console.log(this.qdtool.trim(" rrrr yyyy jjj  ", 1));
  },
};
</script>

结果

qdTool源码阅读

下载地址
https://github.com/qdtool/qdtool
https://gitee.com/qdtool/qdtool

源码怎么看？如何分析？

1、解压后，vscode打开
安装依赖包

npm i

2、删除三个文件夹
es5lib（转成es6方便浏览器使用）、lib（部分引入涉及）、min（压缩使用）

3、两个命令
生成以上三个文件夹
package.json中

 "scripts": {
    "babel": "babel src -d es5lib",
    "build": "node script/build.js"
  }

//es6->es5  6转5 生成es5lib文件夹
npm run babel

//编译，生成lib文件夹和min文件夹
npm run build

script/webpack.conf.js 确定src/index.js为打包入口

entry: path.resolve(rootPath, 'src', 'index.js'),

具体的方法

对应文档中方法