一些javascript的坑

未读帖子由 **hellohappy** » 2019年1月13日, 07:23

前言：
有时候想要找一个很简单的js，都要搜索半天找不到，下面把一些我写的时候花了很大功夫才找到的html+css+javascript代码贴出来，全部都是经过了验证不存在暗病（中间肯定改了一些，只留下了比较重要的框架），其中有些是人家的错误代码纠正过来的。

javascript代码：

1.弹出一个简单的文本输入框，注意他不是 js 的 prompt ！（为了找这个东东，搜索引擎总是链接到prompt这个方法这里去，十分崩溃） prompt是一个很简单的输入框，所以基本上不太可能粘贴太多东西，我需要给别人贴代码，主要是用于这个代码编辑器，这段js大概长这样：

: 弹出文本框.png (14.52 KiB) 查看 20763 次

: 弹出文本框.png (14.52 KiB) 查看 20763 次

这个文本框点击有弹出事件，其中包含关闭按钮，确认按钮，文本自动加滚动条，简单的标题，不可点击的背景蒙版。简洁而不丑陋的外观！
简直是个完美的弹出模版，修改于某登录框。如果需要看效果，你可以点开我的代码编辑器，点击双窗口或三窗口编辑模式查看。
代码如下：

隐藏内容

显示

代码：全选

<!DOCTYPE html>
<html>
<head>
<script>
window.onload = function(){
    document.getElementById("btn_showlogin").onclick = shogMinLogin;
    document.getElementById("close_minilogin").onclick = closeLogin;
    document.getElementById("firstLine").onmousedown = moveLogin;
    /* 显示窗口 */
    function shogMinLogin(){
        var mini_login = document.getElementsByClassName("mini_login")[0];
        var cover = document.getElementsByClassName("cover")[0];
        mini_login.style.display = "block";
        cover.style.display = "block";
        
        mini_login.style.left = (document.body.scrollWidth - mini_login.scrollWidth) / 2 + "px";
        mini_login.style.top = (document.body.scrollHeight - mini_login.scrollHeight) / 2 + "px";
    }

    /* 关闭窗口 */
    function closeLogin(){
        var mini_login = document.getElementsByClassName("mini_login")[0];
        var cover = document.getElementsByClassName("cover")[0];
        mini_login.style.display = "none";
        cover.style.display = "none";
    }

    /* 移动窗口 */
    function moveLogin(event){
        var moveable = true;

        //获取事件源
        event = event ? event : window.event;
        var clientX = event.clientX;
        var clientY = event.clientY;
        
        var mini_login = document.getElementById("mini_login");
        console.log(mini_login);
        var top = parseInt(mini_login.style.top);
        var left = parseInt(mini_login.style.left);//鼠标拖动
        document.onmousemove = function(event){
            if(moveable){
                event = event ? event : window.event;
                var y = top + event.clientY - clientY;
                var x = left + event.clientX - clientX;
                if(x>0 && y>0){
                    mini_login.style.top = y + "px";
                    mini_login.style.left = x + "px";
                }
            }
        }
        //鼠标弹起
        document.onmouseup = function(){
            moveable = false;
        }
    }
};
</script>

<style>    
    /* 弹出 样式 */
    .mini_login{
        display:none;
        position:absolute;
        z-index:10;
        background:white;
    }
    .mini_login .item{
        width:320px;
        margin:0 auto;
        height:48px;
        line-height:48px;
        padding:0 20px;
    }
    /* 窗第一行*/
    .mini_login .firstLine{
        color:#666;
        background:#f7f7f7;
        font-size:18px;
        font-weight:bold;
        cursor:move;
    }
    .mini_login .item .login_close{
        display:inline-block;
        float:right;
        cursor:pointer;
    }
    
    .mini_login .item label{
        font-size:14px;
        margin-right:15px;
    }
    .mini_login .item textarea{
        display:inline-block;
        height:95%;
        width:100%;
    }
    /* 按钮 */
    .mini_login .item a.btn_login{
        display:block;
        margin:10px 10% 0;
        height:30px;
        line-height:30px;
        width:80%;
        background:#4490F7;
        color:white;
        font-size:16px;
        font-weight:bold;
        text-align:center;
    }
    /* 遮罩层样式 */
    .cover{
        display:none;
        width:100%;
        height:100%;
        position:absolute;
        top:0;
        left:0;
        z-index:9;
        background-color:#000;
        opacity:0.3;
    }
</style>
</head>
<body>

<!-- 主体 -->
<div class="main">
    <a href="javascript:void(0)" class="btn_login" id="btn_showlogin">登录框</a>
</div>

<!-- 弹出小窗口 -->
<div class="mini_login" id="mini_login">
    <!-- 表单 -->
<form action="" method="post">
    <div class="item firstLine" id="firstLine">
        <span class="login_title">用于对比的代码</span>
        <span class="login_close" id="close_minilogin">X</span>
    </div>
    <div class="item" id="code_input">
        <textarea name="代码："></textarea>
    </div>
    <div class="item">
        <a href="javascript:void(0)" class="btn_login" onclick="">确认</a>
    </div>
</form>
</div>
<!-- 遮罩层 -->
<div class="cover"></div>

</body>
</html>

2.异步调用js和css接口函数：
   要知道，对于复杂的网页，如果一次性连续加载所有的js和css，可能会导致整个网站的浏览体验大大下降，加载慢，下载等半天，而且有些功能又不是一定要加载才能使用的，比如我的代码编辑器里有大量的主题，但是人家只会用几个主题，其他主题（也就css文件），一般就不会用到，这就用到了异步加载！但是异步加载有几个问题要解决，其中最重要的是，不能重复加载（能重复加载但是你浪费了用户的流量和加载时间，同一个文件你下载n次，也是可以运行而且不报错的）。所以用沙盒的方法来解决！
   源程序来源于网络，但是！原版是错误的，有大量的问题，我自己亲自读懂了以后，改正的版本有如下特点：
1.支持异步加载js和css（而不只是js）
2.整个程序完整无错误
3.第一个参数支持完整路径，也支持纯文件名
   调用方法是：

代码：全选

//css文件，第二参数写false,function是回调函数
require("merge.css", false, function () {
});
//js文件，第二参数写true,function是回调函数
require("merge.js", true, function () {
});

代码如下：

隐藏内容

显示

代码：全选

//存储已加载模块的信息
var moduleList = ;

(function () {
    //让外面可以只能访问到require变量
    window.require = require;

    //定义一个加载模块的方法
    function require(moduleName, isjs, callback) {
        //创建加载模块的具体实现类
        var requireHelper = new RequireHelper(moduleName, isjs, callback);
        //调用加载模块类的load方法加载模块
        requireHelper.load();
    }

    //创建一个实体类,给传进来的属性赋值
    function RequireHelper(moduleName, isjs, callback) {
        this.moduleName = moduleName;
        this.isjs = isjs;
        this.callback = callback;
    }

    //给模块加载实现类的原型添加方法
    RequireHelper.prototype = {
        //加载模块
        load: function () {
            var that = this;
            var moduleName = that.moduleName;
            if (that.isLoad()) {//模块已被加载(资源优化:已经请求的模块不要再次加载)
                var moduleInfo = that.getModuleInfo();//获取模块的描述信息
                if (moduleInfo.isLoad) {//如果模块资源已加载完成
                    that.callback();//可以放心的调用模块对应的回调函数
                } else {//模块资源没加载完
                    var oldCallback = moduleInfo.callback;//取出之前的回调函数
                    moduleInfo.callback = function () {//追加回调函数
                        oldCallback();
                        that.callback();
                    };
                }
            } else {//模块没有加载
        //判断是js还是css文件
        if(that.isjs==true){
                    var script = document.createElement("script");
                    script.src = that.moduleName;
                    document.getElementsByTagName("head")[0].appendChild(script);//加载模块
                    var moduleInfo = {
                        moduleName: that.moduleName, isLoad: false, callback: function () {
                            that.callback();
                        }
                    };//添加模块的描述信息
                    script.onload = function () {
                        moduleInfo.callback();//执行模块对应的回调函数
                        moduleInfo.isLoad = true;//标识模块资源被加载完成
                moduleList.push(moduleInfo);
                    }
        }
        else{
            var style = document.createElement("link");
                    style.href = that.moduleName;
            style.rel = "stylesheet";
            style.type = "text/css";
                    document.getElementsByTagName("head")[0].appendChild(style);//加载模块
                    var moduleInfo = {
                        moduleName: that.moduleName, isLoad: false, callback: function () {
                            that.callback();
                        }
                    };//添加模块的描述信息
                    style.onload = function () {
                        moduleInfo.callback();//执行模块对应的回调函数
                        moduleInfo.isLoad = true;//标识模块资源被加载完成
                        moduleList.push(moduleInfo);
                    }
        }
            }
        },
        //判断指定模块是否加载
        isLoad: function () {
            return this.getModuleInfo() == null ? false : true;            
        },
        //根据模块名称获取模块信息
        getModuleInfo: function () {
            for (var i = 0; i < moduleList.length; i++) {
                if (this.moduleName == moduleList[i].moduleName) {
                    return moduleList[i];
                }
            }
            return null;
        }
    };

})(window)[/i][/i]

研究、学习、分享

一些javascript的坑

#1 一些javascript的坑

Link：
	隐藏链接

一些javascript的坑

#1 一些javascript的坑

登录 • 注册