To be or not to be.That is a question!

---源于莎士比亚的《哈姆雷特》

导航

requirejs 优化压缩

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进行压缩优化

posted on 2013-11-12 17:05  Ijavascript  阅读(299)  评论(0)  编辑  收藏  举报