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

在一篇构建基于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

时间: 2024-08-06 13:06:58

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

构建基于Javascript的移动web CMS——加载JSON文件

在上一篇中说到了如何创建一个Django Tastypie API给移动CMS用,接着我们似乎也应该有一个本地的配置文件用于一些简单的配置,如"获取API的URL"."产品列表"."SEO"(在一开始的时候发现这是不好的,后面又发现Google的爬虫可以运行Javascript,不过也是不推荐的.)这些东西是不太需要修改的,直接写在代码中似乎又不好,于是放到了一个叫作configure.json的文件里. RequireJS Plugins 网上

构建基于JAVASCRIPT的移动WEB CMS入门——简介(转载)

构建基于JAVASCRIPT的移动WEB CMS入门——简介 发布时间:2014-07-17 14:16:18.035763 看到项目上的移动框架,网上寻找了一下,发现原来这些一开始都有.于是,找了个示例开始构建一个移动平台的CMS——墨颀 CMS,方便项目深入理解的同时,也可以自己维护一个CMS系统. 构建框架 尝试过用AngularJS和EmberJS,发现对于使用AngluarJS以及EmberJS来说,主要的问题是要使用自己熟悉的东西没那么容易引入.而且考虑到谷歌向来对自己的项目的支持不

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

在上一篇<构建基于Javascript的移动CMS--Hello,World>讲述了墨颀 CMS的大概组成,并进行了一个简单的演示样例,即Hello,World.这一次,我们将把CMS简单的放到一个能够执行的服务器环境中,也就是说我们须要一个简单的执行环境,以便于进行更有意思的东西--加入?模板. 開始之前 环境准备 类Unix系统 由于电脑上已经装有python了,这里便用python起一个简单的server,对于GNU/Linux.Mac OS等类unix系统来说,都能够这样执行: pyt

构建基于Javascript的移动web CMS入门——简介

看到项目上的移动框架,网上寻找了一下,发现原来这些一开始都有.于是,找了个示例开始构建一个移动平台的CMS--墨颀 CMS,方便项目深入理解的同时,也可以自己维护一个CMS系统. 构建框架 尝试过用AngularJS和EmberJS,发现对于使用AngluarJS以及EmberJS来说,主要的问题是要使用自己熟悉的东西没那么容易引入.而且考虑到谷歌向来对自己的项目的支持不是很好~~,所以便放弃了AngluarJS的想法. 于是开始寻找一些方案,但是最后还是选择了一个比较通用的方案. Requir

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

看到项目上的移动框架,网上寻找了一下,发现原来这些一開始都有. 于是,找了个演示样例開始构建一个移动平台的CMS--墨颀 CMS,方便项目深入理解的同一时候.也能够自己维护一个CMS系统. 构建框架 尝试过用AngularJS和EmberJS.发现对于使用AngluarJS以及EmberJS来说,基本的问题是要使用自己熟悉的东西没那么easy引入.并且考虑到谷歌向来对自己的项目的支持不是非常好~~,所以便放弃了AngluarJS的想法. 于是開始寻找一些方案,可是最后还是选择了一个比較通用的方案

构建基于Javascript的移动web CMS——添加jQuery插件

当看到墨颀 CMS的菜单,变成一个工具栏的时候,变觉得这一切有了意义.于是就继续看看这样一个CMS的边栏是怎么组成的. RequireJS与jQuery 插件示例 一个简单的组合示例如下所示,在main.js中添加下面的内容 requirejs.config( { "shim": { "jquery-cookie" : ["jquery"] } } ); 接着在另外的文件中添加 define(["jquery"], funct

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

当看到墨颀 CMS的菜单,变成一个工具栏的时候.变认为这一切有了意义.于是就继续看看这样一个CMS的边栏是怎么组成的. RequireJS与jQuery 插件演示样例 一个简单的组合示比例如以下所看到的,在main.js中加入以下的内容 requirejs.config( { "shim": { "jquery-cookie" : ["jquery"] } } ); 接着在另外的文件里加入 define(["jquery"],

构建基于Javascript的移动CMS——生成博客(一)

在墨颀 CMS中的动态的文章是从我博客的API加载过来的,因为当前没有其他好的CMS当接口.之前直接拿博客的DB文件+Nodejs+RESTify生成了一个博客的API,而且可以支持跨域请求. 简单的博客构成 这次我们可以简单的做一个可以供移动平台阅读的博客,除了不能写作以外(ps:不能写作还能叫博客么).对于写博客的人来说更多的只是写,而对于读者来说,他们只需要读,所以在某种意义上可以将博客的写和读分离开来. 对于用户来说,博客是由两个页面构建的: 博文列表(blogposts list) 博

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

在有了上部分的基础之后,我们就可以生成一个博客的内容--BlogPosts Detail.这样就完成了我们这个移动CMS的几乎主要的功能了,有了上节想必对于我们来说要获取一个文章已经不是一件难的事情了. 获取每篇博客 于是我们照猫画虎地写了一个BlogDetail.js define([ 'jquery', 'underscore', 'mustache', 'text!/blog_details.html' ],function($, _, Mustache, blogDetailsTempl