jsModern 文档

工具库介绍

这是一套完全基于jQuery的网页组件工具库,它可以完美兼容桌面端所有主流的现代高级浏览器。其内部包含了多个在前端开发过程中使用频率较高的网页组件以及一些其它常用的工具方法,通过一个统一的对外接口进行调用,用法极为简单清晰,可以让初次接触的开发者快速上手使用。工具库采用了前端程序当中的一些高级特性进行开发,并且所有方法的参数和调用形式都经过了内部的简化处理,力求为开发者提供最简单、最直接而又最精巧的使用方法,并带来最佳的使用体验。对于所依赖的唯一外部资源jQuery类库,要求其最低版本不得低于1.11.0,在此建议使用其最新版本。工具库遵循 MIT license 开源协议,是一套完全免费的程序。

工具库列表

  • 组件:jsModern.share+

    功能:实现网页分享功能。

    ## 最简单的调用方式 ( 采用默认配置 )
    $(function () {
        jsModern.share("#share-box");
    })
    <div id="share-box"></div>
    
    ## 可以给分享按钮添加鼠标悬浮显示按钮提示的功能 ## 此时当鼠标悬浮在按钮上时会显示按钮的分享类型 $(function () { jsModern.share("#share-box", { tip: true }); }) <div id="share-box"></div>
    ## 可以自定义要显示哪些分享按钮 ## jsModern 提供了五种分享类型, QQ好友(qq) | QQ空间(qzone) | 新浪微博(sina) | 豆瓣网(douban) | 二维码(qrcode) ## 默认都显示, 想要隐藏哪个就将其设置为 false 即可 $(function () { jsModern.share("#share-box", { qq: false, douban: false }); }) <div id="share-box"></div>
  • 组件:jsModern.top+

    功能:实现返回顶部功能。

    ## 只传入一个 true 参数
    ## jsModern 会自动创建一个返回顶部的按钮
    ## 无需开发者自己设置
    $(function () {
        jsModern.top(true);
    })
    
    ## 如果传入一个选择器, DOM 对象或 jQuery 对象 ## 则直接使用此按钮来实现返回顶部操作 ## 按钮样式由有开发者自己设置 $(function () { jsModern.top("#topBtn"); }) <button id="topBtn">返回顶部</button>
    ## 传入第二个参数可以自定义返回顶部所需的时间 ( 默认 300ms ) $(function () { jsModern.top("#topBtn", 1200); }) <button id="topBtn">返回顶部</button>
    ## 如果第一个参数传入 false ## 则会变成去往底部的功能方法 ## 同样可以选择性的传入第二个数字类型的参数 ## 用来自定义去往底部所需的时间 $(function () { $("#btn").click(function () { jsModern.top(false); }) }) <button id="btn">去往底部</button>
  • 组件:jsModern.lazyload+

    功能:实现图片延迟加载功能。

    ## 可配置参数如下:
    1. effect       [ 可选 ] 图片显示效果, show 或 fadeIn, 默认是 show
    2. placeholder  [ 可选 ] 占位图, 默认是一张灰色的图片
    3. threshold    [ 可选 ] 边界值, 图片距离可视区域还有多少像素时显示图片, 默认是 0
    4. axis         [ 可选 ] 方向, x 或 y, 需要延迟加载的图片是通过横向滚动显示还是纵向滚动显示, 默认是 y
    5. width        [ 可选 ] 设置图片宽度, 建议通过 css 设置, 默认不设置
    6. height       [ 可选 ] 设置图片高度, 建议通过 css 设置, 默认不设置
    
    ## JS 代码
    $(function () {
    
        // 最简单的调用方法是只传入一个选择器即可
        jsModern.lazyload("#box img");
    
        // 也可以自定义配置参数
        jsModern.lazyload("#box img", {
            effect: "fadeIn",
            placeholder: "img/placeholder.jpg",
            threshold: 300,
            axis: "y",
            width: 600,
            height: 600
        });
    })
    
    ## HTML 代码
    <div id="box">
        <img width="800" height="400" data-src="images/1.jpg">
        <img width="800" height="400" data-src="images/2.jpg">
        <img width="800" height="400" data-src="images/3.jpg">
        <img width="800" height="400" data-src="images/4.jpg">
        <img width="800" height="400" data-src="images/5.jpg">
        <img width="800" height="400" data-src="images/6.jpg">
        <img width="800" height="400" data-src="images/7.jpg">
        <img width="800" height="400" data-src="images/8.jpg">
        <img width="800" height="400" data-src="images/9.jpg">
        <img width="800" height="400" data-src="images/10.jpg">
    </div>
    
    								
  • 组件:jsModern.picture+

    功能:实现轮播图功能。

    ## 可配置参数如下: 
    1. effect    [ 可选 ] 轮播图切换动画的形式, 可选值: fade 或 slide, 默认是 slide
    2. autoplay  [ 可选 ] 图片自动切换的时间间隔, 单位:ms, 默认是 5000, 设置为 false 则不进行自动切换
    
    ## JS 代码
    $(function () {
    
        // 最简单的调用方法是只传入一个选择器即可
        jsModern.picture("#box");
    
        // 也可自定义配置参数
        jsModern.picture("#box", {
            effect: "fade",
            autoplay: false
        });
    })
    
    ## 请严格按照下面的结构设置 HTML 代码
    ## 后面的两个 div 分别是左右箭头和下方的切换按钮, 可根据实际需求增删
    ## 如需给图片加上链接, 只需在 img 标签外面加一层 a 标签作为其父元素即可
    <div id="box" style="width:800px;height:400px;overflow:hidden;">
        <div>
            <div><img src="images/1.jpg"></div>
            <div><img src="images/2.jpg"></div>
            <div><img src="images/3.jpg"></div>
            <div><img src="images/4.jpg"></div>
            <div><img src="images/5.jpg"></div>
            <div><img src="images/6.jpg"></div>
            <div><img src="images/7.jpg"></div>
            <div><img src="images/8.jpg"></div>
            <div><img src="images/9.jpg"></div>
            <div><img src="images/10.jpg"></div>
        </div>
        <div class="jm-picture-arrow"></div>
        <div class="jm-picture-dot"></div>
    </div>
    								
  • 组件:jsModern.imageView+

    功能:实现图片预览功能。

    ## 可配置参数如下:
    1. switch  [ 可选 ] 是否显示切换按钮, 可选值: true 或 false, 默认 true
    2. scale   [ 可选 ] 是否显示缩放按钮, 可选值: true 或 false, 默认 true
    3. rotate  [ 可选 ] 是否显示旋转按钮, 可选值: true 或 false, 默认 true
    
    ## JS 代码
    $(function () {
    
        // 最简单的调用方法是只传入一个选择器即可
        jsModern.imageView("#box");
    
        // 也可自定义配置参数
        jsModern.imageView("#box", {
            scale: false,
            rotate: false
        });
    })
    
    ## HTML 代码 
    ## 在需要预览的图片上添加 data-imageview 属性并附上预览图片的地址即可   
    <div id="box">
        <img src="small-01.jpg" data-imageview="big-01.jpg">
        <img src="small-02.jpg" data-imageview="big-02.jpg">
        <img src="small-03.jpg" data-imageview="big-03.jpg">
        <img src="small-04.jpg" data-imageview="big-04.jpg">
    </div>
    
    								
  • 组件:jsModern.loading+

    功能:实现加载动画功能。

    ## 可配置参数如下:
    1. title  [ 可选 ] 用来设置提示文字
    2. theme  [ 可选 ] 用来设置样式主题, A 或 B, 默认是 A
    3. scale  [ 可选 ] 用来设置缩放比例
    
    ## JS 代码
    $(function () {
    
        // 最简单的调用方法是只传入一个选择器即可
        jsModern.loading("#box");
    
        // 也可自定义配置参数
        jsModern.loading("#box", {
            title: "加载中...",
            theme: "B",
            scale: 0.5
        });
    
        // 使用 jsModern.removeLoading() 来移除加载动画
        jsModern.removeLoading("#box");
    })
    
    ## HTML 代码
    <div id="box" style="width:400px;height:400px;overflow:hidden;"></div>
    								
  • 组件:jsModern.notice+

    功能:实现消息通知功能。

    ## 可配置参数如下: 
    1. title     [ 必选 ] 用来设置标题
    2. content   [ 可选 ] 用来设置内容
    3. icon      [ 可选 ] 用来设置自定义通知图标的路径
    4. autoClose [ 可选 ] 用来设置自动关闭, 单位 ms
    5. type      [ 可选 ] 用来设置通知类型, success | warn | error
    6. position  [ 可选 ] 用来设置显示位置, lt(左上角) | rt(右上角) | rb(右下角) | lb(左下角)
    
    ## JS 代码
    $(function () {
        
        // 只显示标题
        jsModern.notice("这是一条通知");
    
        // 显示标题和内容
        jsModern.notice("通知标题", "通知内容");
    
        // 也可自定义配置参数
        jsModern.notice({
            title: "通知标题",
            content: "通知内容",
            position: "rt",
            type: "success",
            autoClose: 5000
        });
    })
    
    								
  • 组件:jsModern.scrollBar+

    功能:实现自定义滚动条功能。

    ## 可配置参数如下:
    1. axis      [ 可选 ] 滚动方向, 可选值: x 或 y, 默认是 y 即: 纵向滚动
    2. toBottom  [ 可选 ] 针对 axis: "y" 的情况, 是否自动滚到容器底部, 可选值: true 或 false, 默认是 false
    3. toRight   [ 可选 ] 针对 axis: "x" 的情况, 是否自动滚到容器最右部, 可选值: true 或 false, 默认是 false
    
    ## JS 代码
    $(function () {
        jsModern.scrollBar("#wrapper");
    })
    
    ## CSS 代码
    #wrapper { width:200px;height:400px;overflow:hidden;background:#eee; }
    .box { width:190px;overflow:hidden;margin:5px; }
    
    ## HTML 代码
    <section id="wrapper">
        <div class="box">
            永和九年,岁在癸丑,暮春之初,会于会稽山阴之兰亭,修禊事也。群贤毕至,少长咸集。此地有崇山峻岭,茂林修竹,又有清流激湍,映带左右,
            引以为流觞曲水,列坐其次。虽无丝竹管弦之盛,一觞一咏,亦足以畅叙幽情。是日也,天朗气清,惠风和畅。仰观宇宙之大,俯察品类之盛,
            所以游目骋怀,足以极视听之娱,信可乐也。夫人之相与,俯仰一世。或取诸怀抱,悟言一室之内;或因寄所托,放浪形骸之外。虽趣舍万殊,
            静躁不同,当其欣于所遇,暂得于己,快然自足,不知老之将至;及其所之既倦,情随事迁,感慨系之矣。向之所欣,俯仰之间,已为陈迹,
            犹不能不以之兴怀,况修短随化,终期于尽!古人云:“死生亦大矣。”岂不痛哉!每览昔人兴感之由,若合一契,未尝不临文嗟悼,不能喻
            之于怀。固知一死生为虚诞,齐彭殇为妄作。后之视今,亦犹今之视昔,悲夫!故列叙时人,录其所述,虽世殊事异,所以兴怀,其致一也。
            后之览者,亦将有感于斯文。
            永和九年,岁在癸丑,暮春之初,会于会稽山阴之兰亭,修禊事也。群贤毕至,少长咸集。此地有崇山峻岭,茂林修竹,又有清流激湍,映带左右,
            引以为流觞曲水,列坐其次。虽无丝竹管弦之盛,一觞一咏,亦足以畅叙幽情。是日也,天朗气清,惠风和畅。仰观宇宙之大,俯察品类之盛,
            所以游目骋怀,足以极视听之娱,信可乐也。夫人之相与,俯仰一世。或取诸怀抱,悟言一室之内;或因寄所托,放浪形骸之外。虽趣舍万殊,
            静躁不同,当其欣于所遇,暂得于己,快然自足,不知老之将至;及其所之既倦,情随事迁,感慨系之矣。向之所欣,俯仰之间,已为陈迹,
            犹不能不以之兴怀,况修短随化,终期于尽!古人云:“死生亦大矣。”岂不痛哉!每览昔人兴感之由,若合一契,未尝不临文嗟悼,不能喻
            之于怀。固知一死生为虚诞,齐彭殇为妄作。后之视今,亦犹今之视昔,悲夫!故列叙时人,录其所述,虽世殊事异,所以兴怀,其致一也。
            后之览者,亦将有感于斯文。
            永和九年,岁在癸丑,暮春之初,会于会稽山阴之兰亭,修禊事也。群贤毕至,少长咸集。此地有崇山峻岭,茂林修竹,又有清流激湍,映带左右,
            引以为流觞曲水,列坐其次。虽无丝竹管弦之盛,一觞一咏,亦足以畅叙幽情。是日也,天朗气清,惠风和畅。仰观宇宙之大,俯察品类之盛,
            所以游目骋怀,足以极视听之娱,信可乐也。夫人之相与,俯仰一世。或取诸怀抱,悟言一室之内;或因寄所托,放浪形骸之外。虽趣舍万殊,
            静躁不同,当其欣于所遇,暂得于己,快然自足,不知老之将至;及其所之既倦,情随事迁,感慨系之矣。向之所欣,俯仰之间,已为陈迹,
            犹不能不以之兴怀,况修短随化,终期于尽!古人云:“死生亦大矣。”岂不痛哉!每览昔人兴感之由,若合一契,未尝不临文嗟悼,不能喻
            之于怀。固知一死生为虚诞,齐彭殇为妄作。后之视今,亦犹今之视昔,悲夫!故列叙时人,录其所述,虽世殊事异,所以兴怀,其致一也。
            后之览者,亦将有感于斯文。
        </div>
    </section>
    								
  • 组件:jsModern.scrollBox+

    功能:区域内固定距离的滚动功能。

    ## 可配置参数如下:
    1. prevElem  [ 必选 ] 左滚按钮
    2. nextElem  [ 必选 ] 右滚按钮
    3. every     [ 可选 ] 每次滚动的区块数, 默认每次滚动一个区块的宽度值
    4. speed     [ 可选 ] 滚动动画的速度, 默认是 400ms
    
    ## JS 代码
    $(function () {
        jsModern.scrollBox("#wrapper", {
            prevElem: "#prev",
            nextElem: "#next",
            every: 1,
            speed: 500
        });
    })
    
    ## CSS 代码
    #wrapper { float:left;width:600px;height:150px;overflow:hidden; }
    .part { float:left;width:150px;height:150px;background:#000;color:#fff;text-align:center;line-height:150px; }
    button { float:left;border:none;background:#000;color:#fff;padding:0 20px;font-size:20px;height:70px;margin-top:40px; }
    
    ## HTML 代码	
    <button id="prev"></button>
    <section id="wrapper">
        <div>
            <div class="part">1</div>
            <div class="part">2</div>
            <div class="part">3</div>
            <div class="part">4</div>
            <div class="part">5</div>
            <div class="part">6</div>
            <div class="part">7</div>
            <div class="part">8</div>
            <div class="part">9</div>
            <div class="part">10</div>
        </div>
    </section>
    <button id="next"></button>
    								
  • 组件:jsModern.marquee+

    功能:无缝滚动功能。

    ## JS 代码
    $(function () {
        jsModern.marquee("#wrapper");
    })
    
    ## CSS 代码
    #wrapper { width:800px;height:150px;overflow:hidden; }
    .box { float:left;width:200px;height:150px;margin:0 1px;background:#000; }
    
    ## HTML 代码	
    <div id="wrapper">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
    								
  • 组件:jsModern.page+

    功能:实现内容分页功能。

    ## 可配置参数如下:
    1. content  [ 必选 ] 要显示分页内容的容器 [ 一个空的容器 ]
    2. buttons  [ 必选 ] 要显示分页按钮的容器 [ 一个空的容器 ]
    3. type     [ 必选 ] 分页类型, 可选值: local [ 本地级分页 ] 和 ajax [ 异步级分页 ]
    4. url      [ 必选 ] 请求的后台文件地址
    5. total    [ 必选 ] 总数据量
    6. every    [ 必选 ] 每页要显示的数据条数
    7. max      [ 可选 ] 最多显示几个分页按钮, 默认显示 10 个含有数字分页的按钮
    8. success  [ 必选 ] 后台文件请求成功并得到返回数据后要执行的函数, 主要作用是设置分页内容的结构
    
    ## 关于 type 的两个值 local 和 ajax 的区别:
    1. local  将启动本地级分页功能, 此方法会一次性加载所有数据然后在本地进行分页
    2. ajax   将启动异步级分页功能, 此方法第一次只会加载第一页数据, 后面每次点击按钮会发送对应数字的请求来加载数据
    
    ## JS 代码
    $(function () {
    
        // 本地级分页示例脚本
        jsModern.page({
            content: "#wrapper",
            buttons: "#pageBtn",
            type: "local",
            url: "local-data.php",
            total: 1000,
            every: 10,
            max: 10,
            success: function ( data ) {
                return "<p><b>" + data.id + "</b> - <b>" + data.num + "</b></p>";
            }
        });
    
        // 异步级分页示例脚本
        jsModern.page({
            content: "#wrapper",
            buttons: "#pageBtn",
            type: "ajax",
            url: function ( i ) {
    
                // 此处的参数 i 即为每次点击按钮时, 按钮上对应的页码数
                // 随路径一同发送请求, 获取这一页的数据
                return "ajax-data.php?page=" + i;
            },
            total: 1000,
            every: 10,
            max: 10,
            success: function ( data ) {
                return "<p><b>" + data.id + "</b> - <b>" + data.num + "</b></p>";
            }
        });
    })
    
    ## HTML 代码	
    <div id="wrapper"></div>
    <div id="pageBtn"></div>
    								
  • 组件:jsModern.textBind+

    功能:输入域内容实时绑定。

    ## JS 代码
    $(function () {
        jsModern.textBind("#text", ".bind");
    })
    
    ## HTML 代码	
    <input type="text" id="text">
    <p class="bind"></p>
    <p class="bind"></p>
    <p class="bind"></p>
    <p class="bind"></p>
    <p class="bind"></p>
    								
  • 工具:jsModern.isMobile+

    功能:检测移动端,返回布尔值。

    var mobile = jsModern.isMobile();
    console.log( (mobile ? "是" : "不是") + "移动设备" );
    
  • 工具:jsModern.mobileWeb+

    功能:通过移动设备访问页面则自动跳转到指定的网址。

    jsModern.mobileWeb( "wap/index.html" );
    
  • 工具:jsModern.random+

    功能:生成随机数或随机字符串。

    ## 传入两个数字类型的参数, 将得到此范围内的随机数, 包括这两个边界值 ( 返回值: Number 类型 ),
    ## 下面的例子将得到 5-15 范围内的随机数 ( 包括 5 和 15 )。
    var random_01 = jsModern.random(5, 15);
    console.log( random_01 );
    
    ## 第一个参数是数字, 第二个参数是布尔值 true,
    ## 将得到指定长度的由数字和 26 个大小写英文字母组成的随机字符串 ( 返回值: String 类型 ),
    ## 下面的例子将得到 15 位长度的随机字符串,字符串中可能包含数字或大小写英文字母。
    var random_02 = jsModern.random(15, true);
    console.log( random_02 );
    
    ## 第一个参数是数字, 第二个参数是布尔值 false,
    ## 将得到指定长度的由 26 个大小写英文字母组成的随机字符串 ( 返回值: String 类型 ),
    ## 下面的例子将得到 15 位长度的随机字符串, 字符串中只包含大小写英文字母。
    var random_03 = jsModern.random(15, false);
    console.log( random_03 );
    
    ## 只传入一个数字参数, 得到指定长度的纯数字随机数 ( 返回值: Number 类型 ),
    ## 下面的例子将得到 15 位长度的随机数。
    var random_04 = jsModern.random(15);
    console.log( random_04 );
    
    ## 传入一个 object 类型的参数, 可自定义随机字符串集合 ( 返回值: String 类型 ),
    ## 下面的例子设置了字符串集合, 表示最后生成的字符串只会含有集合中设置的字符,
    ## length 属性用来定义最终生成的字符串的长度。
    var random_05 = jsModern.random({
        string: "abcdefg1234567",
        length: 5
    });
    console.log( random_05 );
    
    ## 无参数则返回 0-1 之间的随机数 ( 返回值: Number 类型 )。
    var random_06 = jsModern.random();
    console.log( random_06 );
    
  • 工具:jsModern.uuid+

    功能:生成全局唯一标识符。

    ## 生成的 uuid 的形式为:xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
    var uuid = jsModern.uuid();
    console.log( uuid );
    								
  • 工具:jsModern.unique+

    功能:对数组 / 字符串 / 数字去重。

    ## 数组去重
    var array = jsModern.unique([1, 1, 2, 2, 3, 3, 4, 4, 5, 5]);
    console.log( array );
    
    ## 字符串去重
    var string = jsModern.unique("aaabbbcccdddeeefffggg");
    console.log( string );
    
    ## 数字去重
    var number = jsModern.unique(11122233444555666);
    console.log( number );
    								
  • 工具:jsModern.time+

    功能:时间转换。

    ## 无参数时,返回当前时间距 1970-01-01 00:00:00 所经过的毫秒数
    var time_01 = jsModern.time();
    console.log( time_01 );
    
    ## 只传入毫秒数参数,则将此毫秒数格式化,返回 "年-月-日 时:分:秒" 的形式,
    ## 此毫秒数必须是某个时间点距 1970-01-01 00:00:00 所经过的毫秒数。
    var time_02 = jsModern.time(1504254961723);
    console.log( time_02 );
    
    ## 传入两个参数,第二个参数可用来自定义年月日的分隔符 ( 默认分隔符是短横线 "-" )
    var time_03 = jsModern.time(1504254961723, "/");
    console.log( time_03 );
    								
  • 工具:jsModern.cookie+

    功能:获取或设置 cookie。

    ## 传入一个 String 类型的参数时获取 cookie
    jsModern.cookie("a");
    
    ## 传入一个 Object 类型的参数时设置 cookie
    jsModern.cookie({
        a: "aa",
        b: "bb",
        c: "cc"
    });
    
    ## 传入两个参数时设置 cookie
    jsModern.cookie("a", "aa");
    
    ## 传入三个参数时设置 cookie,第三个参数是 cookie 的过期时间
    jsModern.cookie("a", "aa", "Thu, 01 Dec 2018 12:00:00 GMT");
    
    								
  • 工具:jsModern.removeCookie+

    功能:移除 cookie。

    ## 无参数时移除全部 cookie
    jsModern.removeCookie();
    
    ## 有参数时移除指定 cookie ( 多个 cookie 之间用空格分开 )
    jsModern.removeCookie("a b c");
    								
  • 工具:jsModern.session+

    功能:获取或设置 sessionStorage。

    ## 传入一个 String 类型的参数时获取 sessionStorage
    jsModern.session("a");
    
    ## 传入一个 Object 类型的参数时设置 sessionStorage
    jsModern.session({
        a: "aa",
        b: "bb",
        c: "cc"
    });
    
    ## 传入两个参数时设置 sessionStorage
    jsModern.session("a", "aa");
    								
  • 工具:jsModern.removeSession+

    功能:移除 sessionStorage。

    ## 无参数时移除全部 sessionStorage
    jsModern.removeSession();
    
    ## 有参数时移除指定 sessionStorage ( 多个 sessionStorage 之间用空格分开 )
    jsModern.removeSession("a b c");
    								
  • 工具:jsModern.local+

    功能:获取或设置 localStorage。

    ## 传入一个 String 类型的参数时获取 localStorage
    jsModern.local("a");
    
    ## 传入一个 Object 类型的参数时设置 localStorage
    jsModern.local({
        a: "aa",
        b: "bb",
        c: "cc"
    });
    
    ## 传入两个参数时设置 localStorage
    jsModern.local("a", "aa");
    								
  • 工具:jsModern.removeLocal+

    功能:移除 localStorage。

    ## 无参数时移除全部 localStorage
    jsModern.removeLocal();
    
    ## 有参数时移除指定 localStorage ( 多个 localStorage 之间用空格分开 )
    jsModern.removeLocal("a b c");
    								
  • 工具:jsModern.toBase64+

    功能:将图片转换成 base64 编码格式。

    ## 传入的图片是字符串形式
    jsModern.toBase64("1.jpg", function ( getBase ) {
        console.log( "得到的 base64 编码为:" + getBase );
    });
    
    ## 传入的图片是数组形式,返回与图片相对应的 base64 编码的数组
    jsModern.toBase64(["1.jpg", "2.jpg", "3.jpg"], function ( getBase ) {
        console.log( "1.jpg 得到的 base64 编码为:" + getBase[0] );
        console.log( "2.jpg 得到的 base64 编码为:" + getBase[1] );
        console.log( "3.jpg 得到的 base64 编码为:" + getBase[2] );
    });
    								
  • 工具:jsModern.preloadImage+

    功能:图片预加载。

    ## 目前支持 jpg, png, ico, bmp, gif 这五种格式的图片
    
    ## 传入图片数组
    jsModern.preloadImage(["1.jpg", "2.png", "3.bmp"]);
    
    ## 传入图片数组,添加回调函数
    jsModern.preloadImage(["1.jpg", "2.png", "3.bmp"], function () {
        console.log( "所有图片都已加载完成" );
    });
    								
  • 工具:jsModern.key+

    功能:按键事件。

    ## 若第一个参数是 Number 类型,表示按下此 keyCode 值对应的按键时执行指定的事件
    jsModern.key(13, function () {
        alert( "按下了 enter 键" );
    });
    
    ## 若第一个参数是 Array 类型,表示按下数组中任意一个 keyCode 值对应的按键时执行指定的事件
    jsModern.key([65, 66, 67], function () {
        alert( "按下了 A/B/C 中的任意一个按键" );
    });
    
    ## jsModern 预置了两个常用按键: enter 和 esc 键
    jsModern.key("enter", function () {
        alert( "按下了 enter 键" );
    });
    jsModern.key("esc", function () {
        alert( "按下了 esc 键" );
    });
    								
  • 工具:jsModern.getScript+

    功能:动态加载 JS 文件。

    ## 字符串形式的文件地址 ( 只能加载 js 脚本文件 )
    jsModern.getScript("https://cdn.bootcss.com/iScroll/5.2.0/iscroll.min.js", function () {
        console.log( "已成功加载了 iscroll 脚本文件" );
    });
    
    ## 数组形式的文件地址,在数组中所有文件都加载完毕后才会执行指定的函数 ( 只能加载 js 脚本文件 )
    jsModern.getScript([
        "https://cdn.bootcss.com/iScroll/5.2.0/iscroll-infinite.min.js", 
        "https://cdn.bootcss.com/iScroll/5.2.0/iscroll-probe.min.js", 
        "https://cdn.bootcss.com/iScroll/5.2.0/iscroll-zoom.min.js"
    ], function () {
        console.log( "三个脚本文件都已加载完毕" );
    });
    								
  • 工具:jsModern.merge+

    功能:合并数组 / 对象 / 字符串。

    ## 合并数组
    jsModern.merge( [1], [2], [3] );
    
    ## 合并对象
    jsModern.merge( {a: "1"}, {b: "2"}, {c: "3"} );
    
    ## 合并字符串
    jsModern.merge( "aa", "bb", "cc" );
    								
  • 工具:jsModern.noConflict+

    功能:释放或转移对全局变量 jsModern 的控制权。

    ## 下例以 jM 来代替 jsModern 进行方法调用
    var jM = jsModern.noConflict();
    console.log( jM.random() );
    console.log( jM.uuid() );
    console.log( jM.time() );
    console.log( jM.isMobile() );
    								
  • 内置数组方法+

    jsModern 内置了一些常用的数组扩展方法,通过给 jsModern 传递一个数组参数即可调用相应的数组方法,详情如下:

    • jsModern( [1, 2, 3, 4, 5] ).first();返回数组中的第一个值;
    • jsModern( [1, 2, 3, 4, 5] ).last();返回数组中的最后一个值;
    • jsModern( [1, 2, 3, 4, 5] ).even();返回数组中索引值为偶数的值;
    • jsModern( [1, 2, 3, 4, 5] ).odd();返回数组中索引值为奇数的值;
    • jsModern( [1, 2, 3, 4, 5] ).max();返回数组中的最大值;
    • jsModern( [1, 2, 3, 4, 5] ).min();返回数组中的最小值;
    • jsModern( [1, 2, 3, 4, 5] ).sum();返回数组所有值相加的和;
    • jsModern( [1, 5, 4, 2, 3] ).ascend();将数组以升序排序;
    • jsModern( [3, 2, 5, 4, 1] ).descend();将数组以降序排序;
    • jsModern( [1, 2, 3, 4, 5] ).remove(1, 3);移除数组中指定的值,多个值以逗号分开;
    • jsModern( [1, 2, 3, 4, 5] ).random();随机返回数组中的任意一个值;
    • jsModern( [1, 2, 1, 2, 3] ).unique();数组去重,返回新数组;
    • jsModern( [1, 2, 3, 4, 5] ).replace(3, 9);将数组中的指定值 (如:3) 替换为新值 (如:9),返回新数组。
  • 内置字符串方法+

    jsModern 内置了一些常用的字符串扩展方法,通过给 jsModern 传递一个字符串参数即可调用相应的字符串方法,详情如下:

    • jsModern( "aaabbbccc" ).repeat(3);将字符串重复显示指定的次数;
    • jsModern( "aaabbbccc" ).count("a");返回指定字符在字符串中出现的次数;
    • jsModern( "aaabbbccc" ).between("aaa", "ccc");返回指定字符间的字符;
    • jsModern( "a<b></b>c" ).removeHTML();移除字符串中的 HTML 代码;
    • jsModern( "aaa123ccc" ).getNumber();取出字符串中的数字;
    • jsModern( "aaa123ccc" ).getEn();取出字符串中的英文字母;
    • jsModern( "aaaBbbCcc" ).hyphen();将驼峰形式的字符串转换成连字符形式;
    • jsModern( "aaabbbccc" ).has("b");判断字符串中是否含有指定的字符,返回布尔值。
  • 内置局部样式方法+

    局部样式功能是 HTML5 中新增的一项功能,使用方法非常简单,只需在 body 中的 style 标签上添加一个 scoped 属性即可开启局部样式解析功能,此时这个 style 标签中的样式就只会对其父元素和父元素的所有后代元素生效,形成了含有 “作用域” 的样式。但是目前绝大多数浏览器都不支持这个功能,因此 jsModern 提供了这个局部样式解析功能,开发者只需要完全按照正常的方式设置 <style scoped> 即可,但要注意:

    1. 样式中不能含有注释;

    2. 样式中不能含有 @keyframes 动画和 @media 媒介查询。

    下面的例子中 <style scoped> 里面的样式只对 <section id="content"> 和它的后代元素生效,对后面的 <section id="box"> 无效。

    <section id="content">
        <style scoped>
            p { color: red;font-size: 14px; }
            p a { text-decoration: none; }
            p span { margin: 0 10px; }
        </style>
        <p>
            <a href="#">link</a>
            <span>some words</span>
        </p>
    </section>
    
    <section id="box">
        <p>
            <a href="#">link</a>
            <span>some words</span>
        </p>
    </section>