前言
作为战斗在业务一线的前端，要想少加班，就要想办法提高工作效率。这里提一个小点，我们在业务开发过程中，经常会重复用到 日期格式化、 url参数转对象、 浏览器类型判断、 节流函数等一类函数，这些工具类函数，基本上在每个项目都会用到，为避免不同项目多次复制粘贴的麻烦，我们可以统一封装，发布到 npm，以提高开发效率。
常用函数汇总
这里先分类整理下，之前项目中多次用到的工具函数。
1.Array
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.Class
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;
}
}
2.2 hasClass
/**
*
* @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'
}
封装
除了对上面这些常用函数进行封装， 最重要的是支持合理化的引入，这里我们使用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
│
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
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()
pocess.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目录下，大家可以作一定参考。
发布
首先放到 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>标签引入。
<script src="outils.min.js"></script>
<script>
var OS = outils.getOS()
</script>
注意： 本仓库代码会持续更新，如果你需要不同版本的增量压缩包或源码，请到 github Release 页面下载对应版本号的代码。
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()
当然，你的开发环境有 babel编译 ES6语法的话，也可以这样使用：
importgetOS from'outils/getOS'
// 或
import { getOS } from"outils";
总结
这里只是简单封装，发布到npm上，省去下次复制粘贴的功夫，或者直接Goole的时间。
工欲善其事必先利其器。有了属于自己的这把利器，希望加班也会变成奢望。O(∩_∩)O哈哈~
网友评论