• 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)=>{});