## Καθαρές συναρτήσεις 

Τα τελευταία χρόνια, με την αύξηση του λειτουργικού στυλ προγραμματισμού στη JavaScript, ήρθε η διαπίστωση ότι οι συναρτήσεις γενικά και ειδικά οι καθαρές συναρτήσεις είναι ευκολότερο να συλλογιστεί κανείς σε σχέση με το παράδειγμα του αντικειμενοστραφούς προγραμματισμού (OOP). 

Ως εκ τούτου, το γενικό λειτουργικό στυλ προγραμματισμού έχει γίνει όλο και πιο διαδεδομένο στην κοινότητα της JavaScript. Για παράδειγμα, το React προχώρησε σε στοιχεία συναρτήσεων από στοιχεία κλάσεων. Στον προγραμματισμό υπολογιστών, μια καθαρή συνάρτηση είναι μια συνάρτηση που επιστρέφει για πανομοιότυπες παραμέτρους πανομοιότυπη έξοδο. Επίσης, μια καθαρή συνάρτηση δεν έχει παρενέργειες όπως η μετάλλαξη των μεταβλητών ή τα μεταβλητά ορίσματα. 

Στο πλαίσιο του προγραμματισμού συναρτησιακού στυλ, οι καθαρές συναρτήσεις κατέχουν επομένως μια ξεχωριστή θέση. Από ορισμένους υποστηρικτές αποτελούν τον προτιμώμενο τρόπο προγραμματισμού στη JavaScript, αν είναι δυνατόν (βλέπε για παράδειγμα [Dmitri Pavlutin](https://dmitripavlutin.com/javascript-pure-function)). 

## Καθαρές συναρτήσεις στη JavaScript 

Η JavaScript όπως ορίζεται στις προδιαγραφές ECMAScript έρχεται με έναν μεγάλο αριθμό προκαθορισμένων αντικειμένων και συναρτήσεων. Πολλές από τις συναρτήσεις δεν είναι καθαρές, αλλά ένας αριθμός από αυτές είναι καθαρές συναρτήσεις που μπορούμε να χρησιμοποιήσουμε κατά προτίμηση. Αυτές είναι οι καθαρές συναρτήσεις που είναι διαθέσιμες στη JavaScript από προεπιλογή (μη εξαντλητική λίστα): 

### Γενικά 

- **parseInt():** 
 
Αναλύει το όρισμα string και επιστρέφει έναν ακέραιο.

```javascript
console.log(parseInt('123456'));
// 123456
```

- **parseFloat():** 

Αναλύει μια συμβολοσειρά και επιστρέφει έναν αριθμό κινητής υποδιαστολής. 

```javascript
console.log(parseFloat("3.14"));
// 3.14
```

### String 

- **String.slice():** 

Η συνάρτηση αυτή εξάγει ένα τμήμα μιας συμβολοσειράς και επιστρέφει μια νέα συμβολοσειρά. 

```javascript
const str = 'The quick brown fox jumps over the lazy dog.';

console.log(str.slice(4, 19));
// "quick brown fox"
```

- **String.trim():** 

Η συνάρτηση αυτή αφαιρεί τα κενά από τα δύο άκρα της συμβολοσειράς και επιστρέφει μια νέα συμβολοσειρά, χωρίς να τροποποιεί την αρχική συμβολοσειρά. 

```javascript
const greeting = "   Hello developers!   ";

console.log(greeting.trim());
// Expected output: "Hello developers!";
```

- **String.toUpperCase(), String.toLowerCase():** 

Η συνάρτηση επιστρέφει τη συμβολοσειρά που έχει μετατραπεί σε κεφαλαία ή πεζά γράμματα. 

```javascript
const sentence = 'Hello developers!';

console.log(sentence.toUpperCase());
// Expected output: "HELLO DEVELOPERS!"
```

- **String.substring():** 
 
Αυτή η συνάρτηση επιστρέφει το τμήμα αυτής της συμβολοσειράς από τον δείκτη έναρξης μέχρι και τον δείκτη τέλους, ή μέχρι το τέλος της συμβολοσειράς αν δεν παρέχεται δείκτης τέλους. 

```javascript
const str = 'Ríoverse';

console.log(str.substring(1, 3));
// Expected output: "ío"

console.log(str.substring(2));
// Expected output: "overse"
```

- **String.charAt():** 

Αυτή η μέθοδος επιστρέφει μια νέα συμβολοσειρά που αποτελείται από τη μοναδική μονάδα κώδικα UTF-16 στο δεδομένο δείκτη. 

```javascript
const sentence = 'I like learning languages with Ríoverse.';

const index = 2;

console.log(`The character at index ${index} is ${sentence.charAt(index)}`);
// Expected output: "The character at index 2 is l"
```

- **String.replace():** 

Αυτή η μέθοδος επιστρέφει ένα νέο αλφαριθμητικό με ένα, μερικά ή όλα τα ταίριασμα ενός προτύπου που έχει αντικατασταθεί από μια αντικατάσταση. 

```javascript
const paragraph = "I think Tania's cat is cuter than your cat!";

console.log(paragraph.replace("Tania's", 'my'));
// Expected output: "I think my cat is cuter than your cat!"
```

### Math 

- **Math.sqrt():** 

Αυτή η μέθοδος επιστρέφει την τετραγωνική ρίζα ενός αριθμού. 

```javascript
console.log(Math.sqrt(16));
// Expected output: 4
```

Υπάρχουν πολλές άλλες συναρτήσεις Math που είναι καθαρές συναρτήσεις. Θα το αφήσω σε μια σελίδα όπως το MDN να τις απαριθμήσει όλες. 

### Array 

Αυτές οι συναρτήσεις array δεν τροποποιούν τον αρχικό πίνακα, αλλά επιστρέφουν έναν νέο πίνακα ή μια τιμή με βάση τον πίνακα εισόδου. 

- **Array.concat():** 

Αυτή η συνάρτηση χρησιμοποιείται για τη συγχώνευση δύο ή περισσότερων πινάκων. Αυτή η μέθοδος δεν αλλάζει τους υπάρχοντες πίνακες, αλλά αντίθετα επιστρέφει έναν νέο πίνακα. 

```javascript
const array1 = ['α', 'β', 'γ'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2);

console.log(array3);
// Expected output: Array ["α", "β", "γ", "d", "e", "f"]
```

- **Array.map():** Αυτή η συνάρτηση δημιουργεί έναν νέο πίνακα που γεμίζει με τα αποτελέσματα της κλήσης μιας παρεχόμενης συνάρτησης σε κάθε στοιχείο του πίνακα κλήσης. 
 
```javascript
const array1 = [1, 4, 9, 16];

// Pass a function to map
const map1 = array1.map((x) => x * 2);

console.log(map1);
// Expected output: Array [2, 8, 18, 32]
```

- **Array.reduce():** 

Αυτή η μέθοδος των περιπτώσεων Array εκτελεί μια συνάρτηση επανάκλησης "reducer" που παρέχει ο χρήστης σε κάθε στοιχείο του πίνακα, με τη σειρά, περνώντας την τιμή επιστροφής από τον υπολογισμό στο προηγούμενο στοιχείο. Το τελικό αποτέλεσμα της εκτέλεσης του reducer σε όλα τα στοιχεία του πίνακα είναι μια ενιαία τιμή. 

```javascript
const array1 = [1, 2, 3, 4, 5];

// 0 + 1 + 2 + 3 + 4 + 5
const initialValue = 0;
const sumWithInitial = array1.reduce(
  (accumulator, currentValue) => accumulator + currentValue,
  initialValue,
);

console.log(sumWithInitial);
// Expected output: 15
```

- **Array.every():** 
 
Αυτή η μέθοδος ελέγχει αν όλα τα στοιχεία του πίνακα περνούν τον έλεγχο που υλοποιείται από την παρεχόμενη συνάρτηση. Επιστρέφει μια τιμή Boolean. 

```javascript
const isBelowThreshold = (currentValue) => currentValue < 50;

const array1 = [1, 30, 39, 29, 10, 13, 48];

console.log(array1.every(isBelowThreshold));
// Expected output: true
```

- **Array.some():** 

Αυτή η μέθοδος ελέγχει αν τουλάχιστον ένα στοιχείο του πίνακα περνάει το τεστ που υλοποιείται από την παρεχόμενη συνάρτηση. Επιστρέφει true αν, στον πίνακα, βρει ένα στοιχείο για το οποίο η παρεχόμενη συνάρτηση επιστρέφει true- διαφορετικά επιστρέφει false. Δεν τροποποιεί τον πίνακα. 

```javascript
const array = [1, 2, 3, 4, 5];

// Checks whether an element is even
const even = (element) => element % 2 === 0;

console.log(array.some(even));
// Expected output: true
```

- **Array.slice():** 
 
Η μέθοδος επιστρέφει ένα ρηχό αντίγραφο ενός τμήματος ενός πίνακα σε ένα νέο αντικείμενο πίνακα που επιλέγεται από την αρχή έως το τέλος (το τέλος δεν περιλαμβάνεται), όπου η αρχή και το τέλος αντιπροσωπεύουν το δείκτη των στοιχείων του εν λόγω πίνακα. Ο αρχικός πίνακας δεν θα τροποποιηθεί. 

```javascript
const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];

console.log(animals.slice(2));
// Expected output: Array ["camel", "duck", "elephant"]

console.log(animals.slice(2, 4));
// Expected output: Array ["camel", "duck"]
```

Προσοχή, υπάρχει μια παρόμοια μη καθαρή συνάρτηση που ονομάζεται Array.splice(). 

- **Array.toReversed():** 
 
Αυτή η μέθοδος είναι το αντίστοιχο αντίγραφο της μεθόδου reverse(). Επιστρέφει έναν νέο πίνακα με τα στοιχεία σε αντίστροφη σειρά. 

```javascript
const items = [1, 2, 3];
console.log(items); // [1, 2, 3]

const reversedItems = items.toReversed();
console.log(reversedItems); // [3, 2, 1]
console.log(items); // [1, 2, 3]
```

Σημειώστε ότι η Array.reverse() μέθοδος είναι το μη καθαρό αντίστοιχο της Array.toReversed(). 

### Object 

- **Object.keys():** 

Αυτή η μέθοδος επιστρέφει έναν πίνακα από τα ίδια τα απαριθμήσιμα ονόματα ιδιοτήτων ενός συγκεκριμένου αντικειμένου με συμβολοσειρά-κλειδιά. 

```javascript
const object1 = {
  a: 'astring',
  b: 42,
  c: false,
};

console.log(Object.keys(object1));
// Expected output: Array ["a", "b", "c"]
```

## Συμπέρασμα 

Αν προτιμάτε το στυλ προγραμματισμού με συναρτήσεις στη JavaScript, είμαι σίγουρος ότι αυτές οι καθαρές συναρτήσεις θα σας φανούν χρήσιμες στα έργα σας. Μειώνουν την πολυπλοκότητα και σας επιτρέπουν να αιτιολογείτε τον κώδικά σας πιο εύκολα. Έτσι, αυτό βοηθά στη μείωση των σφαλμάτων. Αν έχετε άλλα παραδείγματα καθαρών συναρτήσεων που θα θέλατε να αναφερθούν, ενημερώστε με και κάντε κλικ στο κουμπί επικοινωνίας παρακάτω. 

## Αναφορές 

- MDN: [https://developer.mozilla.org/en-US](https://developer.mozilla.org/en-US) 
- Blog by Dmitri Pavlutin: [https://dmitripavlutin.com/javascript-pure-function](https://dmitripavlutin.com/javascript-pure-function) 
 
Cover Image: Photo by <a href="https://unsplash.com/@jim_ahlberg?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">James Ahlberg</a> on <a href="https://unsplash.com/photos/c-JzfmmDszTrw?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Unsplash</a>

large_james-ahlberg-JzfmmDszTrw-unsplash.jpg

medium_james-ahlberg-JzfmmDszTrw-unsplash.jpg

small_james-ahlberg-JzfmmDszTrw-unsplash.jpg

thumbnail_james-ahlberg-JzfmmDszTrw-unsplash.jpg

Το λειτουργικό στυλ προγραμματισμού στη JavaScript έχει γίνει πιο δημοφιλές τα τελευταία χρόνια. Ως εκ τούτου, είναι σημαντικό να γνωρίζετε παραδείγματα καθαρών συναρτήσεων που είναι διαθέσιμα σε όλους τους προγραμματιστές JavaScript. Είναι ο προτιμώμενος τρόπος χρήσης του λειτουργικού προγραμματισμού στη JavaScript.

Κατάλογος καθαρών συναρτήσεων στη JavaScript

Σε αυτό το άρθρο θα ήθελα να σας παρουσιάσω την ιστοσελίδα της βάσης δεδομένων SpiceNice. Πρόκειται για μια βάση δεδομένων ανοιχτού κώδικα για τα μαγειρικά μπαχαρικά. Εκτός από πολύτιμες πληροφορίες για τα μπαχαρικά μπορείτε επίσης να διαβάσετε για τα αντίστοιχα φυτά. Μια ενότητα με δωρεάν βιβλιογραφία για τα μπαχαρικά ολοκληρώνει την ιστοσελίδα.

## Τι είναι το SpiceNice 

![Ιστοσελίδα SpiceNice](https://res.cloudinary.com/dxxtt2clx/image/upload/v1733597813/Screenshot_2024_12_07_at_19_56_14_532af4235a.png) 

Το [SpiceNice](https://spicenice.pages.dev) είναι μια βάση δεδομένων για τα μαγειρικά μπαχαρικά. Περιέχει πληροφορίες για το ίδιο το μπαχαρικό καθώς και για το αντίστοιχο φυτό. Η ιδέα είναι να έχετε δομημένα δεδομένα για τα μαγειρικά μπαχαρικά και τα φυτά τους. Αυτό επιτρέπει σε ανθρώπους που ενδιαφέρονται για τα μπαχαρικά, όπως μάγειρες, βιολόγους, αγρότες και το ευρύ κοινό να ενημερωθούν. 

Επιπλέον, υπάρχει ένα μικρό τμήμα με δωρεάν βιβλιογραφία για τα μπαχαρικά. Στην έκδοση της βάσης δεδομένων SpiceNice στον ιστότοπο μπορείτε να επιλέξετε το μπαχαρικό που σας ενδιαφέρει. Στη συνέχεια, θα έχετε μια πιο λεπτομερή επισκόπηση του μπαχαρικού με πληροφορίες όπως η βοτανική ονομασία, η μαγειρική του μορφή και η χώρα προέλευσης. Επιπλέον, περιλαμβάνονται πληροφορίες για το φυτό, με επεξήγηση της βοτανικής του φυτού και της καλλιέργειας. 

## Προέλευση των δεδομένων 

Τα δεδομένα αντλήθηκαν από την αγγλική έκδοση της Wikipedia. 

## Τεχνική Αρχιτεκτονική 

![Αρχιτεκτονική SpiceNice](https://res.cloudinary.com/dxxtt2clx/image/upload/v1733596683/Architecture_Spice_Nice_39740c00b4.png) 

Το backend του SpiceNice αποτελείται από το σύστημα διαχείρισης περιεχομένου (CMS) ανοιχτού κώδικα [Strapi](https://strapi.io), συνδεδεμένο με μια βάση δεδομένων PostgreSQL. Το Astro χρησιμοποιείται ως το frontend framework που παράγει τον στατικό δικτυακό τόπο του SpiceNice. 

## Μελλοντική κατεύθυνση 

Το όραμα για το SpiceNice είναι να γίνει μια ολοκληρωμένη εξειδικευμένη βάση δεδομένων για τα μαγειρικά μπαχαρικά. Θα μπορούσε επίσης να παρέχει ένα διαδικτυακό API για την αναζήτηση των δεδομένων με δεσμεύσεις για διάφορες γλώσσες προγραμματισμού. 
Επίσης, ο στόχος είναι να δημιουργηθεί μια κοινότητα ομοϊδεατών που ενδιαφέρονται για τον κόσμο των μαγειρικών μπαχαρικών. Θα μπορούσαν να συνεργάζονται και να επικοινωνούν μέσω της πλατφόρμας SpiceNice. 

Η μετάφραση του περιεχομένου της βάσης δεδομένων σε διάφορες γλώσσες θα ήταν ένας άλλος στόχος. Η προσέγγιση καταναλωτών και παραγωγών προϊόντων μπαχαρικών θα ήταν επίσης πολύτιμη. 

## Συμπέρασμα 

Με αυτό ολοκληρώνεται αυτή η επισκόπηση του προϊόντος ανοικτού κώδικα SpiceNice. Εάν ενδιαφέρεστε, θέλετε να συνεργαστείτε ή να δώσετε ανατροφοδότηση, μη διστάσετε να επικοινωνήσετε μαζί μου μέσω του παρακάτω κουμπιού. 

## Παραπομπές 

Ιστοσελίδα SpiceNice: [https://spicenice.pages.dev](https://spicenice.pages.dev) 

Strapi CMS: [https://strapi.io](https://strapi.io) 

Cover Photo by <a href="https://pixabay.com/users/tarasyasinski-13623164/?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=9061583">Taras Yasinski</a> from <a href="https://pixabay.com//?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=9061583">Pixabay</a>

large_ai-generated-9061583_1280.png

medium_ai-generated-9061583_1280.png

small_ai-generated-9061583_1280.png

thumbnail_ai-generated-9061583_1280.png

Σε αυτό το άρθρο θα ήθελα να σας παρουσιάσω την ιστοσελίδα της βάσης δεδομένων SpiceNice. Πρόκειται για μια βάση δεδομένων ανοιχτού κώδικα για τα μαγειρικά μπαχαρικά. Εκτός από πολύτιμες πληροφορίες για τα μπαχαρικά μπορείτε επίσης να διαβάσετε για τα αντίστοιχα φυτά. Μια ενότητα με δωρεάν βιβλιογραφία για τα μπαχαρικά ολοκληρώνει την ιστοσελίδα.

SpiceNice - Μια βάση δεδομένων μπαχαρικών ανοιχτού κώδικα

Με το WebAssembly μπορείτε να ενσωματώσετε διαφορετικές γλώσσες προγραμματισμού μαζί. Αυτό ανοίγει νέες δυνατότητες για τη χρήση σπουδαίων βιβλιοθηκών γραμμένων σε μια γλώσσα σε μια άλλη διαφορετική πλατφόρμα. Σε αυτό το άρθρο θέλω να σας δείξω πώς να ενσωματώσετε μια βιβλιοθήκη Go για τη συμβολοποίηση προτάσεων σε μια ιστοσελίδα JavaScript. Κανονικά, δεν μπορείτε να εκτελέσετε κώδικα Go σε ένα πρόγραμμα περιήγησης ιστού, αλλά με την τεχνολογία WebAssembly μπορείτε. 

## Το WebAssembly 

[WebAssembly](https://github.com/WebAssembly/spec) είναι μια προδιαγραφή του W3C που ορίζει μια δυαδική μορφή και μορφή κειμένου για εκτελέσιμα προγράμματα που μπορούν να τρέξουν στο πρόγραμμα περιήγησης αλλά και αυτόνομα.  Τα προγράμματα WebAssembly εκτελούνται σε μια εικονική μηχανή (VM) βασισμένη σε στοίβα. Παίρνοντας το όνομά του από τη γλώσσα προγραμματισμού Assembly, η οποία είναι πολύ κοντά στο πραγματικό υλικό, το WebAssembly ορίζει μια γλώσσα πιο ανεξάρτητη από τη συσκευή από ό,τι η Assembly, αλλά εξακολουθεί να είναι πολύ χαμηλού επιπέδου. Κατά τη στιγμή της συγγραφής αυτού του άρθρου, το WebAssembly υποστηρίζεται από το 97,11 % όλων των παγκόσμιων προγραμμάτων περιήγησης (caniuse.com). Υπάρχουν διάφορες επεκτάσεις στην προδιαγραφή WebAssembly του W3C, οι οποίες έχουν διαφορετικά επίπεδα υποστήριξης μεταξύ των φυλλομετρητών. 

## Sentences Go Library 

[Sentences](https://github.com/neurosnap/sentences) είναι μια βιβλιοθήκη Go για τη συμβολαιοποίηση προτάσεων που γράφτηκε από τον Eric Bower και δημοσιεύτηκε ως ανοιχτός κώδικας στο GitHub. Δεδομένου ότι δεν μπορείτε να εκτελέσετε κώδικα Go στο πρόγραμμα περιήγησης εγγενώς, παρά μόνο JavaScript, υπάρχει η ιδέα της χρήσης του WebAssembly για την ενσωμάτωση της βιβλιοθήκης σε έναν ιστότοπο. 

## Έκθεση της βιβλιοθήκης Sentences σε JavaScript 

Μπορείτε να ενσωματώσετε τη βιβλιοθήκη sentences γράφοντας μια εφαρμογή περιτύλιξης Go που αξιοποιεί το πακέτο [syscall/js της Go](https://pkg.go.dev/syscall/js). Αποτελεί μέρος της τυπικής βιβλιοθήκης της Go. Σημειώστε, ότι κατά τη στιγμή της συγγραφής αυτού του άρθρου, το πακέτο αυτό είναι χαρακτηρισμένο ως "πειραματικό". Συγκεκριμένα, θα χρησιμοποιήσουμε τη συνάρτηση `js.FuncOf`. Ακολουθεί ο πλήρης πηγαίος κώδικας της εφαρμογής Go: 

```Go 
package main

import (
	"fmt"
	"strings"
	"syscall/js"

	"github.com/neurosnap/sentences/english"
)

func sentenceWrapper() js.Func {
	sentenceFunc := js.FuncOf(func(this js.Value, args []js.Value) any {
		if len(args) != 1 {
			return "Invalid no of arguments passed"
		}
		inputSentence := args[0].String()
		fmt.Printf("input %s\n", inputSentence)
		tokenizer, err := english.NewSentenceTokenizer(nil)
		if err != nil {
			panic(err)
		}

		sentences := tokenizer.Tokenize(inputSentence)
		for _, s := range sentences {
			fmt.Println(s.Text)
		}

		var sentenceTexts []string
		for _, s := range sentences {
			trimmedText := strings.TrimSpace(s.Text)
			sentenceTexts = append(sentenceTexts, trimmedText)
		}

		allSentences := strings.Join(sentenceTexts, "\n") // Join all sentences separated by a space
		return allSentences

	})
	return sentenceFunc
}

func main() {
	fmt.Println("Go Web Assembly")
	js.Global().Set("tokenizeSentence", sentenceWrapper())
	<-make(chan struct{})
}
``` 


Βλέπετε ότι τώρα η συνάρτηση `sentenceWrapper` εκτίθεται ως η συνάρτηση `tokenizeSentence` στην JavaScript. Αναμένει ως όρισμα ένα αλφαριθμητικό για tokenize και επιστρέφει το tokenized αλφαριθμητικό. Η πραγματική ενσωμάτωση με τη βιβλιοθήκη sentences γίνεται μέσα στη συνάρτηση που περνάει στη `js.FuncOf`. 

## Μεταγλώττιση Wrapper 

Μεταγλωττίζετε την εφαρμογή σε WebAssembly χρησιμοποιώντας την ακόλουθη εντολή κατασκευής Go: 

```bash 
GOOS=js GOARCH=wasm go build -o main.wasm 
``` 

Αν όλα πήγαν καλά, θα πρέπει να βρείτε το αρχείο `main.wasm` ως έξοδο στο φάκελό σας. Αυτό είναι το δυαδικό αρχείο WebAssembly που θα φορτωθεί στην εφαρμογή JavaScript. 

## Ενσωμάτωση της βιβλιοθήκης WebAssembly Go στην ιστοσελίδα 

Για να φορτώσετε το αρχείο `main.wasm` στην ιστοσελίδα, χρειάζεστε τον ακόλουθο κώδικα: 

```html 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <script src="wasm_exec.js"></script>
    <script>
      const go = new Go();
      WebAssembly.instantiateStreaming(
        fetch("./main.wasm"),
        go.importObject
      ).then((result) => {
        go.run(result.instance);
      });
    </script>
  </head>
  <body>
    <textarea id="sentenceinput" name="jsoninput" cols="80" rows="20"></textarea>
    <input
      id="button"
      type="submit"
      name="button"
      value="tokenize"
      onclick="tokenize(sentenceinput.value)"
    />
    <textarea id="jsonoutput" name="jsonoutput" cols="80" rows="20"></textarea>
  </body>
  <script>
    var tokenize = function (input) {
      jsonoutput.value = tokenizeSentence(input);
    };
  </script>
</html>
```

Κατά την εκτέλεση αυτής της ιστοσελίδας στο πρόγραμμα περιήγησης, χρειάζεστε επίσης το βοηθητικό αρχείο JavaScript `wasm_exec.js` στον τρέχοντα κατάλογο. Μπορείτε να πάρετε το αρχείο από τη διεύθυνση: 

```bash 
cp "$(go env GOROOT)/misc/wasm/wasm_exec.js" .
``` 

Όπως μπορείτε να δείτε από τον κώδικα JavaScript, η εκτεθειμένη συνάρτηση `tokenizeSentence()` καλείται από τη JavaScript όταν κάνετε κλικ στο κουμπί "tokenize". Τα περιεχόμενα του πεδίου εισαγωγής χρησιμοποιούνται ως όρισμα στη συνάρτηση και η τιμή επιστροφής γράφεται στη συνέχεια στο πεδίο κειμένου στα δεξιά. Σημειώστε ότι πρέπει να εκτελέσετε έναν διακομιστή ιστού για να εκτελέσετε την ιστοσελίδα στο πρόγραμμα περιήγησης. Μπορείτε να χρησιμοποιήσετε αυτόν τον κώδικα για να δημιουργήσετε έναν διακομιστή ιστού σε Go: server/server.go 

```go 
package main

import (
	"fmt"
	"net/http"
)

func main() {
	err := http.ListenAndServe(":9090", http.FileServer(http.Dir("../")))
	if err != nil {
		fmt.Println("Failed to start server", err)
		return
	}
}
``` 

Μετά την εκκίνηση του διακομιστή ιστού, μπορείτε να έχετε πρόσβαση στη σελίδα στο πρόγραμμα περιήγησής σας στη διεύθυνση: `http://localhost:9090`. Ευχαριστώ τον Naveen Ramanathan από το [golangbot.com](https://golangbot.com/webassembly-using-go/) για την έμπνευσή του σε αυτό το άρθρο. 

## Συμπέρασμα 

Όπως πάντα, ελπίζω αυτό το άρθρο να σας βοήθησε με κάποιο τρόπο να παραμείνετε περίεργοι. Το WebAssembly είναι μια τεχνολογία που έχει μεγάλες δυνατότητες να ενσωματώσει τα πολλά διαφορετικά γλωσσικά οικοσυστήματα μεταξύ τους. 

## Αναφορές 

- WebAssembly.org: [https://webassembly.org](https://webassembly.org) 
- WebAssembly specification: [https://github.com/WebAssembly/spec](https://github.com/WebAssembly/spec) 
- Go sentences library: [https://github.com/neurosnap/sentences](https://github.com/neurosnap/sentences) 
- Syscall/js package: [https://pkg.go.dev/syscall/js](https://pkg.go.dev/syscall/js) 
- Golangbot Webassembly using Go: [https://golangbot.com/webassembly-using-go](https://golangbot.com/webassembly-using-go) 
 
Photo by <a href="https://unsplash.com/@ventiviews?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Venti Views</a> on <a href="https://unsplash.com/photos/aerial-view-of-city-buildings-during-daytime-KElJx4R4Py8?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Unsplash</a>

large_venti-views-KElJx4R4Py8-unsplash.jpg

medium_venti-views-KElJx4R4Py8-unsplash.jpg

small_venti-views-KElJx4R4Py8-unsplash.jpg

thumbnail_venti-views-KElJx4R4Py8-unsplash.jpg

Με το WebAssembly μπορείτε να ενσωματώσετε διαφορετικές γλώσσες προγραμματισμού μαζί. Αυτό ανοίγει νέες δυνατότητες για τη χρήση σπουδαίων βιβλιοθηκών γραμμένων σε μια γλώσσα σε μια άλλη διαφορετική πλατφόρμα. Σε αυτό το άρθρο θέλω να σας δείξω πώς να ενσωματώσετε μια βιβλιοθήκη Go για τη συμβολοποίηση προτάσεων σε μια ιστοσελίδα JavaScript. Κανονικά, δεν μπορείτε να εκτελέσετε κώδικα Go σε ένα πρόγραμμα περιήγησης ιστού, αλλά με την τεχνολογία WebAssembly μπορείτε. 

Ενσωμάτωση της βιβλιοθήκης Go σε μια ιστοσελίδα JavaScript με το WebAssembly

Παρακαλούμε εισάγετε μια έγκυρη διεύθυνση ηλεκτρονικού ταχυδρομείου.

Ευχαρίστως να απαντήσω σε οποιεσδήποτε ερωτήσεις μπορεί να έχετε. Ή απλά να σας πω ένα γεια!

Σκέψεις του Thomas Derflinger

Web Κατηγορία

Κατάλογος καθαρών συναρτήσεων στη JavaScript

SpiceNice - Μια βάση δεδομένων μπαχαρικών ανοιχτού κώδικα

Ενσωμάτωση της βιβλιοθήκης Go σε μια ιστοσελίδα JavaScript με το WebAssembly