JavaScript devient de plus en plus populaire. Il est devenu le premier choix pour le développement frontal. Avec NodeJS basé sur la langue JavaScript, nous pouvons également développer des services back-end hautes performances. J'ai même vu JavaScript apparaître dans le domaine de la programmation matérielle. JavaScript évolue progressivement en un langage de développement complet.
Mais il n'est pas facile d'utiliser bien JavaScript. En plus de maîtriser sa syntaxe et de savoir comment écrire du code de haute qualité, vous devez également comprendre comment résoudre les scénarios de besoins qui seront rencontrés dans presque tous les projets, tels que: juger des dates, mettant en évidence le texte, limitant le nombre de caractères, etc. gonflé et affectera également les performances du système. Mon approche consiste à collecter et à utiliser ces extraits javascript communs et à les utiliser d'abord chaque fois que cela est nécessaire. Vous trouverez ci-dessous 10 pièces de code JavaScript pratique que j'ai collecté. Sur la base d'eux, vous pouvez également créer des plug-ins JS ou des fonctions fonctionnelles plus puissantes.
1. Déterminez si la date est valide
La fonction de date incluse dans JavaScript est encore trop simple, et il est difficile de répondre aux besoins de l'analyse et de jugement de différents formats de date dans des projets réels. JQuery a également des bibliothèques tierces pour faciliter le traitement lié à la date, mais parfois vous pouvez simplement avoir besoin d'une fonction très simple sans introduire une énorme bibliothèque tierce. Pour le moment, vous pouvez utiliser le code de vérification de date suivant, qui vous permet de personnaliser le format de date et de vérifier la validité de la date.
fonction isValidDate (valeur, userFormat) {// Définissez le format par défaut si le format n'est pas fourni userFormat = userFormat || «mm / dd / yyyy»; // Trouvez un délimiteur personnalisé en excluant // les caractères de mois, de jour et d'année var délimiter = / ■^mdy // Créez un tableau avec mois, jour et année // nous connaissons donc l'ordre du format par index var theformat = userFormat.split (Delimiter); // Créer un tableau à partir de la date utilisateur var theDate = value.split (Delimiter); fonction isdate (date, format) {var m, d, y, i = 0, len = format.length, f; pour (i; i <len; i ++) {f = format [i]; if (/m/.test(f)) m = date [i]; if (/d/.test(f)) d = date [i]; if (/y/.test(f)) y = date [i]; } return (m> 0 && m <13 && y && y.length === 4 && d> 0 && // Vérifiez si c'est un jour valide du mois d <= (nouvelle date (y, m, 0)). getDate ()); } return isdate (thedate, theformat);}Comment utiliser:
L'appel suivant revient faux car il n'y a pas de 31 jours en novembre
IsvalidDate ('DD-MM-YYYY', '31 / 11/2012 ')
2. Obtenez la largeur ou la hauteur maximale d'un ensemble d'éléments
La fonction suivante est très utile pour les développeurs qui ont besoin d'effectuer une disposition dynamique.
var getMaxHeight = fonction ($ elms) {var maxHeight = 0; $ elms.each (function () {// Dans certains cas, vous voudrez peut-être utiliser outerHeight () à la place var hauteur = $ (this) .height (); if (height> maxHeight) {maxHeight = height;}}); return maxheight;};Comment utiliser:
$ (éléments) .Height (getMaxHeight ($ (elements)));
3. Mettez en surbrillance le texte
Il existe de nombreuses bibliothèques tierces de jQuery qui peuvent implémenter la fonction de mise en évidence du texte, mais je préfère utiliser le petit morceau de code JavaScript suivant pour implémenter cette fonction. Il est très court et peut être modifié de manière flexible en fonction de mes besoins, et vous pouvez définir le style de mise en évidence vous-même. Les deux fonctions suivantes peuvent vous aider à créer votre propre plugin de mise en évidence de texte.
Fonction Highlight (texte, mots, balise) {// Tag par défaut Si aucune balise n'est fournie tag = tag || 'portée'; var i, len = words.length, re; pour (i = 0; i <len; i ++) {// Global Regex pour mettre en surbrillance toutes les correspondances re = new regexp (mots [i], 'g'); if (re.Test (text)) {text = text.replace (re, '<' + tag + '> $ & </' + tag + '>'); }} Retour Texte;}Vous aurez également besoin de défoncer les fonctions:
Fonction Halghlight (texte, balise) {// Tag de défaut Si aucune balise n'est fournie tag = tag || 'portée'; var re = new regexp ('(<' + tag + '. +?> | <//' + tag + '>)', 'g'); return text.replace (re, '');}Comment utiliser:
$ ('p'). html (highlight ($ ('p'). html (), // le texte ['foo', 'bar', 'baz', 'Hello world'], // liste de mots ou de phrases pour mettre en évidence 'Strong' // tag personnalisé));4. Effet de mouvement texte
Parfois, vous voulez ajouter un mouvement à un paragraphe de votre texte afin que chaque mot puisse bouger. Vous pouvez utiliser le code plug-in jQuery suivant pour réaliser cet effet. Bien sûr, vous devez combiner un style de transition CSS3 pour obtenir de meilleurs résultats.
$ .fn.animateText = function (retard, klass) {var text = this.text (); var lettres = text.split (''); return this.each (function () {var $ this = $ (this); $ this.html (text.replace (/./ g, '<span> $ & </span>')); $ this.find ('span.letter'). chaque (fonction (i, el) {setTimeout (function () {$ (el) .addclass (klass);}, ralles; });Comment utiliser:
$ ('p'). AnimateText (15, 'foo');
5. Masquer les éléments un par un
Le plug-in jQuery suivant peut masquer un groupe d'éléments un par un selon la longueur de pas (temps d'intervalle) que vous définissez. Utilisé dans le rechargement des éléments de liste peut obtenir de bons résultats.
dollars. var $ el = this; pour (var i = 0, d = 0, l = $ el.length; i <l; i ++, d + = o.delay) {$ el.eq (i) .delay (d) .fadein (o.speed, o.ease); } retourne $ el;}Comment utiliser:
$ (elements) .fadeall ({retard: 300, vitesse: 300});
6. Limiter le nombre de mots dans le texte
Le script ci-dessous vous permet d'intercepter le texte en fonction de la longueur de caractère donnée. Si le texte est intercepté, il sera automatiquement suivi d'une ellipse.
Function Exterpt (str, nwords) {var words = str.split (''); words.splice (nwords, word.length-1); return words.join ('') + (words.length! == Str.split ('') .length? '…': '');}7. Déterminer l'adaptabilité actuelle dans la disposition correspondante
De nombreux conceptions ont adopté des dispositions réactives pour s'adapter à l'affichage du site Web ou de l'application sur différents appareils. Vous devez souvent déterminer l'adaptation d'écran dans laquelle vous vous trouvez actuellement dans le code.
fonction isbreakpoint (bp) {// les points d'arrêt que vous définissez dans votre css var bps = [320, 480, 768, 1024]; var w = $ (fenêtre) .Width (); var min, max; for (var i = 0, l = bps.length; i <l; i ++) {if (bps [i] === bp) {min = bps [i-1] || 0; max = bps [i]; casser; }} return w> min && w <= max;}Comment utiliser:
if (isbreakpoint (320)) {// BreakPoint à 320 ou moins} if (isbreakpoint (480)) {// Breakpoint entre 320 et 480}…8. Compte mondial
Dans certains scénarios de jeu ou de publicité, vous devez enregistrer le nombre de fois que l'utilisateur clique sur un bouton sur la page actuelle. Pour le moment, vous pouvez utiliser la fonction .Data () de jQuery pour le gérer:
$ (élément) .data ('counter', 0) // commencer le compteur à zero .click (function () {var compter = $ (this) .data ('counter'); // get $ (this) .data ('compter', compteur + 1); // set // faire autre chose ...});9. Intégrer la vidéo Youku
fonction embedyouku (lien, ops) {var o = $ .extend ({width: 480, hauteur: 320, params: ''}, ops); var id = //?v/=(/w+)/.exec(Link)@1]; return '<embed permedfullScreen = "true" id = "embedId" Quality = "high" align = "middle" permetscriptAccess = "Always" type = "application / x-shockwave-flash" src = "' + id + '?' + o.ops '"';}Comment utiliser:
embedyouku ('http://static.youku.com/v/swf/qplayer.swf', {'winType = adshow & videoids = xmte3nzq0ntky & isautoplay = false & iSShowRelatedVideo = false'});10. Créer un menu dynamique ou une liste déroulante
Dans de nombreux scénarios, nous devons créer des menus, des listes déroulantes ou répertorier les éléments dynamiquement. Ce qui suit est un élément du code le plus basique pour implémenter les fonctions ci-dessus, et vous pouvez les développer en conséquence en fonction des besoins réels.
fonction makemenu (items, tags) {tags = tags || ['ul', 'li']; // Tags par défaut var parent = tags [0]; var child = tags [1]; var item, value = ''; pour (var i = 0, l = items.length; i <l; i ++) {item = items [i]; // Élément et valeur séparés si la valeur est présente si (/:/.test(Item)) {item = items [i] .split (':') [0]; valeur = items [i] .split (':') [1]; } // enveloppe l'élément dans les éléments de balise [i] = '<' + enfant + '' + (valeur && 'value = "' + value + '' ') +'> '+ // ajouter de la valeur si le présent +' </ '+ enfant +'> '; } return '<' + parent + '>' + items.join ('') + '</' + parent + '>';}Comment utiliser:
// Dropdown Select MontmakeMemenU (['janvier: janvier', 'février: février', 'mars: mar'], // item: valeur ['select', 'option']); // liste d'épicerie ', «lait» ([«ol»,' li ']);
Ce qui précède n'est qu'une petite partie de ces extraits de code JavaScript pratiques. Je vous recommande également de faire attention à la collecte ou à l'écriture de ces extraits de code de base vous-même. Ils peuvent être utilisés dans de nombreux projets ou fournir des fonctions plus complètes grâce à certaines modifications. L'utilisation de ces extraits de code vous fera gagner beaucoup de temps de développement.