自分のJavaScriptメソッドライブラリを作成します.
62259 ワード
前言
業務の最前線での戦いの先として、残業を少なくするには、仕事の効率を高める工夫が必要です.ここでは、ビジネス開発の過程で、日付フォーマット、urlパラメータのオブジェクトの転送、ブラウザのタイプの判断、節流関数などの関数を繰り返し使用しています.これらのツール類の関数は、基本的には各項目で使用されます.開発効率を向上させる.
常用関数のまとめ
ここでは先に分類して整理して、以前のプロジェクトで何回も使われたツール関数です.
1.アラy
1.1 arrayEqual
2.1 addClass
3.1 get Cookie
4.1 get Explore
5.1 get ScrrollTop
6.1 getKeyName
7.1 deep Clone
8.1ランドムColor
9.1 isEmail
10.1 digitUppercase
11.1 isSupport WebP
12.1フォーマットPassTime
13.1 parseQueryString
14.1スロットル
上記のような常用関数を実装する以外に、最も重要なのは合理化の導入をサポートすることです.ここではwebpackを使ってUMD共通モジュール仕様にまとめて包装します.webpack、RequireJS、SeaJSなどのモジュール搭載器をサポートします.あるいは直接に通過します.
ここでは主にプロジェクトのbuild.jsの構築過程の第一歩を説明し、全量の圧縮パッケージを構築し、先にminディレクトリの前のoutils.min.jsを削除し、webpackで包装してminディレクトリに保存する.
テストの用例を書かない先端は良いプログラマではないということです.それはお勧めできません.
しかし、時間の関係で、本プロジェクトはしばらくプロジェクトのtest.jsを通して、Coa静的サーバを起動して、mochaのウェブページの端のテストページをロードして、筆者にプロジェクトを書かせる時、現地で関数の機能をテストすることができます.しかし、その後はtravis-ciを使ってGithubと連携して持続的な構築を行い、npmに自動的にリリースされます.kama、mocha、power-astertに変えてユニットテストをして、Coverageを使ってカバー率をテストします.この部分は引き続き更新します.
ここで皆さんに良い断言ライブラリpower-assetを紹介します.このライブラリはastert(value、message)一つのAPIを覚えておけば無敵です.これからはライブラリのAPIを覚えられなくなる心配がありません.
本プロジェクトのすべてのテストケースはtestディレクトリの下にありますので、ぜひ参考にしてください.
更新:ユニットテストは、既にkama、mocha、power-astertを使用して、Coverageを使用してカバー率をテストして、そしてtravis-ciを統合してGithubに協力して持続化構築しています.本プロジェクトのtravis配置ファイル.travis.ymlとkamaの配置ファイルkarma.co.jsを参照することができます.
リリース
まずGithubに保管してください.もちろんあなたも直接forkしてこのプロジェクトに参加してください.筆者のプロジェクトで栗を挙げます.
1.自分の関数を追加する
srcディレクトリでは、カテゴリを新規作成したり、カテゴリを選択したりして、サブフォルダに関数モジュールファイルを追加します.
2.ユニットテスト
テスト用の例をtestファイルに新規作成する
3.テストと包装
npm run testを実行して、すべてのテストケースが通るかどうかを見ます.問題がなければ、npm run build構築を実行して、個人のgithub倉庫に提出すればいいです.
4.npmにリリース
wwww.npmjs.comでアカウントを登録して、当地のpackage.jsonの中のname、version、authorなどの情報を改正して、最後にnpm publishは大成功を収めました.注意:npmに発注する場合は、鏡像源をwww.npmj.comにカットし、cnpmなどの第三者のミラーソースを使用するとエラーが発生します.
使用
1.ブラウザ
minディレクトリの下のoutils.min.jsを直接ダウンロードして、通過します.
2.Webpack、RequireJS、SeaJSなどのモジュール搭載器
npmでoutilsをインストールします.
業務の最前線での戦いの先として、残業を少なくするには、仕事の効率を高める工夫が必要です.ここでは、ビジネス開発の過程で、日付フォーマット、urlパラメータのオブジェクトの転送、ブラウザのタイプの判断、節流関数などの関数を繰り返し使用しています.これらのツール類の関数は、基本的には各項目で使用されます.開発効率を向上させる.
常用関数のまとめ
ここでは先に分類して整理して、以前のプロジェクトで何回も使われたツール関数です.
1.アラy
1.1 arrayEqual
/**
*
* @desc
* @param {Array} arr1
* @param {Array} arr2
* @return {Boolean}
*/
function arrayEqual(arr1, arr2) {
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.1 addClass
/**
*
* @desc class
* @param {HTMLElement} ele
* @param {String} cls
*/
var hasClass = require('./hasClass');
function addClass(ele, cls) {
if (!hasClass(ele, cls)) {
ele.className += ' ' + cls;
}
}/**
*
* @desc class
* @param {HTMLElement} ele
* @param {String} cls
* @return {Boolean}
*/
function hasClass(ele, cls) {
return (new RegExp('(\\s|^)' + cls + '(\\s|$)')).test(ele.className);
}/**
*
* @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.1 get Cookie
/**
*
* @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 '';
}var setCookie = require('./setCookie');
/**
*
* @desc name cookie
* @param {String} name
*/
function removeCookie(name) {
// ， cookie
setCookie(name, '1', -1);
}/**
*
* @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.1 get Explore
/**
*
* @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'
}/**
*
* @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.1 get ScrrollTop
/**
*
* @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;
}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);
});
}/**
*
* @desc
*/
function setScrollTop(value) {
window.scrollTo(0, value);
return value;
}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.1 deep Clone
/**
* @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.");
}/**
*
* @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.1ランドムColor
/**
*
* @desc
* @return {String}
*/
function randomColor() {
return '#' + ('00000' + (Math.random() * 0x1000000 << 0).toString(16)).slice(-6);
}/**
*
* @desc
* @param {Number} min
* @param {Number} max
* @return {Number}
*/
function randomNum(min, max) {
return Math.floor(min + Math.random() * (max - min));
}9.1 isEmail
/**
*
* @desc
* @param {String} str
* @return {Boolean}
*/
function isEmail(str) {
return /\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/.test(str);
}/**
*
* @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)
}/**
*
* @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)
}/**
*
* @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.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.1 isSupport WebP
/**
*
* @desc webP
* @return {Boolean}
*/
function isSupportWebP() {
return !![].map && document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') == 0;
}12.1フォーマットPassTime
/**
* @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 ' '
}/**
*
* @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.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, '":"') + '"}')
}/**
*
* @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.1スロットル
/**
* @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` `delay`ms 。
* 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;
};/**
* @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などのモジュール搭載器をサポートします.あるいは直接に通過します.
│ .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 ここでは主にプロジェクトの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
}) + '
')
resolve()
console.log(chalk.cyan(' Build complete.
'))
})
})//
//
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.
'))
copying.stop()
}
})
})
})テストの用例を書かない先端は良いプログラマではないということです.それはお勧めできません.
しかし、時間の関係で、本プロジェクトはしばらくプロジェクトのtest.jsを通して、Coa静的サーバを起動して、mochaのウェブページの端のテストページをロードして、筆者にプロジェクトを書かせる時、現地で関数の機能をテストすることができます.しかし、その後はtravis-ciを使ってGithubと連携して持続的な構築を行い、npmに自動的にリリースされます.kama、mocha、power-astertに変えてユニットテストをして、Coverageを使ってカバー率をテストします.この部分は引き続き更新します.
ここで皆さんに良い断言ライブラリpower-assetを紹介します.このライブラリはastert(value、message)一つのAPIを覚えておけば無敵です.これからはライブラリのAPIを覚えられなくなる心配がありません.
本プロジェクトのすべてのテストケースはtestディレクトリの下にありますので、ぜひ参考にしてください.
更新:ユニットテストは、既にkama、mocha、power-astertを使用して、Coverageを使用してカバー率をテストして、そしてtravis-ciを統合してGithubに協力して持続化構築しています.本プロジェクトのtravis配置ファイル.travis.ymlとkamaの配置ファイルkarma.co.jsを参照することができます.
リリース
まずGithubに保管してください.もちろんあなたも直接forkしてこのプロジェクトに参加してください.筆者のプロジェクトで栗を挙げます.
1.自分の関数を追加する
srcディレクトリでは、カテゴリを新規作成したり、カテゴリを選択したりして、サブフォルダに関数モジュールファイルを追加します.
/**
*
* @desc NaN
* @param {Any} value
* @return {Boolean}
*/
function isNaN(value) {
return value !== value;
};
modules.export = isNaN2.ユニットテスト
テスト用の例を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))
})
})3.テストと包装
npm run testを実行して、すべてのテストケースが通るかどうかを見ます.問題がなければ、npm run build構築を実行して、個人のgithub倉庫に提出すればいいです.
4.npmにリリース
wwww.npmjs.comでアカウントを登録して、当地のpackage.jsonの中のname、version、authorなどの情報を改正して、最後にnpm publishは大成功を収めました.注意:npmに発注する場合は、鏡像源をwww.npmj.comにカットし、cnpmなどの第三者のミラーソースを使用するとエラーが発生します.
使用
1.ブラウザ
minディレクトリの下のoutils.min.jsを直接ダウンロードして、通過します.
<script src="outils.min.js">script>
<script>
var OS = outils.getOS()
script>2.Webpack、RequireJS、SeaJSなどのモジュール搭載器
npmでoutilsをインストールします.
$ npm install --save-dev outils
//
const outils = require('outils')
const OS = outils.getOS()
// require('outils/')
const getOS = require('outils/getOS')
const OS = getOS()import getOS from 'outils/getOS'
//
import { getOS } from "outils";