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

这个结构我是根据一些前端技术整合到一起，方便我平时测试一些看到的前端技术，例如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']

    }

  }

};

 

单元测试框架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