javascript开发 ios和android app的简单介绍

时间：2022-06-05 04:29:49

先看几个名词解释：

nodejs

ionic，Cordova,phoneGap，anjularjs

react-native，reactjs

nodeJs 的介绍参见这里，写的很好http://www.ibm.com/developerworks/cn/opensource/os-nodejs/index.html

总结一下，它是一个V8引擎的封装，V8引擎就是Chrom用来处理javascript的模块，自然，它的作用就是解析并执行javascript。以前这个工作就是游览器的工作，现在不是了，用nodejs就可以了。既然是一个封装，自然又添加了一些内部方法，所以即使会了javascript也需要学习一下才能使用。

phoneGap 的介绍参见 http://www.tricedesigns.com/2012/02/14/what-is-phonegap-other-common-questions/，简单地说，就是一个中间件工具，通过使用它提供的api，能让js具备读取手机信息功能，比如说相机，gps，联系人等。用phonegap写出的手机程序，就是一个运行在Webview中的网页程序。

Cordova是贡献给Apache后的开源项目，是从PhoneGap中抽出的核心代码，是驱动PhoneGap的核心引擎。

ionic

ionic是一个强大的_混合式/hybrid_HTML5移动开发框架，特点是使用标准的HTML、 CSS和JavaScript，开发跨平台（目前支持：Android、iOS，计划支持：Windows Phone、Firefox OS） 的原生App应用：

javascript开发 ios和android app的简单介绍

ionic主要包括三个部分：

  • CSS框架 - 提供原生_App质感的CSS样式模拟_。ionic这部分的实现使用了ionicons图标样式库。
  • JavaScript框架 - ionic基于AngularJS基础框架开发，遵循AngularJS的框架约束；主要提供了适应移动端UI的 AngularJS的扩展，主要包括指令和服务。此外，ionic使用AngularUI Router来实现前端路由。
  • 命令行/CLI - 命令行工具集用来简化应用的开发、构造和仿真运行。ionic命令行工具使用了 Cordova，依赖于平台SDK（Android & iOS）实现将移动web项目打包成原生app。

总结一下，就是ionic是一个成熟的使用了Cordova核心的框架。

react-native: Facebook公布了即将开源的React Native，它基于开源框架React.js，并可用来开发iOS和Android原生应用.

React Native基于React.js实现，而React.js是Facebook推出并开源的一个用来构建用户界面的JavaScript库，其已经应用于构建Instagram网站及Facebook部分网站。React.js 同AngularJS、MeteorJS和Polymer类似，它们都属于Model-Driven Views结构的框架，但是React.js又与他们有不同之处，即React.js使用JavaScript而非HTML来构建用户界面。

React.js ，其实也是一个js库，单独使用时，引入react.js和JSXTransformer.js（如果想用JSX语法的话）这两个js文件，就可以了。

使用React Native开发原生应用的原理是：在JavaScript中用React.js抽象操作系统的原生UI组件，继而代替DOM元素来渲染，比如使用<View>取代<div>，使用<Image>替代<img>等。在后台，React Native运行在主线程之外，而在另一个专门的后台线程里运行JavaScript引擎，两个线程之间通过异步消息协议来通信（有个专门的插件）。

JSX:用Reactjs时，不可避免的要调用个中React的函数，去创建对应的页面元素（比如下面这个a标签，在ios中，最后会被变成一个UIView，不是真正的a标签了）代码写起来很多，就有人发明了这个JSX。JSX 是一種在 Javascript 中使用的 XML 語法，目的是用來轉換成原生的 Javascript。

因为 JSX 最终是输出成 JS 代码来表达的，所以我们可以直接用 React 提供的这些 DOM 构建方法来写模板，比如一个 JSX 写的一个链接：

<a href="http://facebook.github.io/react/">Hello!</a>

用 JS 代码来写就成这样了：

React.createElement('a', {href: 'http://facebook.github.io/react/'}, 'Hello!')

相关文章