摘要：獲取參數(shù)總結(jié)這里我主要總結(jié)了我開(kāi)發(fā)工具庫(kù)所用到的一些實(shí)踐，參考了不少開(kāi)源的項(xiàng)目，寫(xiě)的比較匆忙，有些細(xì)節(jié)可以參考源代碼，如果有不合理的地方盡情吐槽，共同進(jìn)步。

老生常談工具庫(kù)，每個(gè)公司都應(yīng)該需要一個(gè)工具庫(kù)去處理一些公共重復(fù)的代碼，比如公共函數(shù)，ajax，微信sdk，本地存儲(chǔ)等等，目前構(gòu)建工具大行其道，我覺(jué)得是時(shí)候擺脫復(fù)制粘貼的代碼了，這里我對(duì)基于rollup構(gòu)建工具庫(kù)進(jìn)行了一個(gè)總結(jié)（相比webpack更加配置簡(jiǎn)單，代碼也清晰很多吧），更多是項(xiàng)目的組織，畢竟具體的代碼每個(gè)公司都有自己的業(yè)務(wù)需求，希望能夠幫助到大家。

├── .git
├── .gitignore
├── .npmignore
├── LICENSE                      協(xié)議
├── coverage                     代碼覆蓋率文件
├── docs                         文檔
├── index.html                   測(cè)試html
├── lib                          引用的入口文件
├── node_modules
├── package-lock.json
├── package.json
├── readme.md                    說(shuō)明文檔
├── rollup.config.js             rollup配置文件
├── scripts                      構(gòu)建腳本
├── src                          開(kāi)發(fā)目錄
├── test                         測(cè)試用例
└── yarn.lock

這是最終的項(xiàng)目目錄結(jié)構(gòu) 地址

  import pkg from "./package.json";
  import buble from "rollup-plugin-buble";
  import resolve from "rollup-plugin-node-resolve";
  import uglify from "rollup-plugin-uglify"
  import { minify } from "uglify-es";
  export default [
    {
      input: "src/main.js",
      output: {
        name: "_",
        file: pkg.browser,
        format: "umd"
      },
      plugins:[
        resolve(),
        buble({  // transpile ES2015+ to ES5
          objectAssign: "Object.assign",
          exclude: ["node_modules/**"]
        }),
        uglify({},minify)
      ],
    },
    {
      input: "src/main.js",
      output: { file: pkg.main, format: "es" },
      plugins: [
        resolve(),
        buble({
          objectAssign: "Object.assign",
          exclude: ["node_modules/**"]
        }),
        uglify({},minify)
      ]
    }
  ]

rollup.config.js是rollup的主要配置文件，這里我主要將代碼打包成瀏覽器直接使用的umd格式和打包工具使用的esm格式。
最終會(huì)生成

lib
  z.esm.js  webpack等工具import，支持tree shaking按需加載
  z.min.js  script標(biāo)簽引入

我這邊將開(kāi)發(fā)的具體代碼放在src中，入口為main.js，每個(gè)功能模塊是一個(gè)目錄，有個(gè)入口文件index.js方便進(jìn)行單元測(cè)試，然后只有針對(duì)一個(gè)方法建立一個(gè)文件就可以了，已url處理功能為例:

src
  main.js
  reg/
  dom/
  url/
    index.js
    getParamByName.js
    parseQueryString.js

url/index.js

//暴露處所有的方法
export * from "./getParamByName"
export * from "./parseQueryString"

url/getParamByName.js

/**
   * 獲取url參數(shù)
   * ### Example (es imports)
   * ```js
   * // url www.baidu.com?c=aa
   * import {getParamByName} from "zrutil"
   * getParamByName("c") => "aa"
   * ```
   */
  export function getParamByName(name, url) {
    if (!url) url = window.location.href;
    name = name.replace(/[[]]/g, "$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return "";
    return decodeURIComponent(results[2].replace(/+/g, " "));
  }

好的工具庫(kù)缺少不了測(cè)試，這里我采用的是jest, 個(gè)人認(rèn)為jest的集成度更高，語(yǔ)法也簡(jiǎn)單，內(nèi)置的代碼覆蓋率檢查很快就可以上手。我們只需要對(duì)每個(gè)功能模塊進(jìn)行測(cè)試代碼的編寫(xiě)就可以了。

test/url.test.js

 import {parseQueryString, getParamByName} from "../src/url"

  describe("url test", ()=>{
    const url = "http://www.baidu.com?a=1&b=aaa"

    describe("獲取url參數(shù):getParamByName",()=>{
      test(`${url} getParamByName("a",url)  返回 1`, ()=>{
        expect(getParamByName("a",url)).toBe("1")
      })
      test(`${url} getParamByName("b",url) 返回 "aaa"`, ()=>{
        expect(getParamByName("b",url)).toBe("aaa")
      })
      test(`${window.location.href} getParamByName("c") 返回 "ccc"`, ()=>{
        expect(getParamByName("c")).toBe("ccc")
      })
      test(`${window.location.href} getParamByName("b") 返回 null`, ()=>{
        expect(getParamByName("b")).toBe(null)
      })
    })

    describe("解析url:parseQueryString",()=>{
      test(`${url} 返回 {a:"1",b:"aaa"}`, ()=>{
        expect(parseQueryString(url)).toEqual({a:"1",b:"aaa"})
      })
      test(`${window.location.href}  返回 {c:"ccc"}`, ()=>{
        expect(parseQueryString()).toEqual({c:"ccc"})
      })
    })
  })

測(cè)試結(jié)果:

測(cè)試覆蓋率:

為了使文檔能夠自動(dòng)化生成,主要采用了jsdoc-to-markdown,只需要在每個(gè)方法上寫(xiě)上注釋的代碼，就能自動(dòng)化的生成對(duì)應(yīng)的md文檔，非常方便。

/**
   * 獲取url參數(shù)
   * ### Example (es imports)
   * ```js
   * // url www.baidu.com?c=aa
   * import {getParamByName} from "zrutil"
   * getParamByName("c") => "aa"
   * ```
   */
  export function getParamByName(name, url) {
  }

這里我主要總結(jié)了我開(kāi)發(fā)工具庫(kù)所用到的一些實(shí)踐，參考了不少開(kāi)源的項(xiàng)目，寫(xiě)的比較匆忙，有些細(xì)節(jié)可以參考源代碼，如果有不合理的地方盡情吐槽，共同進(jìn)步。

項(xiàng)目地址:地址
開(kāi)發(fā)環(huán)境: MacOS