编写高质量的 JavaScript 代码(一)

最新推荐文章于 2024-05-13 23:51:48 发布

MR_LP

最新推荐文章于 2024-05-13 23:51:48 发布

阅读量1.2k

点赞数 1

分类专栏： HTML 学习文章标签： javascript html 读书笔记工作团队

本文链接：https://blog.csdn.net/MR_LP/article/details/51518428

版权

HTML 学习专栏收录该内容

80 篇文章 0 订阅

订阅专栏

本喵又来给大家送来新鲜的读书笔记啦.

大家感不感动? ( ´థ౪థ)

今天文章主要是来说一下,在工作中书写 JS 时的团队协作以及如何一些小技巧.

新的文章正在撰写中,诸君可以回头看看之前的文章

如何编写高质量的 HTML 代码

最后,求点赞,求分享,如果是女孩纸的话,哼哼,求抱抱! (づ｡◕‿‿◕｡)づ

以下为正文

1.养成良好的编程习惯

1.1 团队合作——如何避免 JS 冲突

我们进入公司之后,我们可能会从新开发一个网站.这种情况,我们定义什么参数,使用什么名字全部都是随自己的想法,自己维护也可能会很正常.

但是假如我们进入公司接手的是别人的代码呢?和其他同事一起同事合作开发呢?

这时候我们很多之前不注意的小习惯就可能会造成巨大的灾难.

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

可以看到,我们在编写 JS 的时候直接定义了两个变量,他们的作用域都是直接在 Window 作用域下的,但是假如我们的另外一个工程师,也去直接定义了两个变量,而且名字相同呢?

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

那我们该如何去解决呢?

我们可以使用匿名函数去对脚本进行包裹,让变量的作用域控制于匿名函数中.

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

可以看见,我们在上的代码中使用了一个匿名函数 (function(){})();.

执行代码的时候,包裹在这个匿名函数中的变量,它的作用域就不是 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>

除此之外,我们在团队合作中,还可以将自己的名字缩写也放在变量命名中,而且还应该去适当的写明注释,这些都是可以大大加快团队合作进程的工作方式.

具体操作可以参考我之前的文章: 编写高质量的 HTML 代码

1.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 框架去使用.

如 JQ.

<!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();
    }

这样就可以有效的避免上述问题了.

1.3 CSS 放页头, JS 放页尾

CSS 放在页头,在载入 HTML 元素之前先载入,这样可以避免 HTML 出现无样式状态.

JS 放在页尾,可以避免 JS 阻塞网页的呈现,减少页面空白的时间.

1.4 文件压缩

在之前的文章中曾经说明过,css 发布前需要进行压缩.

可以参考我之前的文章: 编写高质量的 HTML 代码

同样的, JS 部分我们也可以去进行一下压缩,这里推荐两个工具

Packers: packer

YUI Compressor: Compressor

需要注意 YUI 需要下载 jar 文件到本地,之后通过命令行调用,

好处是 YUI 不仅仅可以压缩 JS,还可以压缩 css.

下期预告:
JavaScript 的分层概念和 JavaScript 库

二维码.jpg

MR_LP

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
编写高质量的 JavaScript 代码(一)

本喵又来给大家送来新鲜的读书笔记啦. 大家感不感动? ( ´థ౪థ) 今天文章主要是来说一下,在工作中书写 JS 时的团队协作以及如何一些小技巧. 新的文章正在撰写中,诸君可以回头看看之前的文章如何编写高质量的 HTML 代码最后,求点赞,求分享,如果是女孩纸的话,哼哼,求抱抱! (づ｡◕‿‿◕｡)づ以下为正文1.养成良好的编程习惯1.1
复制链接

扫一扫