javscript插件彙總

時間 2019-11-06

標籤 javscript 插件彙總简体版

原文原文鏈接

前言
做爲戰鬥在業務一線的前端，要想少加班，就要想辦法提升工做效率。這裏提一個小點，咱們在業務開發過程當中，常常會重複用到日期格式化、url參數轉對象、瀏覽器類型判斷、節流函數等一類函數，這些工具類函數，基本上在每一個項目都會用到，爲避免不一樣項目屢次複製粘貼的麻煩，咱們能夠統一封裝，發佈到npm，以提升開發效率。css

這裏，筆者已經封裝併發布了本身的武器庫 outils，若是你對本項目感興趣，歡迎 star 本項目。固然你也能夠在本項目的基礎上封裝本身的武器庫。html

經常使用函數彙總
這裏先分類整理下，以前項目中屢次用到的工具函數。前端

1.Array
1.1 arrayEqual
/**linux

@desc 判斷兩個數組是否相等
@param {Array} arr1
@param {Array} arr2
@return {Boolean}

*/
function arrayEqual(arr1, arr2) {android

if (arr1 === arr2) return true;
if (arr1.length != arr2.length) return false;
for (var i = 0; i < arr1.length; ++i) {
    if (arr1[i] !== arr2[i]) return false;
}
return true;

}
2.Class
2.1 addClass
/**webpack

@desc 爲元素添加class
@param {HTMLElement} ele
@param {String} cls

*/ios

var hasClass = require('./hasClass');git

function addClass(ele, cls) {程序員

if (!hasClass(ele, cls)) {
    ele.className += ' ' + cls;
}

}
2.2 hasClass
/**github

@desc 判斷元素是否有某個class
@param {HTMLElement} ele
@param {String} cls
@return {Boolean}

*/
function hasClass(ele, cls) {

return (new RegExp('(\\s|^)' + cls + '(\\s|$)')).test(ele.className);

}
2.3 removeClass
/**

@desc 爲元素移除class
@param {HTMLElement} ele
@param {String} cls

var hasClass = require('./hasClass');

function removeClass(ele, cls) {

if (hasClass(ele, cls)) {
    var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
    ele.className = ele.className.replace(reg, ' ');
}

}
3.Cookie
3.1 getCookie
/**

@desc 根據name讀取cookie
@param {String} name
@return {String}

*/
function getCookie(name) {

var arr = document.cookie.replace(/\s/g, "").split(';');
for (var i = 0; i < arr.length; i++) {
    var tempArr = arr[i].split('=');
    if (tempArr[0] == name) {
        return decodeURIComponent(tempArr[1]);
    }
}
return '';

}
3.2 removeCookie
var setCookie = require('./setCookie');
/**

@desc 根據name刪除cookie
@param {String} name

*/
function removeCookie(name) {

// 設置已過時，系統會馬上刪除cookie
setCookie(name, '1', -1);

}
3.3 setCookie
/**

@desc 設置Cookie
@param {String} name
@param {String} value
@param {Number} days

*/
function setCookie(name, value, days) {

var date = new Date();
date.setDate(date.getDate() + days);
document.cookie = name + '=' + value + ';expires=' + date;

}
4.Device
4.1 getExplore
/**

@desc 獲取瀏覽器類型和版本
@return {String}

*/
function getExplore() {

var sys = {},
    ua = navigator.userAgent.toLowerCase(),
    s;
(s = ua.match(/rv:([\d.]+)\) like gecko/)) ? sys.ie = s[1]:
    (s = ua.match(/msie ([\d\.]+)/)) ? sys.ie = s[1] :
    (s = ua.match(/edge\/([\d\.]+)/)) ? sys.edge = s[1] :
    (s = ua.match(/firefox\/([\d\.]+)/)) ? sys.firefox = s[1] :
    (s = ua.match(/(?:opera|opr).([\d\.]+)/)) ? sys.opera = s[1] :
    (s = ua.match(/chrome\/([\d\.]+)/)) ? sys.chrome = s[1] :
    (s = ua.match(/version\/([\d\.]+).*safari/)) ? sys.safari = s[1] : 0;
// 根據關係進行判斷
if (sys.ie) return ('IE: ' + sys.ie)
if (sys.edge) return ('EDGE: ' + sys.edge)
if (sys.firefox) return ('Firefox: ' + sys.firefox)
if (sys.chrome) return ('Chrome: ' + sys.chrome)
if (sys.opera) return ('Opera: ' + sys.opera)
if (sys.safari) return ('Safari: ' + sys.safari)
return 'Unkonwn'

}
4.2 getOS
/**

@desc 獲取操做系統類型
@return {String}

*/
function getOS() {

var userAgent = 'navigator' in window && 'userAgent' in navigator && navigator.userAgent.toLowerCase() || '';
var vendor = 'navigator' in window && 'vendor' in navigator && navigator.vendor.toLowerCase() || '';
var appVersion = 'navigator' in window && 'appVersion' in navigator && navigator.appVersion.toLowerCase() || '';

if (/mac/i.test(appVersion)) return 'MacOSX'
if (/win/i.test(appVersion)) return 'windows'
if (/linux/i.test(appVersion)) return 'linux'
if (/iphone/i.test(userAgent) || /ipad/i.test(userAgent) || /ipod/i.test(userAgent)) 'ios'
if (/android/i.test(userAgent)) return 'android'
if (/win/i.test(appVersion) && /phone/i.test(userAgent)) return 'windowsPhone'

}
5.Dom
5.1 getScrollTop
/**

@desc 獲取滾動條距頂部的距離

*/
function getScrollTop() {

return (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop;

}
5.2 offset
/**

@desc 獲取一個元素的距離文檔(document)的位置，相似jQ中的offset()
@param {HTMLElement} ele
@returns { {left: number, top: number} }

*/
function offset(ele) {

var pos = {
    left: 0,
    top: 0
};
while (ele) {
    pos.left += ele.offsetLeft;
    pos.top += ele.offsetTop;
    ele = ele.offsetParent;
};
return pos;

}
5.3 scrollTo
var getScrollTop = require('./getScrollTop');
var setScrollTop = require('./setScrollTop');
var requestAnimFrame = (function () {

return window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    function (callback) {
        window.setTimeout(callback, 1000 / 60);
    };

})();
/**

@desc 在${duration}時間內，滾動條平滑滾動到${to}指定位置
@param {Number} to
@param {Number} duration

*/
function scrollTo(to, duration) {

if (duration < 0) {
    setScrollTop(to);
    return
}
var diff = to - getScrollTop();
if (diff === 0) return
var step = diff / duration * 10;
requestAnimationFrame(
    function () {
        if (Math.abs(step) > Math.abs(diff)) {
            setScrollTop(getScrollTop() + diff);
            return;
        }
        setScrollTop(getScrollTop() + step);
        if (diff > 0 && getScrollTop() >= to || diff < 0 && getScrollTop() <= to) {
            return;
        }
        scrollTo(to, duration - 16);
    });

}
5.4 setScrollTop
/**

@desc 設置滾動條距頂部的距離

*/
function setScrollTop(value) {

window.scrollTo(0, value);
return value;

}
6.Keycode
6.1 getKeyName
var keyCodeMap = {

8: 'Backspace',
9: 'Tab',
13: 'Enter',
16: 'Shift',
17: 'Ctrl',
18: 'Alt',
19: 'Pause',
20: 'Caps Lock',
27: 'Escape',
32: 'Space',
33: 'Page Up',
34: 'Page Down',
35: 'End',
36: 'Home',
37: 'Left',
38: 'Up',
39: 'Right',
40: 'Down',
42: 'Print Screen',
45: 'Insert',
46: 'Delete',

48: '0',
49: '1',
50: '2',
51: '3',
52: '4',
53: '5',
54: '6',
55: '7',
56: '8',
57: '9',

65: 'A',
66: 'B',
67: 'C',
68: 'D',
69: 'E',
70: 'F',
71: 'G',
72: 'H',
73: 'I',
74: 'J',
75: 'K',
76: 'L',
77: 'M',
78: 'N',
79: 'O',
80: 'P',
81: 'Q',
82: 'R',
83: 'S',
84: 'T',
85: 'U',
86: 'V',
87: 'W',
88: 'X',
89: 'Y',
90: 'Z',

91: 'Windows',
93: 'Right Click',

96: 'Numpad 0',
97: 'Numpad 1',
98: 'Numpad 2',
99: 'Numpad 3',
100: 'Numpad 4',
101: 'Numpad 5',
102: 'Numpad 6',
103: 'Numpad 7',
104: 'Numpad 8',
105: 'Numpad 9',
106: 'Numpad *',
107: 'Numpad +',
109: 'Numpad -',
110: 'Numpad .',
111: 'Numpad /',

112: 'F1',
113: 'F2',
114: 'F3',
115: 'F4',
116: 'F5',
117: 'F6',
118: 'F7',
119: 'F8',
120: 'F9',
121: 'F10',
122: 'F11',
123: 'F12',

144: 'Num Lock',
145: 'Scroll Lock',
182: 'My Computer',
183: 'My Calculator',
186: ';',
187: '=',
188: ',',
189: '-',
190: '.',
191: '/',
192: '`',
219: '[',
220: '\\',
221: ']',
222: '\''

};
/**

@desc 根據keycode得到鍵名
@param {Number} keycode
@return {String}

*/
function getKeyName(keycode) {

if (keyCodeMap[keycode]) {
    return keyCodeMap[keycode];
} else {
    console.log('Unknow Key(Key Code:' + keycode + ')');
    return '';
}

};
7.Object
7.1 deepClone
/**

@desc 深拷貝，支持常見類型
@param {Any} values

*/
function deepClone(values) {

var copy;

// Handle the 3 simple types, and null or undefined
if (null == values || "object" != typeof values) return values;

// Handle Date
if (values instanceof Date) {
    copy = new Date();
    copy.setTime(values.getTime());
    return copy;
}

// Handle Array
if (values instanceof Array) {
    copy = [];
    for (var i = 0, len = values.length; i < len; i++) {
        copy[i] = deepClone(values[i]);
    }
    return copy;
}

// Handle Object
if (values instanceof Object) {
    copy = {};
    for (var attr in values) {
        if (values.hasOwnProperty(attr)) copy[attr] = deepClone(values[attr]);
    }
    return copy;
}

throw new Error("Unable to copy values! Its type isn't supported.");

}
7.2 isEmptyObject
/**

@desc 判斷obj是否爲空
@param {Object} obj
@return {Boolean}

*/
function isEmptyObject(obj) {

if (!obj || typeof obj !== 'object' || Array.isArray(obj))
    return false
return !Object.keys(obj).length

}
8.Random
8.1 randomColor
/**

@desc 隨機生成顏色
@return {String}

*/
function randomColor() {

return '#' + ('00000' + (Math.random() * 0x1000000 << 0).toString(16)).slice(-6);

}
8.2 randomNum
/**

@desc 生成指定範圍隨機數
@param {Number} min
@param {Number} max
@return {Number}

*/
function randomNum(min, max) {

return Math.floor(min + Math.random() * (max - min));

}
9.Regexp
9.1 isEmail
/**

@desc 判斷是否爲郵箱地址
@param {String} str
@return {Boolean}

*/
function isEmail(str) {

return /\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/.test(str);

}
9.2 isIdCard
/**

@desc 判斷是否爲身份證號
@param {String|Number} str
@return {Boolean}

*/
function isIdCard(str) {

return /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/.test(str)

}
9.3 isPhoneNum
/**

@desc 判斷是否爲手機號
@param {String|Number} str
@return {Boolean}

*/
function isPhoneNum(str) {

return /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/.test(str)

}
9.4 isUrl
/**

@desc 判斷是否爲URL地址
@param {String} str
@return {Boolean}

*/
function isUrl(str) {

return /[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/i.test(str);

}
10.String
10.1 digitUppercase
/**

@desc 現金額轉大寫
@param {Number} n
@return {String}

*/
function digitUppercase(n) {

var fraction = ['角', '分'];
var digit = [
    '零', '壹', '貳', '叄', '肆',
    '伍', '陸', '柒', '捌', '玖'
];
var unit = [
    ['元', '萬', '億'],
    ['', '拾', '佰', '仟']
];
var head = n < 0 ? '欠' : '';
n = Math.abs(n);
var s = '';
for (var i = 0; i < fraction.length; i++) {
    s += (digit[Math.floor(n * 10 * Math.pow(10, i)) % 10] + fraction[i]).replace(/零./, '');
}
s = s || '整';
n = Math.floor(n);
for (var i = 0; i < unit[0].length && n > 0; i++) {
    var p = '';
    for (var j = 0; j < unit[1].length && n > 0; j++) {
        p = digit[n % 10] + unit[1][j] + p;
        n = Math.floor(n / 10);
    }
    s = p.replace(/(零.)*零$/, '').replace(/^$/, '零') + unit[0][i] + s;
}
return head + s.replace(/(零.)*零元/, '元')
    .replace(/(零.)+/g, '零')
    .replace(/^整$/, '零元整');

};
11.Support
11.1 isSupportWebP
/**

@desc 判斷瀏覽器是否支持webP格式圖片
@return {Boolean}

*/
function isSupportWebP() {

return !![].map && document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') == 0;

}
12.Time
12.1 formatPassTime
/**

@desc 格式化${startTime}距如今的已過期間
@param {Date} startTime
@return {String}

*/
function formatPassTime(startTime) {

var currentTime = Date.parse(new Date()),
    time = currentTime - startTime,
    day = parseInt(time / (1000 * 60 * 60 * 24)),
    hour = parseInt(time / (1000 * 60 * 60)),
    min = parseInt(time / (1000 * 60)),
    month = parseInt(day / 30),
    year = parseInt(month / 12);
if (year) return year + "年前"
if (month) return month + "個月前"
if (day) return day + "天前"
if (hour) return hour + "小時前"
if (min) return min + "分鐘前"
else return '剛剛'

}
12.2 formatRemainTime
/**

@desc 格式化如今距${endTime}的剩餘時間
@param {Date} endTime
@return {String}

*/
function formatRemainTime(endTime) {

var startDate = new Date(); //開始時間
var endDate = new Date(endTime); //結束時間
var t = endDate.getTime() - startDate.getTime(); //時間差
var d = 0,
    h = 0,
    m = 0,
    s = 0;
if (t >= 0) {
    d = Math.floor(t / 1000 / 3600 / 24);
    h = Math.floor(t / 1000 / 60 / 60 % 24);
    m = Math.floor(t / 1000 / 60 % 60);
    s = Math.floor(t / 1000 % 60);
}
return d + "天 " + h + "小時 " + m + "分鐘 " + s + "秒";

}
13.Url
13.1 parseQueryString
/**

@desc url參數轉對象
@param {String} url default: window.location.href
@return {Object}

*/
function parseQueryString(url) {

url = url == null ? window.location.href : url
var search = url.substring(url.lastIndexOf('?') + 1)
if (!search) {
    return {}
}
return JSON.parse('{"' + decodeURIComponent(search).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g, '":"') + '"}')

}
13.2 stringfyQueryString
/**

@desc 對象序列化
@param {Object} obj
@return {String}

*/
function stringfyQueryString(obj) {

if (!obj) return '';
var pairs = [];

for (var key in obj) {
    var value = obj[key];

    if (value instanceof Array) {
        for (var i = 0; i < value.length; ++i) {
            pairs.push(encodeURIComponent(key + '[' + i + ']') + '=' + encodeURIComponent(value[i]));
        }
        continue;
    }

    pairs.push(encodeURIComponent(key) + '=' + encodeURIComponent(obj[key]));
}

return pairs.join('&');

}
14.Function
14.1 throttle
/**

@desc 函數節流。
適用於限制resize和scroll等函數的調用頻率

@param {Number} delay 0 或者更大的毫秒數。對於事件回調，大約100或250毫秒（或更高）的延遲是最有用的。
@param {Boolean} noTrailing 可選，默認爲false。
若是noTrailing爲true，當節流函數被調用，每過delay毫秒callback也將執行一次。
若是noTrailing爲false或者未傳入，callback將在最後一次調用節流函數後再執行一次.
（延遲delay毫秒以後，節流函數沒有被調用,內部計數器會復位）
@param {Function} callback 延遲毫秒後執行的函數。this上下文和全部參數都是按原樣傳遞的，
執行去節流功能時，調用callback。
@param {Boolean} debounceMode 若是debounceMode爲true，clear在delayms後執行。
若是debounceMode是false，callback在delay ms以後執行。

@return {Function} 新的節流函數

*/
function throttle(delay, noTrailing, callback, debounceMode) {

// After wrapper has stopped being called, this timeout ensures that
// `callback` is executed at the proper times in `throttle` and `end`
// debounce modes.
var timeoutID;

// Keep track of the last time `callback` was executed.
var lastExec = 0;

// `noTrailing` defaults to falsy.
if (typeof noTrailing !== 'boolean') {
    debounceMode = callback;
    callback = noTrailing;
    noTrailing = undefined;
}

// The `wrapper` function encapsulates all of the throttling / debouncing
// functionality and when executed will limit the rate at which `callback`
// is executed.
function wrapper() {

    var self = this;
    var elapsed = Number(new Date()) - lastExec;
    var args = arguments;

    // Execute `callback` and update the `lastExec` timestamp.
    function exec() {
        lastExec = Number(new Date());
        callback.apply(self, args);
    }

    // If `debounceMode` is true (at begin) this is used to clear the flag
    // to allow future `callback` executions.
    function clear() {
        timeoutID = undefined;
    }

    if (debounceMode && !timeoutID) {
        // Since `wrapper` is being called for the first time and
        // `debounceMode` is true (at begin), execute `callback`.
        exec();
    }

    // Clear any existing timeout.
    if (timeoutID) {
        clearTimeout(timeoutID);
    }

    if (debounceMode === undefined && elapsed > delay) {
        // In throttle mode, if `delay` time has been exceeded, execute
        // `callback`.
        exec();

    } else if (noTrailing !== true) {
        // In trailing throttle mode, since `delay` time has not been
        // exceeded, schedule `callback` to execute `delay` ms after most
        // recent execution.
        //
        // If `debounceMode` is true (at begin), schedule `clear` to execute
        // after `delay` ms.
        //
        // If `debounceMode` is false (at end), schedule `callback` to
        // execute after `delay` ms.
        timeoutID = setTimeout(debounceMode ? clear : exec, debounceMode === undefined ? delay - elapsed : delay);
    }

}

// Return the wrapper function.
return wrapper;

};
14.2 debounce
/**

@desc 函數防抖
與throttle不一樣的是，debounce保證一個函數在多少毫秒內再也不被觸發，只會執行一次，
要麼在第一次調用return的防抖函數時執行，要麼在延遲指定毫秒後調用。
@example 適用場景：如在線編輯的自動存儲防抖。
@param {Number} delay 0或者更大的毫秒數。對於事件回調，大約100或250毫秒（或更高）的延遲是最有用的。
@param {Boolean} atBegin 可選，默認爲false。
若是atBegin爲false或未傳入，回調函數則在第一次調用return的防抖函數後延遲指定毫秒調用。
```
若是`atBegin`爲true，回調函數則在第一次調用return的防抖函數時直接執行
```
@param {Function} callback 延遲毫秒後執行的函數。this上下文和全部參數都是按原樣傳遞的，
執行去抖動功能時，，調用callback。

@return {Function} 新的防抖函數。

*/
var throttle = require('./throttle');
function debounce(delay, atBegin, callback) {

return callback === undefined ? throttle(delay, atBegin, false) : throttle(delay, callback, atBegin !== false);

};
封裝
除了對上面這些經常使用函數進行封裝，最重要的是支持合理化的引入，這裏咱們使用webpack統一打包成UMD 通用模塊規範，支持webpack、RequireJS、SeaJS等模塊加載器，亦或直接經過<script>標籤引入。

但這樣，仍是不能讓人滿意。由於完整引入整個庫，略顯浪費，咱們不可能用到全部的函數。那麼，就支持按需引入吧

1.目錄結構說明
│ .babelrc
│ .gitignore
│ .travis.yml
│ LICENSE
│ package.json
│ README.md
│ setCookie.js // 拷貝到根路徑的函數模塊，方便按需加載
│ setScrollTop.js
│ stringfyQueryString.js
│ ...
│ ...
│
├─min
│ outils.min.js // 全部函數統一打包生成的全量壓縮包
│
├─script // 本項目開發腳本目錄
│ build.js // 打包構建腳本
│ test.js // 測試腳本
│ webpack.conf.js // webpack打包配置文件
│
├─src // 源碼目錄
│ │ index.js // webpack入口文件
│ │
│ ├─array
│ │
│ ├─class
│ │
│ ├─cookie
│ │
│ ├─device
│ │
│ ├─dom
│ │
│ ├─keycode
│ │
│ ├─object
│ │
│ ├─random
│ │
│ ├─regexp
│ │
│ ├─string
│ │
│ ├─support
│ │
│ ├─time
│ │
│ └─url
│
└─test // 測試用例目錄

│  array.test.js
│  class.test.js
│  cookie.test.js
│  device.test.js
│  dom.test.js
│  index.html
│  keycode.test.js
│  object.test.js
│  random.test.js
│  regexp.test.js
│  string.test.js
│  support.test.js
│  time.test.js
│  url.test.js
│  
└─_lib // 測試所用到的第三方庫
        mocha.css
        mocha.js
        power-assert.js

2.構建腳本
這裏主要說明一下項目中 build.js 的構建過程
第一步，構建全量壓縮包，先刪除min目錄中以前的outils.min.js，後經過webpack打包並保存新的壓縮包至min目錄中：

......
......
// 刪除舊的全量壓縮包
rm(path.resolve(rootPath, 'min', `${pkg.name}.min.js`), err => {
    if (err) throw (err)
    webpack(config, function (err, stats) {
        if (err) throw (err)
        building.stop()
        process.stdout.write(stats.toString({
            colors: true,
            modules: false,
            children: false,
            chunks: false,
            chunkModules: false
        }) + '\n\n')
        resolve()
        console.log(chalk.cyan('  Build complete.\n'))
    })
})
......
......

第二步，拷貝函數模塊至根目錄，先刪除根目錄中以前的函數模塊，後拷貝src下面一層目錄的全部js文件至根目錄。這麼作的目的是，拷貝到根路徑，在引入的時候，直接require('outils/<方法名>')便可，縮短引入的路徑，也算是提升點效率。

// 替換模塊文件

......
......
// 先刪除根目錄中以前的函數模塊
rm('*.js', err => {
    if (err) throw (err)
    let folderList = fs.readdirSync(path.resolve(rootPath, 'src'))
    folderList.forEach((item, index) => {
        // 拷貝`src`下面一層目錄的全部`js`文件至根目錄
        copy(`src/${item}/*.js`, rootPath, function (err, files) {
            if (err) throw err;
            if (index === folderList.length - 1) {
                console.log(chalk.cyan('  Copy complete.\n'))
                copying.stop()
            }
        })
    })
})
......
......

3.書寫測試用例
俗話說，不寫測試用例的前端不是一個好程序員。那就不能慫，就是幹。

可是由於時間關係，本項目暫時經過項目中的 test.js ，啓動了一個koa靜態服務器，來加載mocha網頁端的測試頁面，讓筆者書寫項目時，能夠在本地對函數功能進行測試。
可是後續將使用travis-ci配合Github來作持續化構建，自動發佈到npm。改用karma，mocha，power-assert作單元測試，使用Coverage測試覆蓋率。這一部分，後續更新。

這裏給你們推薦一個好用的斷言庫 power-assert ，這個庫記住assert(value, [message])一個API就基本無敵，今後不再用擔憂記不住斷言庫的API。

本項目的全部測試用例都在test目錄下，你們能夠做必定參考。

更新：單元測試，已使用karma，mocha，power-assert，使用Coverage測試覆蓋率，並集成 travis-ci 配合Github來作持續化構建，能夠參考本項目的travis配置文件 .travis.yml 和karma的配置文件 karma.conf.js 。

發佈
首先放到Github託管一下，固然你也能夠直接fork本項目，而後再加入你本身的函數。
以筆者項目，舉個栗子:

1.添加本身的函數
在src目錄下，新建分類目錄或者選擇一個分類，在子文件夾中添加函數模塊文件（建議一個小功能保存爲一個JS文件）。

/**

@desc 判斷是否NaN
@param {Any} value
@return {Boolean}

*/
function isNaN(value) {

return value !== value;

};

modules.export = isNaN
而後記得在src/index.js文件中暴露isNaN函數

2.單元測試
在test文件新建測試用例

describe('#isNaN()', function () {

it(`outils.isNaN(NaN) should return true`, function () {
    assert(outils.isNaN(NaN))
})
it(`outils.isNaN('value') should return false`, function () {
    assert.notEqual(outils.isNaN(NaN))
})

})
而後記得在test/index.html中引入以前建立的測試用例腳本。

3.測試並打包
執行npm run test，看全部的測試用例是否經過。若是沒有問題，執行npm run build構建，以後提交到我的的 github 倉庫便可。

4.發佈到npm
在 www.npmjs.com 註冊帳號，修改本地package.json中的name、version、author等信息，最後npm publish就大功告成了。
注意：向npm發包，要把鏡像源切到 www.npmjs.com ，使用cnpm等第三方鏡像源會報錯。

使用
1.瀏覽器
直接下載min目錄下的 outils.min.js ，經過<script>標籤引入。