整理的一些前端经常用的功能。含有时间戳、U

bulletTool

created at 2017.11.6

整理的一些前端经常用的功能。含有时间戳、URL参数、cookie操作、AJAX、scrollPage、图片压缩、base64转换file/blob对象、灰度图转彩色、Dom对象操作。持续更新....

latest - 2019.8.2 - bulletTool-3.0.1

对项目进行重构, 对npm项目更为合理. HTTPRequest支持node终端请求, Time增加了时间值格式化. 使用单独的test.js进行测试. `npm test` 即可进行测试.

使用:

// 引入 const Bullet = require('bullettool') // import Bullet from 'bullettool' const cookie = new Bullet.Cookie(); cookie.getCookies(); const dom = new Bullet.Dom(); dom.toHtml({ tagName: 'p', html: 'hello world!', }); const http = new Bullet.HttpRequest(); http.request({ url: 'http://ydgf.sohu.com/schedule/index.json', dataType: 'json', }).then(res => { console.info(`function request(): \n${JSON.stringify(res)}\n\n`); }).catch(err => { console.error(`function request() has error: \n${err}`); }); const image = new Bullet.Image(); image.zipImage({ imgSrc: '', }); new Bullet.ScrollPage({ el: null }); const time = new Bullet.Time(); console.log(`timestamp():\n${time.timestamp()}`); console.log(`timestamp10():\n${time.timestamp10()}`); console.log(`dateFormat():\n${time.dateFormat()}`); console.log(`timeFormat(1232221):\n${time.timeFormat(1232221)}`); const url = new Bullet.Url(); console.log(`getParams():\n${JSON.stringify(url.getParams())}`); console.log(`toUrl():\n${url.toUrl()}`);

说明:

Cookie

declare class Cookie { public toCookieString(): string; // 获取当前页面cookie字符串 public getCookies(): any; // 获取当前页面cookie并转化为对象 public getCookie(name: string): string | any; // 获取指定键名的cookie值 public setCookie(key: string, value: any, exdays?: number): any; // 设置新的cookie键名及值 public deleteCookie(name: string): boolean | any; // 删除指定键名的cookie值 } Dom

interface BulletDOMAttribute { name: string, // Dom属性名称 value: string | boolean | number | object | function | any, // Dom属性值 } interface BulletDOMObject { tagName?: string, // html标签 attr?: BulletDOMAttribute[], // html标签属性 html?: string, // html标签文字内容 children?: BulletDOMObject[], // 子html标签 } declare class Dom { public async toJson(el: HTMLElement | any): BulletDOMObject; // 将对应html元素转换为对象 public async toHtml(obj: BulletDOMObject | any): HTMLElement; // 将对应对象转换为html元素 public async createDom(obj: BulletDOMObject | any, el?: HTMLElement): void; // 创建DOM元素 } HttpRequest

interface HttpRequestOptions { url?: string, // 请求地址 type?: string, // 请求类型[get|post|put|delete] dataType?: string, // 数据类型[json|text|blob|arraybuffer] data?: object, // 请求数据 headers?: object, // 请求头 protocol?: string, // 请求协议[http|https] hostname?: string, // 请求主机地址 port?: number, // 请求主机端口 path?: string, // 请求文件路径 method?: string, // 请求方式[get|post|put|delete] } declare class HttpRequest { public request(opts: HttpRequestOptions): Promise<string | Blob | ArrayBuffer | object | any>; // 请求指定主机 并返回promise结果 } Time

declare class DateUtil { timestamp(...dateArgs?: []): number; // 获取当前或者指定date时间戳(毫秒) timestamp10(...dateArgs?: []): number; // 获取当前或者指定date时间戳(秒) dateFormat(...dateArgs?: [], format?: string): string; // 转换当前或指定date时间为指定格式化字符串 timeFormat(timestamp?: number): string; // 转化指定毫秒或秒时间值为格式化字符串 } Image

interface ImageZipOptions { imgSrc: string, // 图片地址或base64地址 width?: number, // 指定压缩宽度 height?: number, // 指定压缩高度 quality?: number, // 指定压缩等级[0-1] fileType?: string, // 指定文件格式[jpeg|png|bmp] done?: (base64: string) => {}, // 事件完成回调函数 } interface ImageGrayOptions { imgSrc: string, // 图片地址或base64地址 done?: (base64: string) => {}, // 事件完成回调函数 } declare class Image { zipImage(opt: ImageZipOptions): void; // 压缩图片 toFileBlob(dataURI: string, type?: number): File | Blob; // 转化图片为blob格式或者file格式 Gray2ColorImage(opt: ImageGrayOptions): void; // 转化图片为灰色 } Url

declare class UrlUtil { getParams(path?: string): any; // 获取传入地址的queryParams toUrl(KVobject?: any): string; // 将key-value对象转化成地址 } ScrollPage

interface ScrollPageOptions { el: HTMLElement | any, // 传入的html元素 scrollUp?: Function, // 上滑事件回调 scrollDown?: Function, // 下滑事件回调 scrolling?: Function, // 滑动过程回调 } declare class ScrollPage { constructor(opts: ScrollPageOptions); }

参考:

release-1.2.2 - 2019.3.17 - bulletTool-1.2.2

对项目进行更新，修复Dom、Url组件的BUG，并且将HttpRequest组件改成了Promise的方式进行状态返回。 并使用mocha和chai组件编写组件的测试方案。

使用：

说明：

参考：

正则表达式学习 release-1.2.1 - 2018.9.23 - bulletTool-1.2.1

对项目进行重构，使用webpack构建和管理项目，将各功能插件化，主入口js统一调用。使用方法有些发生变化。

新增功能：dom结构与json序列化相互转换，Dom类。

使用：

const time = new bullet.Time('2018-4-30'); time.timestamp(); //获取十三位时间戳，精确到毫秒 time.timestamp_10(); //获取十位时间戳，精确到秒 time.timeFormat(timestamp, 'yyyy mm dd HH:MM:SS'); //将时间戳转化为格式化字符串，y:年;m:月;d:日;H:时;M:分;S:秒; const url = new bullet.Url(); url.getParams("https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&tn=25017023_10_pg"); //将URL地址转换为对象 url.toUrl({ k: "value1", k2: "value2", // ... more params }); //将对象参数转换为URL参数，不含'?' const cookie = new bullet.Cookie(); cookie.getCookies(); //获取当前页面的所有cookie，以对象形式返回 cookie.getCookie('key'); //获取当前页面的键名为'key'的cookie，返回值内容 cookie.setCookie('key', 'value', exdays); //为当前页面添加键值分别为'key','value'的cookie条目，并设置有效时间为exdays（数字），返回新的页面cookie对象形式 cookie.deleteCookie('key'); //删除当前页面的键名为'key'的cookie，返回新的页面cookie对象形式 const request = new bullet.HttpRequest({ type: 'GET', //请求类型：GET,POST,PUT,DELETE url: 'https://github.com/BulletYuan/', //请求地址 dataType: 'JSON', //返回值类型：JSON,XML data: { a: 'a1' }, //请求数据，对象形式 header: { 'Content-Type': 'application/json;charset=UTF-8' }, //请求header自定义，对象形式 }); // 返回Promise request .then(res => { console.log(res) }) // 请求成功 .catch(err => { console.err(err) }); // 发生异常 const scroll = new bullet.ScrollPage(); scroll({ el: document.getElementsByTagName('body').item(0), //需要监听下滑或上拉事件的元素不传该值，则默认为监听"body" scorllUp: function(e) {}, //页面上拉加载更多事件 scorllDown: function(e) {}, //页面下滑刷新数据事件 scorlling: function(e) {} //页面下滑过程事件 }); const image = new bullet.ImageTool(); image.zipImage({ //图片压缩 imgSrc: "", //图片地址或base64码（必填参数） width: 200, //图片压缩宽度，优先高度，按照宽高比缩放高度 height: 200, //图片压缩高度，按照高宽比缩放宽度 quality: 0.7, //图片压缩质量，0-1数字，默认为0.7 fileType: "jpeg", //图片文件类型，默认为jpeg done: (base64) => { //压缩成功回调方法，传入压缩图片base64码 console.log(base64); } }); image.toFileBlob(base64, 0) //base64码转换成file对象或blob对象，方便上传 0 转换为blob对象 1 转换为file对象 image.Gray2ColorImage({ //灰度图转彩色 imageSrc: "", //图像资源url colorMap: "", //灰度图对应彩色的色标图 }); const dom = new bullet.Dom(); dom.toJson(document.querySelector('body')) // 将dom对象转换成object .then(json => { console.log(json); }) .catch(err => { console.err(err); }); dom.toHtml(json) // 通过object转译为html代码 .then(html => { console.log(html); }) .catch(err => { console.err(err); }); dom.createDom(json, parentDom) // 通过object创建新的Dom对象 .then(() => { // finished JsonToDom }) .then(() => { // finished parentDom append Dom }) .catch(err => { console.err(err); });

说明:

参考:

js时间格式化正则表达 pro-release - 2018.9.14 - bulletTool-1.1.4

使用:

timestamp() //获取十三位时间戳，精确到毫秒 timestamp_10() //获取十位时间戳，精确到秒 timeFormat({ ts: timestamp, format: 'yyyy mm dd HH:MM:SS' }) //将时间戳转化为格式化字符串，y:年;m:月;d:日;H:时;M:分;S:秒;

url.getParams({ url: 'https://github.com/BulletYuan/?a=a1' }) //将URL参数（若没有则获取当前页面的网址）后的search部分，转换为对象 url.toUrl({ a: a1 }) //将对象参数（若没有则获取上一次网址转化为对象的结果）转换为URL参数，不含'?'

cookie.getCookies() //获取当前页面的所有cookie，以对象形式返回 cookie.getCookie('key') //获取当前页面的键名为'key'的cookie，返回值内容 cookie.setCookie('key', 'value', exdays) //为当前页面添加键值分别为'key','value'的cookie条目，并设置有效时间为exdays（数字），返回新的页面cookie对象形式 cookie.deleteCookie('key') //删除当前页面的键名为'key'的cookie，返回新的页面cookie对象形式

ajax({ type: 'GET', //请求类型：GET,POST,PUT,DELETE url: 'https://github.com/BulletYuan/', //请求地址 dataType: 'JSON', //返回值类型：JSON,XML async: true, //请求异步标识：true,false data: { a: 'a1' }, //请求数据，对象形式 header: { Content - Type: 'application/json;charset=UTF-8' }, //请求header自定义，对象形式 success: (res, status, readyState) => { console.log(res, status, readyState) }, //请求成功回调函数，res:返回内容; //status:(200: "OK" //404: 未找到页面 //500：服务器内部错误 //(其余对应服务器状态码)); //readyState:(0: 请求未初始化 //1: 服务器连接已建立 //2: 请求已接收 //3: 请求处理中 //4: 请求已完成，且响应已就绪); error: (status, readyState) => { console.log(status, readyState) } //请求失败回调函数， //status:(200: "OK" //404: 未找到页面 //500：服务器内部错误 //(其余对应服务器状态码)); //readyState:(0: 请求未初始化 //1: 服务器连接已建立 //2: 请求已接收 //3: 请求处理中 //4: 请求已完成，且响应已就绪); })

scrollPage({ el: document.getElementsByTagName('body').item(0), //需要监听下滑或上拉事件的元素不传该值，则默认为监听"body" scorllUp: function(e) {}, //页面上拉加载更多事件 scorllDown: function(e) {}, //页面下滑刷新数据事件 scorlling: function(e) {} //页面下滑过程事件 })

bullet.zipImage({ //图片压缩 imgSrc: "", //图片地址或base64码（必填参数） width: 200, //图片压缩宽度，优先高度，按照宽高比缩放高度 height: 200, //图片压缩高度，按照高宽比缩放宽度 quality: 0.7, //图片压缩质量，0-1数字，默认为0.7 fileType: "jpeg", //图片文件类型，默认为jpeg done: (base64) => { //压缩成功回调方法，传入压缩图片base64码 console.log(base64); } })

bullet.toFileBlob(base64, 0) //base64码转换成file对象或blob对象，方便上传 0 转换为blob对象 1 转换为file对象

new bullet.Gray2ColorImage({ //灰度图转彩色 imageSrc: "", //图像资源url colorMap: "", //灰度图对应彩色的色标图 })

参考:

js实现ajax