suchen
HeimWeb-Frontendjs-TutorialEinige weitere praktische JS-Methoden_Javascript-Kenntnisse

In diesem Artikel werden einige der praktischeren JS-Methoden vorgestellt, die ich in meinem täglichen Leben gesammelt habe, um Sie zu beraten und zu bewerten. Ich wollte es in Teilen vorstellen, fand es aber etwas überflüssig. Nachdem ich es geklärt habe, gibt es nicht viele praktische Methoden. Natürlich gibt es einige Methoden, die ich im Internet gesehen habe und die ich hier veröffentlichen werde, damit jeder sie besprechen kann.

1. Klicken Sie auf Zurück, um zur angegebenen Seite zu springen, wenn es keine vorherige Seite gibt

Zunächst einmal gibt es eine Anforderung in der Kundennachfrage – eine einzelne Seite, die auf WeChat geteilt wird, klicken Sie auf „Zurück“, um zur Startseite der Website zu springen.

Während dieser Zeit haben wir diese Funktion mit unseren Kunden besprochen, ob wir eine Schaltfläche „Zurück zur Startseite“ hinzufügen können, um zur Seite zu springen.

Diese Methode kann jedoch nicht auf jede Seite angewendet werden, und die Freigabeseite, die diese Funktion erfordert, kann kein Symbol platzieren, ohne die Ästhetik zu beeinträchtigen. Also hatte ich keine andere Wahl, als Du Niang zu verfolgen. Du Niang ist auch voller Randfunktionen.

Durch meine eigenen Versuche habe ich also den folgenden Code:

//返回之前没页面则返回首页
function pushHistory() {
  //获取浏览器历史记录栈中的记录个数
  //由于页面加载的时候就会将当前页面压入栈中 所以判断是否小于2
  if (history.length < 2) {
    var state = {
      title: "index",
      url: getHttpPrefix + "index.html"
    };
    window.history.pushState(state, "index", getHttpPrefix + "index.html");
    state = {
      title: "index",
      url: ""
    };
    window.history.pushState(state, "index", "");
  }
}

Fügen Sie dann den folgenden Code zum Page-Ready-Ereignis hinzu:

setTimeout(function () {
    pushHistory()
    window.addEventListener("popstate", function (e) { 5       if (window.history.state !=null&&window.history.state.url != "") {
        location.href = window.history.state.url  
      }

    });
  }, 300);

Die spezifische Funktion besteht darin, festzustellen, ob zuvor eine Seite vorhanden ist. Wenn nicht, fügen Sie die Linkadresse der angegebenen Website in den Status ein (hier wird die Homepage verwendet), hören Sie sich dann das Popstate-Ereignis an und führen Sie die entsprechende Funktion aus Operationen.

Dieser Code weist möglicherweise noch einige kleinere Probleme auf, daher habe ich vor, ihn zu veröffentlichen, damit jemand ihn gemeinsam besprechen und verbessern kann.

2. Praktische Protokollierungsmethode

Ich glaube, dass jeder die etwas längere Eingabedauer von console.log() beim Debuggen der Seite schon satt hat. Einige Leute verwenden möglicherweise die Tastenkombination für die schnelle Eingabe (z. B. geben Sie cl ein, um die Konsole in der Kompilierungsumgebung intelligent aufzurufen). Wenn das Projekt jedoch veröffentlicht wird, wird es immer noch schwierig sein, viele Debugging-Informationen zu löschen, die ich vergessen habe zu löschen. Deshalb habe ich einfach eine Methode geschrieben, um speziell mit dieser Situation umzugehen.

function lll() {
  //全局变量_debug用来控制调试信息开关
  if (_debug) {
    var arr = [];
    //arguments是方法的参数集合 这样做是为了不限制参数的个数,方便调试
    for (_item in arguments) {
      //由于个人习惯字符串信息就显示在一行里所以对字符串进行了筛选拼接
      if (typeof _item == "String") {
        arr.push(_item)
      } else {
        console.log(_item)
      }
    }
    if(arr.length>0)console.log(arr.join(','))
  }
}

Tatsächlich bin ich ein wenig unzufrieden, weil es keine Möglichkeit gibt, den Namen des Parameters automatisch zu erhalten, sonst kann er wie folgt verwendet werden:

var a = 123, b = 333, obj = { name: "name", content: "..." }
 lll(a, b, obj)//调试信息为: a:123,b:123
        //obj:
        //{ name: "name", content: "..." }

Scheint es klarer zu sein?

3. Informationen zur Browserpositionierung abrufen (unterstützt Mobilgeräte)

Viele eingegangene Projekte sind individuell angepasst und für mobile Endgeräte entwickelt, sodass häufig Informationen verwendet werden, die zur Lokalisierung des aktuellen Standorts erforderlich sind.

Aber viele Schnittstellen im Internet müssen auf einen externen JS-Teil verweisen, wie z. B. die API von Baidu, die API von WeChat usw.

Als nächstes werde ich eine Methode vorstellen, die keine Referenzierung externer JS erfordert, sondern nur die Übermittlung von Parametern an den externen API-Link erfordert, um die Positionierung zu erhalten:

if (getCookie('position') == "") {

    if (navigator.userAgent.indexOf("MicroMessenger") > -1) {//判断是否是微信端,具体视情况而定
      navigator.geolocation.getCurrentPosition(function getPositionSuccess(position) {
        //通过html5的navigator.geolocation接口 获取浏览器的当前定位 (移动端最准确,PC会有较大偏差)
        var lat = position.coords.latitude;//获取过来的当前纬度
        var lng = position.coords.longitude;//获取过来的当前经度
        var arr = []
        arr.push(lng)
        arr.push(lat)
        //alert(position)
        $.ajax({
          type: "GET",
          url: "http://api.map.baidu.com/geocoder/v2/&#63;ak=oM55dVWVwLUU7shkz7uY8M6E&callback=renderReverse&location=" + lat + "," + lng + "&output=json&pois=1",//将经纬度通过地址栏参数的形式 传给百度提供的api
          beforeSend: function () {
            //由于这段过程需要些时间 所以最好页面上有加载提示
            iosload()//本人写的页面加载动画
          },
          data: {},
          dataType: "jsonp",//由于是跨域传输 所以需要以jsonp的形式进行传输
          jsonpCallback: "renderReverse",//类似跨域传输的标识 需要接收方和传输方做好统一
          success: function (data) {
            ios.hide();
            //alert(data)
            $("#myposition").html("我在:" + data.result.addressComponent.city)
            setCookie("position", data.result.addressComponent.city, 24 * 60 * 30)
          }
        })

  }, function (error) {
    //alert(error.message);
  }, {})
  }
}

Dieser Code ist ein Teil meines eigentlichen Projekts. Da ich feststellen muss, ob die Positionierungsinformationen abgerufen wurden, kann ich sie nicht bei jedem Laden der Seite abrufen. Daher verwende ich Cookies, um die Positionierungsinformationen zu speichern >

Zu Beginn wurde beurteilt, ob ein aktuelles Positionsinformations-Cookie vorhanden war, aber es gab kein Cookie. Stellen Sie dann fest, ob es sich um die mobile Seite handelt (da sich das Projekt auf der WeChat-Seite befindet, habe ich es also nur auf der WeChat-Seite überprüft)

Rufen Sie dann die von HTML5 bereitgestellten Schnittstellenparameter für die Datenübertragung auf und verarbeiten Sie den von Baidu zurückgegebenen JSONP. Da ich in meinem Projekt nur die Informationen zur Standortstadt abrufen muss, ist hier nur ein Beispiel für die Beschaffung der Stadt.


4. Ermitteln Sie den numerischen Teil der Zeichenfolge

Da ich nur für die Implementierung von Funktionen im Projekt verantwortlich bin, werden viele Seiten nicht von mir erstellt, aber einige Anfänger werden Situationen schaffen, in denen es schwierig ist, die Werte in den Tags zu erhalten.

Zum Beispiel:

<div>原价998现在只要
  <a>99.8!</a>
 </div>
Für Seiten wie diese muss manchmal die Zahl 998 oder 98 drin sein. Es wird etwas mühsam werden.

Diese Situation kann leicht mit der unten aufgeführten Methode gelöst werden

 function getNum(text) {
   var value = text.replace(/[^(0-9).]/ig, "");
   return parseFloat(value);
 }
Diese Methode ist sehr kurz und erfolgt im Wesentlichen über reguläre Ausdrücke. Ersetzen Sie nicht-stellige Zeichen oder Dezimalzeichen durch leere Zeichenfolgen (löschen Sie sie tatsächlich)

Die auf diese Weise zurückgegebenen Daten sind die von uns gewünschte Zahl. Ich habe schließlich eine Konvertierungsoperation in den Gleitkommatyp durchgeführt. Dies dient der Erleichterung der Nachbearbeitung der Daten. Beispiel: Beibehaltung von zwei Dezimalstellen, Rundung usw.

5. Geräteinformationen abrufen

//#region 获取设备信息

var browser = {
  versions: function () {
    var u = navigator.userAgent, app = navigator.appVersion;
    return {
      trident: u.indexOf('Trident') > -1, //IE内核
      presto: u.indexOf('Presto') > -1, //opera内核
      webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
      gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,//火狐内核
      mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
      ios: !!u.match(/\(i[^;]+;( U;)&#63; CPU.+Mac OS X/), //ios终端
      android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器
      iPhone: u.indexOf('iPhone') > -1, //是否为iPhone或者QQHD浏览器
      iPad: u.indexOf('iPad') > -1, //是否iPad
      webApp: u.indexOf('Safari') == -1, //是否web应该程序,没有头部与底部
      weixin: u.indexOf('MicroMessenger') > -1, //是否微信 (2015-01-22新增)
      qq: u.match(/\sQQ/i) == " qq" //是否QQ
    };
  }(),
  language: (navigator.browserLanguage || navigator.language).toLowerCase()
}

//实际使用的时候如下:
if (browser.versions.webKit) {
  //为苹果 谷歌内核执行的代码...
}

//#endregion

Hier teile ich auch eine Methode zur Beurteilung von Geräteinformationen, die in einem Objekt gekapselt sind und nicht von mir geschrieben, sondern auch im Internet gesehen wurden.

Ich persönlich finde es sehr nützlich, deshalb werde ich es mit allen teilen.

String-Erweiterungsmethoden – Im Folgenden finden Sie Methoden zum Anhängen von

String-Typ-Daten

1. Den Teil der Zeichenfolge ausblenden, der die angegebene Länge überschreitet

/*
将字符串以指定长度显示,多余部分以省略号显示(len--显示长度
defaultStr--若字符串为空显示的字符串)
*/
String.prototype.splitString = function (len, defaultStr) {
  var result = "";
  var str = this.toString()
  if (str) {
    str = str.trim()
    if (str.length > len) {
      result = str.substring(0, len) + "...";
    }
    else {
      result = str;
    }
  }
  else {
    result = defaultStr;
  }
  return result;
}
Anmerkungen sind einfach und klar genug. Wenn Sie es nicht verstehen, können Sie eine Nachricht hinterlassen, und der Blogger wird auf jeden Fall antworten, nachdem er es gesehen hat.

2. Verringern Sie die Länge der Zeichenfolge um eins

//长度减一
 String.prototype.delLast = function () {
   return this.substring(0, this.length - 1)
 }

有些人可能会觉得 这个方法有点脱裤子放屁的嫌疑,其实真正的项目中 会经常需要这个操作。

与其写一段长长的substring 不如咱们写个方法将代码精简,并且在码代码的时候 也很方便 直接在对应的字符串后面 轻轻一点,选择delLast就行。

一句话,用过都说好!

3.将数字型字符串补全指定长度

//给数字型字符串固定指定长度
String.prototype.addZero = function (n) {
  var num = this
  var len = num.toString().length;
  while (len < n) {
    num = '0' + num;
    len++;
  }
  return num;
}

看注释可能有点不理解 其实就是加入这个字符串是 "2",通过这个扩展方法 可以这么操作 "2".addZero(2)

那么返回过来的就是"02"这样的字符串。

用过都说好!

4.将数据库DateTime类型转换为Date

 String.prototype.DTD = function () {
   return new Date(Date.parse(this.toString().replace(/-/g, "/")))
 }

 5.用户昵称省略 

//用户昵称省略
 String.prototype.telHide = function () {
   var name = this
   return name.substr(0, 1) + "****" + name.substring(name.length - 1, name.length)
 }

以上就是本文的全部内容,希望对大家的学习有所帮助。

Stellungnahme
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Erstellen einer SaaS-Anwendung mit mehreren Mietern mit Next.js (Backend Integration)Erstellen einer SaaS-Anwendung mit mehreren Mietern mit Next.js (Backend Integration)Apr 11, 2025 am 08:23 AM

Ich habe eine funktionale SaaS-Anwendung mit mehreren Mandanten (eine EdTech-App) mit Ihrem täglichen Tech-Tool erstellt und Sie können dasselbe tun. Was ist eine SaaS-Anwendung mit mehreren Mietern? Mit Multi-Tenant-SaaS-Anwendungen können Sie mehrere Kunden aus einem Sing bedienen

So erstellen Sie eine SaaS-Anwendung mit mehreren Mietern mit Next.js (Frontend Integration)So erstellen Sie eine SaaS-Anwendung mit mehreren Mietern mit Next.js (Frontend Integration)Apr 11, 2025 am 08:22 AM

Dieser Artikel zeigt die Frontend -Integration mit einem Backend, das durch die Genehmigung gesichert ist und eine funktionale edtech SaaS -Anwendung unter Verwendung von Next.js. erstellt. Die Frontend erfasst Benutzerberechtigungen zur Steuerung der UI-Sichtbarkeit und stellt sicher, dass API-Anfragen die Rollenbasis einhalten

JavaScript: Erforschung der Vielseitigkeit einer WebspracheJavaScript: Erforschung der Vielseitigkeit einer WebspracheApr 11, 2025 am 12:01 AM

JavaScript ist die Kernsprache der modernen Webentwicklung und wird für seine Vielfalt und Flexibilität häufig verwendet. 1) Front-End-Entwicklung: Erstellen Sie dynamische Webseiten und einseitige Anwendungen durch DOM-Operationen und moderne Rahmenbedingungen (wie React, Vue.js, Angular). 2) Serverseitige Entwicklung: Node.js verwendet ein nicht blockierendes E/A-Modell, um hohe Parallelitäts- und Echtzeitanwendungen zu verarbeiten. 3) Entwicklung von Mobil- und Desktop-Anwendungen: Die plattformübergreifende Entwicklung wird durch reaktnative und elektronen zur Verbesserung der Entwicklungseffizienz realisiert.

Die Entwicklung von JavaScript: Aktuelle Trends und ZukunftsaussichtenDie Entwicklung von JavaScript: Aktuelle Trends und ZukunftsaussichtenApr 10, 2025 am 09:33 AM

Zu den neuesten Trends im JavaScript gehören der Aufstieg von Typenkripten, die Popularität moderner Frameworks und Bibliotheken und die Anwendung der WebAssembly. Zukunftsaussichten umfassen leistungsfähigere Typsysteme, die Entwicklung des serverseitigen JavaScript, die Erweiterung der künstlichen Intelligenz und des maschinellen Lernens sowie das Potenzial von IoT und Edge Computing.

Entmystifizieren JavaScript: Was es tut und warum es wichtig istEntmystifizieren JavaScript: Was es tut und warum es wichtig istApr 09, 2025 am 12:07 AM

JavaScript ist der Eckpfeiler der modernen Webentwicklung. Zu den Hauptfunktionen gehören eine ereignisorientierte Programmierung, die Erzeugung der dynamischen Inhalte und die asynchrone Programmierung. 1) Ereignisgesteuerte Programmierung ermöglicht es Webseiten, sich dynamisch entsprechend den Benutzeroperationen zu ändern. 2) Die dynamische Inhaltsgenerierung ermöglicht die Anpassung der Seiteninhalte gemäß den Bedingungen. 3) Asynchrone Programmierung stellt sicher, dass die Benutzeroberfläche nicht blockiert ist. JavaScript wird häufig in der Webinteraktion, der einseitigen Anwendung und der serverseitigen Entwicklung verwendet, wodurch die Flexibilität der Benutzererfahrung und die plattformübergreifende Entwicklung erheblich verbessert wird.

Ist Python oder JavaScript besser?Ist Python oder JavaScript besser?Apr 06, 2025 am 12:14 AM

Python eignet sich besser für Datenwissenschaft und maschinelles Lernen, während JavaScript besser für die Entwicklung von Front-End- und Vollstapel geeignet ist. 1. Python ist bekannt für seine prägnante Syntax- und Rich -Bibliotheks -Ökosystems und ist für die Datenanalyse und die Webentwicklung geeignet. 2. JavaScript ist der Kern der Front-End-Entwicklung. Node.js unterstützt die serverseitige Programmierung und eignet sich für die Entwicklung der Vollstapel.

Wie installiere ich JavaScript?Wie installiere ich JavaScript?Apr 05, 2025 am 12:16 AM

JavaScript erfordert keine Installation, da es bereits in moderne Browser integriert ist. Sie benötigen nur einen Texteditor und einen Browser, um loszulegen. 1) Führen Sie sie in der Browser -Umgebung durch, indem Sie die HTML -Datei durch Tags einbetten. 2) Führen Sie die JavaScript -Datei nach dem Herunterladen und Installieren von node.js nach dem Herunterladen und Installieren der Befehlszeile aus.

Wie sende ich Benachrichtigungen, bevor eine Aufgabe in Quartz beginnt?Wie sende ich Benachrichtigungen, bevor eine Aufgabe in Quartz beginnt?Apr 04, 2025 pm 09:24 PM

So senden Sie im Voraus Aufgabenbenachrichtigungen in Quartz Wenn der Quartz -Timer eine Aufgabe plant, wird die Ausführungszeit der Aufgabe durch den Cron -Ausdruck festgelegt. Jetzt...

See all articles

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
3 Wochen vorBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Beste grafische Einstellungen
3 Wochen vorBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können
3 Wochen vorBy尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Wie man alles in Myrise freischaltet
3 Wochen vorBy尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

MantisBT

MantisBT

Mantis ist ein einfach zu implementierendes webbasiertes Tool zur Fehlerverfolgung, das die Fehlerverfolgung von Produkten unterstützen soll. Es erfordert PHP, MySQL und einen Webserver. Schauen Sie sich unsere Demo- und Hosting-Services an.

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Leistungsstarke integrierte PHP-Entwicklungsumgebung

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

PHPStorm Mac-Version

PHPStorm Mac-Version

Das neueste (2018.2.1) professionelle, integrierte PHP-Entwicklungstool

SecLists

SecLists

SecLists ist der ultimative Begleiter für Sicherheitstester. Dabei handelt es sich um eine Sammlung verschiedener Arten von Listen, die häufig bei Sicherheitsbewertungen verwendet werden, an einem Ort. SecLists trägt dazu bei, Sicherheitstests effizienter und produktiver zu gestalten, indem es bequem alle Listen bereitstellt, die ein Sicherheitstester benötigen könnte. Zu den Listentypen gehören Benutzernamen, Passwörter, URLs, Fuzzing-Payloads, Muster für vertrauliche Daten, Web-Shells und mehr. Der Tester kann dieses Repository einfach auf einen neuen Testcomputer übertragen und hat dann Zugriff auf alle Arten von Listen, die er benötigt.