打开HTML5的技术网站,满屏的“5个推荐的JavaScript框架”、“10个移动应用框架”,全都是你妹的框架,

但是,你知道这些框架是干毛用的吗?来吧,我们来梳理一下吧

目前HTML5涉及的框架大致可以分成以下几类:

1、跨平台开发框架:PhoneGap 、 Titanium、 Trigger.IO(商业)

这类框架是向web提供底层硬件的接口,让开发人员可以用WEB的技术开发出Native APP。

2、UI框架:jQuery Mobile、 Sencha Touch、 jqMobi

这类框架提供“控件”:布局、按钮。。。。。。

3、MVC框架:Backbone.js、 Spine.js、 Ember.js

这类框架提供在javascript端上Model、View分离的技术,因为在one page的情况下,javascript

控制的逻辑越来越复杂,需要做这样的分离。

4、依赖与加载框架:Require.js、 Sea.js

当我们要写一个稍大型的javascript应用的时候,必然会面对不同JS文件间的引用,JS的同步、异步

加载等需求,这种框架就是帮我们解决这样的问题的。

好,下面我们挑其中的一些框架来讲一讲。

  PhoneGap

http://phonegap.com/

  • 开源
  • 编写一次,可编译到IOS、Andriod、Win Phone。。。
  • 支持GPS、摄像头、文件系统。。。等系统接口

  jQuery Mobile

http://jquerymobile.com

如果你要开发一款接近原生UI的应用,那采用一款UI框架会节省你很多的时间,jQuery Mobile就是

这样的一个UI框架。

  • 跟jQuery没有绝对关系,你可以选用其他的DOM选择器
  • 社区很活跃,已经适用于实际开发
  • 虽然运行效率不断提升,但是目前还是有点慢,特别是用在PhoneGap上
 
 

Backbone.js

Backbone.js是一款用在javascript上的MVC框架,你可以类比成Ruby on Rails、Struts等Server端的MVC框架,

当然,在MVC的模式实现程度上可能有一定的差别。

  • 一款小型、流行的用于编写大型HTML5应用的MVC框架
  • 他们在用backbone:LinkIn,Soundcloud,Basecamp,Codiqa

上图是Backbone的MVC架构图,学习MVC的时候,我们应该都会接触到一个技术:模板引擎,因为需要把Model的数据表现到View中,

需要模板引擎这种粘合剂去把两者粘合起来。Mustache就是这样一个模板解释引擎

Mustache

  • 支撑广泛的语言种类
  • 简单,但是很强大
  • 支持循环
  • 你可以使用underscore.js模板,但是不够强大

Require.js

  • 把JS库模块化
  • 大型项目必备
  • 支持异步加载-加快加载速度
  • 支持把多文件压缩到一个文件中


  Require.js + Tempalte

  Require.js支持加载text文件,因此,可以用来加载模板文件
  1. define([“backbone”,“underscore”,“jquery”,“text!listview.html”],
  2. function(Backbone,_,$,listViewTemplate){…
  3. Mustache.render(listViewTemplate,this.model.toJSON())…
 
 
 

总结

框架满天飞,在框架大海中,捞出你需要的框架,DRY(Dont Repeat Yourself)

define([“backbone”,“underscore”,“jquery”,“text!listview.html”],function(Backbone,_,$,listViewTemplate){…Mustache.render(listViewTemplate,this.model.toJSON())…
define([“backbone”,“underscore”,“jquery”,“text!listview.html”],function(Backbone,_,$,listViewTemplate){…Mustache.render(listViewTemplate,this.model.toJSON())…
 

搭建一个全栈式的HTML5移动应用框架(纯干货,亲!)的更多相关文章

  1. 一个小时搭建一个全栈 Web 应用框架

    把想法变为现实的能力是空想家与实干家的区别.不管你是在一家跨国公司工作,还是正在为自己的创业公司而努力,那些有能力将创意转化为真正产品的人,都具有宝贵的技能并拥有明显的实力.如果你能在不到一个小时的时 ...

  2. 全栈式JavaScript

    如今,在创建一个Web应用的过程中,你需要做出许多架构方面的决策.当然,你会希望做的每一个决定都是正确的:你想要使用能够快速开发的技术,支持持续的迭代,最高的工作效率,迅速,健壮性强.你想要精益求精并 ...

  3. 大数据全栈式开发语言 – Python

    前段时间,ThoughtWorks在深圳举办一次社区活动上,有一个演讲主题叫做“Fullstack JavaScript”,是关于用JavaScript进行前端.服务器端,甚至数据库(MongoDB) ...

  4. 为什么说Python 是大数据全栈式开发语言

    欢迎大家访问我的个人网站<刘江的博客和教程>:www.liujiangblog.com 主要分享Python 及Django教程以及相关的博客 交流QQ群:453131687 原文链接 h ...

  5. 基于NodeJS的全栈式开发

    前言 为了解决传统Web开发模式带来的各种问题,我们进行了许多尝试,但由于前/后端的物理鸿沟,尝试的方案都大同小异.痛定思痛,今天我们重新思考了“前后端”的定义,引入前端同学都熟悉的 NodeJS,试 ...

  6. (转)也谈基于NodeJS的全栈式开发(基于NodeJS的前后端分离)

    原文链接:http://ued.taobao.org/blog/2014/04/full-stack-development-with-nodejs/ 随着不同终端(pad/mobile/pc)的兴起 ...

  7. 全栈式框架的选择:MEAN or MEANS?

    说明:个人博客地址为edwardesire.com,欢迎前来品尝.本博客作为备份和引流 这两个月一直在进行sails后端开发,其中遇到的问题不断.放在研究用户访问控制矸例程上的时间太多,最后也没用弄出 ...

  8. 也谈基于NodeJS的全栈式开发(基于NodeJS的前后端分离)

    前言 为了解决传统Web开发模式带来的各种问题,我们进行了许多尝试,但由于前/后端的物理鸿沟,尝试的方案都大同小异.痛定思痛,今天我们重新思考了“前后端”的定义,引入前端同学都熟悉的NodeJS,试图 ...

  9. vuejs、eggjs全栈式开发设备管理系统

    vuejs.eggjs全栈式开发简单设备管理系统 业余时间用eggjs.vuejs开发了一个设备管理系统,通过mqtt协议上传设备数据至web端实时展现,包含设备参数分析.发送设备报警等模块.收获还是 ...

随机推荐

  1. ajax实现md5加密

    一个asp.net ajax例子,使用jquery,实现md5加密..NET 4.0,Visual Studio 2010以上.效果体验:http://tool.keleyi.com/t/md5.ht ...

  2. 【LeetCode】88 - Merge Sorted Array

    Given two sorted integer arrays nums1 and nums2, merge nums2 into nums1 as one sorted array. Note:Yo ...

  3. atoi()函数的实现

    atoi()函数的功能:将字符串转换成整型数:atoi()会扫描参数nptr字符串,跳过前面的空格字符,直到遇上数字或正负号才开始做转换,而再遇到非数字或字符串时('\0')才结束转化,并将结果返回( ...

  4. Codeforces Round #368 (Div. 2) C. Pythagorean Triples(数学)

    Pythagorean Triples 题目链接: http://codeforces.com/contest/707/problem/C Description Katya studies in a ...

  5. 在VS2012中实现Ext JS的智能提示

    Visual Studio 2012太强大了,居然能自己会去提取Ext JS的类的属性和方法,从而实现只能提示.下面就来介绍一下实现这个功能. 在Visual Studio 2012中随便创建一个We ...

  6. Unity3D Script KeynoteII

    [Unity3D Script KeynoteII] 1.使用代码操作Particle. //粒子对象 GameObject particle = null; //粒子X轴方向速度 float vel ...

  7. C++11对象构造的改良

    [C++11对象构造的改良] C++03中一个构造函数无法构造另一个构造函数,因为A()实际上意味着生成一个临时对象,存在语音混淆.详情请看参考2. C++11中允许直接在初始化列表中调用其它的构造函 ...

  8. Java(07)转化流

    查看API得知: public class OutputStreamWriter extends Writer public class InputStreamReader extends Reade ...

  9. LightOJ 1245 Harmonic Number (II)(找规律)

    http://lightoj.com/volume_showproblem.php?problem=1245 G - Harmonic Number (II) Time Limit:3000MS    ...

  10. 埃氏筛法(快速筛选n以内素数的个数)

    给你一个数n,请问n以内有多少个素数?(n <= 10e7) 一般来说,要是对一个整数进行素数判断,首先想到的是写个函数判断是否为素数,然后调用这个函数,时间复杂度为O(n^(½)),但是要求n ...