Beispiele, die Ihnen zeigen, wie Sie stabileren und lesbareren JavaScript-Code schreiben

Jeder hat seinen eigenen Programmierstil , und es ist unvermeidlich, die Programmierstile anderer Leute zu spüren – den Code anderer Leute zu ändern. „Den Code anderer Leute zu ändern“ ist für uns eine sehr schmerzhafte Sache. Da einige Codes nicht so einfach zu lesen und zu warten sind, führt die Änderung des Codes anderer Personen möglicherweise nur dazu, dass eine Variable geändert und der Aufrufzeitpunkt einer Funktion angepasst wird eine Stunde oder länger, um den Code anderer Leute zu lesen und zu klären. Dieser Artikel führt Sie Schritt für Schritt durch die Rekonstruktion einer „Komponente“, die die Position erhält – und verbessert so die Lesbarkeit und Stabilität Ihres Javascript-Codes.

Der Inhalt dieses Artikels lautet wie folgt:

• Trennen Sie Ihren Javascript-Code

• Funktion sollte nicht vertrauenswürdig sein zu sehr auf die externe Umgebung

• Semantikund Wiederverwendung

• Komponenten sollten sich auf Logik, Verhaltennur Kapselung

• Bilden Sie Ihren eigenen Codestil

Trennen Sie Ihren Javascript-Code

Der folgende Teil Der Code zeigt die Schwierigkeit des Lesens/Modifizierter 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');

Bei diesem Codeteil akzeptieren wir vorübergehend, dass es sich um eine „Komponente“ handelt.

Der obige Code ist eine typische Methode, um alles zu erledigen. Sobald die interne Logik ausgefüllt ist, wird das Leben unüberschaubar. Dann müssen Sie hineingehen und danach suchen. Der Code, der die Daten verarbeitet, wird dann geändert.

Wir trennen die Logik und erhalten den Code wie folgt:

(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');

Die Funktion sollte nicht zu sehr von der externen Umgebung abhängig sein

Im obigen Code haben wir Schneiden Sie die gesamte Komponente in verschiedene Funktionen (beachten Sie, dass ich von Funktionen und nicht von Methoden spreche). Hier tritt häufig ein neues Problem auf: Funktionen basieren zu sehr auf unkontrollierbaren Variablen.

Die Variablen $target und $text sind globale Variablen in der Umgebung und werden bei der Initialisierung der Komponente mit Werten belegt. Die meisten Operationsmethoden unseres Schnittcodes basieren auf $text, insbesondere auf $text und done () , fail(), sobald sich die Struktur und Logik in Bezug auf $text ändern, wird unser Code erhebliche Änderungen erfahren.

Dinge, die sich auf die Seite/das DOM beziehen, sind nicht vertrauenswürdig (z. B. $target und $text). Sobald sich die Seitenstruktur ändert, ändert sich auch ihr Verhalten weitgehend. Und Funktionen sollten nicht von der externen Umgebung abhängen.

In Bezug auf unkontrollierbare Variablen sollten wir die Beziehung zwischen Funktionen und abhängigen Variablen entschlüsseln, damit sich die Funktion stärker auf die Logik ihres eigenen Bereichs konzentrieren und reiner werden kann. Vereinfacht ausgedrückt: Alle externen Variablen, von denen die Funktion abhängt, sollten über Parameter an die Funktion übergeben werden.
Der neue Code lautet wie folgt:

(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');

Semantisierung und Wiederverwendung

Die Variablenzustände sind ein

Array und das beschriebene Verhalten ist schwer zu lesen , jedes Mal, wenn Sie es betrachten Wenn es um Zustände [0] geht, verspüre ich den Drang, den ursprünglichen Autor jede Minute zu töten, weil wir uns immer an den Wert der Variablen erinnern müssen Zustände Im Code sollten wir es so machen möglichst leicht lesbar.

Außerdem ist $text.html im obigen Code eine typische Codeduplikation. Bitte achten Sie diesmal auf die Codeposition von changeStateText(). Es wurde nicht in die obere Umgebung befördert (d. h. in die Umgebung des gesamten großen

Verschlusses ).

(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');

Wenn es um Semantik geht, müssen wir die Logik und Semantik des aktuellen gesamten Codes kennen:

In dieser gesamten Komponente können alle Funktionsmodule unterteilt werden in: Tools und Tools vorausgesetzt wer.

Die Umgebung der oberen Ebene (der gesamte große Abschluss) spielt in unserem Unternehmen die Rolle eines Tools. Ihre Aufgabe besteht darin, eine Reihe von Tools zu erstellen, die sich auf die Standortlogik beziehen, und zwar im Fenster[Namespace]). Funktion ist die Identität des Tool-Anbieters. Sie ist der einzige Zugang und dafür verantwortlich, den Tool-Benutzern das gesamte Geschäft der Komponente bereitzustellen.

Die $text.html() hier gehört logischerweise nicht zum Tool, sondern gehört zum Feedback, das der Tool-Anbieter nach der Verwendung des Tools erhält, daher wird die Funktion „changeStateText()“ im Tool-Provider-Fenster[Namespace] platziert. () .

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

到此为止，我们分离了函数，并让这个组件拥有了良好的语义。但这时候来了新的需求：当没有获取到位置的时候，需要进行一些其他的操作。这时候会发现，我们需要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];
})()；

Das obige ist der detaillierte Inhalt vonBeispiele, die Ihnen zeigen, wie Sie stabileren und lesbareren JavaScript-Code schreiben. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!