第一个js实例总结

最新推荐文章于 2022-01-14 20:42:00 发布

mayixixi

最新推荐文章于 2022-01-14 20:42:00 发布

阅读量1.5k

点赞数

分类专栏： JavaScript学习笔记文章标签： stylesheet 浏览器 function ie input div

本文链接：https://blog.csdn.net/mayixixi/article/details/7653336

版权

JavaScript学习笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

我js完全是白目啊，看了几天的书，老大布置给我一个任务，让我模仿这个页面，实现这个页面的效果，

网址：点击打开链接(http://backbonejs.org/examples/todos/index.html)

源码下载：http://download.csdn.net/detail/mayixixi/4374857

代码全部是在谷歌浏览器调试的，别的浏览器的兼容性问题没有考虑，写的时候也会用到一些html5的内容，所以一般浏览器能够兼容到什么程度，真心的木有做测试。做这个页面学到很多东西，所以写篇文章纪念一下。

一页面结构如下：

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link  rel="stylesheet" type="text/css" href="ex2.css" />

</head>
<body>
  <div id="todoapp"> 
    <header>
      <h1>Todos</h1>
      <input id="newTodo" type="text" placeholder="What needs to be done?">
    </header>
    <section id="main">
      <input id="toggle-all" type="checkbox">
      <label for="toggle-all">Mark all as complete</label>
      <ul id="todo-list">//用来添加要做的事情，每件事情用一个li来表示
      </ul>
    </section>
    <div id="footer">
      <a id="clear-completed">清除已经完成的事情</a>
      <div id="todo-count"></div>
    </div>
    
  </div>
  <script type="text/javascript" src="ex2.js"></script>//放在头部意味着要等全部的js代码都被下载，解析，执行完毕后才开始呈现页面内容，但是这无疑会导致页面/呈现时出现明显的迟疑，所以现代web应用程序一般将全部的js引用放在body元素中。
  </body>
</html>

问题一：关于js引用位置的问题：

我本来是将js文件的引用放在头部位置，但是不起作用，后来老大说：放在head和放在body的最后，一样都会起做用，只是放在head中，js代码会在onload之前起作用，也就是说很多dom还没加载好，js就运行起来当然会出错了。

问题二：关于windows.onload必须等待网页中的所有元素（包括图片）加载完毕后才能执行。且不能同时编写多个，否者后面的会将前面的覆盖。

问题三：关于回车事件的绑定

function addTodo()//回车事件
{//添加要做的事情
	if(event.keyCode==13)//判断事件是否由回车键触发（回车键的keyCode为13）
	{
		//要执行的代码
	}
}

问题四：关于childNodes与children的区别

childNodes包含的不仅仅是html节点，所有属性、文本节点都会被包含在里面。二children包含的只有html节点

例如：

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
/*document.getElementsByTagName("ul").childNodes.length;//值为7（IE为3）因为虽然ul只有3个li元素，但是但是这3个li元素之间有四个文本节点（li元素之间的空白符），所以最后值为7，如果像下面这样把所有的空白符都删除将会返回相同的结果（都是3）：

<ul><li>1</li><li>2</li><li>3</li></ul>







问题五：关于innerText，innerHTMl,outText,outHTML 的区别（这个要另写一篇文章，这里不再详细描写）。

问题六：关于event.srcElement与event.target（忘了保存草稿了，突然关了还得重新写）

function delEffect(evt)//点击单个按钮的删除效果（文字变灰）
{//删除效果
	var e =evt || window.event;//对事件的兼容性写法，在ie中支持window.event,ff支持event,所以在ie中event为null在ff中window.event为空。
	var o =window.event?e.srcElement:e.target;//对触发事件的对象的兼容性写法。ie支持event.srcElement,而非ie浏览器支持event.target.所以上面这句代码的含//义是：若果支持windows.event事件，则用event.srcElement方法来获取触发事件的对象。
}


问题七：关于全选

原来的代码：（比较冗余，上半部分和下半部分的代码很相似）

if(toggleAll.checked == true) 
	{
		
		for(i = 0;i < code_Values.length;i++){ 
				code_Values[i].checked = true; 		
		} 
	}
	else
	{
		for(i = 0;i < code_Values.length;i++)
		{ 

				code_Values[i].checked = false; 
		} 
	}	


用三目运算符代码很简洁


for(var i=0;i<li.length;i++)
{
	li[i].children[0].checked = ( toggleAll.checked ) ? true:false;//（如果全选按钮为选中状态则下面的多选框变为选中状态，否则都///变为未选中状态）
}


问题八：关于localStorage（内容比较多，要单独写一篇文章来说明）。

问题九：关于事件绑定的函数的摆放位置。
1 摆放位置不要太散乱，否则不利于修改（找的时候比较麻烦）。
2 关于文件的摆放位置，主要有三类文件值得注意（ 独立的事件 、绑定在在其他事件中的事件 、 页面加载时的事件）
问题十：关于什么时候该解除事件绑定（字数不多，还是决定单独写一篇文章）



最后总结：（1）写代码的过程中要注意代码重用问题，多次用到的代码最好是写成一个单独的函数以方便调用。
（2）写代码的时候要注意格式及代码的清晰度，为了方便阅读要注意代码的缩进及要适当的写注释。
（3）写代码的时候要尽量简洁，不要写太多的冗余代码。
（4）关于函数及变量命名的问题（老生常谈了），命名的时候要起有一定意义的名字，变量名不要随便的用a,b,c....之类的，函数名也不要命名为fun1,fuc2....之类的。非常不便于阅读。所以要努力锻炼自己的命名肌了。



差不多就是这些内容了。js小菜鸟，我会继续努力的。文章中有什么了解不到位的地方，欢迎大家批评指正。