彩世界平台-彩世界时时app-彩世界开奖app苹果下载

热门关键词: 彩世界平台,彩世界时时app,彩世界开奖app苹果下载

您的位置:彩世界平台 > 新闻动态 > 构建基于Javascript的移动web CMS——加载JSON文件

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

发布时间:2019-09-02 02:14编辑:新闻动态浏览(100)

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

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

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

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

    构建框架

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

    于是开始寻找一些方案,但是最后还是选择了一个比较通用的方案。

    RequireJS

    jQuery

    Underscore

    Backbone

    相对于AngularJS来说,Backbone是一个轻量级的方案,从大小上来说。对于自己来说,灵活性算是其中好的一点,也就是自己可以随意的加入很多东西。

    RequireJS Plugins

    网上搜索到一个叫RequireJS Plugins的repo。

    里面有这样的几个插件:

    async : Useful for JSONP and asynchronous dependencies (e.g. Google Maps).

    font : Load web fonts using the WebFont Loader API (requirespropertyParser)

    goog : Load Google APIs asynchronously (requires async!plugin and propertyParser).

    image : Load image files as dependencies. Option to "cache bust".

    json : Load JSON files and parses the result. (Requires text!plugin).

    mdown : Load Markdown files and parses into HTML. (Requirestext! plugin and a markdown converter).

    noext : Load scripts without appending ".js" extension, useful for dynamic scripts.

    于是,我们可以用到这里的json用来加载JSON文件,虽然也可以用Requirejs的text插件,但是这里的json有对此稍稍的优化。

    在后面的部分中我们也用到了mdown,用于显示一个md文件,用法上大致是一样的。

    关于Backbone

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

    具体功能上应该是

    Backbone 轻量级,支持jquery,自带路由,对象化视图,强大的sync机制减少页面大小从而加快页面显示。

    jQuery jQuery使用户能更方便地处理HTML(标准通用标记语言下的一个应用)、events、实现动画效果,并且方便地为网站提供AJAX交互。不过主要是jQuery能够使用户的html页面保持代码和html内容分离,只需定义id即可。

    Underscore是Backbone的依赖库 Underscore 是一个JavaScript实用库,提供了类似Prototype.js的一些功能,但是没有继承任何JavaScript内置对象。

    RequireJS 你可以顺序读取仅需要相关依赖模块。

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

    RequireJS JSON文件加载

    将json.js插件放到目录里,再配置好main.js。

    require.config({
        paths: {
            'text': 'text',
            jquery: 'jquery',
            json: 'require/json'
        },
        shim: {
            underscore: {
                exports: '_'
            }
        }
    });
    
    require(['app'], function(App) {
        App.initialize();
    });
    

    于是我们将HomeView.js中的data变为configure的数据,这样便可以直接使用这个json文件。

    define([
        'jquery',
        'underscore',
        'mustache',
        'text!/index.html',
        'json!/configure.json'
    ], function($, _, Mustache, indexTemplate, configure) {
    
        var HomeView = Backbone.View.extend({
            el: $('#aboutArea'),
    
            render: function() {
                this.$el.html(Mustache.to_html(indexTemplate, configure));
            }
        });
    
        return HomeView;
    });
    

    configure.json的代码如下所示:

    {
        "project": "My Sample Project"
    }
    

    最后实现的效果和模板结束是一样的,只会在页面上显示

    My Sample Project
    

    其他可替换的框架

    AngularJS,考虑到某些因素,可能会替换掉Backbone,但是还不是当前可行的方案。为了学习是一方案,也为了更好的普及某些东西。handlebars Handlebars 是Mustache的改进,显示与逻辑分离,语法兼容Mustache,可以编译成代码,改进Mustache对路径的支持,但是若需要在服务端运行需要使用服务端Javascript引擎如Node.js。

    结束

    本文由彩世界平台发布于新闻动态,转载请注明出处:构建基于Javascript的移动web CMS——加载JSON文件

    关键词:

上一篇:css3毛玻璃效果白边问题

下一篇:没有了