前文我们介绍了混合应用的三种方案，方案三中的思想基本上就是原生应用的开发思想了。这里要做的对比应该不算大，因此笔者不会做太多的阐述介绍两者的不同。但是如果是偏重Web架构的，或者是以方案二这种透过特殊工具开发的，就和原生开发有对比了。这次笔者暂时会以方案一拿来讨论。讨论中主要会以架构，代码管理上来讨论，当然也会说到部分细节。

架构讨论：因为这是偏重于Web开发的应用，这里面就需要开发人员有很强烈的大型Web前端架构思想在里面。提到这里可能马上浮现在你脑海中的词语就是：angular.js，require.js，sea.js，backbone.js等。没错，这些工具都能够帮助你快速地梳理好思路，管理好你的Web应用。对开发者最友好的，发挥空间最大的非PhoneGap莫属了。所以笔者就会以PhoneGap应用展开讨论。（因为类似Sencha也有提供方案，但是Sencha本身是一个重量级的框架，而且有自己的思想在里头，加上他本身也提供开发工具，在这里就不适合讨论了。对于开发者来说可以根据自己的需求选择好工具）

从工具上看：Angular.js

用于双向绑定，网络请求，视图管理等工作。

Require.js

javascript模块化工具，在使用较多的交互对象，PhoneGap插件的时候，你就会发现一个强大的模块化工具会在开发的时候提供极好的帮助。能够帮助你把整体的代码，管理得井井有条。

Jade Template Engine

模板引擎。笔者个人比较推荐使用Jade，而且笔者本人也在博客中多次写到Jade在不同场景下使用的技巧的有关文章。主要是jade的语法太简洁了，而且面向JS开发人员非常友好。如果你还没有开始使用模板引擎，赶紧加入这个队列吧，你已经落后了。

Jquery Mobile

如果你暂时还没有一个设计师，但是又急于构造一个应用出来。jquery mobile就提供了多套不同风格的模板，供你使用，而且还含有不同的交互动画等。而且也是跨平台的。当然实际场景中，笔者觉得你会花很多时间在写css上面，因为设计总是天马行空的。当然你还有很多工具啦，例如sass，以及less.js等。

PhoneGap.js或者Cordova.js

做Phonegap开发必须使用的代码库，用于和PhoneGap框架通讯。现在这个库已经改名了，是Cordova。具体为什么改名，得问Adobe咯。

PhoneGap Plugins

PhoneGap的插件能够帮助你快速地抵达手机的其他API上面，直接使用Javascript来操控这些底层的API。例如调用Push Notification的相应发生的事件。

从代码目录上面看混合应用中的Web层：

/js           mainView.js           settingView.js           networkObject.js           renderObject.js      /lib           /PhoneGapPlugins                push-notification-plugin.js                pickerView.js           PhoneGap.js           zepto.js           jquerymobile.js           iscroll.js           angular.js           jade.js      /css           /mainView                listItemTemplate.css                questionListTemplate.css           /settingView           /personView           /layout                navigationBar.css                tabButton.css           app.css      /template           /mainView                listItemTemplate.txt                questionListTemplate.txt           /settingView           /personView           /layout                navigationBarTemplate.txt                tabButtonTemplate.txt      index.html      app.js      require.js

从代码的目录上面看，就是经典的静态网页文件的目录，非常简单。下面就用一句话来说说整个应用的运作过程吧：

打开PhoneGap应用 ->进入 index.html ->运行require.js ->加载应用资源 -> app.js 控制整个应用 -> angular.js 进行事件绑定以及视图渲染 ->视图渲染的时候会将数据和加载好的视图模板（template目录下的代码）处理 ->经过jade模板引擎 ->渲染到相应的位置上就是如此简单。

看完了简单的PhoneGap应用后，笔者们来看看简单iOS应用在开发时候的代码目录吧。思路上还是非常相似的。在这里面，笔者不会深入代码部分去讨论具体的实现以及细节上的东西。 

demoApp           /Resource                navigationBar.png                navigationBar@2x.png           /demoApp                AppDelegate.h                AppDelegate.m                /SettingViewController                     settingViewController.h                     settingViewController.m                /MainViewController                     mainViewController.h                     mainViewController.m                /Supporting Files                     demoApp-Info.plist                     InfoPlist.strings                     …           /plugin                /AFNetworking                     AFHTTPClient.h                     AFHTTPClient.m                     AFHTTPRequestOperation.h                     AFHTTPRequestOperation.m                     …           /Frameworks                CoreData.framework                UIKit.framework           /Products                demoApp.app

Objective-C 是一种通用、高级、面向对象的编程语言。Objective-C是承自Smalltalk的信息传递模型（message passing）。Objective-C里，与其说对象互相调用方法，不如说对象之间互相传递信息更为精确。Objective-C强调面对对象编程，且Objective-C中强制要求将类的（interface）与实现（implementation）分为两个部分。类的定义文件遵循C语言之惯例以 .h 为后缀，实现文件以 .m 为后缀。所以你会看到大量的类文件在里头，整个工程就是有不同的类构成的。（当然可能这么描述不太准确，但是便于大家理解）
这就和丰富的Web前端有很大区别了，在Web前端开发里有HTML，CSS，JS三剑客，必须要用好这三个东西才可以把整个应用才可构建出来。但是在Native应用中，就很单一了。你只需要把握好Objective-C就可以了。因此对于原生应用来说，开发时只要遵守好规范，即使是一个新手参与开发，也可以快速地上手，看懂代码。因为模式已经定好，大家使用同一套的API。按着流程走就好了。当然学习Objective-C需要过程，但是对于拥有C语言，Java语言经验的开发者来说，是非常简单的事情。

当然，原生开发的缺点也很明显了，就是满足不了你的跨平台需求。

从代码目录上面看，其实也基本上看到笔者为什么使用多种JS库以及框架的原因了。主要的目的就是为了构建一个可维护的，具有规范性的Web应用。因为本身Javascript这门语言非常灵活，100个人可以具有100种风格，加上没有专门对于Javascript开设的课程，在过往都容易存在对这门语言的误解。基于种种的原因，就要约束好一个应用的代码风格，架构。此外，Javascript本身没有类的概念，所以在Javascript的面向对象编程中：Javascript的数据和成员封装很简单。没有类，完全是对象操作。这和Objective-C有很大不同。这个时候必须要有一种心态处理好整个Web应用：就是尽可能地抽象成对象，你的工作就是对象与对象之间存在交流。

另外有一些点是值得开发者注意的。对于原生应用来说，不管是iOS的，还是Android的，都会提供一套原生界面的库。以Objective-C为例子。如果笔者需要调用Alert，笔者只需要编写：UIAlertView * alertView = [[UIAlertViewalloc]init];，就把这个view声明好了。再去执行相应的方法，就可以了。但是对于Web应用来说，就需要编写<div id=’alertView’><button>确定</button></div><script>$(‘#alertView’).show();</script>

，一堆的css代码和html代码去实现。当然你会询问笔者，直接写 alert() 不就可以了吗？要是真这么简单的话，建议你在iOS的WebView中编写一下alert，实现：title 是提示，内容是：alert view，确定按钮的文字是：好的。你就知道WebView的限制在哪里了。

因此要完成JS在Web App开发当中的最佳实践，肯定要学习优秀的思想和实现方法了。在这篇文章里面，笔者们暂时先不去做这种深入的讨论。而是先把例子抛给大家，也许会在下一次讨论的时候，再详细深入以下这两个项目。

第一个是斯坦福的iOS开发公开课中的例子，使用objective-c实现，一个简单的卡牌游戏。这是经典的mvc开发了。项目地址如下：https://github.com/lbj96347/Stanford-W2013-CardGame，如果您正在使用Mac，那恭喜你，可以马上编译这个游戏进行测试以及代码浏览。

第二个是使用JavaScript编写的例子，实现同样的需求，做一个简单的卡牌游戏。但是使用的是HTML+CSS+JS开发。同样学习了继承以及mvc的思想。项目地址是：https://github.com/lbj96347/JSMatchismo ，再次恭喜你，不管使用什么电脑，都可以随时浏览代码以及运行该游戏。

请继续关注：混合应用开发实战之混合应用的新思想