Najlepsze praktyki JavaScript zorientowane obiektowo? [Zamknięte]


251

Koduję duży projekt w Javascript. Pamiętam, że ostatnia była przygodą, ponieważ zuchwały JS może szybko stać się nieczytelny i chcę, aby ten kod był czysty.

Cóż, używam obiektów do tworzenia biblioteki, ale istnieje kilka sposobów definiowania rzeczy w JS, co sugeruje ważne konsekwencje w zakresie, zarządzaniu pamięcią, przestrzeni nazw itp. EG:

  • za pomocą varlub nie;
  • definiowanie elementów w pliku lub w (function(){...})()stylu jquery;
  • za pomocą thislub nie;
  • za pomocą function myname()lub myname = function();
  • definiowanie metod w ciele obiektu lub używanie „prototypu”;
  • itp.

Więc jakie są naprawdę najlepsze praktyki przy kodowaniu w OO w JS?

Wyjaśnienia akademickie naprawdę są tutaj oczekiwane. Link do książek jest mile widziany, o ile dotyczą one jakości i solidności.

EDYTOWAĆ :

Mam kilka odczytów, ale nadal bardzo interesują mnie odpowiedzi na powyższe pytania i wszelkie najlepsze praktyki.


2
Może tytuł „obiektowy” w tytule należy zastąpić słowem „nowoczesny”.
viam0Zah

43
Hmmm, 79 głosów pozytywnych, 82 ulubionych, 91 głosów pozytywnych na odpowiedź ... ale to zostało zamknięte jako mało konstruktywne ... dlaczego?
Brett Rossier

1
Napisałem prostą klasę przenoszącą funkcje C ++ OOP do javascript z prostą i naturalną składnią. Zobacz moją odpowiedź tutaj: stackoverflow.com/a/18239463/1115652

14
Ten typ pytania zawsze się zamyka. Rozumiem powody tego, ale ponieważ są to ważne pytania i zawsze popularne (a ponieważ zawsze znajduję je, gdy mam podobne pytanie), zastanawiam się, czy ktoś może skierować nas do właściwego miejsca, w którym je zadamy?
KP MacGregor

2
@BrettRossier Czym jest moc, jeśli jej nie władasz? SO jest demonstracją na żywo tego, jak działa demokratyczny porządek dziobania. Na pewno patrzą na to niektórzy psychologowie ...

Odpowiedzi:


288

Używanie `var` lub nie

Powinieneś wprowadzić dowolną zmienną z varinstrukcją, w przeciwnym razie dotrze ona do zasięgu globalnego.

Warto wspomnieć, że w trybie ścisłym ( "use strict";) zgłasza się niezadeklarowane przypisania zmiennychReferenceError .

Obecnie JavaScript nie ma zasięgu blokowego. Szkoła Crockford uczy, jak umieszczać instrukcje var na początku treści funkcji , a Przewodnik po stylach Dojo mówi, że wszystkie zmienne powinny być deklarowane w możliwie najmniejszym zakresie . ( letInstrukcja i definicja wprowadzona w JavaScript 1.7 nie jest częścią standardu ECMAScript).

Dobrą praktyką jest wiązanie właściwości regularnie używanych obiektów ze zmiennymi lokalnymi, ponieważ jest to szybsze niż przeglądanie całego łańcucha zasięgu. (Zobacz Optymalizacja JavaScript pod kątem ekstremalnej wydajności i niskiego zużycia pamięci ).

Definiowanie elementów w pliku lub w `(function () {...}) ()`

Jeśli nie musisz docierać do obiektów poza kodem, możesz owinąć cały kod wyrażeniem funkcyjnym - nazywa się to wzorcem modułu. Ma zalety wydajnościowe, a także pozwala na minimalizację i zaciemnienie kodu na wysokim poziomie. Możesz także upewnić się, że nie zanieczyści globalnej przestrzeni nazw. Funkcje zawijania w JavaScript pozwalają również dodawać zachowania zorientowane na aspekt. Ben Cherry ma szczegółowy artykuł na temat wzoru modułu .

Używanie „tego” lub nie

Jeśli używasz pseudoklasycznego dziedziczenia w JavaScript, nie możesz go uniknąć this. Wybór wzoru dziedziczenia zależy od gustu. W innych przypadkach zapoznaj się z artykułem Petera Michaux na temat widżetów JavaScript Bez „tego” .

Używanie `function myname ()` lub `myname = function ();`

function myname()jest deklaracją funkcji i myname = function();jest wyrażeniem funkcji przypisanym do zmiennej myname. Ta ostatnia forma wskazuje, że funkcje są pierwszorzędnymi obiektami i można z nimi zrobić wszystko, podobnie jak ze zmienną. Jedyna różnica między nimi polega na tym, że wszystkie deklaracje funkcji są podnoszone na szczyt zakresu, co może mieć znaczenie w niektórych przypadkach. W przeciwnym razie są równe. function foo()to forma skrócona. Więcej informacji na temat podnoszenia można znaleźć w artykule Scoping i podnoszenia w JavaScript .

Definiowanie metod w ciele obiektu lub używanie „prototypu”

To zależy od Ciebie. JavaScript ma cztery wzorce tworzenia obiektów: pseudoklasyczny, prototypowy, funkcjonalny i częściowy ( Crockford, 2008 ). Każdy ma swoje zalety i wady, zobacz Crockforda w swoich rozmowach wideo lub zdobądź książkę The Good Parts, jak już sugerował Anon .

Ramy

Sugeruję, abyś podniósł niektóre frameworki JavaScript, zapoznał się z ich konwencjami i stylem oraz znalazł te praktyki i wzorce, które najlepiej do Ciebie pasują. Na przykład Dojo Toolkit zapewnia solidną strukturę do pisania obiektowego kodu JavaScript, który obsługuje nawet wielokrotne dziedziczenie.

Wzory

Na koniec jest blog poświęcony badaniu typowych wzorców JavaScript i anty-wzorców . Sprawdź także pytanie Czy istnieją jakieś standardy kodowania dla JavaScript? w przepełnieniu stosu.


1
„JavaScript ma cztery wzorce tworzenia obiektów: pseudoklasyczny, prototypowy, funkcjonalny i częściowy” - naprawdę doceniłbym tutaj wady i zalety.
BadHorsie,

2
letOświadczenie i definicja wprowadzone w JavaScript 1.7 nie są częścią standardu ECMAScript.” Teraz jest częścią ES6.
Michał Perłakowski

13

Mam zamiar zapisać kilka rzeczy, które przeczytałem lub zastosowałem, odkąd zadałem to pytanie. Więc ludzie, którzy go czytają, nie będą sfrustrowani, ponieważ większość odpowiedzi to ukryte RTMF (nawet jeśli muszę przyznać, sugerowane książki są dobre).

Wykorzystanie Var

Każda zmienna powinna być już zadeklarowana w wyższym zakresie w JS. Kiedy więc chcesz nowej zmiennej, zadeklaruj ją, aby uniknąć złych niespodzianek, takich jak manipulowanie zmienną globalną bez jej zauważania. Dlatego zawsze używaj słowa kluczowego var.

W make obiektu var zmienna private. Jeśli chcesz tylko zadeklarować zmienną publiczną, użyj this.my_var = my_valuetego.

Deklarowanie metod

W JS są licznymi metodami deklarowania metod. Dla programisty OO najbardziej naturalnym, a jednocześnie wydajnym sposobem jest użycie następującej składni:

Wewnątrz obiektu

this.methodName = function(param) {

/* bla */

};

Istnieje wada: funkcje wewnętrzne nie będą miały dostępu do „tego” z powodu śmiesznego zakresu JS. Douglas Crockford zaleca ominięcie tego ograniczenia za pomocą konwencjonalnej zmiennej lokalnej o nazwie „to”. Tak się staje

function MyObject() {

    var that = this;

    this.myMethod = function() {

        jQuery.doSomethingCrazy(that.callbackMethod);

    };

};

Nie polegaj na automatycznym końcu linii

JS próbuje automatycznie dodać ;na końcu wiersza, jeśli go zapomnisz. Nie polegaj na tym zachowaniu, ponieważ dostaniesz błędy, które są bałaganem do debugowania.


8

Najpierw należy przeczytać o programowaniu opartym na prototypach, aby wiedzieć, z jaką bestią masz do czynienia, a następnie zapoznać się z przewodnikiem po stylu JavaScript na stronie MDC i stronie JavaScript w MDC . Uważam też, że najlepiej jest wymusić jakość kodu za pomocą narzędzia, tj. JavaScript Lint lub inne warianty.

Najlepsze praktyki z OO brzmią bardziej jak chcesz znaleźć wzorce niż koncentrować się na jakości kodu, więc spójrz na wyszukiwarkę Google: wzorce javascript i wzorce jQuery .



5

Często czuję się jak jedyny facet, który używa MooTools do mojego JavaScript.

Oznacza M y O bject O riented Tools, mootools.

Bardzo podoba mi się ich podejście do OOP w javascript. Możesz używać ich implementacji klas również z jquery, więc nie musisz porzucać jquery (chociaż mootools robi to wszystko równie dobrze).

W każdym razie, przeczytaj pierwszy link i przeczytaj, co myślisz, drugi link jest do dokumentów mootools.

MooTools & Inheritance

Klasy MooTools


Nie próbuję naginać języka, żeby pasował do ciebie stary nawyk, to dobra rzecz. To tak, jak ci ludzie w C, używając # do zamiany, sprawiają, że wygląda jak fortran, albo inaczej. Myślę, że powinieneś spróbować nauczyć się, jak działa język (i jego najlepszych praktyk), i używać go w taki sposób, aby nie przeszkadzał ci zbytnio. Ale nie zmieniaj go, naprawdę.
e-satis

2
Myślę, że system obiektowy MooTools jest dość elegancki i naprawdę pomaga mi w uporządkowaniu / zamknięciu kodu.
awesomo

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.