Git Product home page Git Product logo

outils's Introduction

outils

outils

npm Build Status Coverage LICENSE MIT

前端业务代码工具库

目的:高效率完成前端业务代码

业务开发过程中,会经常用到日期格式化url参数转对象浏览器类型判断节流函数等常用函数,为避免不同项目多次复制粘贴的麻烦,这里统一封装,并发布到npm,以提高开发效率。如果你也有常用的代码,欢迎为本项目提交pr。

🏗️ 安装使用

  1. 直接下载min目录下的outils.min.js使用,支持UMD通用模块规范
  2. 使用npm安装

浏览器:

  <script src="outils.min.js"></script>
  <script>
      var OS = outils.getOS()
  </script>

npm:

$ npm install --save-dev outils

webpack、RequireJS、SeaJS等

// 完整引入
const outils = require('outils')
const OS = outils.getOS()

推荐使用方法

你真的不需要完整引入所有函数,所以只引入需要使用的方法即可。

// 只引入部分方法('outils/<方法名>')
const getOS = require('outils/getOS')
const OS = getOS()

📦 API文档

Array

  arrayEqual  判断两个数组是否相等

Class

  addClass  为元素添加class

  hasClass  判断元素是否有某个class

  removeClass  为元素移除class

Cookie

  getCookie  根据name读取Cookie

  removeCookie  根据name删除Cookie

  setCookie  添加Cookie

Device

  getExplore  获取浏览器类型和版本号

  getOS  获取操作系统类型

Dom

  getScrollTop  获取滚动条距顶部的距离

  offset  获取一个元素的距离文档(document)的位置,类似jQ中的offset()

  scrollTo  在${duration}时间内,滚动条平滑滚动到${to}指定位置

  setScrollTop  设置滚动条距顶部的距离

  windowResize  H5软键盘缩回、弹起回调

Function

  debounce  函数防抖

  throttle  函数节流

Keycode

  getKeyName  根据keycode获得键名

Object

  deepClone  深拷贝,支持常见类型

  isEmptyObject  判断Object是否为空

Random

  randomColor   随机生成颜色

  randomNum  生成指定范围随机数

Regexp

  isColor  判断是否为16进制颜色,rgb 或 rgba

  isEmail  判断是否为邮箱地址

  isIdCard  判断是否为身份证号

  isPhoneNum  判断是否为手机号

  isUrl  判断是否为URL地址

String

  digitUppercase  现金额转大写

Support

  isSupportWebP  判断浏览器是否支持webP格式图片

Time

  formatPassTime  格式化${startTime}距现在的已过时间

  formatRemainTime  格式化现在距${endTime}的剩余时间

  isLeapYear  判断是否为闰年

  isSameDay  判断是否为同一天

  timeLeft  计算${startTime - endTime}的剩余时间

  monthDays  获取指定日期月份的总天数

Url

  parseQueryString  url参数转对象

  stringfyQueryString  对象序列化

outils's People

Contributors

btea avatar dependabot[bot] avatar mtsee avatar proyang avatar rabbitzzc avatar yangcheng0121 avatar zhangxiaoshang avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

outils's Issues

parseQueryString

return JSON.parse('{"' + decodeURIComponent(search).replace(/"/g, '\"').replace(/&/g, '","').replace(/=/g, '":"') + '"}')

decodeURIComponent 过早了吧,
& , = 特殊字符
JSON.parse 之后 枚举处理吧

production分支是干什么用的

deploy:
...
on:
branch: production
我看文档也不是很理解on 到底是干什么用的,看你的项目分支里面也有production.能稍微给我讲解一下吗?本人有点菜,诚心学习.先谢谢了

assert.notEqual

assert.notEqual(outils.arrayEqual([0, 2, 3, 4], [1, 2, 3])) ,不管outils.arrayEqual()返回的结果是true或者false,这个测试应该都是可以通过的吧.
assert.notEqual() 我看api 好像不是这样用的.
大神能给解惑一下吗,是不是我的理解有误

index.js优化建议

现在需要手动一个个require,我自己改成了自动require,代码如下,亲测没问题。

/**
 * @desc webpack打包入口文件
 */
let moduleExports = {};

const r = require.context('./', true, /^\.\/.+\/.+\.js$/);
r.keys().forEach(key => {
    let attr = key.substring(key.lastIndexOf('/') + 1, key.lastIndexOf('.'));
    moduleExports[attr] = r(key);
});

module.exports = moduleExports;

萌新飘过

我会经常用到一个通过“省份.城市”获取其经纬度,这个需要吗? @proYang

.travis.yml疑问

  provider: npm
  email: "$NPM_EMAIL"
  api_key: "$NPM_TOKEN"
  skip_cleanup: true

我也是这么写的,不过travis 报错了,我看官方文档里面email和api_key都是直接写出来的,请教该怎么写

关于 arrayEqual 的一些意见。

不知道主人是想做 shadow equal 还是 deep equal,感觉是两种都想实现,但都实现得不太好。想法如下,如果有错误的还请指出,一起进步哈🙃

首先,如果是第一行代码:

if (arr1 === arr2) return true;

这行代码貌似是想来个 shadow equal,就是只比较两数组引用相等,而不是两个数组的每个值相等。

然后呢,后面的几行代码又有点想做deep equal的味道,就是比较两个数组每个值都相等,那么他们相等。

所以建议写两个equal 函数:

// arrayShadowEqual.js
function arrayShadowEqual(arr1, arr2) {
  if (arr1 === arr2) return true;
  return false;
}
// arrayDeepEqual.js
function arrayDeepEqual(arr1, arr2) {
  if (arr1.length !== arr2.length) {
    return false;
  }
  for (var i = 0; i < arr1.length; i++) {
    if (arr1[i] !== arr2[i]) {
      return false;
    }
  return true;
}

再提一个小建议哈, JavaScript中不等应该要坚持使用 !==
(完)

randomNum.js有错误

假设范围为(2,10),即min = 2,max = 10;
这时用 Math.floor(Math.random() * (max-min) + min)去求值是有错误的,因为永远输出不了10.
Math.random() * (max-min) = Math.random * 8,最大不可能为8,同理Math.floor(Math.random() * (max-min) + min)不可能输出10.
正确代码为:
Math.floor(Math.random() * (max-min+1) )+ min;

关于getOS()返回系统类型不正确

我测试了一下,如果把返回pc端的语句放在返回移动端的语句前面,这样无论是在pc端还是移动端,这样都只会返回pc端的类型,因此需要把移动端的返回语句提前,这样,先检查移动端类型后,再检查pc端的类型,这样比较准确,下面是我改完之后的代码,亲测返回准确,希望采纳

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 (/iphone/i.test(userAgent) || /ipad/i.test(userAgent) || /ipod/i.test(userAgent)) return 'ios';
  if (/win/i.test(appVersion) && /phone/i.test(userAgent)) return 'WindowsPhone'; 
  //WindowsPhone一定要放在Android前面,否则使用WindowsPhone设备时,还是会返回Android
  if (/android/i.test(userAgent)) return 'Android';
  if (/mac/i.test(appVersion)) return 'MaxOSX';
  if (/win/i.test(appVersion)) return 'Windows';
  if (/linux/i.test(appVersion)) return 'Linux';
}

判断是否有传参为何需要先判断url==null

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, '":"') + '"}')
}
以上这个方法为什么不直接写出url = url || window.location.href? 这样做是有什么好处吗?

formatPassTime 倒计时时间一点想法

我之前一直想封装一个获取倒计时的函数。
计算天、时、分、秒、毫秒。这些都没问题。
计算剩余年、月感觉太复杂,就不了了之了。

楼主这个我大概看了一下,月按30天算的,年按12个月算的。只能是个大致的时间。然而,作为一个强迫症患者,需要知道未来的一个时间距离现在的准确年月日时分秒
仅仅一点小建议~~~

getCookie bug =字符问题

setCookie 的value 包含=号的时候,比如base64的asdasd==
getCookie 会把=号去除,变成asdasd

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.