1 配置node环境

2 配置built.js文档

3 执行命令node r.js -o built.js

文件目录:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/main.css">
<script data-main="js/main" src="./require.js"></script>
<style type="text/css">
/**
* [reset description]
* @type {[reset]}
* @author:854400961@qq.com;
*/
body{margin:0 auto;padding:0;color:#000;font-size:12px;font-family:'微软雅黑';}
body > div{margin:0 auto;}
div,form,ul,ol,li,span,p,dl,dt,dd,img,legend,fieldset{margin:0;padding:0;border:0;}
h1,h2,h3,h4,h5,h6,b,i,em{margin:0;padding:0;font-size:12px;font-weight:normal; font-style:normal;}
ul,ol,li,dl,dt,dd{list-style:none}
table,td,input,textarea{font-size:12px;}
img{vertical-align: bottom;}
span{display: block;}
a {color:#333;text-decoration:none;}
a:hover {color:red;text-decoration:underline;}
.hidden{overflow: hidden; text-indent:-999em; width:0; height:0} .clearfix:after {visibility: hidden;display: block;font-size: 0;content: " ";clear: both;height: 0;}
.clearfix{*zoom:1;}
*{outline:none}
</style>
</head>
<body>
<style type="text/css">
.col-nav-bar ul li{list-style-type: none;float: left;width: 100px;height: 30px;text-align: center;}
.col-context>div{background-color: red;}
.col-context-hidden{display: none;}
.col-context-active{display: block;}
.col-context-active-other{}
</style>
<span class="col-nav-bar">
<ul class="clearfix">
<li>1</li>
<li class="col-context-hover">2</li>
<li class="col-context-hover">3</li>
</ul>
</span>
<span class="col-context">
<div class="col-container-1">A</div>
<div class="col-container-2 col-context-hidden">B</div>
<div class="col-container-3 col-context-hidden">C</div>
</span> <ul class="video">
<li>text <span class="play">Play</span></li>
<li>text <span class="play">Play</span></li>
<li>text <span class="play">Play</span></li>
<li>text <span class="play">Play</span></li>
<li>text <span class="play">Play</span></li>
<li>text <span class="play">Play</span></li>
</ul> <button class="btn">Click</button>
</body>
</html>
require.config({
paths:{
"jquery":"../lib/jquery",
"domReady":"../lib/domReady",
"colTab":"colTab",
"block":"block"
}
})
require(['colTab','block','domReady'],function(colTab,colBlock,domReady){
colTab.init();
colBlock.init();
colBlock.blockUI
alert(1)
domReady(function(){
document.querySelector("body").innerHTML="<img src='http://image.beekka.com/blog/201211/bg2012110702.jpg'>"
})
})
define(['jquery'],function($){
var colBlock=function(){
var overLay=$("<span>",{
class:"overlayHook",
html:"<span class='overlay-hook' style='position:fixed;top:50%;left:50%;width:200px;height:200px;z-index:99999;background:white;'></span>",
css:{
position:"absolute",
width:"100%",
height:"100%",
opacity:.5,
backgroundColor:"black",
top:"0px"
}
});
var overLayLoad=function(){
// console.log($(this).index());
$("body").append(overLay);
$(".overlayHook").bind("click",function(){
$(this).remove();
})
$(".overlayHook .overlay-hook").click(function(e){
e.stopPropagation();
return;
});
}
$(document).ready(function(){
var videoId=$(".video li").find("play").end();
videoId.each(function(k,v){
$(this).on('click',overLayLoad);
});
})
}
return {
init:colBlock
}
});
define(['jquery'],function($){
var colTab=function(){
$(".col-nav-bar ul li").each(function(k,v){
$(this).click(function(){
$(".col-nav-bar ul li").eq(k).addClass('col-tab-link').siblings().addClass('col-context-hover').removeClass('col-tab-link');
$(".col-context div").eq(k).addClass('col-context-active').siblings().addClass('col-context-hidden').removeClass('col-context-active');
})
})
}
return {
init:colTab
}
})

built.js

({
appDir:'./',
baseUrl:'js',
dir:'../require-built',
optimizeCss:'standard',
paths:{
domReady:"empty:",
jquery:"empty:"
},
modules:[{name:'main'}]
})

cd require进入root,输入node r.js -o built.js进行压缩优化

requirejs 优化压缩的更多相关文章

  1. 用RequireJS优化Wijmo Web页面

    用RequireJS优化Wijmo Web页面 上周Wijmo 2014 V2版本刚刚发布(下载地址),  有网友下载后发现仅仅使用了40个Widgets的一小部分,还需要加载全部的jquery.wi ...

  2. 使用 RequireJS 优化 Web 应用前端

    基于 AMD(Asynchronous Module Definition)的 JavaScript 设计已经在目前较为流行的前端框架中大行其道,jQuery.Dojo.MooTools.EmbedJ ...

  3. 转:requirejs打包压缩r.js使用示例

    为了应对日益复杂,大规模的JavaScript开发.我们化整为零,化繁为简.将复杂的逻辑划分一个个小单元,各个击破.这时一个项目可能会有几十个甚至上百个JS文件,每个文件为一个模块单元.如果上线时都是 ...

  4. 提高性能:用RequireJS优化Wijmo Web页面

    上周Wijmo 2014 V2版本刚刚发布(下载地址),  有网友下载后发现仅仅使用了40个Widgets的一小部分,还需要加载全部的jquery.wijmo-pro.all.3.20142.45.m ...

  5. PNG优化/压缩

    我们总是希望 PNG 图像的容量能够小些.小些.再小些.优化 PNG 图像,可以用以下几个工具: 1.Optipng Optipng 是命令行工具,直接在其后追加所需优化的 PNG 图像即可 2.Pn ...

  6. php如何优化压缩的图片

    php程序开发中经常涉及到生成缩略图,利用php生成缩略图这个过程本身没难度,但是你知道php能够优化调节生成的缩略图的质量吗?也就是说php能够控制生成缩略图的清晰度以及生成后的缩略图的体积.下面我 ...

  7. 使用RequireJS优化Web应用前端

    require.js官网:http://requirejs.org/docs/download.html 一篇不错的文章:http://www.csdn.net/article/2012-09-27/ ...

  8. 深入浅出的webpack构建工具---ParallelUglifyPlugin优化压缩(十)

    webpack默认提供了UglifyJS插件来压缩JS代码,但是它使用的是单线程压缩代码,也就是说多个js文件需要被压缩,它需要一个个文件进行压缩.所以说在正式环境打包压缩代码速度非常慢(因为压缩JS ...

  9. CSS优化压缩

    顾名思义缩写有简写意思,那就总结一下CSS缩写知识点.为什么要让CSS属性缩写?1.简化代码.一些CSS属性简写可以减少CSS代码从而减少CSS文件的占用字节.加快网页下载速度和网页加载速度.2.优化 ...

随机推荐

  1. hdu 3487 Play with Chain

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3487 YaoYao is fond of playing his chains. He has a c ...

  2. JS模板引擎 :ArtTemplate (1)

    1.为什么需要用到模板引擎 我们在做前端开发的时候,有时候经常需要根据后端返回的json数据,然后来生成html,再显示到页面中去. 例如这样子: var data = [ {text: " ...

  3. 华农js抢课神器

    又到了华农选课的时候,服务器估计就受不了,每天奔溃几次,这次选课贪心了点,竟然选了5门,好吧,我承认我只中了1门,什么??刚刚换课给同学马上就被人抢了?我来告诉你原因吧,最近发现一位大神写了一份js脚 ...

  4. JavaScript事件委托的技术原理

    如今的JavaScript技术界里最火热的一项技术应该是‘事件委托(event delegation)’了.使用事件委托技术能让你避免对特定的每个节点添加事件监听器:相反,事件监听器是被添加到它们的父 ...

  5. Linuxshell脚本之if条件判断

    IF条件判断 .基本语法: if [ command ]; then 符合该条件执行的语句 fi .扩展语法: if [ command ];then 符合该条件执行的语句 elif [ comman ...

  6. MySQL 5.6 和 MariaDB-10.0 的性能比较测试

    MySQL 5.6 和 MariaDB-10.0 的性能比较测试 时间 2013-02-14 10:11:34  开源中国 原文  http://www.oschina.net/question/12 ...

  7. EF 中更新模型的问题,这种错误(因为相同类型的其他实体已具有相同的主键值。)

    在EF经常在更新模型的时候可能会同时操作一个实体几次. 其实除了SaveChanges外,其它的几次基本都是要查询出一个结果, 例如更新的时候,我们要查一下这个表中有没有相同的纪录之类的. 查询完之后 ...

  8. MVC 中 Razor 无限分类的展示

    在MVC的Razor视图展示无级分类的办法,在网上看了很多资料,大多搞得很高大上.可能本人水平有限,实在是不会用. 那我就用最简单爆力的办法来做. Model: public class NewsCa ...

  9. codeforces 425A Sereja and Swaps(模拟,vector,枚举区间)

    题目 这要学习的是如何枚举区间,vector的基本使用(存入,取出,排序等),这题的思路来自: http://www.tuicool.com/articles/fAveE3 //vector 可以用s ...

  10. cf div2 237 D

    D. Minesweeper 1D time limit per test 2 seconds memory limit per test 512 megabytes input standard i ...