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

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