自己平时会使用的一个自定义前端结构
这个结构我是根据一些前端技术整合到一起，方便我平时测试一些看到的前端技术，例如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="data: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
自己平时会使用的一个自定义前端结构相关推荐
- arcgis前端(2)-----＞基础篇--发布一个自定义地图及加载自定义地图/底图
arcgis前端(2)----->基础篇–发布一个自定义地图及加载自定义地图/底图 文章目录 arcgis前端(2)----->基础篇--发布一个自定义地图及加载自定义地图/底图 前言 & ...
- 三、如何手动实现一个微前端框架雏形
如何手动实现一个微前端框架雏形 一.了解微前端 1. 什么是微前端 为了解决一整块儿庞大的前端服务所带来的变更和拓展方面的限制,将整体前端服务拆分成一些更小.更简单的,能够独立开发.测试部署的小块儿. ...
- 从业两年时间，我被一个女前端鄙视了！
学测试一定要找准方向,避免做无用功,可以看看现在的测试行业市场行情:测试行业现状分析及测试人员能力标准 早在四年前在深圳打拼的日子,第一家企业我就被一个女前端深深上了一课! 看似很平常的几句话,其实还 ...
- 一个自学前端的4年工作总结【三十而立，拒绝躺平】
关于我 中部不知名二本毕业,半路转前端,2018年9月入坑,如今整四年,目前就职于一家中型公司 为什么走编程这条路? 其实是没有选择, 有时 没有选择,就是最好的选择 这一路走来,笑过痛过,开心过也失 ...
- 分享一个自学前端的4年工作总结（三十而立，拒绝躺平）
中部不知名二本毕业,半路转前端,2018 年 9 月入坑,如今整四年,目前就职于一家中型公司 为什么走编程这条路? 其实是没有选择, 有时 没有选择,就是最好的选择 这一路走来,笑过痛过,开心过也失望 ...
- [微信小程序]组件化开发,以一个自定义模块框组件当做示例(附完整示例代码和效果图)
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 正文: 自定义组件我把它分为简单的三个步骤, 1.创建组件 --- 2.编写组件 --- 3.调用,使用 ...
- 【SAP技术】SAP MM 如何看一个自定义移动类型是复制哪个标准移动类型而创建的？
[SAP技术]SAP MM 如何看一个自定义移动类型是复制哪个标准移动类型而创建的? 比如项目上有一个自定义移动类型Z59,是复制551移动类型而定义的. OMJJ配置界面里,是有一个Ref字段.如下 ...
- 如何在React Native中写一个自定义模块
前言 在 React Native 项目中可以看到 node_modules 文件夹,这是存放 node 模块的地方,Node.js 的包管理器 npm 是全球最大的开源库生态系统.提到npm,一般指 ...
- 抽取样本java实验报告_一个自定义classloader的函数抽取壳样本
原标题:一个自定义classloader的函数抽取壳样本 本文为看雪论坛文章 看雪论坛作者ID:lemn 本文为 看雪安卓高研2w班(7月班)优秀学员作品. 下面先让我们来看看学员的学习心得吧! 学员 ...
最新文章
- 秒杀多线程第十五篇 关键段,事件,互斥量,信号量的“遗弃”问题
- C语言学习笔记--函数与指针
- DRDoS分布反射式拒绝服务攻击（什么是DRDoS）
- 从90年代的SRNN开始，纵览循环神经网络27年的研究进展
- exchange2003的简单安装方法
- 移动电话之父第一个电话打给对手，起底现代移动通信崛起之路！
- JQuery------Select标签的各种使用方法
- python爬虫案例——糗事百科数据采集
- php之$_SESSION的理解
- java web 编程技术 答案_《javaweb编程技术》课后习题答案.docx
- python批量打印word文件
- 阿里云商标自助注册申请快速入门(详细步骤和教程）
- TestFlight测试步骤
- android 字体倒影,Android实现图片的倒影效果
- Excel中怎么把一数列数据，用逗号隔开合并到一行
- 如花搞笑图片集锦(转贴)
- 从安装到连接，教你如何连上Mysql数据库
- python 生成待图片的二维码代码
- HNOI2006 潘多拉的盒子
- Java 并发编程解析 | 如何正确理解Java领域中的内存模型，主要是解决了什么问题？
热门文章
- 设置ubuntu下使用ls命令显示文件颜色显示
- C#语言基础——结构体和枚举类型
- Maven+struts2+spring4+hibernate4的环境搭建
- Sharepoint学习笔记—ECM系列--文档集(Document Set)的实现
- android 播放MP3实例
- 3.14-19 wc、iconv、dos2unix、diff、vimdiff、rev
- Nginx核心模块——HTTP中的配置指令location和rewrite介绍
- linux 网卡 开启dhcp,Linux DHCP如何绑定指定的网卡???
- window10下搭建汇编环境（软件+资料）
- 悟空分词与mysql结合_Mysql联合查询UNION和UNION ALL的使用介绍