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

RequireJS 使用

库及依赖

这里用的是bower的JS来下载库。具体能够參考一下bower install js使用bower管理js 这篇文章。

须要下载的库有

  • RequireJS
  • Backbone
  • Underscore
  • Mustache
  • jQuery

使用RequireJS

引用官网的演示样例

<!DOCTYPE html>

<html>

    <head>

        <title>My Sample Project</title>

        <!-- data-main attribute tells require.js to load

             scripts/main.js after require.js loads. -->

        <script data-main="js/main" src="lib/require.js"></script>

    </head>

    <body>

        <h1>My Sample Project</h1>

    </body>

</html>

我们须要一个require.js和一个main.js放在同一个文件夹，在main.js中用使用require()来载入须要载入的脚本。

require.config({

    baseUrl: 'lib/',

    paths: {

        jquery: 'jquery-2.1.1.min'

    },

    shim: {

        underscore: {

            exports: '_'

        }

    }

});

require(['../app'], function(App){

    App.initialize();

});

在config中能够配置好其它的库，接着调用了app.js。

define(['jquery', 'underscore'], function($, _){

    var initialize = function() {

        console.log("Hello World");

    }

    return {

        initialize: initialize

    };

});

当打开index.html的时候便会在console中输出Hello World。

这样我们就完毕一个主要的框架，仅仅是还没有HTML，这个将会在下次继续。

相关资源

QQ讨论群: 344271543

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

构建基于Javascript的移动web CMS——Hello,World的更多相关文章

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

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

  2. 构建基于Javascript的移动web CMS入门——简单介绍

    看到项目上的移动框架,网上寻找了一下,发现原来这些一開始都有. 于是,找了个演示样例開始构建一个移动平台的CMS--墨颀 CMS,方便项目深入理解的同一时候.也能够自己维护一个CMS系统. 构建框架 ...

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

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

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

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

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

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

  6. 基于MVC4+EasyUI的Web开发框架经验总结（3）- 使用Json实体类构建菜单数据

    最近花了不少时间在重构和进一步提炼我的Web开发框架上,力求在用户体验和界面设计方面,和Winform开发框架保持一致,而在Web上,我主要采用EasyUI的前端界面处理技术,走MVC的技术路线,在重 ...

  7. 基于MVC4+EasyUI的Web开发框架经验总结（2）- 使用EasyUI的树控件构建Web界面

    最近花了不少时间在重构和进一步提炼我的Web开发框架上,力求在用户体验和界面设计方面,和Winform开发框架保持一致,而在Web上,我主要采用EasyUI的前端界面处理技术,走MVC的技术路线,在重 ...

  8. HTML5 Geolocation 构建基于地理位置的 Web 应用

    HTML5 中的新功能 HTML5 是最新一代的 HTML 规范,是 W3C 与 WHATWG 合作的结果,目前仍外于开发中.自从上一代 HTML4,Web 世界已经发生了巨大的变化,HTML5 的到 ...

  9. 9 个基于JavaScript 和 CSS 的 Web 图表框架

    COMSHARP CMS 写道:jQuery, MooTools, Prototype 等优秀的 JavaScript 框架拥有各种强大的功能,包括绘制 Web图表,使用这些框架以及相应插件,我们可以 ...

随机推荐

  1. netcore命令行部署|跨域问题

    1.在hosting中修改发布端口号,如遇见不识别IP则改成*再用命令行运行 { "server.url": "http://*:8089"} 3.给接口开外网 ...

  2. cURL介绍

    1.cURL介绍 cURL 是一个利用URL语法规定来传输文件和数据的工具,支持很多协议,如HTTP.FTP.TELNET等.最爽的是,PHP也支持 cURL 库.本文将介绍 cURL 的一些高级特性 ...

  3. Nginx报 No input file specified. 的问题解决之路 转

    https://m.aliyun.com/yunqi/articles/34240 今天接手公司的一个项目,照例将项目clone下来,配置本地host,nginx,然后访问. 怎么回事?迅速在php的 ...

  4. Begin to study Deep Learning

    今天是儿童节,我开始了人生的新的阶段.借助这个节日我想在今年静下心来,简单执着的进行学习,不掺杂任何利益. 早上起来的比较晚,洗了床单吃了早午饭,背着书包就来到了公司.软件园里面很多游客,但是背着电脑 ...

  5. Spring Boot 学习17--改变JDK编译版本

    Spring Boot在编译的时候,是有默认JDK版本的,如果我们期望使用我们要的JDK版本的话,那么要怎么配置呢? 这个只需要修改pom.xml文件的<build> -- <plu ...

  6. 标准C程序设计七---102

    Linux应用             编程深入            语言编程 标准C程序设计七---经典C11程序设计    以下内容为阅读:    <标准C程序设计>(第7版) 作者 ...

  7. hdu 1575(矩阵快速幂)

    Tr A Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submis ...

  8. [原创][FPGA][IP-Core]altlvds_tx & altlvds_rx

    1. 概述 Alter公司的QuartusII软件提供了LVDS发送和接收的IP核供我们使用,其在本质上可以理解为并行-串行数据的转换器.其在官方文档(见附件)上也这样说过.其中的应用场景有告诉AD/ ...

  9. 洛谷——P2701 [USACO5.3]巨大的牛棚Big Barn

    P2701 [USACO5.3]巨大的牛棚Big Barn 题目背景 (USACO 5.3.4) 题目描述 农夫约翰想要在他的正方形农场上建造一座正方形大牛棚.他讨厌在他的农场中砍树,想找一个能够让他 ...

  10. 再次了解android中屏幕尺寸，单位等

    android设备多种多样,要让你的app能够适配所有的屏幕是一件很痛苦的事情,在做适配之前我们首先需要了解android中dimension的定义 android中dimension是如何定义的? ...