javascript - js小白提问，网页项目中，要是写大量js，应该如何放？
本文介绍了javascript - js小白提问，网页项目中，要是写大量js，应该如何放？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
1，是否是每个效果都用function 函数名包起来，然后在window.onload中一一调用？像下面例子这样可以么？
2，假如同一个页面中，相同的两个效果同时调用，无效了，应该怎么写？请问是否这是重载的原因？应该如何解决。
比如
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>无标题文档</title>
<style>
body,
ul,
li {
margin: 0;
padding: 0;
font: 12px/1.5 arial;
}
ul,
li {
list-style: none;
}
.wrap {
width: 500px;
margin: 20px auto;
}
.hide {
display: none;
}
#tab_t {
height: 25px;
border-bottom: 1px solid #ccc;
}
#tab_t li {
float: left;
width: 80px;
height: 24px;
line-height: 24px;
margin: 0 4px;
text-align: center;
border: 1px solid #ccc;
border-bottom: none;
background: #f5f5f5;
cursor: pointer
}
#tab_t .act {
position: relative;
height: 25px;
margin-bottom: -1px;
background: #fff;
}
#tab_c {
border: 1px solid #ccc;
border-top: none;
padding: 20px;
}
#tab_t1 {
height: 25px;
border-bottom: 1px solid #ccc;
}
#tab_t1 li {
float: left;
width: 80px;
height: 24px;
line-height: 24px;
margin: 0 4px;
text-align: center;
border: 1px solid #ccc;
border-bottom: none;
background: #f5f5f5;
cursor: pointer
}
#tab_t1 .act {
position: relative;
height: 25px;
margin-bottom: -1px;
background: #fff;
}
#tab_c1 {
border: 1px solid #ccc;
border-top: none;
padding: 20px;
}
</style>
<script>
window.onload = function()
{
rec1();
rec2();
}
function rec1(){
var tab_t = document.getElementById("tab_t");
var tab_t_li = tab_t.getElementsByTagName("li");
var tab_c = document.getElementById("tab_c");
var tab_c_li = tab_c.getElementsByTagName("div");
var len = tab_t_li.length;
var i = 0;
for (i = 0; i < len; i++)
{
tab_t_li[i].index = i;
tab_t_li[i].onclick = function()
{
for (i = 0; i < len; i++)
{
tab_t_li[i].className = '';
tab_c_li[i].className = 'hide'
}
tab_t_li[this.index].className = 'act';
tab_c_li[this.index].className = '';
}
}
}
function rec2(){
var tab_t1 = document.getElementById("tab_t1");
var tab_t1_li = tab_t1.getElementsByTagName("li");
var tab_c1 = document.getElementById("tab_c1");
var tab_c1_li = tab_c1.getElementsByTagName("div");
var leng = tab_t1_li.length;
var i = 0;
for (i = 0; i < leng; i++)
{
tab_t1_li[i].index = i;
tab_t1_li[i].onclick = function()
{
for (i = 0; i < leng; i++)
{
tab_t1_li[i].className = '';
tab_c1_li[i].className = 'hide'
}
tab_t1_li[this.index].className = 'act';
tab_c1_li[this.index].className = '';
}
}
}
</script>
</head>
<body>
<div class="wrap">
<ul id="tab_t">
<li class="act">选择1</li>
<li>选择2</li>
<li>选择3</li>
<li>选择4</li>
</ul>
<div id="tab_c">
<div>内容1</div>
<div class="hide">内容2</div>
<div class="hide">内容3</div>
<div class="hide">内容4</div>
</div>
</div>
<div class="wrap">
<ul id="tab_t1">
<li class="act">选择1</li>
<li>选择2</li>
<li>选择3</li>
<li>选择4</li>
</ul>
<div id="tab_c1">
<div>内容1</div>
<div class="hide">内容2</div>
<div class="hide">内容3</div>
<div class="hide">内容4</div>
</div>
</div>
</body>
</html>提问之前查了百度，提问了其他平台，有大神说建议看3大框架的源码，然而我不好意思说，我真是一窍不通。
解决方案
单独写成一个js，然后在HTML中引入
<script src="xxx.js"></script>
1:如果在页面中复用的地方，就写成`function`，引入后调用。`window.onload`的意思是在页面加载完后调用里面的方法，不用的话就是从上至下按顺序加载。
2：相同的效果封装成`function`在不同的地方调用就行了这篇关于javascript - js小白提问，网页项目中，要是写大量js，应该如何放？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
