自己平时会使用的一个自定义前端结构
生活随笔
收集整理的這篇文章主要介紹了
自己平时会使用的一个自定义前端结构
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
這個結構我是根據一些前端技術整合到一起，方便我平時測試一些看到的前端技術，例如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.jsdeps: ['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>轉載于:https://www.cnblogs.com/zhengxingpeng/p/6679207.html
總結
以上是生活随笔為你收集整理的自己平时会使用的一个自定义前端结构的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 20145202马超 2016-2017
- 下一篇： angularJs-脏检查