Examples that teach you to write more stable and readable JavaScript code

Everyone has his ownProgrammingStyle, and it is inevitable to feel other people's programming style - modify other people's code. "Modifying other people's code" is a very painful thing for us. Because some codes are not so easy to read and maintain, letting another person modify other people's code may only end up modifying a variable and adjusting the calling timing of a function. But it takes an hour or more to read and clarify other people's code. This article will take you step by step to reconstruct a "component" that obtains the position - improving the readability and stability of your javascript code.

The content of this article is as follows:

• Separate your javascript code

• Functions should not rely too much on the external environment

• Semanticand reuse

• Components should focus on logic, BehaviorJust encapsulation

• Develop your own style of code

Separate your javascript code

The following piece of code demonstrates the difficulty of reading/ Modified code:

(function (window, namespace) {
    var $ = window.jQuery;
    window[namespace] = function (targetId, textId) {
        //一个尝试复用的获取位置的"组件"
        var $target = $('#' + targetId),//按钮
            $text = $('#' + textId);//显示文本
        $target.on('click', function () {
            $text.html('获取中');
            var data = '北京市';//balabala很多逻辑，伪代码，获取得到位置中
            if (data) {
                $text.html(data);
            } else
                $text.html('获取失败');
        });
    }
})(window, 'linkFly');

This piece of code, we temporarily accept that it has constituted a "component".
The above code is a typical way to get everything done. Once the internal logic is filled in, it will become unmanageable. Once the demand is increased, for example, the data format returned by the location needs to be processed, then you have to go inside and look for it. The code that processes the data is then modified.

We separate the logic and get the code as follows:

(function (window, namespace) {
    var $ = window.jQuery,
        $target,
        $text,
        states= ['获取中', '获取失败'];
    function done(address) {//获取位置成功
        $text.html(address);
    }
    function fail() {
        $text.html(states[1]);
    }
    function checkData(data) {
        //检查位置信息是否正确
        return !!data;
    }
    function loadPosition() {
        var data = '北京市';//获取位置中
        if (checkData(data)) {
            done(data);
        } else
            fail();
    }
    var init = function () {
        $target.on('click', function () {
            $text.html(states[0]);
            loadPosition();
        });
    };
    window[namespace] = function (targetId, textId) {
        $target = $('#' + targetId);
        $text = $('#' + textId);
        initData();
        setData();
    }
})(window, 'linkFly');

The function should not rely too much on the external environment

In the above code, we have cut the entire component into various components function (note that I am talking about functions, not methods), a new problem often arises here: functions rely too much on uncontrollable variables.

The variables $target and $text are global variables in the environment and are assigned values ​​when the component is initialized. Most of the operation methods of the code we cut rely on $text, especially $text and done() , fail(), once the structure and logic related to $text change, our code will undergo considerable changes.

Everything related to the page/DOM is not trustworthy (such as $target and $text). Once the page structure changes, its behavior will also change to a large extent. And functions should not depend on the external environment.
Regarding uncontrollable variables, we should unravel the relationship between functions and dependent variables, so that the function becomes more focused on the logic of its own area and more pure. To put it simply: all external variables that the function depends on should be passed into the function through parameters.
The new code is as follows:

(function (window, namespace) {
    var $ = window.jQuery;
    //检查位置信息是否正确
    function checkData(data) {
        return !!data;
    }
    //获取位置中
    function loadPosition(done, fail) {
        var data = '北京市';//获取位置中
        if (checkData(data)) {
            done(data);
        } else
            fail();
    }
    window[namespace] = function (targetId, textId) {
       var  $target = $('#' + targetId),
            $text = $('#' + textId);
        var states = ['获取中', '获取失败'];
        $target.on('click', function () {
            $text.html(states[0]);
            loadPosition(function (address) {//获取位置成功
                $text.html(address);
            }, function () {//获取位置失败
                $text.html(states[1]);
            });
        });
    }
})(window, 'linkFly');

Semanticization and reuse

The variable states is an array, the behavior it describes is difficult to read, every time you see states [0] We all have the urge to kill the original author every minute, because we always have to remember the value of the variable states. In the code, we should make it as easy to read as possible.

In addition, $text.html in the above code is a typical code duplication. We modify the code again. Please pay attention to the code position of changeStateText() that we extracted in the modified code this time. It has not been promoted to the upper level environment (that is, the entire big closure environment).

(function (window, namespace) {
    var $ = window.jQuery;
    function checkData(data) {
        return !!data;
    }
    function loadPosition(done, fail) {
        var data = '北京市';//获取位置中
        if (checkData(data)) {
            done(data);
        } else
            fail();
    }
    window[namespace] = function (targetId, textId) {
        var $target = $('#' + targetId),
            $text = $('#' + textId),
            changeEnum = { LOADING: '获取中', FAIL: '获取失败' },
            changeStateText = function (text) {
                $text.html(text);
            };
        $target.on('click', function () {
            changeStateText(changeEnum.LOADING);
            loadPosition(function (address) {
                changeStateText(address);
            }, function () {
                changeStateText(changeEnum.FAIL);
            });
        });
    }
})(window, 'linkFly');

When it comes to semantics, we must know the logic and semantics of the entire current code:

In this entire component, all function modules can be divided into: tools and tool providers.

The upper-level environment (the entire large closure) plays the role of a tool in our business. Its task is to create a set of tools related to obtaining location logic, and in the window[namespace]) function , is the identity of the tool provider. It is the only entrance and is responsible for providing the complete business of the component to the tool users.
The $text.html() here does not logically belong to the tool, but belongs to the feedback obtained by the tool provider after using the tool, so the changeStateText() function is placed in the tool provider window[namespace]() .

组件应该关注逻辑，行为只是封装

到此为止，我们分离了函数，并让这个组件拥有了良好的语义。但这时候来了新的需求：当没有获取到位置的时候，需要进行一些其他的操作。这时候会发现，我们需要window[namespace]()上加上新的参数。
当我们加上新的参数之后，又被告知新的需求：当获取位置失败了之后，需要修改一些信息，然后再次尝试获取位置信息。
不过幸好，我们的代码已经把大部分的逻辑抽离到了工具提供者中了，对整个工具的逻辑影响并不大。
同时我们再看看代码就会发现我们的组件除了工具提供者之外，没有方法（依赖在对象上的函数）。也就是说，我们的组件并没有对象。

我见过很多人的代码总是喜欢打造工具提供者，而忽略了工具的本质。迎合上面的增加的需求，那么我们的工具提供者将会变得越来越重，这时候我们应该思考到：是不是应该把工具提供出去？

让我们回到最初的需求——仅仅只是一个获取位置的组件，没错，它的核心业务就是获取位置——它不应该被组件化。它的本质应该是个工具对象，而不应该和页面相关，我们从一开始就不应该关注页面上的变化，让我们重构代码如下：

(function (window, namespace) {
    var Gps = {
        load: function (fone, fail) {
            var data = '北京市';//获取位置伪代码
            this.check(data) ?
                done(data, Gps.state.OK) :
                fail(Gps.state.FAIL);
        },
        check: function (data) {
            return !!data;
        },
        state: { OK: 1, FAIL: 0 }
    };
    window[namespace] = Gps;
})(window, 'Gps');

在这里，我们直接捏死了工具提供者，我们直接将工具提供给外面的工具使用者，让工具使用者直接使用我们的工具，这里的代码无关状态、无关页面。

至此，重构完成。

形成自己风格的代码

之所以讲这个是因为大家都有自己的编程风格。有些人的编程风格就是开篇那种代码的…
我觉得形成自己的编程风格，是建立在良好代码的和结构/语义上的。否则只会让你的代码变得越来越难读，越来越难写。
****
单var和多var
我个人是喜欢单var风格的，不过我觉得代码还是尽可能在使用某一方法/函数使用前进行var，有时候甚至于为了单var而变得丧心病狂：由于我又过分的喜爱函数表达式声明，函数表达式声明并不会在var语句中执行，于是偶尔会出现这种边声明边执行的代码，为了不教坏小朋友就不贴代码了(我不会告诉你们其实是我找不到了)。

对象属性的屏蔽
下面的代码演示了两种对象的构建，后一种通过闭包把内部属性隐藏，同样，两种方法都实现了无new化，我个人…是不喜欢看见很多this的..但还是推荐前者。

(function () {
    //第一种，曝露了_name属性
    var Demo = function () {
        if (!(this instanceof Demo))
            return new Demo();
        this._name = 'linkFly';
    };
    Demo.prototype.getName = function () {
        return this._name;
    }

    //第二种，多一层闭包意味内存消耗更大，但是屏蔽了_name属性
    var Demo = function () {
        var name = 'linkFly';
        return {
            getName: function () {
                return name;
            }
        }
    }
});

巧用变量置顶[hoisting]
巧用函数声明的变量置顶特性意味着处女座心态的你放弃单var，但却可以让你的函数在代码结构上十分清晰，例如下面的代码：

(function () {
    var names = [];
    return function (name) {
        addName(name);
    }
    function addName(name) {
        if (!~names.indexOf(name))//如果存在则不添加
            names.push(name);
        console.log(names);// ["linkFly"]
    }
}())('linkFly');

if和&&
这种代码，在几个群里都见过讨论：

(function () {
    var key = 'linkFly',
        cache = { 'linkFly': 'http://www.cnblogs.com/silin6/' },
        value;
    //&&到底
    key && cache && cache[key] && (value = cache[key]);
    //来个if
    if (key && cache && cache[key])
        value = cache[key];
})()；

The above is the detailed content of Examples that teach you to write more stable and readable JavaScript code. For more information, please follow other related articles on the PHP Chinese website!