Artikel ini berkongsi beberapa kaedah js yang lebih praktikal yang telah saya kumpulkan dalam kehidupan seharian saya untuk panduan dan penilaian anda. Saya ingin memperkenalkannya dalam beberapa bahagian, tetapi mendapati ia agak berlebihan. Selepas menyusunnya, tidak banyak kaedah yang praktikal, ada beberapa kaedah yang saya lihat di Internet yang saya rasa sangat praktikal untuk dibincangkan.
1 Klik Kembali untuk melompat ke halaman yang ditentukan jika tiada halaman sebelumnya
Pertama sekali, terdapat keperluan dalam permintaan pelanggan - satu halaman dikongsi dengan WeChat, klik Return untuk melompat ke halaman utama tapak web.
Dalam tempoh ini, kami membincangkan fungsi ini dengan pelanggan kami, sama ada kami boleh menambah butang kembali ke halaman utama ke halaman untuk melompat.
Walau bagaimanapun, kaedah ini tidak boleh digunakan pada setiap halaman, dan halaman perkongsian yang memerlukan fungsi ini tidak boleh meletakkan ikon tanpa menjejaskan estetika. Jadi, saya tiada pilihan selain mengejar Du Niang. Du Niang juga penuh dengan fungsi marginal.
Jadi melalui percubaan saya sendiri, saya mempunyai kod berikut:
//返回之前没页面则返回首页
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", "");
}
}
Kemudian tambahkan kod berikut pada acara sedia halaman:
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);
Fungsi khusus adalah untuk menentukan sama ada terdapat halaman sebelum ini Jika tidak, masukkan alamat pautan tapak web yang ditentukan ke dalam keadaan (halaman utama digunakan di sini), dan kemudian dengar acara popstate dan lakukan fungsi yang sepadan. operasi.
Kod ini mungkin masih mempunyai beberapa masalah kecil, jadi saya bercadang untuk menyiarkannya supaya seseorang boleh membincangkan dan memperbaikinya bersama-sama.
2. Kaedah log yang mudah
Saya percaya bahawa semua orang sudah bosan dengan panjang menaip console.log() yang agak panjang semasa menyahpepijat halaman. Sesetengah orang mungkin menggunakan input pintasan untuk input pantas (contohnya: masukkan cl untuk muncul konsol secara bijak dalam persekitaran kompilasi). Walau bagaimanapun, apabila projek itu dikeluarkan dan saya melihat banyak maklumat penyahpepijatan yang saya terlupa untuk memadamkannya, ia masih sukar untuk mengosongkannya. Jadi saya hanya menulis kaedah untuk menangani situasi ini secara khusus.
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(','))
}
}
Sebenarnya, apa yang saya agak tidak berpuas hati ialah tiada cara untuk mendapatkan nama parameter secara automatik, jika tidak, ia boleh digunakan seperti ini:
var a = 123, b = 333, obj = { name: "name", content: "..." }
lll(a, b, obj)//调试信息为： a:123,b:123
//obj:
//{ name: "name", content: "..." }
Adakah ia kelihatan lebih jelas?
3 Dapatkan maklumat kedudukan penyemak imbas (menyokong mudah alih)
Banyak projek yang kami terima disesuaikan dan dibangunkan untuk peranti mudah alih, jadi maklumat yang perlu mencari lokasi semasa sering digunakan.
Tetapi banyak antara muka di Internet perlu merujuk sekeping js luaran, seperti API Baidu, API WeChat, dll.
Seterusnya, saya akan memperkenalkan kaedah yang tidak memerlukan rujukan js luaran, tetapi hanya memerlukan penyerahan parameter ke pautan API luaran untuk mendapatkan kedudukan:
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/?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);
}, {})
}
}
Kod ini ialah sekeping kod dalam projek sebenar saya Memandangkan saya perlu menentukan sama ada maklumat kedudukan telah diperoleh, saya tidak boleh mendapatkannya setiap kali halaman dimuatkan, jadi saya menggunakan Cookie untuk menyimpan maklumat kedudukan <🎜. >
Pada mulanya, ia dinilai sama ada terdapat kuki maklumat kedudukan semasa, tetapi tiada. Kemudian tentukan sama ada ia berada di bahagian mudah alih (kerana projek itu berada di bahagian WeChat, jadi saya hanya mengesahkannya di bahagian WeChat)Kemudian panggil parameter antara muka yang disediakan oleh html5 untuk penghantaran data dan proses jsonp yang dikembalikan oleh Baidu. Memandangkan saya hanya perlu mendapatkan maklumat bandar lokasi dalam projek saya, berikut hanyalah contoh untuk mendapatkan bandar tersebut.
4. Dapatkan bahagian berangka rentetan
Memandangkan saya hanya bertanggungjawab untuk pelaksanaan fungsi pada projek, saya tidak membina sendiri banyak halaman, tetapi sesetengah orang baru akan mencipta beberapa situasi di mana sukar untuk mendapatkan nilai dalam teg.Contohnya:
<div>原价998现在只要 <a>99.8!</a> </div>
Situasi ini boleh diselesaikan dengan mudah dengan kaedah yang saya sediakan di bawah
function getNum(text) {
var value = text.replace(/[^(0-9).]/ig, "");
return parseFloat(value);
}Data yang dikembalikan dengan cara ini adalah nombor yang kami mahukan akhirnya saya melakukan penukaran kepada jenis titik terapung untuk memudahkan pemprosesan data. Contohnya, mengekalkan dua tempat perpuluhan, pembundaran, dsb.
5. Dapatkan maklumat peranti
//#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;)? 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
Saya secara peribadi berpendapat ia sangat berguna, jadi saya akan berkongsi dengan semua orang.
Kaedah sambungan rentetan - Berikut ialah kaedah untuk menambahkan
Data jenis rentetan
1. Sembunyikan bahagian rentetan yang melebihi panjang yang ditentukan
/*
将字符串以指定长度显示，多余部分以省略号显示（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;
}
2. Kurangkan panjang rentetan sebanyak satu
//长度减一
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)
}以上就是本文的全部内容，希望对大家的学习有所帮助。
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
