自分のJavaScript武器庫を作る
10641 ワード
前言
業務の最前線での戦いの先として、残業を少なくするには、仕事の効率を高める工夫が必要です.ここでは、ビジネス開発の過程で、日付フォーマット、urlパラメータのオブジェクトの転送、ブラウザのタイプの判断、節流関数などの関数を繰り返し使用しています.これらのツール類の関数は、基本的には各項目で使用されます.開発効率を向上させる.
常用関数のまとめ
ここでは先に分類して整理して、以前のプロジェクトで何回も使われたツール関数です.
1.アラy
1.1 arrayEqual
2.1 addClass
3.1 get Cookie
4.1 get Explore
上記のような一般的な関数を実装する以外に、最も重要なのは合理化の導入をサポートすることであり、ここでは
しかし、これではやはり満足できません.全部のライブラリを導入したので、少し浪費しました.私たちはすべての関数を使うことができません.じゃ、必要に応じて導入します.
1.ディレクトリ構造説明
ここでは主に、プロジェクトの
テストの を かない は いプログラマではないということです.それはお めできません.
しかし、 な のため、 プロジェクトは にプロジェクトの
ここでは、 な ライブラリ
リリース
まず
1. の を する
2.ユニットテスト
3.テストと
4.npmにリリース
1.ブラウザ
業務の最前線での戦いの先として、残業を少なくするには、仕事の効率を高める工夫が必要です.ここでは、ビジネス開発の過程で、日付フォーマット、urlパラメータのオブジェクトの転送、ブラウザのタイプの判断、節流関数などの関数を繰り返し使用しています.これらのツール類の関数は、基本的には各項目で使用されます.開発効率を向上させる.
常用関数のまとめ
ここでは先に分類して整理して、以前のプロジェクトで何回も使われたツール関数です.
1.アラy
1.1 arrayEqual
/**
*
* @desc
* @param {Array} arr1
* @param {Array} arr2
* @return {Boolean}
*/
function arrayEqual(arr1, arr2) {
if (arr1 === arr2) retur 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');
fuction 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'
}
上記のような一般的な関数を実装する以外に、最も重要なのは合理化の導入をサポートすることであり、ここでは
webpackを使用して統一的にUMD共通のモジュール仕様に包装し、webpack、RequireJSなどのモジュール搭載器をサポートしたり、SeaJSタグを通して直接導入したりします.しかし、これではやはり満足できません.全部のライブラリを導入したので、少し浪費しました.私たちはすべての関数を使うことができません.じゃ、必要に応じて導入します.
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
│
clas.test.js
│ cookie.test.js
│ device.test.js
│ dom.test.js
│ index.html
│ keycode.test.js
│
objec.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ディレクトリに する. ......
......
//
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()
pocess.stdout.write(stats.toString({
colors: true,
modules: false,
children: false,
chunks: false,
chunkModules: false
}) + '
')
resolve()
console.log(chalk.cyan(' Build complete.
'))
})
})
......
......
minの の のディレクトリのすべてのsrcファイルをルートディレクトリにコピーする.これはルートにコピーし、 に js('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.
'))
copying.stop()
}
})
})
})
......
......
テストの を かない は いプログラマではないということです.それはお めできません.
しかし、 な のため、 プロジェクトは にプロジェクトの
requireを して、test.js サーバを して、koaページの のテストページをロードして、 にプロジェクトを かせる 、 で をテストすることができます.しかし、その は、mochaと してtrvis-ciを いて に され、Githubに に される.npmに り えて、karma、mochaでユニットテストをして、power-assertを ってカバー をテストします.この は き き します.ここでは、 な ライブラリ
Coverageを します.このライブラリはpower-assert のassert(value,[message])を えています.APIは に です.これからはもう しなくても です. プロジェクトのすべてのテストケースはAPI tディレクトリの にあります.リリース
まず
tesに けてください.もちろんGithub のプロジェクトに に してもいいです. のプロジェクトで を げます.1. の を する
forkディレクトリの で、 ディレクトリを したり、カテゴリを したりして、サブフォルダに モジュールファイルを します.**
*
* @desc NaN
* @param {Any} value
* @return {Boolean}
*/
function isNaN(value) {
return value !== value;
};
modules.export = isNaN
srcファイルでisNaN を したことを えてください.2.ユニットテスト
JSファイルの 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))
})
})
src/index.jsに される に されたテストケーススクリプトを する.3.テストと
testを して、すべてのテストケースが るかどうかを ます. がなければ、test/index.htmlを して し、 のnpm run test に すればいいです.4.npmにリリース
npm run buildでアカウントを し、githubの のwww.npmjs.com、package.json、nameなどの を して、 にversionが きな を めました. :authorに して、ミラーソースをnpm publishに るには、npmなどの のミラーソースを するとエラーが します.1.ブラウザ
www.npmjs.comディレクトリ のcnpmを ダウンロードしてminタグで します.var OS = outils.getOS() 注意： 本仓库代码会持续更新，如果你需要不同版本的增量压缩包或源码，请到
github Release页面下载对应版本号的代码。2.Webpack、RequireJS、SeaJS等模块加载器
先使用
npm安装outils。おすすめの使い方$ npm install --save-dev outils // const outils = require('outils') const OS = outils.getOS()もちろん、あなたの開発環境にはバルベルコンパイルES 6文法があります.// require('outils/') const getOS = require('outils/getOS') const OS = getOS()締め括りをつけるimportgetOS from'outils/getOS' // import { getOS } from"outils";
ここでは簡単なパッケージだけで、outils.min.jsに公開されています.次のコピー貼り付けの手間を省きます.または直接の です. をよくしようとするなら、まず を することです. なりの があれば、 しても みになります.O(∩∩)Oははは～