BUI基础-工具类

作者: 学术报告板 | 来源:发表于2019-11-20 16:31 被阅读0次

    为什么

    jQuery默认提供的工具类有很多不足,所以我们针对以下内容作了扩展:

    • 继承相关的方法: extend,augment,mixin,merge,cloneObject
    • 类型判断:isFunction,isArray,isDate,isObject

    数组

    javascript提供的数组操作比较简单,数组的增删改操作比较难以使用,所以对常用操作做了封装:

    示例

    下面是一些简单的示例:

    <pre class="prettyprint linenums" style="padding: 8px; background-color: rgb(247, 247, 249); border: 1px solid rgb(225, 225, 232); margin-top: 8px; box-shadow: rgb(251, 251, 252) 40px 0px 0px inset, rgb(236, 236, 240) 41px 0px 0px inset; color: rgb(51, 51, 51); font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">

    1. var array = [1,2,3,4];

    2. BUI.Array.addAt(array,5,2); //[1,2,5,3,4]

    3. BUI.Array.removeAt(array,2);//[1,2,3,4]

    4. var array1 = [1,2,3,4];

    5. BUI.Array.equals(array,array1);//true

    6. BUI.Array.empty(array);

    7. BUI.Array.equals(array,array1);//false

    </pre>

    表单

    我们经常进行表单操作,但是checkbox,radio等控件的获取和设置比较麻烦,以下是常见操作:

    • 把整个表单格式化成为一个对象
    • 把一个对象填充到表单中
    • 设置表单的某个字段值

    我们也提供了功能更加强大的表单控件,建议直接使用表单控件

    JSON

    javascript提供的日期操作比较简单,格式化日期、字符串转换日期、日期加减法使用的比较多,而且不易使用,所以对常用操作做了封装:

    示例
    下面是一些简单的示例:

    日期帮助

    javascript提供的日期操作比较简单,格式化日期、字符串转换日期、日期加减法使用的比较多,而且不易使用,所以对常用操作做了封装:

    示例

    下面是一些简单的示例:

    <pre class="prettyprint linenums" style="padding: 8px; background-color: rgb(247, 247, 249); border: 1px solid rgb(225, 225, 232); margin-top: 8px; box-shadow: rgb(251, 251, 252) 40px 0px 0px inset, rgb(236, 236, 240) 41px 0px 0px inset; color: rgb(51, 51, 51); font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">

    1. <script>

    2. var str = '2012-01-01';

    3. //转成日期

    4. var date = BUI.Date.parse(str); //

    5. var date1 = BUI.Date.addDay(date,1); //2012-01-02

    6. BUI.Date.addDay(date,-1); //2011-12-30

    7. BUI.Date.format(date1,'/'); //2012/01/02

    8. </script>

    </pre>

    JSON

    jQuery 提供了parseJSON的方法,但是未提供stringify的方法,此方法将对象转换成字符串,同时我们也提供了looseParse的方法,将非标准的json字符串转成Json

    示例

    下面是一些简单的示例:

    <pre class="prettyprint linenums" style="padding: 8px; background-color: rgb(247, 247, 249); border: 1px solid rgb(225, 225, 232); margin-top: 8px; box-shadow: rgb(251, 251, 252) 40px 0px 0px inset, rgb(236, 236, 240) 41px 0px 0px inset; color: rgb(51, 51, 51); font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">

    1. <script>

    2. var str = "{'a':'112','b':'2'}";

    3. BUI.JSON.parse(str);//报错,转换失败

    4. var obj = BUI.JSON.looseParse(str);//成功

    5. BUI.JSON.stringify(obj); //{"a" : "112","b" : "2"}

    6. </script>

    </pre>

    keyCode

    控件进行键盘操作时,需要分辨键盘对应的值,数字方式非常不方便,所以我们提供了大量键盘常量

    示例

    下面是一些简单的示例:

    <pre class="prettyprint linenums" style="padding: 8px; background-color: rgb(247, 247, 249); border: 1px solid rgb(225, 225, 232); margin-top: 8px; box-shadow: rgb(251, 251, 252) 40px 0px 0px inset, rgb(236, 236, 240) 41px 0px 0px inset; color: rgb(51, 51, 51); font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">

    1. <script>

    2. var a = BUI.KeyCode.A;

    3. BUI.KeyCode.TAB;

    4. </script>

    </pre>

    浏览器检测

    jQuery 检测浏览器版本的函数或者属性非常难用,所以我们提供了方便的方式

    示例

    下面是一些简单的示例:

    <pre class="prettyprint linenums" style="padding: 8px; background-color: rgb(247, 247, 249); border: 1px solid rgb(225, 225, 232); margin-top: 8px; box-shadow: rgb(251, 251, 252) 40px 0px 0px inset, rgb(236, 236, 240) 41px 0px 0px inset; color: rgb(51, 51, 51); font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">

    1. <script>

    2. //检测浏览器

    3. if(BUI.UA.ie == 6){

    4. //do some hack

    5. }else{

    6. }

    7. </script>

    </pre>

    Cookie

    cookie操作进行字符串操作非常繁琐,所以我们提供键值操作的简单方法

    示例

    下面是一些简单的示例:

    <pre class="prettyprint linenums" style="padding: 8px; background-color: rgb(247, 247, 249); border: 1px solid rgb(225, 225, 232); margin-top: 8px; box-shadow: rgb(251, 251, 252) 40px 0px 0px inset, rgb(236, 236, 240) 41px 0px 0px inset; color: rgb(51, 51, 51); font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">

    1. <script>
    2. BUI.use('bui/cookie',function(Cookie){
    3. //设置
    4. Cookie.set('a','a');
    5. //获取
    6. Cookie.get('a');
    7. });
    8. </script>

    </pre>

    相关文章

      网友评论

        本文标题:BUI基础-工具类

        本文链接:https://www.haomeiwen.com/subject/hxnoictx.html