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%;200px;height:200px;z-index:99999;background:white;'></span>", css:{ position:"absolute", "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进行压缩优化