JavaScript分拆问题如图

AlexFung

//等待页面加载完后，执行如下代码
window.onload=function () {
    //console.log(1);//扩展console输出的函数有哪些？

    //捕捉登录按钮的单击事件
    //当被单击时
    document.getElementById("btnSubmit").onclick=function(){
        //console.log(1);

        //获取用户输入的两个input值
        var tipsEl=document.getElementById("tips");

        var userNameEl=document.getElementById("userName");
        var userNameVal=userNameEl.value;
        //判断是否符合验证逻辑
            //如果否，在按钮旁边 显示 红色的错误提示
        if(userNameVal==""){
            tipsEl.innerHTML="用户名必填！";
            userNameEl.style.borderColor="red";
            userNameEl.focus();
            return;
        }
        tipsEl.innerHTML="";
        userNameEl.style.borderColor='#90A9B7';

        var passWordEl=document.getElementById("passWord");
        var passWordVal=passWordEl.value;
        if(passWordVal==""){
            tipsEl.innerHTML="密码必填！";
            passWordEl.style.borderColor="red";
            passWordEl.focus();
            return;
        }
        tipsEl.innerHTML="";
        passWordEl.style.borderColor='#90A9B7';


        //如果都符合，提交表单
        document.getElementById("loginForm").submit();
    };

};

//等待页面加载完后，执行如下代码
ready(function () {

    //捕捉登录按钮的单击事件
    //当被单击时
    click("btnSubmit",function(){
        //获取用户输入的两个input值
        //判断是否符合验证逻辑
            //如果否，在按钮旁边 显示 红色的错误提示
        if(val("userName")==""){
            html("tips","用户名必填！");
            css("userName","borderColor","red");
            focus("userName");
            return;
        }
        html("tips","");
        css("userName","borderColor","#90A9B7");

        if(val("passWord")==""){
            html("tips","密码必填！");
            css("passWord","borderColor","red");
            focus("passWord");
            return;
        }        
        html("tips","");
        css("passWord","borderColor","#90A9B7");


        //如果都符合，提交表单
        $("loginForm").submit();
    });

});

//按传入标签的ID获取对应标签的对象
function $(id){
    
}
//按传入标签的ID获取对应标签的Value值
//如果传入第二个参数，就理解为不是获取value，而是改变value
function val(id,content){ 
    
}
//按传入标签的ID以及HTML内容去改变对应标签的innerHTML
//如果没有传入第二个参数，就理解为获取innerHTML
function html(id,content){  
    
}


//按传入标签的ID以及样式名称、样式值去改变对应标签、对应样式的值
//如果没有传入第三个参数，就理解为获取对应标签、对应样式的值
function css(id,cssName,cssValue){ 
    
}
//按传入标签的ID聚焦
function focus(id){
    
}

//当文档加载完成后执行
function ready(callback){
    
}
//当标签被单击时执行
function click(id,callback){
    
}

如何将JS文件1，分拆成下面的两JS文件

AlexFung

意思就是第三片代码的括号里内容应该怎样填写？