看到项目上的移动框架,网上寻找了一下,发现原来这些一開始都有。

于是,找了个演示样例開始构建一个移动平台的CMS——墨颀 CMS,方便项目深入理解的同一时候。也能够自己维护一个CMS系统。

构建框架

尝试过用AngularJS和EmberJS。发现对于使用AngluarJS以及EmberJS来说,基本的问题是要使用自己熟悉的东西没那么easy引入。并且考虑到谷歌向来对自己的项目的支持不是非常好~~,所以便放弃了AngluarJS的想法。

于是開始寻找一些方案,可是最后还是选择了一个比較通用的方案。

  1. RequireJS
  2. jQuery
  3. Underscore
  4. Backbone

相对于AngularJS来说,Backbone是一个轻量级的方案,从大小上来说。对于自己来说。灵活性算是当中好的一点,也就是自己能够任意的增加非常多东西。

关于Backbone

Backbone.js是一套JavaScript框架与RESTful JSON的应用程式接口。也是一套大致上符合MVC架构的编程范型。Backbone.js以轻量为特色。仅仅需依赖一套Javascript 函式库就可以执行。

详细功能上应该是

  1. Backbone 轻量级,支持jquery,自带路由。对象化视图,强大的sync机制降低页面大小从而加快页面显示。
  2. jQuery jQuery使用户能更方便地处理HTML(标准通用标记语言下的一个应用)、events、实现动画效果,并且方便地为站点提供AJAX交互。只是主要是jQuery能够使用户的html页面保持代码和html内容分离,仅仅需定义id就可以。
  3. Underscore是Backbone的依赖库 Underscore 是一个JavaScript有用库,提供了相似Prototype.js的一些功能,可是没有继承不论什么JavaScript内置对象。

  4. RequireJS 你能够顺序读取仅须要相关依赖模块。

前台UI,使用的是Pure CSS,一个轻量级的CSS框架,可是最后感觉,整体用到一起。大小还是相当的。仅仅是能够有一个更好的移动体验。

其它可替换的框架

  1. AngularJS。考虑到某些因素,可能会替换掉Backbone,可是还不是当前可行的方案。

    为了学习是一方案,也为了更好的普及某些东西。

  2. handlebars Handlebars 是Mustache的改进。显示与逻辑分离,语法兼容Mustache。能够编译成代码,改进Mustache对路径的支持,可是若须要在服务端执行须要使用服务端Javascript引擎如Node.js。

项目

前后端分离设计,后台对前台仅仅提供JSON数据。所以在某种意义上来说可能会仅仅适合浏览,和这个要配合后台的框架。总的来说,适合于阅读类的站点。

源代码

代码依旧是放在Github上。基本功能已经能够Works了。

https://github.com/gmszone/moqi.mobi

进展及目的

最后目标:构建一个移动平台的CMS系统。

当前:对于这样一个项目来说,眼下会考虑优先支持以下的两个框架,

  1. Django+Tastypie API
  2. Wordpress

如今:能够从后台读取到数据。

其它

一些比較好的资料有

相关资源

QQ讨论群: 344271543

源代码 Github: https://github.com/gmszone/moqi.mobi

构建基于Javascript的移动web CMS入门——简单介绍的更多相关文章

  1. 构建基于Javascript的移动web CMS——Hello,World

    在一篇构建基于Javascript的移动web CMS入门--简单介绍中简单的介绍了关于墨颀CMS的一些原理,其极框架组成.于是開始接着应该说明一下这个CMS是怎样一步步搭建起来. RequireJS ...

  2. 构建基于Javascript的移动web CMS——模板

    在上一篇<构建基于Javascript的移动CMS--Hello,World>讲述了墨颀 CMS的大概组成,并进行了一个简单的演示样例,即Hello,World.这一次,我们将把CMS简单 ...

  3. 构建基于Javascript的移动web CMS——加入jQuery插件

    当看到墨颀 CMS的菜单,变成一个工具栏的时候.变认为这一切有了意义.于是就继续看看这样一个CMS的边栏是怎么组成的. RequireJS与jQuery 插件演示样例 一个简单的组合示比例如以下所看到 ...

  4. 使用PowerApps快速构建基于主题的轻业务应用 —— 入门篇

    作者:陈希章 发表于 2017年12月12日 前言 在上一篇文章 基于Office 365的随需应变业务应用平台 中我提到,随着随需应变的业务需要,以及技术的发展,业务应用的开发的模式也有了深刻的变化 ...

  5. web服务的简单介绍及apache服务的安装

    一,web服务的作用:  是指驻留于因特网上某种类型计算机的程序,可以向浏览器等Web客户端提供文档.可以放置网站文件,让全世界浏览:   可以放置数据让全世界下载.目前最主流的三个Web服务器是Ap ...

  6. Java Web中web.xml文件简单介绍

    参考博客: https://www.cnblogs.com/Y-oung/p/8401549.html 1.XML 声明和根元素 <?xml version="1.0" en ...

  7. 构建基于Javascript的移动CMS——生成博客(二).路由

    在有了上部分的基础之后.我们就能够生成一个博客的内容--BlogPosts Detail.这样就完毕了我们这个移动CMS的差点儿基本的功能了,有了上节想必对于我们来说要获取一个文章已经不是一件难的事情 ...

  8. 构建基于Javascript的移动CMS——加入滑动

    在和几个有兴趣做移动CMS的小伙伴讨论了一番之后,我们认为当前比較重要的便是统一一下RESTful API.然而近期持续断网中,又遭遇了一次停电,暂停了对API的思考.在周末无聊的时光了看了<人 ...

  9. Yii2高速构建RESTful Web服务功能简单介绍

    Yii2相比Yii1而言,一个重大的改进是内置了功能完备的RESTful支持. 其内置RESTful支持提供了例如以下功能: 使用ActiveRecord的通用接口来高速构建原型: 应答格式协商(缺省 ...

随机推荐

  1. linux进程通信之管道

    1.介绍: 1)同一主机: unix进程通信方式:无名管道,有名管道,信号 system v方式:信号量,消息队列,共享内存 2)网络通信:Socket,RPC 2.管道: 无名管道(PIPE):使用 ...

  2. Codeforces 1038E Maximum Matching

    可能写了个假算法 假设定义:含有一个欧拉路的图为类欧拉图 欧拉路的定义:一个无向连通图中,存在一条路径对所有边都遍历且仅遍历一次:判断方法:该连通图中度为奇数的点的个数不能超过2,即为0或者2 题目解 ...

  3. bzoj DZY Loves Math V

    Time Limit: 10 Sec  Memory Limit: 256 MBSubmit: 509  Solved: 284[Submit][Status][Discuss] Descriptio ...

  4. 前端基础-HTML标记语言

    阅读目录 一. HTML标签与文档结构 二. HTML标签详细语法与注意点 三. HTML中标签分类 四. HTML注释 一. HTML标签与文档结构 HTML作为一门标记语言,是通过各种各样的标签来 ...

  5. 什么是EPEL 及 Centos上安装EPEL(转)

    什么是EPEL 及 Centos上安装EPEL 转自:http://www.unxmail.com/read.php?67 RHEL以及他的衍生发行版如CentOS.Scientific Linux为 ...

  6. linux dd命令实例讲解

    转:http://blog.chinaunix.net/uid-28549627-id-3922282.html 提到linux 系统中的dd命令,各位技术博友大多都很熟悉,用法也是好多,今天主要跟大 ...

  7. iOS: ios视频播放(MPMediaPlayerController,AVPlayer,AVPlayerViewcontroller、ffmpeg-AVPlayer)

    介绍: 和音频播放一样,ios也提供个很多的API.如mediaPlayer.framework下的MPMediaPlayerController.AVFounditon.framework下的AVP ...

  8. linux过滤ip地址

    一.系统版本 [root@zabbix-server tmp]# cat /etc/redhat-release CentOS Linux release 7.2.1511 (Core) 二.用awk ...

  9. unity 的视锥剔除和遮挡剔除

    Regular frustum culling only renders objects within the camera’s view. This is automatic and always ...

  10. CSS3 animation动画

    CSS3 animation动画 1.@keyframes 定义关键帧动画2.animation-name 动画名称3.animation-duration 动画时间4.animation-timin ...