Bastien Donjon

Développeur web à Bordeaux

javascript Archive

Tuesday

6

September 2016

0

COMMENTS

Round number with Angular 2, pipe and Typescript

Written by , Posted in Javascript, typescript

// round.pipe.ts
import {Pipe, PipeTransform} from "@angular/core";

/**
 *
 */
@Pipe({name: 'round'})
export class RoundPipe implements PipeTransform {
    /**
     *
     * @param value
     * @returns {number}
     */
    transform(value: number): number {
        return Math.round(value);
    }
}
// app.module.ts
@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
        routing
    ],
    declarations: [
        AppComponent,
        RoundPipe
    ],
    providers: [
        BaseRequestOptions
    ],
    bootstrap: [AppComponent]
})
<!-- exemple -->
<span>{{ yournumber | round }}</span>

Builded with TypeScript 1.8 for Angular 2.RC5

Wednesday

14

January 2015

0

COMMENTS

[Javascript] For in extended Array prototype

Written by , Posted in Javascript

If you have extended Array prototype with functions like this :

Array.prototype.inArray = function(){
    console.log('inArray function');
}

The result of your ‘for’ will contain the properties and new functions.

var values = ['value1', 'value2'];
console.log(testArray);

// => ["value1", "value2", inArray: function]

for(var i in values){
    console.log(i + ' : ' + values[i]);
}

// =>
// 0 : value1
// 1 : value2
// inArray : function (){
//   console.log('inArray function');
// }

To fix this issue :

Case 1 with hasOwnProperty

for(var i in values){
    if (values.hasOwnProperty(i)) {
        console.log(i + ' : ' + values[i]);
    }
}

// =>
// 0 : value1
// 1 : value2

Case 2 with forEach

function logArrayElements(element, index, array) {
    console.log("a[" + index + "] = " + element);
}
values.forEach(logArrayElements);

// =>
// 0 : value1
// 1 : value2

Run on JsFiddle

Saturday

30

March 2013

0

COMMENTS

Gérer toutes les erreurs javascripts (Parse, ReferenceError et Exception)

Written by , Posted in Javascript

En production plusieurs cause peuvent entraîner l’arrêt ou le dysfonctionnement d’une application javascript. Avec l’augmentation des développements front end il est maintenant indispensable de savoir les éviter et les gérer pour une analyse ultérieur. Cet article traite de 3 niveaux de gestion à mettre en place.

1. Eviter les erreurs de syntaxe

C’est indéniablement l’erreur qui a la plus grave conséquence, l’arrêt total de l’application. Mais c’est aussi la plus simple à avoir si le code produit n’est pas rigoureusement testé.

Beaucoup d’IDE permettent d’éviter les erreurs grossières de syntaxe, mais nous ne somme jamais à l’abri d’un d’oubli… Ce n’est donc pas du luxe que d’analyser une dernière fois le code avant une mise en production. L’analyseur de code JSHINT permet de dresser un rapport sur l’état de votre code avant une éventuelle mise en production. Il ne s’arrête pas là puisqu’il vous fournira aussi un rapport contenant en autre les variables “undefined”, non utilisées, déclarées plusieurs fois …

2. Capturer les “exception”, les erreurs type ReferenceError ou toutes les erreurs provenant de librairies externes

En production, il peut être intéressant de garder un œil sur les erreurs qui peuvent être levées, qu’elles soit originaires de votre propre développement ou de librairies externes. Les navigateurs proposent l’événement window.onerror  levé à chaque erreurs javascript rencontrées. Il permet ainsi de détecter les exceptions, mais aussi les erreurs de référence ou toutes erreurs des librairies externes.

window.onerror = function(message, url, lineNumber) {
    console.info(message);
    console.info(url);
    console.info(lineNumber);
};

Attention au crossdomaine. Si cet évènement est levé par un script qui ne se trouve pas sur le même domaine/sous domaine alors le message sera “Script error.” et le code “0”. C’est une limitation volontaire des navigateurs pour une raison de sécurité.

Cette technique est donc le dernier filet avant de perdre la trace d’une erreur. Elle peut s’avérer peu précise pour les exceptions levées avec un objet. Limité aux paramètres “message”, “url”, “lineNumber”, les données contenues dans un object ne seront pas transmises par l’évènement. Pour une gestion plus poussées dans exceptions il faudra passer au point 3.

3 – Capturer les exceptions

Aucun autre moyen à ma connaissance existe pour capturer et traiter une exception. Il faudra passer pas un bloc try..catch général à votre application.

Couplé à une requête ajax, les 2 derniers points vous permettront de mettre en place un système de log de toutes les erreurs rencontrées coté client.