9 nützliche Tipps in der Webentwicklung

In diesem Artikel geben wir 9 nützliche Tipps und Tricks zu HTML, CSS und JavaScript, die Sie möglicherweise häufig bei der Webentwicklung verwenden müssen. Einige davon beziehen sich auf HTML5 und CSS3. Wenn Sie ein Front-End-Entwickler sind, ist dies möglicherweise der Fall einige von Nutzen für dich.

1. Verwenden Sie das Platzhalterattribut von HTML5

In der Vergangenheit mussten wir oft viel JavaScript-Code schreiben, um die Funktion des Platzhalterattributs von HTML5 zu implementieren. Ein Eingabefeld zeigt eine bestimmte Eingabeaufforderungsmeldung an, wenn es nicht den Fokus erhält, und löscht die Eingabeaufforderungsmeldung automatisch, wenn es eine Eingabe erhält Das Durchsuchen dieses Attributs wird derzeit unterstützt: Opera 11+, Firefox 9+, Safari 5+, IE 10+, aber der unten angegebene Code gilt auch für Browser, die keinen Platzhalter unterstützen:

// jQuery code
var i = document.createElement("input");
 
// Only bind if placeholder isn't natively supported by the browser
if (!("placeholder" in i)) {
    $("input[placeholder]").each(function () {
        var self = $(this);
        self.val(self.attr("placeholder")).bind({
            focus: function () {
                if (self.val() === self.attr("placeholder")) {
                    self.val("");
                }
            },
            blur: function () {
                var label = self.attr("placeholder");
                if (label && self.val() === "") {
                    self.val(label);
                }
            }
        });
    });
}
 
<!-- html5 -->
<input type="text" name="search" placeholder="Search" value="">

2. Schriftart verwenden

Sie können Font Face verwenden, um einige bessere und einzigartige Schriftarten zu verwenden, die die meisten Browser unterstützen: Opera 11+, Firefox 3+, Safari 5, IE6+

@font-face {
    font-family: 'MyWebFont';
    src: url('webfont.eot'); /* IE9 Compat Modes */
    src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('webfont.woff') format('woff'), /* Modern Browsers */
         url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
    }
     
body {
       font-family: 'MyWebFont', Fallback, sans-serif;
}

3. Kartongröße

Nun, ich würde sagen, dass dies heutzutage meine Lieblings-CSS-Eigenschaft ist. Es kann Layoutprobleme lösen. Wenn Sie beispielsweise eine Textfeldauffüllung hinzufügen, entspricht die Breite der Breite des Textfelds + der Auffüllung, was ärgerlich ist und normalerweise das Layout beeinträchtigt. Durch die Verwendung dieser Eigenschaft wird dieses Problem jedoch gelöst.

Unterstützte Browser: Opera 8.5+, Firefox 1+, Safari 3, IE8+, Chrome 4+

textarea {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

4. Deaktivieren Sie die Größenänderung des Textbereichs

Manchmal muss der Benutzer die Größe des Textbereichs des mehrzeiligen Texteingabeports nicht ändern, aber einige Webkit-basierte Browser (wie Safari und Chrome) ermöglichen es Benutzern glücklicherweise, die Größe des Textbereichs nach Belieben zu ändern , können Sie diese Funktion deaktivieren:

textarea {
    resize: none
}

5.jQuery.trim()

Wird verwendet, um Leerzeichen vor und nach einer Zeichenfolge zu entfernen:

$.trim("       a lot of white spaces, front and back!      ");

6. jQuery.inArray()

Wird verwendet, um festzustellen, ob sich ein Element in einem Array befindet:

var arr = [ "xml", "html", "css", "js" ];
$.inArray("js", arr);

7. Schreiben Sie ein einfaches jQuery-Plug-in (Vorlage)

//You need an anonymous function to wrap around your function to avoid conflict
(function($){
  
    //Attach this new method to jQuery
    $.fn.extend({
          
        //This is where you write your plugin's name
        pluginname: function() {
  
            //options
            var defaults = {
                option1: "default_value"
            }
             
            var options = $.extend(defaults, options);
  
            //a public method
            this.methodName: function () {
                //call this method via $.pluginname().methodName();
            }
  
            //Iterate over the current set of matched elements
            return this.each(function() {
              
                var o = options;
              
                //code to be inserted here
              
            });
        }
    });
      
//pass jQuery to the function,
//So that we will able to use any valid Javascript variable name
//to replace "$" SIGN. But, we'll stick to $ (I like dollar sign: ) )      
})(jQuery);

8. Erweitern Sie die Funktionen des jQuery-Selektors

jQuery.expr[':'].regex = function(elem, index, match) {
    var matchParams = match[3].split(','),
        validLabels = /^(data|css):/,
        attr = {
            method: matchParams[0].match(validLabels) ?
                        matchParams[0].split(':')[0] : 'attr',
            property: matchParams.shift().replace(validLabels,'')
        },
        regexFlags = 'ig',
        regex = new RegExp(matchParams.join('').replace(/^s+|s+$/g,''), regexFlags);
    return regex.test(jQuery(elem)[attr.method](attr.property));
}
 
/******** Usage ********/
 
// Select all elements with an ID starting a vowel:
$(':regex(id,^[aeiou])');
  
// Select all ps with classes that contain numbers:
$('p:regex(class,[0-9])');
  
// Select all SCRIPT tags with a SRC containing jQuery:
$('script:regex(src,jQuery)');

9. Optimieren und reduzieren Sie die Größe von PNG-Bilddateien

Sie können die Größe von PNG-Dateien reduzieren, indem Sie die Anzahl der Farben reduzieren. Weitere Informationen finden Sie unter PNG-Dateioptimierung

Fazit

Frontend-Entwicklung ist ein sehr interessantes Feld, und wir können nie alles lernen. Jedes Mal, wenn ich an einem neuen Projekt arbeite, habe ich das Gefühl, etwas Neues oder Seltsames zu entdecken. Ich denke, diese Tipps werden sehr praktisch und nützlich sein ;)

Englischer Originaltext: 9-nützliche-Tipps-und-Tricks-für-Web-Entwickler

Das obige ist der detaillierte Inhalt von9 nützliche Tipps in der Webentwicklung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!