自己平时会使用的一个自定义前端结构

这个结构我是根据一些前端技术整合到一起，方便我平时测试一些看到的前端技术，例如CSS、JS等，将理论上升到验证的阶段。

requirejs+backbone+jquery+underscore+jasmine等技术整合集成

现在JS脚本也讲究MVC结构，所以在闲暇的时候查阅了相关资料。使用backbone实现MVC。很多地方都会提到requirejs，一个异步模块加载器。感觉这个东西很高大上，然后就与backbone结合使用。在查询requirejs配置的时候，发现可以与node.js结合使用来做脚本整合。

build文件是在做node整合JS脚本的时候的配置文件，config文件是requirejs的配置文件。optimize是个批处理，执行node的文件整合。关于node整合的说明可以参考这篇文章http://www.oschina.net/translate/optimize-requirejs-projects

scripts文件我也做了简单的分层app放的是入口文件，libs放的是一些库文件例如backbone、jquery等，util我放了一些工具文件例如const存放一些常量等，另外三个就是MVC文件了。config文件如下：


// Author: Pwstrick

// Filename: config.js


// Require.js allows us to configure shortcut alias

// Their usage will become more apparent futher along in the tutorial.

var require = {

  paths: {

    jquery: ‘../libs/jquery/jquery‘,

    mustache: ‘../libs/mustache/mustache‘,

    underscore: ‘../libs/underscore/underscore‘,

    backbone: ‘../libs/backbone/backbone‘,

    dialog: ‘../libs/artDialog/dialog‘,

    dialogPlugins: ‘../libs/artDialog/plugins/iframeTools.source‘,

    extend: ‘../util/extend‘,

    constUtil: ‘../util/const‘,

    templates: ‘../../view‘,

    articleModel: ‘../models/articleModel‘,

    articleView: ‘../views/articleView‘

  },

  shim: {

    ‘backbone‘: {

            //These script dependencies should be loaded before loading

            //backbone.js

            deps: [‘underscore‘, ‘jquery‘],

            //Once loaded, use the global ‘Backbone‘ as the

            //module value.

            exports: ‘Backbone‘

    },

    ‘underscore‘: {

            exports: ‘_‘

    },

    ‘dialog‘: {

            deps: [‘jquery‘],

            exports: "artDialog"

    },

    ‘dialogPlugins‘: {

            deps: [‘dialog‘]

    },

    ‘extend‘: {

            deps: [‘jquery‘, ‘dialog‘]

    },

    ‘articleModel‘: {

            deps: [‘extend‘]

    }

  }

};

同时也发现了一个JS很好用的单元测试框架jasmine。将这个也结合到了自己的结构中。有了这个东西，就能调试出许多潜在的BUG。

jasmine的配置文件


require.config({

  baseUrl: "../../scripts/",

  urlArgs: ‘cb=‘ + Math.random(),

  paths: {

    jquery: ‘libs/jquery/jquery‘,

    underscore: ‘libs/underscore/underscore‘,

    backbone: ‘libs/backbone/backbone‘,

    ‘backbone.localStorage‘: ‘libs/backbone/backbone.localStorage‘,

    extend: ‘util/extend‘,

    constUtil: ‘util/const‘,

    jasmine: ‘libs/jasmine/jasmine‘,

    ‘jasmine-html‘: ‘libs/jasmine/jasmine-html‘,

    ‘jasmine-jquery‘: ‘libs/jasmine/jasmine-jquery‘,

    ‘jasmine-ajax‘: ‘libs/jasmine/jasmine-ajax‘,

    mustache: ‘libs/mustache/mustache‘,

    spec: ‘../test/jasmine/spec/‘

  },

  shim: {

    underscore: {

      exports: "_"

    },

    backbone: {

      deps: [‘underscore‘, ‘jquery‘],

      exports: ‘Backbone‘

    },

    ‘backbone.localStorage‘: {

      deps: [‘backbone‘],

      exports: ‘Backbone‘

    },

    jasmine: {

      exports: ‘jasmine‘

    },

    ‘jasmine-html‘: {

      deps: [‘jasmine‘],

      exports: ‘jasmine‘

    },

    ‘jasmine-jquery‘: {

      deps: [‘jasmine‘],

      exports: ‘jasmine_jquery‘

    },

    ‘jasmine-ajax‘: {

      deps: [‘jasmine‘],

      exports: ‘jasmine_ajax‘

    },

    ‘extend‘: {

      deps: [‘jquery‘]

    }

  }

});


window.store = "TestStore"; // override local storage store name - for testing


//遍历对象中的各种key

alertKeys = function(object) {

        var keys = [];

        for(var key in object) keys.push(key);

        alert(keys.join(","));

};


require([‘underscore‘, ‘jquery‘, ‘jasmine-html‘, ‘jasmine-jquery‘, ‘jasmine-ajax‘, ‘constUtil‘, ‘extend‘], function(_, $, jasmine){


var jasmineEnv = jasmine.getEnv();

  jasmineEnv.updateInterval = 1000;


var htmlReporter = new jasmine.HtmlReporter();


jasmineEnv.addReporter(htmlReporter);


jasmineEnv.specFilter = function(spec) {

    return htmlReporter.specFilter(spec);

  };

  //设置模板路径

  jasmine.getFixtures().fixturesPath = ‘spec/fixtures‘;


var specs = [];


specs.push(‘spec/models/ArticleSpec‘);

    specs.push(‘spec/views/ArticleSpec‘);

    specs.push(‘spec/utils/underscore‘);


$(function(){

    require(specs, function(){

      jasmineEnv.execute();

    });

  });


});

由于会用到HTML5标签，所以也加入了一个modernizr库，帮助那些不支持HTML5标签的浏览器可以识别出。在这里我用到了响应式的技术、HTML5技术、模版技术、自定义字体等


<!DOCTYPE HTML>

<html lang="en-US">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1" />

    <title>假期闲做</title>

    <script type="text/javascript">document.cookie=‘resolution=‘+Math.max(screen.width,screen.height)+‘;path=/‘;</script>

    <link rel="stylesheet" href="styles/style.css" type="text/css"/>

    <script src="optimize/libs/modernizr/modernizr.js" type="text/javascript"></script>

    <script src="optimize/config.js" type="text/javascript"></script>

</head>

<body>

    <!--网站页眉开始-->

    <header class="shortcut" role="banner" aria-label="平文主页">

        <div class="wrap nav_wrap">

            <nav class="nav" id="shortcut_nav" role="navigation">

                <dl>

                    <dd class="cur">

                        <a href="#">个人主页</a>

                        <div class="corner">◆</div>

                        <ul>

                            <li><a href="#">历史书籍</a></li>

                            <li><a href="#">技术书籍</a></li>

                            <li><a href="#">文化书籍</a></li>

                        </ul>

                    </dd>

                    <dd>

                        <a href="#">已阅书籍</a>

                        <div class="corner">◆</div>

                        <ul>

                            <li><a href="#">历史书籍</a></li>

                            <li><a href="#">技术书籍</a></li>

                            <li><a href="#">文化书籍</a></li>

                        </ul>

                    </dd>

                    <dd><a href="#">技术交流</a></dd>

                    <dd><a href="#">外出旅行</a></dd>

                    <dd><a href="#">个人爱好</a></dd>

                </dl>

            </nav>

            <div class="logo" role="banner">Pwstrick</div>

        </div>

        <div class="sawtooth"></div>

    </header>

    <!--网站页眉结束-->

    <div id="slider" class="img_slide wrap" role="main">

        <img src="images/img1.jpg" alt="广告" height="400"/>

    </div>

    <div class="wrap" id="main">

        <ul class="article_list">

            <li><a href="#">无障碍网页应用 WAI-ARIA</a></li>

            <li><a href="#">利用状态模式处理多个模态弹出层的显示隐藏</a></li>

            <li><a href="#">优秀博客推荐：各种数据结构与算法知识入门经典</a></li>

            <li><a href="#">迷你MVVM框架</a></li>

        </ul>


<script type="text/template" id="tpl_article_list">

            <a href="javascript:void(0)" id="btnArt">删除添加</a>

            <ul class="article_list" id="article_list">

            {{#article}}

                <li><a href="#">{{title}}</a></li>

            {{/article}}

            </ul>

        </script>

        <a href="javascript:void(0)" id="operate">操作</a>


<ul class="pages">

            <li><a href="#"><</a></li>

            <li><a href="#">1</a></li>

            <li><a href="#">2</a></li>

            <li><a href="#">></a></li>

        </li>

    </div>

    <script src="optimize/libs/require/require.js" type="text/javascript" data-main="scripts/app/main"></script>

</body>

</html>

我的表达水平不是很给力，大家有兴趣的话也可以自己去搞个结构，方便自己以后快速开发与积累技术知识，以及验证各种技术。源码下载如下

holiday1.1.rar

也可以通过这个链接下载http://download.csdn.net/detail/loneleaf1/7466503

时间： 2024-08-05 19:36:46

自己平时会使用的一个自定义前端结构的相关文章

一个自定义MVP .net框架 AngleFrame

摘要:本篇是本人在完成.net平台下一个项目时,对于MVP框架引发的一些思考,以及开发了一个小型的配置型框架,名字叫作AngleFrame.这个项目属于前端桌面管理系统的一部分,最终要集成进去. 关键词:      .net,Framwork,MVP,框架,c# 前提:       当前有很多成熟的.net Plugin Framework,如MEF.SCSF.Sharpdevelop和OSGi.net等,它们在功能上各有特色. 需求:         1.开发的项目或者说模块属于一个大系统的一

修改jumpserver源码并且实现一个自定义功能模块

在前面已经说了,如何打开jumpserver的管理控制台并且自定义自己的数据模型.接下来实现一个自定义的功能模块. 先看效果! 一 定义好自己的模型(model) 1.1 这一块儿在前一篇博文已经讲过了 二 定义好自己的app(这里注意 一定要自定义app,不要在源码上修改别人的app,因为jumperver的源码不是那么简单的..可能用各种问题) 2.1 python manage.py startapp XXX 通过以上步骤就可以建立自己的app 三  自定义URL 这块儿不难, 直接把我新

一个自定义时间日期控件的使用

一个自定义时间日期的控件,依赖类是GitHub下的.比较好用,现在将使用流程记下: 1.布局文件 <TextView android:id="@+id/tv_remunera_day_datepick" style="@style/input_datepicker" android:layout_width="fill_parent" android:layout_height="wrap_content" androi

一个自定义 HBase Filter -“通过RowKeys来高性能获取数据”

大家在使用HBase和Solr搭建系统中经常遇到的一个问题就是:“我通过SOLR得到了RowKeys后,该怎样去HBase上取数据”.使用现有的Filter性能差劲,网上也没有现成的解决方案,我在这里把这个问题的解决办法分享给大家,抛砖引玉一下. Solr和HBase专辑 1.“关于Solr的使用总结的心得体会”(http://www.cnblogs.com/wgp13x/p/3742653.html) 2.“中文分词器性能比较?”(http://www.cnblogs.com/wgp13x/p

android如何写一个自定义的dialog可以在Title的位置弹出来

先上效果图: Title的Layout为: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="@dimen/title_h

Android网络通信必备神器Volley详解——实现一个自定义的Request（以Gson为例）

虽然Volley已经提供了对于String,图片,JSON,Request的解析,但是总会有些数据不属于以上三种的,这时候就需要我们来自己实现的一个Request来解析我们需要的数据. 实现一个自定义的Request很简单: 1. 继承Request<T>,T代表你要解析的类型,比如服务器返回的response是一个String,那么就要继承Request<String> 2. 实现parseNetworkResponse()和deliverResponse()方法. parseN

跟我一起学extjs5(41--增加一个自定义模块(源码下载)[2销售合同加入菜单和模块展示])

跟我一起学extjs5(41--增加一个自定义模块[2销售合同加入菜单和模块展示]) 在前面一节销售合同模块的信息导入系统后,需要在菜单中加入这个模块,但是现在菜单模块没法利用此系统进行编辑(多模块的层次现在还没有加入),因此只能在数据库里加入一条记录了: 加入后,重新启动一下tomcat,进入系统,就能在菜单"合同管理"下,看到 "销售合同"的菜单条了,点击一下,看看结果吧. 以上是自动生成"销售合同"的模块界面,这个就是最初介绍的模块的列表.

写一个自定义进度颜色和圆形转动的ProgressBar(详细介绍)

先上图: 我们得自定义ProgressBar的样式 <span style="white-space:pre"> </span><style name="self_define_ProgressBar" parent="@android:style/Widget.ProgressBar.Horizontal"> //继承了android横向的ProgressBar的样式 <item name="

如何发布一个自定义Node.js模块到NPM（详细步骤）

咱们闲话不多说,直接开始! 由于我从没有使用过MAC,所以我不保证本文中介绍的操作与MAC一致. 文章开始我先假定各位已经在window全局安装了Node.js,下面开始进行详细步骤介绍: 本文本着,以极少的文字说明以及极少的代码书写为原则来给大家演示! 文章中上传的模块不具备任何意义! 一.封装node.js模块时的必须项 1.创建package.json 每一个完整封装的node模块,必须含有一个参数明确的package.json文件! 以下为package.json的最精简配置: { "n