编写高质量 JavaScript -- 知识点小记
一： 团队合作避免JS冲突
脚本中的变量随时存在冲突的风险，
1. 解决办法---用匿名函数将脚本包起来，让变量的作用域控制在匿名函数之内
如：
<script type="text/javascript">
(function(){
var a=123,b="12121";
})();
</script>
.....
<script type="text/javascript">
(function(){
var a=123,b="asdasa";
})();
</script>
此番改善之后，匿名function里面的变量作用域不再是window，而是局限在函数内。
2. 有时各个函数之间变量又要进行通讯，故又要改善（利用全局作用域）
如：
<script type="text/javascript"> var str; </script>
<script type="text/javascript">
(function(){
var a=123,str = b = "12121";
})();
</script>
.....
<script type="text/javascript">
(function(){
var a=123,b=str;
})();
</script>
3. 但如此一来，工程变大，全局变量未免过多难以管理，（利用hash对象作为全局变量）
如：
<script type="text/javascript"> var GLOBAL={}; </script>
<script type="text/javascript">
(function(){
var a=123,b = "12121";
GLOBAL.str = a;
GLOBAL.str2 = b;
})();
</script>
.....
<script type="text/javascript">
(function(){
var a=GLOBAL.str;
var b = GLOBAL.str2;
})();
</script>
4. 不过就算如此，如果工程变大，不同工程师完成不同的函数，变量难免也会冲突，
故又继续改善（GLOBAL 属性不是直接挂在GLOBAL属性对象上，而是挂在此命名函数的命名空间下）
如：
<script type="text/javascript"> var GLOBAL={}; </script>
<script type="text/javascript">
(function(){
var a=123,b = "12121";
GLOBAL.A = {};
GLOBAL.A.str = a;
GLOBAL.A.str2 = b;
})();
</script>
.....
<script type="text/javascript">
(function(){
var a=GLOBAL.A.str;
var b = GLOBAL.A.str2;
})();
</script>
如此种种，函数内属性越复杂，
又可以进一步扩展GLOBAL挂载方式.....
如 GLOBAL.A={};
GLOBAL.A.CAT={};
GLOBAL.A.DOG={};
GLOBAL.A.DOG.name="aa";
GLOBAL.A.CAT.name="bb";
5. 进一步，又可以给此命名空间定义方式封装成函数，方便以后调用：
如：
<script type="text/javascript">
var GLOBAL={};
GLOBAL.namespace = function(str){
var arr=str.split("."), o = GLOBAL;
for(i=(arr[0]="GLOBAL") ? 1 : 0 ; i<arr.length; i++){
o[arr[i]] = o[arr[i]] || {};
o = o[arr[i]];
}
}
</script>
<script type="text/javascript">
(function(){
var a=123,b = "12121";
GLOBAL.namespace("A.CAT");
GLOBAL.namespace("A.DOG");
GLOBLA.A.CAT.name="aa";
GLOBLA.A.DOG.name="bb";
})();
</script>
二：
方便JS程序执行：
1. 给程序一个统一的入口===== window.onload 或DOMReady
（先把所有函数定义部分放入 init函数中，最后再加载 init()即可使用
如：在DOM节点加载进来之前就调用会出错
<script type="text/javascript">
alert(document.getElementById("test").innerHTML);
</script>
<div id="test">hello ! </div>
改善方式：
调换位置，在DOM节点加载进来之后再调用即可
<div id="test">hello ! </div>
<script type="text/javascript">
alert(document.getElementById("test").innerHTML);
</script>
或者，使用window.onload事件，window对象会在网页内元素全部加载完毕之后才触发onload时间
<script type="text/javascript">
window.onload= function(){
alert(document.getElementById("test").innerHTML);
}
</script>
<div id="test">hello ! </div>
但此种方式，仍有不足。
window.onload要等到网页元素全部加载才进行
而DOMReady则只要页面内所有DOM节点皆全部生成即可进行。
DOMReady 方式原生JS并不支持，要使用第三方类库（JS框架）
如jQuery的方式：
$(document).ready(init); // init() 是一个函数...
$(function(){ ...}); /// 等等等等..
当然了，我们也可以用原生JS模拟DOMReady ，事实上很简单，就是：
<script type="text/javascript">
function init(){
alert(document.getElementById("test").innerHTML);
}
</script>
<div id="test">hello ! </div> <script type="text/javascript">
init();
</script>
</body>
如此一来 body标签加载完成之前才调用函数，这种方式也不错！
2. CSS 文件与 JS 文件的位置
因为JS是阻塞型的，所以一般” CSS放在页头，Javascript放在页尾“
（这样一来，网页先呈现给用户，再慢慢加载页面里面的脚本，减少页面空白的时间）
三. Javascript 分层概念
一般来说，我们要把Javascript分层三层： base层 --> common层 --> page 层
1. page层
page 层提供统一的接口，可以在这里实现封装不同浏览器下Javascript的差异，依靠它来完成跨浏览器兼容的工作！
还可以扩展Javascript语言底层提供的接口，以便提供出更多有用的接口（主要是为common page 层提供）
各种问题类举：
<1> 在IE中，它只视DOM节点为childNodes中的一员，
但在FireFox中，它会将包括空白.换行等文本信息在内的信息也当做childNodes的一员。
未解决此问题，
可用 document.all 方式处理，它是IE支持的属性，FireFox不支持
代码如：
<ul>
<li id="item1"></li>
<li id="item2"></li>
<li id="item3"></li>
</ul>
<script type="text/javascript">
var item1 = document.getElementById("item1");
var nextNode = item1.nextSibling;
if(document.all){
while(true){
if(nextNode.nodeType == 1){
break;
}
else{
if(nextNode.nextSibling){
nextNode = nextNode.nextSibling;
}
else{ break; }
}
}
}
alert(nextNode.id);
//////////////////////////////////////////////////
var item2 = document.getElementById("item2");
var nextNode = item2.nextSibling;
if(!document.all){
while(true){
if(nextNode2.nodeType == 1){
break;
}
else{
if(nextNode2.nextSibling){
nextNode2 = nextNode2.nextSibling;
}
else{ break; }
}
}
}
alert(nextNode2.id);
</script>
哦对，好像有点冗余，那就把这个功能封装成函数吧！
如：
<ul>
<li id="item1"></li>
<li id="item2"></li>
<li id="item3"></li>
</ul>
<script type="text/javascript">
function getNextNode(node){
node = typeof node=="string" ? document.getElementById("node") : node;
var nextNode = node.nextSibling;
if(!nextNode)
return NULL; if(!document.all){
while(true){
if(nextNode.nodeType == 1){
break;
}
else{
if(nextNode.nextSibling){
nextNode = nextNode.nextSibling;
}
else{ break; }
}
}
}
return nextNode;
} //funciton over var nextNode = getNextNode("item1");
var nextNode2 = getNextNode("item1");
alert(nextNode.id);
alert(nextNode2.id);
</script>
<2> 透明度的问题：
IE下透明度是通过滤镜实现的，但在FireFox下透明度是通过CSS 的opacity属性实现的
我们把它封装起来
代码如：
<style type="text/css">
#test1 { background:blue; height: 100px;}
#test1 { background:blue; height: 100px;}
</style>
<div id="test1"></div>
<div id="test2"></div> <script type="text/javascript">
function setOpacity(node,level){ // level 为滤镜程度
node = typeof node=="string" ? document.getElementById("node") : node;
if(document.all){
node.style.filter = 'alpha(opacitu= ' + level + ')';
}
else{
node.style.opacity = level / 100;
}
} setOpacity("test1",20); //test1.style.filter = 'alpha(opacitu=20)';
setOpacity("test2",80); //test2.style.opacity = 0.8;
</script>
<3> event 对象的问题：
IE下 event对象是作为window的属性作用于全局作用域的，但在FireFox中 event对象是作为事件的参数存在的
所以，为了兼容性，一般考虑用一个变量指向event对象，继而通过这个变量访问event对象
不理解？ 代码如下
<script type="text/javascript">
var btn = document.getElementById("btn");
btn.onclick = function(e){
e = window.event || e;
// ..........接下来你就可以用e了， 比如 e.target 等
</script>
另一方面，派生事件的对象在IE下是通过event对象的srcElement属性访问的
在FireFox下是通过event对象的target属性访问的
如代码：
<script type="text/javascript">
var btn = document.getElementById("btn");
btn.onclick = function(e){
e = window.event || e;
var el = e.srcElement || e.target;
alert(el.tagName);
</script>
<4> 冒泡问题的处理
首先理解概念---> 对于事件流，浏览器中的事件模型分为两种：捕获型和冒泡型事件
事件的冒泡： Javascript对这种先触发子容器监听事件，后触发父容器监听事件的现象。
事件的捕获： 即相反于冒泡（先父后子）
比如代码中 <div id="wrapper">
<input type="button" value="click me" id="btn" />
</div>
我们为id=wrapper绑定事件1，为id=btn绑定事件2，
如此一来，我们的结果却是： 无论点哪里，触发的都是事件1 （因为事件2触发得很快就会迅速转变为事件1）
为了解决，要阻止（对子容器）事件的冒泡机制：IE下通过设置event对象的cancelBubble 为true 实现
FireFox 通过调用event对象的stopPropagation方法实现
封装成函数即是：
<script type="text/javascript">
function stopPropagation(e){
e = window.event || e;
if(document.all){
e.cancelBubble = true;
}
else{
e.stopPropagation();
}
}
/////////////////////////调用
wrapper.onclick = function(){
..............
}
btn.onlcick = function(e){
................
stopPropagation(e);
}
</script>
<5>事件监听的处理：
可以简单地使用 onXXX 的方式，
如 btn.onclick = function(){ .......};
但onXXX方法没有叠加作用，后面定义的onXXX会把前面的覆盖掉，为解决此类问题：
IE下引入 attachEvent方法，FireFox 下引入addEventListener方法。
IE下引入 detachEvent方法，FireFox 下引入removeEventListener方法。
如：oSpan.detachEvent("onclick",fnClick);
oSpan.removeEventListener("click",fnClick);
好，我们就把这个功能封装一下：
代码如：
<script type="text/javascript">
function on(node,eventType,handeler){
node = typeof node=="string" ? document.getElementById("node") : node;
if(document.all){
node.attachEvent("on"+ eventType,handeler);
}
else{
node.addEventListener(eventType,handeler,false); // 其中第三个参数：true--捕获型，false--冒泡型
}
}
var btn = document.getElementById("btn");
on(btn,"click",funciton(){
alert(1);
});
on(btn,"click",funciton(){
alert(2);
});
</script>
<6> 其他小功能：
函数封装实现：
<script type="text/javascript">
function trim(ostr){ //trim() 去空格
return ostr.replace(/^\s+|\s+$/g,"");
}
function isNumber(s){
return !isNaN(s);
}
function isString(s){
return typeof s === "string";
}
function isBoolean(s){
return typeof s === "boolean";
}
function isFunction(s){
return typeof s === "function";
}
function isNull(s){
return s === null;
}
function isUndefined(s){
return typeof s === "undefined";
}
function isEmpty(s){
return /^\s*$/.test(s);
}
function isArray(s){
return s instanceof Array;
}
function get(node){ // get() 代替ducument.getElementById() ...alert(get("test1").innerHTML);
node = typeof node=="string" ? document.getElementById("node") : node;
return node;
}
function $(node){ // $() 代替ducument.getElementById() ...alert($("test1").innerHTML);
node = typeof node=="string" ? document.getElementById("node") : node;
return node;
} // 原生JS没有getElementByClassName, 那就给它实现一个呗...
// getElementByClassName函数接收3个参数，第一个参数为class名（必选），第二个为父容器，缺省值为body节点，第三个参数为DOM节点的标签名。
// 函数 实现如下
function getElementByClassName(str,root,tag){
if(root){
root = typeof root=="string" ? document.getElementById("root") : root;
}
else{
root = document.body;
}
tag = tag || "*";
var els = root.getElementByTagName(tag), arr=[];
for(var i=0,n=els.length; i<n ; i++){
for(var j=0,k=els[i].className.split(" "), l=k.length; j<l; j++){
if(k[k] == str){
arr.push(els[i]);
break;
}
}
}
return arr;
} //然后我们就可以直接调用啦..
var aEls = getElementByClassName("a");
var bEls = getElementByClassName("b");
// .............
</script>
2. common 层:
common层本身依赖于base层提供的接口，common层提供的应该是相对更大的组件，供Javascript调用
3. page 层
就是具体的页面特设定啦...
四： 编程的其他一些实用技巧：
1.在遍历数组时对DOM监听事件，索引值将始终等于遍历结束后的值。
如某个监听代码：
<script type="text/javascript">
//遍历数组，让tabMenus 监听click事件 (Tab 组件监听选项卡）
for(var i=0;i<tabMenus.length;i++){
tabMenus[i].onclick = function(){
//遍历数组，隐藏所有tabcontent
for(var j=0;j<tabcontent.length;j++){
tabcontent[j].style.display = "none";
}
//显示被点击的tabMenus 对应的tabcontent
tabcontent[i].style.display = "block";
}
}
</script>
这样做之后，所有content将会隐藏且 有报错---> tabcontent[i] is undefined !
要怎么改正呢？ ----------------------------->
<script type="text/javascript">
//方法一： 利用闭包
for(var i=0;i<tabMenus.length;i++){
（function(_i){
tabMenus[_i].onclick = function(){
//遍历数组，隐藏所有tabcontent
for(var j=0;j<tabcontent.length;j++){
tabcontent[j].style.display = "none";
}
//显示被点击的tabMenus 对应的tabcontent
tabcontent[_i].style.display = "block";
}
})(i); // 闭包...
} //方法二： 给DOM节点添加 _index属性
<script type="text/javascript"> for(var i=0;i<tabMenus.length;i++){
tabMenus[i]._index = i;
tabMenus[i].onclick = function(){
//遍历数组，隐藏所有tabcontent
for(var j=0;j<tabcontent.length;j++){
tabcontent[j].style.display = "none";
}
//显示被点击的tabMenus 对应的tabcontent
tabcontent[this._index].style.display = "block";
}
}
</script>
2. 另一方面，我们还需要注意控制好 关键字this 的指向问题：
<1> Javascript伪协议和内联事件对this的指向不同
如
<script type="text/javascript">
// 弹出 “A"
<a href="#" onclick="alert(this.tagName)";>click me</a>
// 弹出 "undefined"
<a href="Javascript:alert(this.tagName)">click me</a>
//弹出 "true"
<a href="Javascript:alert(this==window)">click me</a>
</script>
<2> setTimeout 和 setInterval 也会改变this指向
他们都是直接调用函数里的this 指向window
如
<script type="text/javascript">
var name="somebody";
var adang = {
name : "adang";
say : funciton(){
alert("I'm" + this.name);
}
};
adang.say(); // I'm adang
setTimeout(adang.say,1000); // I'm somebody
setInterval(adang.say,1000); // I'm somebody
// 解决办法使用匿名函数 --->
setTimeout(function(){ adang.say()},1000); // I'm adang
</script>
<3> DomNode.on XXX 方式也会改变this 指向
它将直接调用函数里面的this 指向DomNode
比如：
<script type="text/javascript">
var name="somebody";
var btn = document.getElementById("btn");
var adang = {
name : "adang";
say : funciton(){
alert("I'm" + this.name);
}
};
adang.say(); // I'm adang
btn.onclick = adang.say; // I'm BUTTON
// 解决办法使用匿名函数 --->
btn.onclick = funciton(){ adang.say()} ; // I'm adang
</script>
<4> 对此，另外我们还可以用 call 和 apply 函数来改变处理函数的this指向
比如：
<script type="text/javascript">
var name="somebody";
var btn = document.getElementById("btn");
var adang = {
name : "adang";
say : funciton(){
alert("I'm" + this.name);
}
};
adang.say.call(btn); // I'm BOTTON ---- 把this指向改成了按钮
adang.say.apply(btn); // I'm BOTTON ---- 把this指向改成了按钮
setTimeout(adang.say,1000); // I'm somebody
setInterval(adang.say,1000); // I'm somebody
setTimeout(function(){ adang.say.apply(btn)},1000); // I'm BUTTON
</script>
=============================分割线=====================待续=====================================
编写高质量 JavaScript -- 知识点小记的更多相关文章
- 深入理解JavaScript系列（1）：编写高质量JavaScript代码的基本要点
深入理解JavaScript系列(1):编写高质量JavaScript代码的基本要点 2011-12-28 23:00 by 汤姆大叔, 139489 阅读, 119 评论, 收藏, 编辑 才华横溢的 ...
- 编写高质量JavaScript代码绳之以法（The Essentials of Writing High Quality JavaScript）翻译
原文:The Essentials of Writing High Quality JavaScript 才华横溢的Stoyan Stefanov,在他写的由O'Reilly初版的新书<Java ...
- 编写高质量JavaScript代码的基本要点记录
原文:深入理解JavaScript系列(1):编写高质量JavaScript代码的基本要点 1.最小全局变量(Minimizing Globals)的重要性 JavaScript通过函数管理作用域.在 ...
- 编写高质量JavaScript代码的68个有效方法
简介: <Effective JavaScript:编写高质量JavaScript代码的68个有效方法>共分为7章,分别涵盖JavaScript的不同主题.第1章主要讲述最基本的主题,如版 ...
- 编写高质量JavaScript代码的基本要点
全局变量 javaScript通过函数管理变量作用域.在函数内部声明的变量只在这个函数内部可用,函数外面不可用.另一方面,在任何函数外面声明的或是函数内未声明直接使用的变量叫做全局变量. 每个Java ...
- 如何编写高质量JavaScript代码
书写可维护的代码(Writing Maintainable Code ) 软件bug的修复是昂贵的,并且随着时间的推移,这些bug的成本也会增加,尤其当这些bug潜伏并慢慢出现在已经发布的软件中时.当 ...
- <深入理解JavaScript>学习笔记(1)_编写高质量JavaScript代码的基本要点
注:本文是拜读了 深入理解JavaScript 之后深有感悟,故做次笔记方便之后查看. JQuery是一个很强大的JavaScript 类库,在我刚刚接触JavaScript的就开始用了. JQuer ...
- 高质量JavaScript代码书写基本要点
翻译-高质量JavaScript代码书写基本要点 by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/ ...
- [转] 翻译-高质量JavaScript代码书写基本要点 ---张鑫旭
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1173 原文作者:St ...
随机推荐
- 3D空间中射线与轴向包围盒AABB的交叉检测算法【转】
引言 在上一节中,我讲述了如何实现射线与三角形的交叉检测算法.但是,我们应该知道,在游戏开发中,一个模型有很多的三角形构成,如果要对所有的物体,所有的三角形进行这种检测,就算现在的计算机运算能力,也是 ...
- matlab学习笔记---（1）
Matlab学习笔记 一. Desktop Basics (Matlab 基础知识) 当你打开Matlab的时候,matlab按照以下默认的方式展示出来. 该桌面主要包括以下几部分内容: 当前文件夹: ...
- C# 成员变量和属性的区别
之前一直在C#中使用这两者, 却一直不知道成员变量和属性还是不一样的两种概念. 不过说不一样, 也不是完全对. 简单举个例子: public class myclass { public string ...
- 用ndp部署storm应用
本文由作者余宝虹授权网易云社区发布. 使用户ndp部署一个Java应用大家都非常熟悉的,但是看到某些同学用非常繁琐的方式部署storm应用的时候,我觉得很有必要整一个帮助教程,ndp帮助文档里面没有, ...
- 基于GitLab与Git Extensions搭建版本控制工具
1.背景 大家知道GitHub是现在非常流行的代码托管工具,但是如果有些项目不想开源的话,则需要付费,因此萌生了自己搭建一个Git的版本控制工具,供内网使用.GitLab则是个好的选择,但是GitLa ...
- Day14 作业
1,整理今天的博客,写课上代码,整理流程图. 2,用列表推导式做下列小题 (1) 过滤掉长度小于3的字符串列表,并将剩下的转换成大写字母 (2) 求(x,y)其中x是0-5之间的偶数,y是0- ...
- 782. Transform to Chessboard
An N x N board contains only 0s and 1s. In each move, you can swap any 2 rows with each other, or an ...
- Django(图书管理系统1)
day63 内容回顾 1. 单表的增删改查 1. 删和改 1. GET请求 URL传值 1. 格式 ...
- 石头剪刀布Java实现
java实现石头剪刀布过程 首先来看石头剪刀布的所有可能情况,具体如下图 第一种思路是穷举所有可能,使用if条件语句,略显呆板和麻烦. 第二种思路,因为计算机存的是数字,所以我们可以从数字角度来找规律 ...
- （原创）JAVA阻塞队列LinkedBlockingQueue 以及非阻塞队列ConcurrentLinkedQueue 的区别
阻塞队列:线程安全 按 FIFO(先进先出)排序元素.队列的头部 是在队列中时间最长的元素.队列的尾部 是在队列中时间最短的元素.新元素插入到队列的尾部,并且队列检索操作会获得位于队列头部的元素.链接 ...