几个不可或缺的lib-达维营-前端网

（1）Zepto.js http://zeptojs.com/
jQuery绝对是最流行的类库，但是现在对它的批评是越来越多，主要问题是它的大小，即使版本2.0中去除了对于IE6，IE7和IE8的支持，但是仍旧体积比较大，特别对于移动设备来说。相比人们开始更加关注Vanilla JS http://vanilla-js.com/，它对于DOM处理以外的内容更快，更高效。对于Hybrid App来说，Zepto.js可能更加合适，因为它是针对移动 WebKit 开发，显得更轻量级。

（2）FastClick https://github.com/ftlabs/fastclick
基于Webkit的浏览都存在click事件300ms延迟，而FastClick能够移除这个延迟加速Touch事件。还有Tappable，也是不错的选择。

Js代码

document.addEventListener('deviceready', onDeviceReady, false);
function onDeviceReady() {
  FastClick.attach(document.body); 
}

（3）iScroll https://github.com/cubiq/iscroll
固定高度的容器内滚动内容，针对jQuery Mobile还有一个iScroll wrapper叫iScrollview

Html代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="viewport"
          content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height"/>
    <link rel="stylesheet" type="text/css" href="lib/jquery.mobile/jquery.mobile-1.4.1.min.css"/>
    <link rel="stylesheet" type="text/css" href="lib/jquery.mobile.iscrollview/jquery.mobile.iscrollview.css"/>
    <link rel="stylesheet" type="text/css" href="lib/jquery.mobile.iscrollview/jquery.mobile.iscrollview-pull.css"/>
    <title>Cordova Sample</title>
    <style>
        .ui-content {
            padding: 0 !important;
        }

        .ui-listview {
            margin: 0 !important;
        }

        .example-wrapper, .example-wrapper div.iscroll-scroller {
            width: 100% !important;
        }
    </style>
</head>
<body>

<div data-role="page" id="index">
    <div data-role="header">
        <h1>Index page</h1>
    </div>
    <div data-role="content">
        <div class="example-wrapper" data-iscroll>
            <ul data-role="listview">
                <li><a href="#">Some link</a></li>
                <li><a href="#">Some link</a></li>
                <li><a href="#">Some link</a></li>
                <li><a href="#">Some link</a></li>
                <li><a href="#">Some link</a></li>
                <li><a href="#">Some link</a></li>
                <li><a href="#">Some link</a></li>
                <li><a href="#">Some link</a></li>
                <li><a href="#">Some link</a></li>
                <li><a href="#">Some link</a></li>
                <li><a href="#">Some link</a></li>
                <li><a href="#">Some link</a></li>
                <li><a href="#">Some link</a></li>
                <li><a href="#">Some link</a></li>
                <li><a href="#">Some link</a></li>
                <li><a href="#">Some link</a></li>
                <li><a href="#">Some link</a></li>
                <li><a href="#">Some link</a></li>
                <li><a href="#">Some link</a></li>
                <li><a href="#">Some link</a></li>
                <li><a href="#">Some link</a></li>
                <li><a href="#">Some link</a></li>
                <li><a href="#">Some link</a></li>
                <li><a href="#">Some link</a></li>
                <li><a href="#">Some link</a></li>
                <li><a href="#">Some link</a></li>
                <li><a href="#">Some link</a></li>
                <li><a href="#">Some link</a></li>
                <li><a href="#">Some link</a></li>
                <li><a href="#">Some link</a></li>
                <li><a href="#">Some link</a></li>
                <li><a href="#">Some link</a></li>
            </ul>
        </div>
    </div>
    <div data-role="footer">
        <h1>Footer</h1>
    </div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="lib/jquery/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="lib/jquery.mobile/jquery.mobile-1.4.1.min.js"></script>
<script type="text/javascript" src="lib/iscroll/iscroll.js"></script>
<script type="text/javascript" src="lib/jquery.mobile.iscrollview/jquery.mobile.iscrollview.js"></script>
</body>
</html>

（4）Hammer.js http://eightmedia.github.io/hammer.js/
多点触控

Js代码

var hammer = new Hammer(document.getElementById("container"));

hammer.ondragstart = function(ev) { };
hammer.ondrag = function(ev) { };
hammer.ondragend = function(ev) { };

hammer.ontap = function(ev) { };
hammer.ondoubletap = function(ev) { };
hammer.onhold = function(ev) { };

hammer.ontransformstart = function(ev) { };
hammer.ontransform = function(ev) { };
hammer.ontransformend = function(ev) { };

（5）Handlebars http://handlebarsjs.com/
Ember.js使用的是Handlebars模板引擎。

Html代码

<div id="menu-placeholder"></div>
<script id="menu-template" type="text/x-handlebars-template">
    <ul>
        {{#each menu}}
        <li><a href="{{link}}">{{name}}</a></li>
        {{/each}}
    </ul>
</script>
<script type="text/javascript">
    (function () {

        // Grab the HTML source that needs to be compiled
        var menuSource = document.getElementById('menu-template').innerHTML;

        // Compiles the source
        var menuTemplate = Handlebars.compile(menuSource);

        //Data that will replace the handlebars expressions in our template
        var menuData = {
            menu: [
                {name: "Link 1", link: "http://google.com"},
                {name: "Link 2", link: "http://yahoo.com"},
                {name: "Link 3", link: "http://youtube.com"},
                {name: "Link 4", link: "http://twitter.com"},
            ]
        };

        // Process Template with Data
        document.getElementById('menu-placeholder').innerHTML = menuTemplate(menuData);
    })();
</script>

说到Ember.js就应该提提AngularJS http://angularjs.org/ 它是Google开发的JavaScript MVW Framework，这里有一些参考资料：http://www.iteye.com/news/28651-AngularJS-Google-resource MVC框架层数不穷，TodoMVC 使用各种JavaScript MV*框架实现同一个应用Todo，可以帮助你挑选合适的MV*框架。

（6）Q.js https://github.com/kriskowal/q
Q.js是Promises/A+规范的一个实现，将嵌套异步序列（Pyramid of Doom）转化为类似同步的序列。
比如，嵌套异步序列：

Js代码

step1(function (value1) {
    step2(value1, function(value2) {
        step3(value2, function(value3) {
            step4(value3, function(value4) {
                // Do something with value4
            });
        });
    });
});

改造后：

Js代码

Q.fcall(promisedStep1)
.then(promisedStep2)
.then(promisedStep3)
.then(promisedStep4)
.then(function (value4) {
    // Do something with value4
})
.catch(function (error) {
    // Handle any error from all above steps
})
.done();

当然也还有很多其他的实现，比如：

Async.js https://github.com/caolan/async

RSVP.js https://github.com/tildeio/rsvp.js

when.js https://github.com/cujojs/when

AngularJS的$q https://docs.angularjs.org/api/ng/service/$q

一	二	三	四	五	六	日
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30

几个不可或缺的lib

相关推荐

评论抢沙发

热门标签

QQ: 41835478

回顶部

相关推荐

评论 抢沙发

热门标签

QQ: 41835478

回顶部

评论抢沙发