zoukankan      html  css  js  c++  java
  • 【初识 JQMobile 小小总结】

    作为一个前端新手,之前还没有接触过手机端的项目。两周前项目经理告诉我要做手机端,让我用JQMobile。

    之前在前端群里,偶尔听说过jqmobile很坑,自己又查了下其他框架,比如zepto、amazui,这两款是大家比较推荐的。

    和经理提了一下,经理说就用jqmobile吧,看来他还是比较相信JQ的。不过我心里还是有很多担心,不过也没关系,就算是坑,

    也得自己去跳跳才知道,况且也肯定会有收获的,不被坑,怎么知道哪里坑?

    第一天我花时间看了一下API,第二天就让我开始写页面了。一直对于jqmobile的API不满意,感觉始终不全,我查文档得在三个地方查:

    W3C.cc、官方API和下载框架自带的demo,感觉自带的demo要全面一点,不过这三个加起来始终还是不全。

    jqmobile虽然大,但确实也比较全,几乎自己不用写样式。对于我现在这个时间急的项目,其实还挺合适。

    因为它有很多结构定的比较死,比如:listview,当时我也真是头疼,需要往里面添加东西怎么都不合适,甚至让我觉得这果然是个坑。

    冷静下来,还是得仔细看它的源码,最后利用css优先级,自己扩展代码,解决了这个问题。

    如下:我把listview的两列结构,添加了一列变成3列了,并覆盖了它的图标替换成我想要的复选框。

    这里本身是总结,就不做具体代码展示了,看下节点吧:

      <ul data-role="listview" >
             <li data-role="list-divider" data-theme="b">listview</li>
             <li class="ui-li-has-alt ui-li-has-thumb">
                <a href="" class="ui-btn-3-1 ui-btn">
                    <img src="{$vo.img_url}"/>
                    <h2>{$vo.title}</h2>
                </a>
                <div class="ui-btn ui-btn-3-2">
                    <p></p>
                    <h4>count</h4>
                    <div data-role="none" class="selectNumber-gruy">
                        <span  id="reduceNum" class="selectNumberBtn noSelect" data-role="none">-</span>
                        <input id="numInput" type="text" name="num[]" class="selectNumberInput" autocomplete="off" value="1" maxlength="8" title="数量选择" data-role="none" readonly="readonly">
                        <span href="javascript:void(0);" id="addNum" class="selectNumberBtn" data-role="none">+</span>
                    </div>
                </div>
                <span class="ui-btn ui-btn-3-3">
                    <input type="checkbox" autocomplete="off" name="id[]" />
                </span>
             </li>
      </ul>

    自定义或扩展样式是难免的,不过一定要小心可能会带来的问题,而且一定要确保没有遗漏一些细节。解决了这个问题,突然就觉得jqmobile真的挺好了。虽然它那么大。

    关于jqmobile的ajax提交机制,虽然绚丽一点,但实在有点影响我的js,直接全局禁了。禁用绑定要放在JQ之后,mobile.js之前。

      
      <script type="text/javascript" src="__STATIC__/jquery.min.js"></script>
      <script> $(document).bind("mobileinit", function() { // global ajax stop $.mobile.ajaxEnabled=false; }); </script> <script type="text/javascript" src="__JS__/jquery.mobile-1.4.2.min.js"></script>

    以上这两个问题估计是我刚接触时最头疼的问题。

    jqmobile的弹窗popup和面板panel,是我挺喜欢的两个东西,总之它实实在在的加快了我开发的效率,不过现在才用它两周,项目还未收尾。还没考虑到最后的优化问题,

    估计到时候要把自己折磨死。

    说实话,除了JQ,我一般很少用框架,插件都是自己写,而且只要是公用的要封装的插件,我都用原生JS写。目的很简单,把基础打牢一点,虽然这样并不利于一些维护和别人辨识你的代码。

    我知道大量用框架是迟早的事情,但是作为新手,我还是暂时尽量自己原生实现一些功能。有兴趣可以看看我的其它博客里发表的插件。

    这次算是初次使用这类框架,有很多收获:

      1.看框架源代码,能学到很多思想,结构的把控。

      2.关于css,js命名等,本身自己英语不好,看了老外的命名,纠正了自己的一些命名错误。

      3.感受到了框架开发速度的快感,不过无论如何,还是先得有较好的基础,这样才真正的谈得上快感。

      4.使用框架后,发现自己更加容易懒于去写代码,这是需要注意的问题。

      5.不管一个框架好不好,至少我又了解了一个,以后又多一个可以用来对比的框架。

    好吧,今天就这么多了。有兴趣的朋友,可以私下交流哈。

  • 相关阅读:
    数学图形(1.25)cassini曲线
    数学图形(1.24)巴斯加线与蚶线
    数学图形(1.23)太极线
    webpack打包多个入口文件
    cnpm与npm的区别
    入门 Webpack,看这篇就够了
    protocol error, got 'n' as reply type byte + redis如何后台启动
    PHP执行系统外部命令函数:exec()、passthru()、system()、shell_exec()
    CentOS7.0+Zend Guard Loader for PHP 5.6环境搭建
    通过shell脚本进行数据库操作
  • 原文地址:https://www.cnblogs.com/1wen/p/4234219.html
Copyright © 2011-2022 走看看