本身平時會使用的一個自定義前端結構

時間 2019-11-30

標籤本身平時使用一個自定義前端結構简体版

原文原文鏈接

這個結構我是根據一些前端技術整合到一塊兒，方便我平時測試一些看到的前端技術，例如CSS、JS等，將理論上升到驗證的階段。javascript

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

如今JS腳本也講究MVC結構，因此在閒暇的時候查閱了相關資料。使用backbone實現MVC。不少地方都會提到requirejs，一個異步模塊加載器。感受這個東西很高大上，而後就與backbone結合使用。在查詢requirejs配置的時候，發現能夠與node.js結合使用來作腳本整合。css

build文件是在作node整合JS腳本的時候的配置文件，config文件是requirejs的配置文件。optimize是個批處理，執行node的文件整合。關於node整合的說明能夠參考這篇文章http://www.oschina.net/translate/optimize-requirejs-projectshtml

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。java

jasmine的配置文件node

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技術、模版技術、自定義字體等jquery

<!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>