Install
- commonjs
- browser
- babel
framework
说明
- polyfill
dom
date
utils
string
crypt
animationFrame
net
jquery
- 常用
- 事件.
- 遍历

febs 库是一些常用的工具的合集;

febs实现了jquery的常用方法(dom操作/事件/css/遍历等), 当页面引入febs前如果未引入jquery, 会自动设置全局变量 $ 为内部实现的jquery相关方法.

大多数场景下可以使用febs库代替jquery, 而解决jquery臃肿的问题.

兼容ie9及以上浏览器

支持微信小程序 (暂时不支持dom库)

Install

Use npm to install:

npm install febs-browser --save

发布包位置在febs-browser/dist下, 提供如下两种不同体积的发布包:

类型	路径
不包含BigNumber相关的库 (体积较小)	`febs-browser`
包含BigNumber相关的库	`febs-browser/dist/index.noBignumber.min.js`

同时提供如下三种模式的库:

类型	文件名规则
umd	`dist/index.js`, `dist/index.noBignumber.js`
commonjs	`dist/index.common.js`, `dist/index.noBignumber.common.js`
esm	`dist/index.esm.js`, `dist/index.noBignumber.esm.js`

commonjs

以下列方式使用

var febs = require('febs-browser');

//
febs.string.replace();

browser

以下列方式使用

copy directory node_modules/febs/dist/index.min.js to client

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />  <!-- 如ie9等早期浏览器提示使用最新渲染器 -->
<script charset='UTF-8' type="text/javascript" src="path/dist/index.min.js"></script>

<script>
febs.string.replace();
</script>

babel

以下列方式使用

import * as febs from 'febs-browser'; // 使用febs的客户端部分代码.

//
febs.string.replace();

framework

dom
date
utils
string
crypt
animationFrame
net
jquery $

说明

定义了如下一些全局变量

name	description
__line	当前所在行, 可以配合 __filename 定位错误日志
__debug	判断当前的环境process.env.NODE_ENV是否为development, 如对此值设置后, 使用设置后的值.
console.debug	development 环境下输出日志

其他

函数调用使用 类名.xxx 的方式调用, 例如: febs.utils.browserIsMobile()
对早期的浏览器定义了window.requestAnimationFrame和window.cancelAnimationFrame方法,可进行动画帧操作.
对早期的浏览器添加了Promise支持.

polyfill

name
promise.finally
console
fetch
AnimationFrame

dom

  /**
  * @desc: 获得视口大小.
  * @return: {width, height}
  */
  febs.dom.getViewPort():{width:number, height:number};

  /**
  * @desc: 获得文档大小.
  * @return: {width, height}
  */
  febs.dom.getDocumentPort():{width:number, height:number};

  /**
  * @desc: 获得document scroll offset.
  * @return: {top, left}
  */
  febs.dom..getDocumentOffset():{top:number, left:number};

  /**
  * @desc: 获取指定元素相对于视口的的offset
  * @return: 
  */
  febs.dom.getElementOffset(e:any):{left:number, top:number};
  /**
  * @desc: 判断是否是dom对象.
  * @return: boolean.
  */
  febs.dom.isDom(e: any): boolean;
  /**
  * @desc: 统一处理 addEventListener, attachEvent; 并提供useCapture参数问题.
  */
  febs.dom.addEventListener(domElement:any, event:string, func:any, useCapture?:boolean):null;
  /**
  * @desc: 统一处理 removeEventListener, detachEvent; 并提供useCapture参数问题.
  */
  febs.dom.removeEventListener(domElement:any, event:string, func:any, useCapture?:boolean):null;

date

date库包含了一些常用的时间操作库, 如验证时间对象是否有效等.

  /**
  * @desc: 判断是否是有效时间.
  */
  febs.date.isValidate(date: Date): boolean;

  /**
   * @desc: 获取时间的string.
   * @param localtime: ms.
   * @param fmt: 格式化, 默认为 'HH:mm:ss'
   *             年(y)、月(M)、日(d)、12小时(h)、24小时(H)、分(m)、秒(s)、周(E)、季度(q)
   *              'yyyy-MM-dd hh:mm:ss.S' ==> 2006-07-02 08:09:04.423
   *              'yyyy-MM-dd E HH:mm:ss' ==> 2009-03-10 星期二 20:09:04
   *              'yyyy-M-d h:m:s.S'      ==> 2006-7-2 8:9:4.18
   * @param weekFmt: 星期的文字格式, 默认为 {'0':'星期天', '1': '星期一', ..., '6':'星期六'}
   * @return: string.
   */
  febs.date.getTimeString(localtime: number, fmt: string, weekFmt: WeekFmt): string;

  /**
   * @desc: 获取时间的协调世界时间 string.
   * @param localtime: ms. (本地时间)
   * @param fmt: 格式化, 默认为 'HH:mm:ss'
   *             年(y)、月(M)、日(d)、12小时(h)、24小时(H)、分(m)、秒(s)、周(E)、季度(q)
   *              'yyyy-MM-dd hh:mm:ss.S' ==> 2006-07-02 08:09:04.423
   *              'yyyy-MM-dd E HH:mm:ss' ==> 2009-03-10 星期二 20:09:04
   *              'yyyy-M-d h:m:s.S'      ==> 2006-7-2 8:9:4.18
   * @param weekFmt: 星期的文字格式, 默认为 {'0':'星期天', '1': '星期一', ..., '6':'星期六'}
   * @return: string.
   */
   febs.date.getUTCTimeString(localtime: number, fmt: string, weekFmt: WeekFmt): string;

  /**
   * @desc: 获取指定时间距离现在的时间描述.
   *        例如, 昨天, 1小时前等.
   * @param localtime: ms. 小于当前时间, 大于当前时间将显示为 '刚刚';
   * @param strFmt: 需要显示的文字. 
   *                默认为 {
   *                        now:    '刚刚',           // 3秒钟以内将显示此信息.
   *                        second: '秒前',
   *                        minute: '分钟前',
   *                        hour:   '小时前',
   *                        day_yesterday: '昨天',
   *                        day:    '天前',
   *                        month:  '个月前',          // 6个月内将显示此信息.
   *                        time:   'yyyy-M-d h:m:s'  // 超过6个月将使用此格式格式化时间
   *                       }
   * @return: string.
   */
  febs.date.getTimeStringFromNow(localtime: number, strFmt: string): string;

  /**
   * @desc: getDate('2012-05-09')
   * @return: Date.
   */
  febs.date.getDate(strDate: string): Date

  /**
   * @desc: 通过世界时间获取date. getDateFromUTC('2012-05-09')
   * @param strDateUTC: 世界日期字符串. '2012-05-09' 
   * @return: Date.
   */
  febs.date.getDateFromUTC(strDateUTC: string): Date;

  /**
   * @desc: getDate2('20120509')
   * @return: Date.
   */
  febs.date.getDate2(strDate: string): Date;


  /**
   * @desc: 通过世界时间获取date. getDate2FromUTC('20120509')
   * @param strDateUTC: 世界日期字符串. '20120509' 
   * @return: Date.
   */
  febs.date.getDate2FromUTC(strDateUTC: string): Date;

  /**
   * @desc: 通过字符串获取date. getTime('2012-05-09 11:10:12')
   * @param strTime: 时间字符串. '2012-05-09 11:10:12' 
   * @return: Date.
   */
  febs.date.getTime(strTime:string): Date;

  /**
   * @desc: 通过时间获取date. getTime2('20120509111012')
   * @param strTime: 时间字符串. '20120509111012' 
   * @return: Date.
   */
  febs.date.getTime2(strTime:string): Date;

  /**
   * @desc: 通过世界时间获取date. getTimeFromUTC('2012-05-09 11:10:12')
   * @param strTimeUTC: 世界时间字符串. '2012-05-09 11:10:12' 
   * @return: Date.
   */
  febs.date.getTimeFromUTC(strTimeUTC: string): Date;

  /**
   * @desc: 通过世界时间获取date. getTime2FromUTC('20120509111012')
   * @param strTimeUTC: 世界日期字符串. '20120509111012' 
   * @return: Date.
   */
  febs.date.getTime2FromUTC(strTimeUTC: string): Date;

utils

utils库包含了一些常用的函数, 如判断浏览器是否是手机/时间字符串格式化等.

/**
 * @desc: 模拟sleep.
 * @return: Promise.
 *     在ms时间后执行.
 * @e.g.
 *     febs.utils.sleep(1000).then(()=>{
          //1000ms之后resolve.
       });
 */
febs.utils.sleep(ms)

/**
 * @desc: the browser is mobile.
 * @param userAgent: 在服务器调用时需传入客户端的userAgent
 */
febs.utils.browserIsMobile()
/**
 * @desc: the browser is ios.
 * @param userAgent: 在服务器调用时需传入客户端的userAgent
 */
febs.utils.browserIsIOS()
/**
 * @desc: the browser is phone.
 * @param userAgent: 在服务器调用时需传入客户端的userAgent
 */
febs.utils.browserIsPhone()
/**
 * @desc: the browser is weixin.
 * @param userAgent: 在服务器调用时需传入客户端的userAgent
 */
febs.utils.browserIsWeixin()
/**
* @desc: 判断是否是ie.
*/
febs.utils.browserIsIE()
/**
* @desc: 判断ie版本号.
* @return number. 非ie返回Number.MAX_SAFE_INTEGER.
*/
febs.utils.browserIEVer()
/**
 * @desc: the browser is support html5.
 */
febs.utils.browserIsSupportHtml5()  `服务端不支持`

/**
 * @desc: 合并多个map.
 * @return: {}
 */
febs.utils.mergeMap(...)

/**
* @desc: 判断参数是否是null,undefined,NaN
* @return: boolean
*/
febs.utils.isNull(e)
/**
* @desc: 将异步回调方式的方法转换成promise, 函数中的this可以为指定值.
*         例如: yield denodeify(fs.exists)(path);
* @param self: 指定的调用对象
* @return: promise.
*/
febs.utils.denodeify(fn, self, argumentCount)

// 大数运算.

大数类型: febs.BigNumber

/**
 * @desc: 进行bigint类型转换. 如果数值超过15位,等同于 new BigNumber(v)
 */
febs.utils.bigint(v: any): number|BigNumber;

/**
 * @desc: 判断是否是bigint.
 */
febs.utils.bigint_check(v)

/**
* @desc: calc bigint
* @return: bignumber.
*/
febs.utils.bigint_add(a, b)
febs.utils.bigint_minus(a, b)
febs.utils.bigint_dividedBy(a, b)
febs.utils.bigint_mul(a, b)
/**
* @desc: compare with bigint.
* @return: boolean.
*/
febs.utils.bigint_equal(a, b)
febs.utils.bigint_more_than(a, b)
febs.utils.bigint_more_than_e(a, b)   // more than or equal.
febs.utils.bigint_less_than(a, b)
febs.utils.bigint_less_than_e(a, b)   // less than or equal.
/**
* @desc: 转换bigint->string.
* @param fixed: 小数位个数, 默认为0.
* @return: string.
*/
febs.utils.bigint_toFixed(a, fixed)

string

string 提供了一些js string对象缺少且较常使用的函数.

/**
* @desc: 判断是否是手机号码.
* @return: boolean.
*/
febs.string.isPhoneMobile(str)
/**
 * @desc: 是否为空串.
 * @return: boolean.
 */
febs.string.isEmpty(s)
/**
 * @desc: 获得字符串utf8编码后的字节长度.
 * @return: u32.
 */
febs.string.getByteSize(s)
/**
 * @desc: 替换字符串中所有的strSrc->strDest.
 * @return: string.
 */
febs.string.replace(str, strSrc, strDest)
/**
 * @desc: 将utf8字符串转为字节数组.
 * @return: [].
 */
febs.string.utf8ToBytes(str)
/**
* @desc: 将utf8字节数组转为字符串.
*/
febs.string.bytesToUtf8(utfBytes:number[]):string;
/**
 * @desc: 去除两端空格.
 * @return: string.
 */
febs.string.trim(str)
/**
* @desc: 对字符串中的 <>空格"& 标签进行转义为 & lt;, & gt;
* @return: string.
*/
febs.string.escapeHtml(str);

crypt

目前提供了uuid,crc32,base64.

客户端独有.

/**
 * @desc: 通过文件表单控件进行文件的crc32计算.
 * @param fileObj: 表单文件对象, 例如表单为:
 *                  <form enctype="multipart/form-data">
 *                    <input id="file" type="file" name="file" multiple>
 *                  </form>
 *             $('#file')[0].files[0] 即为第一个文件对象.
 * @param cb: function(crc32) {}; 计算出来的crc32通过回调函数返回
 */
febs.crypt.crc32_file(fileObj, cb)
/**
 * @desc: [客户端调用] 通过文件表单控件进行文件的crc32计算.
 * @param fileObj: 表单文件对象, 例如表单为:
 *                  <form enctype="multipart/form-data">
 *                    <input id="file" type="file" name="file" multiple>
 *                  </form>
 *             dom('#file')[0].files[0] 即为第一个文件对象.
 * @param length: 如果<0, 将会计算到文件的末尾.
 * @param cb: function(crc32) {}; 计算出来的crc32通过回调函数返回
 */
febs.crypt.crc32_fileSegment(fileObj: any, offset:number, length:number, cb: (crc32: number) => void): void;
/**
* @desc: base64解码.
* @return: 字节数组.
*/
febs.crypt.base64_decode(strBase64)

通用.

/**
 * @desc: 计算字符串的crc32值
 * @param crc 可以在这个值得基础上继续计算
 * @return: number.
 */
febs.crypt.crc32( str, crc )
/**
* @desc: base64编码.
* @param arrByte: 字节数组.
* @return: string.
*/
febs.crypt.base64_encode(arrByte)
/**
 * @desc: 计算md5.
 * @return: string
 */
febs.crypt.md5( strOrBuffer )
/**
 * @desc: 计算sh1.
 * @return: string
 */
febs.crypt.sha1( strOrBuffer )


/**
* @desc: 生成一个uuid (客户端为v4 random, 服务端为v1 timestamp).
* @return: 
*/
febs.crypt.uuid()

animationFrame

各浏览器兼容的 requestAnimationFrame, cancelAnimationFrame 动画方法.

var total = 0;
var timer;
var now = Date.now();

function foo(tm) {
  var now2 = Date.now();
  total += now2-now;
  now = now2;
  if (total > 10000) {
    cancelAnimationFrame(timer);
  } else {
    timer = requestAnimationFrame(foo);
  }
}

timer = requestAnimationFrame(foo);

net

net封装了浏览器通信方法: ajax, fetch, jsonp

/**
* @desc: 使用jquery.ajax类似参数调用.
* @param cfg: 允许额外传递一个 progress:function(percent) {} 的参数来获取上传进度.
* @return: 
*/
febs.net.ajax(cfg:any):{abort:()=>void}
/**
 * @desc: 使用fetch方式进行数据请求.
 *        如果超時, 可以catch到 'timeout'
 * @param option: 请求选项.
 *          {
              method, // 请求方法 get, post, delete 等.
              mode,   // 'no-cors', 'same-origin'等; (可忽略)
              headers, // 请求header, 例如:
                            {
                              "Content-Type": "application/json",
                              "Accept": 'application/json',
                            }
              body,    // 请求内容.
              timeout, // 超时 (ms), 默认为5000,
              credentials,  // 携带了credentials='include'则服务器需设置Access-Control-Allow-Credentials
              progress, // 允许设置进度cb. function(percent) {}
            }
 * @return: 返回 Promise;
 * @e.g.
      febs.net.fetch(url, {})
      .then(response=>response.json())
      .then(data=>{})
      .catch(err=>{
        if (err === 'timeout)  // 超时.
      });
 */
febs.net.fetch(url, option)
/**
 * @desc: jsonp方式获取数据.
 *        如果超時, 可以catch到 'timeout'
 * @param option: 请求选项同fetch. 可以附带如下的更多属性. jsonp只能使用`get`方式.
 *          {
              jsonpCallback, // jsonp请求时附带到地址中的callback参数, 默认为 'callback';
                             // 服务端需将查询字符串中的此参数作为返回数据中 `callback`([data])的 callback值
            }
 * @return: 返回 Promise;
 * @e.g.
      febs.net.jsonp(url, {})
      .then(response=>response.json())
      .then(data=>{})
      .catch(err=>{
        if (err === 'timeout)  // 超时.
      });
 */
febs.net.jsonp(url, option)

jquery

febs库模拟了jquery的常用方法(dom操作/事件/css等), 当页面引入febs前如果未引入jquery, 会自动设置全局变量 $ 为内部实现的jquery相关方法.

目前已经实现的方法如下:

常用

  /**
   * 支持 
   *    - .name 使用类名构建.
   *    - #name 使用id名构建.
   *    - name  使用tag名构建.
   *    - input[name="xxx"] 这样的选择器.
   *    - input[name="xxx"]:checked 这样的选择器.
   *    - input[name="xxx"]:disabled 这样的选择器.
   *    - <div...>...</div> 使用内容构建.
   *    - node.
   */
  $(selector?:string|dom|HTMLElement);

  get(index:number): any;

  hasClass( cName:string ): boolean;
  addClass( cName:string ): $;
  removeClass( cName:string ): $;
  toggleClass( cName:string ): $;

  remove(): void;
  append(selector?:string|dom|HTMLElement): $;
  appendTo(selector?:string|dom|HTMLElement): $;
  prepend(selector?:string|dom|HTMLElement): $;
  prependTo(selector?:string|dom|HTMLElement): $;
  before(selector?:string|dom|HTMLElement): $;
  insertBefore(selector?:string|dom|HTMLElement): $;
  after(selector?:string|dom|HTMLElement): $;
  insertAfter(selector?:string|dom|HTMLElement): $;

  attr(attrName:any, value:any): string;
  removeAttr(name:any): $;
  
  empty(): $;
  html(v:string): string;
  text(v:string): string;
  val(v:string): string;
  css(name:string, value:string): string;

事件.

  on(eventname:string, foo:any): $;
  one(event:string, f:any): $;
  off(eventname:string, foo?:any): $;
  trigger(eventname:string, extraParameters?:any): $; // extraParameters仅支持自定义事件.
  ready(f?:any):$;
  unload(f?:any):$;
  blur(f?:any):$;
  change(f?:any):$;
  click(f?:any):$;
  dblclick(f?:any):$;
  error(f?:any):$;
  keydown(f?:any):$;
  keypress(f?:any):$;
  keyup(f?:any):$;
  load(f?:any):$;
  mousedown(f?:any):$;
  mouseenter(f?:any):$;
  mouseleave(f?:any):$;
  mousemove(f?:any):$;
  mouseout(f?:any):$;
  mouseover(f?:any):$;
  mouseup(f?:any):$;
  scroll(f?:any):$;
  select(f?:any):$;
  submit(f?:any):$;

遍历

  parent(selector?:string|dom|HTMLElement) : $;
  parents(selector?:string|dom|HTMLElement) : $;
  children(selector?:string|dom|HTMLElement) : $;
  prev(selector?:string|dom|HTMLElement) : $;
  next(selector?:string|dom|HTMLElement) : $;
  each((e)=>{});

febs-miniprogram

Install

commonjs

browser

babel

framework

说明

polyfill

dom

date

utils

string

crypt

animationFrame

net

jquery

常用

事件.

遍历

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

Weekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

febs-miniprogram

Install

commonjs

browser

babel

framework

说明

polyfill

dom

date

utils

string

crypt

animationFrame

net

jquery

常用

事件.

遍历

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

Weekly Downloads