jslib-tools
Version:
js工具库 封装常用的工具函数 如深拷贝 时间转换日期格式化、浏览器判断等，提高开发效率
371 lines (370 loc) • 20 kB
HTML
<html class="default no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>jslib-tools - v0.1.5</title>
<meta name="description" content="Documentation for jslib-tools - v0.1.5">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="assets/css/main.css">
<script async src="assets/js/search.js" id="search-script"></script>
</head>
<body>
<header>
<div class="tsd-page-toolbar">
<div class="container">
<div class="table-wrap">
<div class="table-cell" id="tsd-search" data-index="assets/js/search.json" data-base=".">
<div class="field">
<label for="tsd-search-field" class="tsd-widget search no-caption">Search</label>
<input id="tsd-search-field" type="text" />
</div>
<ul class="results">
<li class="state loading">Preparing search index...</li>
<li class="state failure">The search index is not available</li>
</ul>
<a href="index.html" class="title">jslib-tools - v0.1.5</a>
</div>
<div class="table-cell" id="tsd-widgets">
<div id="tsd-filter">
<a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a>
<div class="tsd-filter-group">
<div class="tsd-select" id="tsd-filter-visibility">
<span class="tsd-select-label">All</span>
<ul class="tsd-select-list">
<li data-value="public">Public</li>
<li data-value="protected">Public/Protected</li>
<li data-value="private" class="selected">All</li>
</ul>
</div>
<input type="checkbox" id="tsd-filter-inherited" checked />
<label class="tsd-widget" for="tsd-filter-inherited">Inherited</label>
<input type="checkbox" id="tsd-filter-externals" checked />
<label class="tsd-widget" for="tsd-filter-externals">Externals</label>
</div>
</div>
<a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a>
</div>
</div>
</div>
</div>
<div class="tsd-page-title">
<div class="container">
<h1>jslib-tools - v0.1.5</h1>
</div>
</div>
</header>
<div class="container container-main">
<div class="row">
<div class="col-8 col-content">
<div class="tsd-panel tsd-typography">
<!--
* @Author: zhangyu
* @Email: zhangdulin@outlook.com
* @Date: 2021-06-08 11:30:40
* @LastEditors: zhangyu
* @LastEditTime: 2021-08-25 15:20:59
* @Description:
-->
<p><a href="https://opensource.org/licenses/mit-license.php"><img src="https://badges.frapsoft.com/os/mit/mit.svg?v=103" alt="MIT Licence"></a>
<a href="https://www.npmjs.com/package/jslib-tools"><img src="https://img.shields.io/eclipse-marketplace/dt/notepad4e.svg" alt="Eclipse Marketplace"></a>
<img src="https://img.shields.io/npm/v/npm.svg" alt="NpmVersion"></p>
<a href="#description" id="description" style="color: inherit; text-decoration: none;">
<h3>Description:</h3>
</a>
<p>前端 js 工具库: 封装常用的工具函数，如日期格式化、浏览器判断等，提高开发效率</p>
<a href="#todo" id="todo" style="color: inherit; text-decoration: none;">
<h2>Todo</h2>
</a>
<ul>
<li>[√] 引入代码校验工具 eslint</li>
<li>[√] jsdocs typedocs 自动化生成 api 文档</li>
<li>[√] 测试覆盖率统计 coverage</li>
<li>[√] 支持Typescript</li>
<li>[√] 支持浏览器环境，node 环境、es6 环境</li>
</ul>
<a href="#如何使用" id="如何使用" style="color: inherit; text-decoration: none;">
<h3>如何使用:</h3>
</a>
<ol>
<li>直接下载 <code>dist</code> 目录下的 <code>jtools.min.js</code> 使用，支持 UMD 通用模块规范</li>
<li>使用 npm 安装</li>
</ol>
<a href="#浏览器：" id="浏览器：" style="color: inherit; text-decoration: none;">
<h4>浏览器：</h4>
</a>
<pre><code class="language-js"><span style="color: #800000"><script</span><span style="color: #000000"> </span><span style="color: #FF0000">src</span><span style="color: #000000">=</span><span style="color: #A31515">"jtools.min.js"</span><span style="color: #800000">></script></span>
<span style="color: #800000"><script></span>
<span style="color: #000000"> var result = jtools.deepCopy(</span><span style="color: #0000FF">{</span><span style="color: #001080">a</span><span style="color: #000000FF">:</span><span style="color: #098658">1</span><span style="color: #0000FF">}</span><span style="color: #000000">)</span>
<span style="color: #800000"></script></span>
</code></pre>
<a href="#npm" id="npm" style="color: inherit; text-decoration: none;">
<h4>npm:</h4>
</a>
<p><code>npm i jslib-tools</code></p>
<a href="#全部加载（webpack、requirejs、seajs-等）：" id="全部加载（webpack、requirejs、seajs-等）：" style="color: inherit; text-decoration: none;">
<h5>全部加载（webpack、RequireJS、SeaJS 等）：</h5>
</a>
<pre><code class="language-js"><span style="color: #0000FF">var</span><span style="color: #000000"> </span><span style="color: #001080">jtools</span><span style="color: #000000"> = </span><span style="color: #795E26">require</span><span style="color: #000000">(</span><span style="color: #A31515">"jslib-tools"</span><span style="color: #000000">);</span>
<span style="color: #0000FF">var</span><span style="color: #000000"> </span><span style="color: #001080">result</span><span style="color: #000000"> = </span><span style="color: #001080">jtools</span><span style="color: #000000">.</span><span style="color: #795E26">deepCopy</span><span style="color: #000000">({</span><span style="color: #001080">a:</span><span style="color: #098658">1</span><span style="color: #000000">});</span>
</code></pre>
<a href="#es6" id="es6" style="color: inherit; text-decoration: none;">
<h4>es6</h4>
</a>
<pre><code class="language-js"><span style="color: #AF00DB">import</span><span style="color: #000000"> </span><span style="color: #001080">jtools</span><span style="color: #000000"> </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">"jslib-tools"</span><span style="color: #000000">;</span>
<span style="color: #0000FF">var</span><span style="color: #000000"> </span><span style="color: #001080">result</span><span style="color: #000000"> = </span><span style="color: #001080">jtools</span><span style="color: #000000">.</span><span style="color: #795E26">deepCopy</span><span style="color: #000000">({</span><span style="color: #001080">a:</span><span style="color: #098658">1</span><span style="color: #000000">});</span>
</code></pre>
<a href="#按需加载" id="按需加载" style="color: inherit; text-decoration: none;">
<h3>按需加载</h3>
</a>
<p>结合<a href="https://github.com/Pasoul/babel-plugin-import-load">babel-plugin-import-load</a>按需加载可以极大的减小依赖包的体积</p>
<pre><code class="language-js"><span style="color: #AF00DB">import</span><span style="color: #000000"> { </span><span style="color: #001080">add</span><span style="color: #000000"> } </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">"jslib-tools"</span><span style="color: #000000">;</span>
<span style="color: #0000FF">var</span><span style="color: #000000"> </span><span style="color: #001080">result</span><span style="color: #000000"> = </span><span style="color: #795E26">deepCopy</span><span style="color: #000000">({</span><span style="color: #001080">a:</span><span style="color: #098658">1</span><span style="color: #000000">});</span>
</code></pre>
<a href="#自动化生成文档" id="自动化生成文档" style="color: inherit; text-decoration: none;">
<h4>自动化生成文档</h4>
</a>
<p><a href="http://www.css88.com/doc/jsdoc/about-configuring-jsdoc.html">JSDoc</a>是一个根据 javascript 文件中注释信息，生成 JavaScript 应用程序或库、模块的 API 文档 的工具。你可以使用他记录如：命名空间，类，方法，方法参数等。类似 JavaDoc 和 PHPDoc。现在很多编辑器或 IDE 中还可以通过 JSDoc 直接或使用插件生成智能提示。从而使开发者很容易了解整个类和其中的属性和方法，并且快速知道如何使用，从而提高开发效率，降低维护成本。
<a href="https://typedoc.org/">typedoc</a> 是根据typescript注释生成的文档</p>
<p>文件
<code>npm run typedoc</code>
api-docs: typescript 方法文档</p>
<p><code>npm run doc</code>
docs: js 方法文档</p>
<a href="#扩展" id="扩展" style="color: inherit; text-decoration: none;">
<h3>扩展</h3>
</a>
<p>如果你想添加自己的工具库，在 <code>src</code> 目录创建文件，对应 <code>test</code> 目录添加测试用例，执行 <code>npm run test</code></p>
<a href="#utils" id="utils" style="color: inherit; text-decoration: none;">
<h3>utils</h3>
</a>
<p>vue 和 常用插件 axios 封装工具类</p>
<a href="#迭代记录" id="迭代记录" style="color: inherit; text-decoration: none;">
<h3>迭代记录</h3>
</a>
<a href="#013" id="013" style="color: inherit; text-decoration: none;">
<h4>0.1.3</h4>
</a>
<pre><code><span style="color: #001080">增加</span><span style="color: #000000"> </span>
<span style="color: #001080">getHttpBase64</span><span style="color: #000000"> </span><span style="color: #001080">获取网络图片转成base64</span>
<span style="color: #001080">Regs</span><span style="color: #000000"> </span><span style="color: #001080">正则校验对象</span><span style="color: #000000"> </span><span style="color: #001080">包括手机号</span><span style="color: #000000"> </span><span style="color: #001080">邮箱等常用正则规则</span>
<span style="color: #001080">getUUID</span><span style="color: #000000"> </span><span style="color: #001080">随机字符串</span><span style="color: #000000"> </span><span style="color: #001080">前端设置唯一id</span>
<span style="color: #001080">appendJs</span><span style="color: #000000"> </span><span style="color: #001080">插入js</span><span style="color: #000000"> </span><span style="color: #001080">支持回调</span>
<span style="color: #001080">clipboardObj</span><span style="color: #000000"> </span><span style="color: #001080">复制和获取黏贴内容</span>
<span style="color: #001080">cursortPosition</span><span style="color: #000000"> </span><span style="color: #001080">获取焦点光标控制</span>
<span style="color: #001080">sleepSync</span><span style="color: #000000"> </span><span style="color: #001080">睡眠</span>
<span style="color: #001080">sleepAction</span><span style="color: #000000"> </span><span style="color: #001080">延时执行</span>
<span style="color: #001080">objTools</span><span style="color: #000000"> </span><span style="color: #001080">对象操作</span><span style="color: #000000"> </span><span style="color: #001080">判断key</span><span style="color: #000000"> </span><span style="color: #001080">对象相等</span>
<span style="color: #001080">getGlobal</span><span style="color: #000000">, </span><span style="color: #001080">setGlobal</span><span style="color: #000000">, </span><span style="color: #001080">globalLib</span><span style="color: #000000">, </span><span style="color: #001080">removeGlobalItem</span><span style="color: #000000"> </span><span style="color: #001080">window对象操作等</span>
<span style="color: #001080">arrayTools</span><span style="color: #000000"> </span><span style="color: #001080">数组相关操作</span><span style="color: #000000"> </span><span style="color: #001080">arrayToObject</span><span style="color: #000000"> </span><span style="color: #001080">数组转对象</span><span style="color: #000000"> </span><span style="color: #001080">arrayMoveMutate</span><span style="color: #000000"> </span><span style="color: #001080">数组移动位置原数组</span><span style="color: #000000"> </span><span style="color: #001080">arrayMove</span><span style="color: #000000"> </span><span style="color: #001080">数组移动位置返回新数组</span>
<span style="color: #001080">judgeTools</span><span style="color: #000000"> </span><span style="color: #001080">判断对象数组等类型方法</span>
<span style="color: #001080">byteTools</span><span style="color: #000000"> </span><span style="color: #001080">b2size</span><span style="color: #000000"> </span><span style="color: #001080">自动转换合适的单位</span><span style="color: #000000"> </span><span style="color: #001080">bytes</span><span style="color: #000000"> </span><span style="color: #001080">自定义设置转换的单位</span>
<span style="color: #001080">jsonTools</span><span style="color: #000000"> </span><span style="color: #001080">decode_url_param</span><span style="color: #000000">, </span><span style="color: #001080">json_replace</span><span style="color: #000000">, </span><span style="color: #001080">json_encode</span><span style="color: #000000">, </span><span style="color: #001080">json_decode</span><span style="color: #000000"> </span><span style="color: #001080">对象字符串转换等</span>
<span style="color: #001080">store</span><span style="color: #000000"> </span><span style="color: #001080">cookie</span><span style="color: #000000"> </span><span style="color: #001080">storage</span>
<span style="color: #000000">---</span>
<span style="color: #001080">删除</span>
<span style="color: #001080">isMobile</span>
<span style="color: #001080">b2size</span>
</code></pre>
<a href="#014" id="014" style="color: inherit; text-decoration: none;">
<h4>0.1.4</h4>
</a>
<ul>
<li>增加 </li>
</ul>
<ol>
<li>judgeTools.isJSONStringify <blockquote>
<p>判断字符串是否可以转换对象</p>
</blockquote>
</li>
<li>createWebsocket <blockquote>
<p>创建 websocket</p>
</blockquote>
</li>
<li>arrayTools.arrVals<blockquote>
<p>根据指定的键或索引抽取数组项的值</p>
</blockquote>
</li>
<li>arrayTools.arrFibonacci<blockquote>
<p>按条件产生数组 arr(5,2,2) => [2,4,6,8,10]</p>
</blockquote>
</li>
<li>objTools.alias <blockquote>
<p>给对象增加别名</p>
</blockquote>
</li>
<li>objTransfer<ol>
<li>objTransfer.toLower</li>
<li>objTransfer.toUpper</li>
<li>objTransfer.toArray</li>
<li>objTransfer.makeArray</li>
</ol>
</li>
<li>judgeTools<ol>
<li>judgeTools.isDiff<blockquote>
<p>判断对象是否相等</p>
</blockquote>
</li>
</ol>
</li>
<li>strTransfer<ol>
<li>strTransfer.trim<blockquote>
<p>方法是去掉字符串的开头和结尾的空白符</p>
</blockquote>
</li>
<li>strTransfer.titleize<blockquote>
<p> 将每个单词的首字母转换为大写</p>
</blockquote>
</li>
<li>strTransfer.camelize<blockquote>
<p>驼峰化</p>
</blockquote>
</li>
<li>strTransfer.dasherize<blockquote>
<p>中划线化</p>
</blockquote>
</li>
<li>strTransfer.escapeHTML<blockquote>
<p>将HTML特殊字符转换成等值的实体</p>
</blockquote>
</li>
<li>strTransfer.unescapeHTML<blockquote>
<p>实体字符转换为等值的HTML</p>
</blockquote>
</li>
</ol>
</li>
</ol>
<a href="#015" id="015" style="color: inherit; text-decoration: none;">
<h4>0.1.5</h4>
</a>
<ul>
<li>增加 </li>
</ul>
<ol>
<li>objTools <ol>
<li>objTools.extend <blockquote>
<p>源对象(source)的所有可枚举且目标对象(target)不存在的属性, 复制到目标对象</p>
</blockquote>
</li>
<li>objTools.toMap <blockquote>
<p>将数组或类数组转换为键值对 eg: ['a','b'] => {a:0,b:1}</p>
</blockquote>
</li>
<li>objTools.toObjectMap <blockquote>
<p>将对象数组转换为键值对 eg: [{name:'a',value:1},{name:'b',value:2}] => {a:1,b:2}</p>
</blockquote>
</li>
<li>objTools.getChangedData <blockquote>
<p>将目标对象中和源对象值不同的数据作为键值对返回</p>
</blockquote>
</li>
</ol>
</li>
</ol>
<a href="#016" id="016" style="color: inherit; text-decoration: none;">
<h4>0.1.6</h4>
</a>
<ul>
<li>增加 </li>
</ul>
<ol>
<li>objTools <ol>
<li>objTools.objectConversionToList <blockquote>
<p>目标和对象组合转换成数组 target{name:'1',age:'58'} && formattedObject{name:'你好',age:'年龄'} => [{label:'你好':,value:'1'},{label:'年龄':,value:'58'}]</p>
</blockquote>
</li>
<li>objTools.objectToArray <blockquote>
<p>判断对象转换数组</p>
</blockquote>
</li>
<li>objTools.sortMapByKey <blockquote>
<p>根据对象的key排序 默认顺序</p>
</blockquote>
</li>
</ol>
</li>
<li>judgeTools<ol>
<li>judgeTools.isObjEmpty <blockquote>
<p>判断对象 或者 数组是否是空</p>
</blockquote>
</li>
<li>judgeTools.compareSize <blockquote>
<p>判断大小 用来sort等 返回 -1 0 1</p>
</blockquote>
</li>
</ol>
</li>
<li>strTransfer <ol>
<li>strTransfer.toSimplifiedChinese <blockquote>
<p>阿拉伯数字转换为简写汉字</p>
</blockquote>
</li>
</ol>
</li>
</ol>
</div>
</div>
<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
<nav class="tsd-navigation primary">
<ul>
<li class=" ">
<a href="modules.html">Exports</a>
</li>
<li class=" tsd-kind-module">
<a href="modules/arithmetic_queue.html">arithmetic/queue</a>
</li>
<li class=" tsd-kind-module">
<a href="modules/color_iscolor.html">color/is<wbr>Color</a>
</li>
<li class=" tsd-kind-module">
<a href="modules/obj_window.html">obj/window</a>
</li>
<li class=" tsd-kind-module">
<a href="modules/plugins.html">plugins</a>
</li>
<li class=" tsd-kind-module">
<a href="modules/reg.html">reg</a>
</li>
<li class=" tsd-kind-module">
<a href="modules/reg_isemoji.html">reg/is<wbr>Emoji</a>
</li>
<li class=" tsd-kind-module">
<a href="modules/reg_isidcard.html">reg/isIDCard</a>
</li>
<li class=" tsd-kind-module">
<a href="modules/reg_isspecialchar.html">reg/is<wbr>Special<wbr>Char</a>
</li>
<li class=" tsd-kind-module">
<a href="modules/transfer_bytes.html">transfer/bytes</a>
</li>
<li class=" tsd-kind-module">
<a href="modules/url.html">url</a>
</li>
</ul>
</nav>
<nav class="tsd-navigation secondary menu-sticky">
<ul class="before-current">
</ul>
</nav>
</div>
</div>
</div>
<footer>
<div class="container">
<h2>Legend</h2>
<div class="tsd-legend-group">
<ul class="tsd-legend">
<li class="tsd-kind-variable"><span class="tsd-kind-icon">Variable</span></li>
<li class="tsd-kind-function"><span class="tsd-kind-icon">Function</span></li>
</ul>
<ul class="tsd-legend">
<li class="tsd-kind-class"><span class="tsd-kind-icon">Class</span></li>
</ul>
</div>
</div>
</footer>
<div class="overlay"></div>
<script src="assets/js/main.js"></script>
</body>
</html>