Javascript编程习惯总结

时间 2019-12-11

原文原文链接

1. 团队合做------如何避免 JS 冲突

咱们进入公司以后,咱们可能会重新开发一个网站.这种状况,咱们定义什么参数,使用什么名字所有都是随本身的想法,本身维护也可能会很正常.javascript

可是假如咱们进入公司接手的是别人的代码呢?和其余同事一块儿同事合做开发呢?html

这时候咱们不少以前不注意的小习惯就可能会形成巨大的灾难.java

<script type="text/javascript"> var a = "li"; var b = "peng"; ... </script>

能够看到,咱们在编写 JS 的时候直接定义了两个变量,他们的做用域都是直接在 Window 做用域下的,可是假如咱们的另一个工程师,也去直接定义了两个变量,并且名字相同呢?jquery

这样会直接形成代码的冲突,引发某些不知名的错误.ajax

那咱们该如何去解决呢?编程

咱们可使用匿名函数去对脚本进行包裹,让变量的做用域控制于匿名函数中.浏览器

<script type="text/javascript"> (function(){ var a = "li"; var b = "peng"; ... })(); </script>

能够看见,咱们在上的代码中使用了一个匿名函数 (function(){})();.bash

执行代码的时候,包裹在这个匿名函数中的变量,它的做用域就不是 window 了,而是局限在函数内部,这样也就不会引发代码冲突了.服务器

可是这样并非就一劳永逸了,假如说咱们在不一样的脚本之间互相通讯呢?框架

咱们须要在网页中添加新功能,在新功能中须要使用到以前定义的函数中的某一个变量,这时候该怎么办?

最简单的解决方案:直接把新的代码也放在以前的匿名函数中,可是,这样并不符合咱们的代码规范,

并且加入以前的功能是已经离职的员工写的呢?

你还须要首先去阅读他以前写的程序,去避开每个冲突.

其次,你还须要将本身书写的内容去进行封装,这样会逼死人的

(PS: 别问我我是怎么知道的 ╮(;´༎ຶД༎ຶ`)╭ )

那么如何去解决这个问题呢?

咱们能够在 window 做用域下定义一个全局变量,把它做为一个桥梁,完成各匿名函数之间的通讯.

<script type="text/javascript"> var str; </script> <script type="text/javascript"> (function(){ var a = "li"; str = b = "peng"; ... })(); </script> <script type="text/javascript"> (function(){ var a = "li"; var b = str; ... })(); </script>

可是咱们有多个变量呢?难道须要一个个去定义么?

咱们可使用一个 { } 对象类型的变量做为全局变量,若是匿名函数之间须要多个变量做为通讯桥梁,能够将这些变量都做为全局变量的属性,这样能够保证全局变量不多,并且拓展性很好.

<script type="text/javascript"> var GLOBAL = {}; </script> <script type="text/javascript"> (function(){ var a = "li"; var b = "peng"; GLOBAL.str = a; GLOBAL.str2 = b; ... })(); </script> <script type="text/javascript"> (function(){ var a = GLOBAL.str; var b = GLOBAL.str2; ... })(); </script>

除此以外,咱们在团队合做中,还能够将本身的名字缩写也放在变量命名中,并且还应该去适当的写明注释,这些都是能够大大加快团队合做进程的工做方式.

2 给程序一个统一的入口 ------ window.onload 和 DOMReady

你们都知道,JS 是中脚本语言,咱们的浏览器下载到哪里,就会执行到哪里.

这种特性会为编程带来很大的便利,可是同时也会形成代码过于零散,四处分布.

为了解决这种问题,咱们首先须要从功能上对程序进行职能的划分.

网页中的 JS 从功能上应该分为两大部分 ------ 框架部分 和 应用部分.

1. 框架部分提供对 JS 代码的组织做用的代码,其中应该包括定义全局变量, 定义命名空间等方法.它和应用无关,每一个页面都须要包括相同的框架,因此框架部分的代码在每一个页面都相同.

2. 应用部分提供的是页面功能逻辑,不一样页面会有不一样的功能,不一样的页面应用部分的代码也不相同.

<script type="text/javascript"> function init(){ (function(){ ... }()); (function(){ ... }()); (function(){ ... }()); (function(){ ... }()); } </script>

能够看见,咱们将全部应用部分的代码都集中到 init 函数内了,全部的初始化工做都在这里,这里就是网页程序的入口.

可是须要注意,若是程序控制某个 DOM 节点,而该 DOM 节点当时尚未被载入,程序会直接报错.

有两种解决方案,第一种最简单的解决方案,直接把脚本放在后面.

可是有时候,咱们但愿咱们的程序可以无视这种放置规则,可让程序的位置在 DOM 节点以前或者以后.

这时候咱们能够去 监听 window 对象的 onload 事件,当 window 触发 onload 事件以后去调用脚本.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> function init(){ alert(document.getElementById("test").innerHTML); } window.onload = init; </script> </head> <body> <div class="test">MR_LP</div> </body> </html>

这样,咱们的脚本不会当即执行,而是在 window.onload 以后才去执行.

而 window 对象会在页面内元素所有加载完成以后才去触发 onload 事件,而这时候咱们的 test 已经加载完毕,因此并不会报错.

你觉得如今就能够万事大吉了么? 固然不是. ٩(๑˃̌ۿ˂̌๑)۶

若是页面加载的时候,存在某张超级大的图片呢?

window.onload 会等所有加载完成才会触发,难度这期间就让用户等着?

这时候就要说到 DOMReady 了.

DOMReady 只判断页面内全部的 DOM 节点是否已经所有生成,至于节点中的内容是否已经加载,并不会检查.

因此 DOMReady 会比 window.onload 加载速度要快不少.

可是须要注意, DOMReady 并非原生 JS 支持的事件,通常咱们都是结合 JS 框架去使用.

如 jQuery

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" scr="http://ajax.googleAPIs.com/ajax/libs/jquery/1.3/jquery.min.js"></script> <script type="text/javascript"> function() init{ alert(document.getElementById("test").innerHTML); } $(document).ready(init); </script> </head> <body> <div class="test">MR_LP</div> </body> </html>

固然咱们也能够本身去模拟 DOMReady ,即咱们去定义了 init 函数,以后等<body>以前的时候去调用一下 init 函数,这时候虽然 DOM 节点不必定都所有加载完成了,可是却必定都生成了,经过这种方式,能够去简单模拟一下 DOMReady.

完事了? 固然没有 (இдஇ) .

在实际工做中,网站的头部和尾部常常会作成独立的文件,用服务器端语言 include 到网页中,因此咱们的网页常常会拆散成三个文件,头部,主体和尾部三个文件.

通常来讲,头尾文件都很是稳定.由于全站公用的统一结尾,这部分不会常常修改,而主体部分是每一个页面各不相同的,若是有的页面不须要 JS, 这时候咱们的主体中可能就没有 init 函数了,这时候调用就确定会报错了.

这时咱们固然能够去作一个规范,让每一个页面都去书写一次,可是这并不合理.

正确的处理方式是咱们在书写 init 以前能够先去判断一下 init 是否存在.

if(init){ init(); }

这样就能够有效的避免上述问题了.

做者：MR_LP___李鹏连接：https://www.jianshu.com/p/92a41e9b4a1b來源：简书著做权归做者全部。商业转载请联系做者得到受权，非商业转载请注明出处。