jQM note：开发工具的选择

不知道其他的开发人员是否和我一样，在学习一些新的技术时，有对于开发工具的迷茫。这是一个节奏无比快的时代，对于学习周期，除了一门全新的技术或是深奥的研究，都不能太长。就如phpdevshell，在有一定php知识的基础上，留给技术人员的学习时间，一个周就很合适了。

废话太多，切入主题。

关于基于jquery mobile的移动web开发，使用什么样的工具呢？特别是对于刚开始的学习者。以下是我的个人经历，也算是一些建议。

去年的某个时候，在jqm还是1.0a版本的时候，我接触了它。兴致勃勃的开始学习docs。使用notepad++写下第一个页面，放在moto上运行了，挺开心。于是决定继续深入学习，可是，当我看到data attribute的时候，愣了。这么多的属性，首次接触，每次写下一个，都要打开api确认，这让代码的产出量严重受阻。对于我这样的并非专注于前端的人来说，已经不愿再继续了。

后来工作开始密集，除了零星的看一下docs外，就没有在写下第三个页面。究其原因，还是因为开发工具没有选择好。

直到有一天，需要对一个html页面进行样式调整，而我对于css的书写，也是个半吊子，只好打开dw了。在完成工作后，忽然想，dw应该有jqm的支持吧，果断的寻找，嘿嘿，果不其然。首先是dw增加了对html5的支持，更有对jqm框架的支持。这好了，于是，我将docs再次读了一遍。翻出当时在ppulr上下载的两本关于jqm的书（我是穷书生，只好这么干了），jqm first look，还有一本，就叫jqm。开始重新加深学习。

这也是我喜欢的学习法方式，先把对整个技术的框架搭好，然后大致浏览一遍，最后在细读一次，这个时候，代码是demo级别的，最后，拿出一个实际需求，整体完成一次开发。增量式，就像封装一个类。

ok，那就让我们图文来感受下dw开发jqm移动web的快乐吧。

1 打开dw5.5 ，新建空文档，选择doctype html5：

这里需要多说一句，关于css和js文件，由于是本地开发，需要速度，那就把他们下载了放在你的统一的开发目录吧。

2 不用说，码代码吧。

如上图，左边的代码书写区域，我最喜欢的就是提示功能。而在右边，还有鼠标操作哦。怎么样，比一个字符一个字符的敲打，成本要低吧。有些人说，高级程序员就是喜欢用vim等一个字符一个字符的敲打啊。不过，我一切以成本计算，所以，要视具体情况定。

3 预览。绝对的爽啊。就像不必每次svn ci一下那般，直接预览效果【Multiscreen】。——当然，这只是静态页面的制作。这里的意思是，不必每次都上传打开浏览器，或者更新至手机用实际环境测试。——开发过程中。看看下图，其中屏幕大小是可以自定义的【Viewport Sizes...】。

怎么样，多方便啊。

特别是代码提示功能，这对于快速开发，是不可或缺的。jqm中那一堆data-＊的属性，那一堆ui-＊的class，那一堆Methods，有了dw，都会显得容易许多的。

当然了，这些，都只是初步开发。但是，不得不说，如果入门时候，选对了工具，阻碍心理悉数小了，那么，继续学习，学好的念头就强烈了。

希望你也爱上jqm，爱上移动web！

以下是这个实例的代码：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>手机小说站</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="js/jquery.mobile-1.0.1.min.css" rel="stylesheet" type="text/css">
<script src="js/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="js/jquery.mobile-1.0.1.min.js" type="text/javascript"></script>
</head><body>
<div data-role="page" id="listview"><div data-role="header" data-position="fixed"><nav data-role="navbar"><ul><li><a href="#" class="ui-btn-active">首页</a></li><li><a href="#">玄幻</a></li><li><a href="#">奇幻</a></li><li><a href="#">仙侠</a></li><li><a href="#">言情</a></li></nav></div><div data-role="content"><ul data-role="listview"><li data-role="list-divider">玄幻类<span class="ui-li-count">33</span></li><li><a href="#" class="ui-link-inherit"><p class="ui-li-aside ui-li-desc">作者:天蚕土豆</p><h5 class="ui-li-heading">《斗破苍穹》</h5><p class="ui-li-desc"><strong>一个关于斗气的世界！</strong></p><p class="ui-li-desc">他叫萧炎，一个被家族称为废物的斗者，然而，他真的是废物吗？....</p></a></li><li data-role="list-divider">奇幻类<span class="ui-li-count">25</span></li><li><a href="#" class="ui-link-inherit"><p class="ui-li-aside ui-li-desc">作者:风凌天下</p><h5 class="ui-li-heading">《异世邪君》</h5><p class="ui-li-desc"><strong>我是杀手，有情有义的杀手！</strong></p><p class="ui-li-desc">世间毁誉，世人冷眼，与我何干？我自淡然一笑； 以吾本性，快意恩仇，以吾本心，遨游世间，我命由我不由天！....</p></a></li><li data-role="list-divider">仙侠类<span class="ui-li-count">18</span></li><li><a href="#" class="ui-link-inherit"><p class="ui-li-aside ui-li-desc">作者:耳根</p><h5 class="ui-li-heading">《仙逆》</h5><p class="ui-li-desc"><strong>为了那个女子，他与天斗！</strong></p><p class="ui-li-desc">一个平庸的山村少年，几经转折最终踏入修仙门派，他如何以平凡的资质修得仙法，如何一步一步走向巅峰，跻身枭雄、宗师之列。....</p></a></li></ul></div><div data-role="footer" data-position="fullscreen"><h4>欢迎来到小鸡手机小说网</h4></div>
</div>
</body>
</html>

jQM note：开发工具的选择相关推荐

【转载】JSP开发工具的选择
JSP引擎搭建起来后就可以着手使用开发工具进行JSP的编程了,现下流行的JSP开发工具主要有IBM VisualAge,JBuilder,NetBeans,JRun,Urledit,dreamweav ...
谈软件开发工具的选择
孙志永.蔡茂(转载自中国计算机报) 2002年08月19日我国的软件开发已经逐步从原来的手工作坊式发展到了软件工程的阶段.同时,软件开发本身也在不断发展,已从"算法+数据结构＝程序&q ...
JAVA 基础（1）开发环境的搭建以及开发工具的选择
我们现在还是在学习阶段因此我们不用配置那么多的jdk,配置一个jdk8就够应付日常的学习了.前面的文章我尽量写详细一些照顾刚入坑的朋友.后文还有教大家怎么使用企业版的idea. 一.开发环境的搭建 1 ...
带你玩转vue——开发工具的选择
在开发中我们发现后端代码偏向逻辑性,而前端代码更偏向视图性,所以选择一个好的前端开发工具是让你对前端开发保持热情的重要元素! 在使用了三四种开发工具并进行反复的挣扎后,博主最终选择了vscode,究其 ...
软件开发：界面库详细对比，开发工具的选择指导
说起界面,那真是百家争鸣.C++里面其他的都好说,像什么XML解析顶多也就十几个著名开源库而已.Office 操作的开源库仅有几个,更可怜的是有个很著名的Office开源库只有JAVA和C#版本,但是 ...
1-4 开发工具的选择
转载于:https://www.cnblogs.com/ZHONGZHENHUA/p/10079932.html
【苹果推】imessage群发条件文档（推送证书）开发工具Pushnotification
推荐内容IMESSGAE相关作者推荐内容 iMessage苹果推软件安装 *** 点击即可查看作者要求内容信息作者推荐内容 1.家庭推内容安装 *** 点击即可查看作者要求内容信息作者推荐内容 ...
python开发工具
工欲善其事必先利其器-简单几步打造顺手的python开发工具(windows,Linux多版本) 初学一门语言,一般来说第一道门槛是开发工具的选择,以及配置,用记事本写代码写写helloworld尚堪 ...
python自带gui_Python GUI开发工具中五种类型的相关介绍
Python这一计算机语言不仅具有十分简捷的操作功能,它还具有十分快速的相关开发功能,此文主要向你介绍的是关于Python GUI开发工具在实际相关应用操作过程中的具体操作,以及这几种开发工具相关内容 ...

jQM note：开发工具的选择

jQM note：开发工具的选择相关推荐

最新文章

热门文章