网页前端设计

http://www.86y.org
feedskyQQ邮箱

搜索文章

简单的seajs 使用实例

用声音读出全文关注我吧
 2016/7/13 17:02:11 阅读次数:6411

一、概述

seajs做前端的朋友肯定听过，我也是第一次使用，当然抱着学习的态度，觉得seajs真的很不错，虽然我还不知道哪种情况可以使用。先学总不会有错，对吧。!^_^! ,下面就简单的介绍下吧。（文章底部附下载与DEMO链接）必须在web环境调试才有效果

seajs实现了JavaScript的 模块开发及按模块加载。用来解决繁琐的JavaScript命名冲突，文件依赖等问题，其主要目的是令JavaScript开发模块化并可以轻松愉悦进行加载。

官方文档：http://seajs.org/docs/#docs

简单的seajs 使用实例

首先看看seajs是怎么进行模块开发的。使用seajs基本上只有一个函数"define"

二、使用示例

调用页面源代码(index.html)

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>简单的sea.js 使用实例-幸凡学习网</title>
    <script src="js/sea.js"></script>
    <style>
        /**本页面排版样式**/
        body{line-height:25px;font-size:14px;}
        .mt10{margin-top:10px;}
        .plr10{padding:0 10px}
        .ex dl{border:1px solid #e6e6e6;margin-bottom:10px;}
        .ex dt{font-size:14px;margin:0 0 10px;background:#e6e6e6;padding:0 10px;height:30px;line-height:30px;position:relative;color:#666;}
        .ex dd{margin-left:20px;padding-bottom:10px;color:#999;}
        .ex a{color:#f80;text-decoration:none;margin-right:10px;}
        .ex input{margin:0 5px;}
        .ex .bgeee{background:#f80;color:#fff;}
        .ex .right{position:absolute;right:10px;top:0;height:30px;line-height:30px;color:#f80;font-size:12px;margin:0;}

    </style>
</head>
<body>
    <div class="ex">
        <dl>
            <dt>示例一：加载内容到html</dt>
            <dd>
                <input type="button" id="load" value="加载内容" />
                <div id="content" class="bgeee plr10 mt10"></div>
            </dd>
        </dl>

        <dl>
            <dt>示例二：弹窗</dt>
            <dd>
                <input type="button" id="openwindow" value="弹窗" /><input type="button" id="opentxt" value="文字提示" />
            </dd>
        </dl>
        <dl>
            <dt>示例三：cookie操作 <span class="right">提示:设置为null即为清除cookie</span></dt>
            <dd>
                <div class="plr10">
                    <div>请为【just】cookie赋值<input value="" id="cookievalue" /><input type="button" id="addcookie" value="写入cookie" /><input type="button" id="getcookie" value="获取cookie" /></div>
                    
                </div>
            </dd>
        </dl>
    </div>
    <script>        
        //Set configuration
        seajs.config({
            base: "./js/",//与当前目录平级的js目录
            alias: {
                "$": "http://apps.bdimg.com/libs/jquery/1.8.3/jquery.js"
            }
        });

        //加载多个模块，在加载完成时，执行回调
        seajs.use(["mod1"], function (a, b) {
            seajs.use("$");
            $("#load").click(function () {
                a.helloJs();
            });
            
        });     
        
        //cookie插件
        seajs.use(["cookie"], function (a) {
            seajs.use("$");

            $("#addcookie").click(function () {
                if ($.trim($("#cookievalue").val()) != "")
                    a.cookie("just", $("#cookievalue").val());
            });

            $("#getcookie").click(function () {
                alert("just 的cookie为："+a.cookie("just"));
            });

            //写入a.cookie("cs", "你好")
            //a.cookie("cs", "你好");

            //获取a.cookie("cs")
            //a.cookie("cs");

            //清除cookie只需要设置为null
            //a.cookie("cs", null);            
        })


        //弹窗口插件
        seajs.use(["laybox"], function (a) {
            seajs.use("$");

            //弹出窗口
            $("#openwindow").click(function () {
                a.layboxs("ifame.html");
            });

            //弹出文字提示
            $("#opentxt").click(function () {
                a.layboxs("你好我是提示文字，2秒钟后关闭", "2");//第2个参数为窗口显示几秒钟自动关闭，如果不写将手动关闭
            });
        });
</script>
</body>
</html>

 

引用的js源代码(mod1.js)

define(function (require, exports, module) {
    require("$");//网上找了不少问题，只需要调用这个就可以了不需要赋值
    function hellojs() {
        $("#content").append("我是mod1里面的方法---");
    }
    exports.helloJs = hellojs;    
});

 

引用的js源代码(laybox.js)

/**
弹窗效果
**/

//关闭窗口 情非得已写在这里 为的是在内页可以直接调用该方法
function closemask() {
    $("#mask_bg").css("opacity", 0.5);
    $("#mask_bg").fadeTo(100, 0.0);
    setTimeout(function () {
        $("#maskDIV").remove();
    }, 100);
}
define(function (require, exports, module) {
    require('$');
    seajs.use("./css/laybox.css");
    exports.autowh=function autowh(h) {
        //alert(w+"--"+h);
        $("#ajax_content").css({ marginLeft: "-43%", marginTop: "-" + parseInt(h / 2) + "px", width: "86%", height: h + "px" });
        $("#iframebox").attr("height", h);
        $("#iframebox").attr("width", "100%");
        $("#iframebox").attr("scrolling", "no");
    }

    exports.autowh2 = function autowh2(w, h) {
        //alert(w+"--"+h);
        $("#ajax_content").css({ marginLeft: "-" + parseInt(w / 2) + "px", marginTop: "-" + parseInt(h / 2) + "px", width: w + "px", height: h + "px" });
        $("#iframebox").attr("height", h);
        $("#iframebox").attr("width", w);
        $("#iframebox").attr("scrolling", "no");
    }

    exports.layboxs = function layboxs(url,ation) {        
        $("body").append('<div id="maskDIV" style="display: block;"><div id="maskcontent"><div id="ajax_loading"></div><div id="ajax_content" style="width: 62px; height: 62px; margin:-31px 0 0 -31px;"></div></div><div id="mask_bg"></div></div>');
        $("#mask_bg").css("opacity", 0);
        $("#mask_bg").fadeTo(100, 0.5);
        if (ation != null) {
            var jsurl = '<div id="mask_op_div"><a id="maskoparet" href="javascript:;"><i></i></a></div><div id="iframetxt">'+url+'</div>'
            $("#ajax_content").html(jsurl);
            $("#mask_op_div").hide();
            $("#ajax_loading").hide();
            var height = $("#iframetxt").height();
            var width = $("#iframetxt").width();
            exports.autowh2(width, height);
            setTimeout(function () { 
                $("#ajax_loading").hide();              
                $("#mask_bg").css("opacity", 0.5);
                $("#mask_bg").fadeTo(200, 0.0);
                setTimeout(function () {
                    $("#maskDIV").remove();
                }, 200);                
            }, ation*1000);
        }
        else {
            var jsurl = '<div id="mask_op_div"><a id="maskoparet" href="javascript:;"><i></i></a></div><iframe src="' + url + '" id="iframebox" width="0" height="0" frameborder="0" scrolling="auto" /></iframe>'

            $("#ajax_content").html(jsurl);
            $("#mask_op_div").hide();

            $("#iframebox").load(function () {
                setTimeout(function () { 
                    var iframe = document.getElementById("iframebox");
                    try {
                        var bHeight = iframe.contentWindow.document.body.scrollHeight;
                        var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
                        var bWidth = iframe.contentWindow.document.body.scrollWidth;
                        var dWidth = iframe.contentWindow.document.documentElement.scrollWidth;
                        var height = Math.max(bHeight, dHeight);
                        var width = Math.max(bWidth, dWidth);
                        //console.log(width + "===" + height);
                        exports.autowh2(width, height);
                    } catch (ex) { }

                    $("#ajax_loading").css("opacity", 1);
                    $("#ajax_loading").fadeTo(100, 0.0);
                    setTimeout(function () {
                        $("#ajax_loading").remove();
                    }, 200);
                    $("#mask_op_div").show();
                        //console.log("我是父页判断加载完毕");
                },500);
            });
        }
        $("#maskoparet").click(function () {
            $("#mask_bg").css("opacity", 0.5);
            $("#mask_bg").fadeTo(100, 0.0);
            setTimeout(function () {
                $("#maskDIV").remove();
            }, 100);
        });
    };
});

 

引用的js源代码(cookie.js)

/**
cookie操作

设置
cookie("name", "1");

获取
cookie("name");

清除
cookie("name", null);
**/
define(function (require, exports, module) {
    require("$");
    var options = { expires: 7, path: "/" };
    exports.cookie = function (name, value, options) {
        if (typeof value != "undefined") {
            options = options || {};
            if (value === null) {
                value = "";
                options = $.extend({}, options);
                options.expires = -1;
            }
            var expires = "";
            if (options.expires && (typeof options.expires == "number" || options.expires.toUTCString)) {
                var date;
                if (typeof options.expires == "number") {
                    date = new Date();
                    date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));
                } else {
                    date = options.expires;
                }
                expires = "; expires=" + date.toUTCString();
            }
            var path = options.path ? "; path=" + (options.path) : "";
            var domain = options.domain ? "; domain=" + (options.domain) : "";
            var secure = options.secure ? "; secure" : "";
            document.cookie = [name, "=", encodeURIComponent(value), expires, path, domain, secure].join("");
        } else {
            var cookieValue = null;
            if (document.cookie && document.cookie != "") {
                var cookies = document.cookie.split(";");
                for (var i = 0; i < cookies.length; i++) {
                    var cookie = jQuery.trim(cookies[i]);
                    if (cookie.substring(0, name.length + 1) == (name + "=")) {
                        cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                        break;
                    }
                }
            }
            return cookieValue;
        }
    };
});

三、结语

感觉使用起来还是挺好用的，暂时还没有使用到项目中，所以只能以这个简单的实例来展示给大家。

DEMO地址：http://www.86y.org/DEMO/seajs/

DEMO附件下载：http://pan.baidu.com/s/1o8k4CeI  密码: fqxu

参考资料：seajs使用教程指南

　　　　　API快速参考

　　　　　前端模块化开发的价值

持续更新中..欢迎关注（完）

大家有什么问题或技术上的想法可以在此与大家分享，也可以加入前端爱好者QQ群(141999928)一起学习进步：【幸凡前端技术交流群】
如需转载请注明出处:http://www.86y.org/art_detail.aspx?id=787【简单的seajs 使用实例】幸凡学习网
0

如果您觉得本文的内容对您的学习有所帮助，捐赠与共勉，支付宝(左)或微信(右)

相关文章

阅读全文内容关闭

copyright ©2010-86y.org - ALL RIGHTS RESERUED -TEMPLATE CREATED BY CHARRY-may 3,2010
粤ICP备13053249号-1谷歌地图