前端wxml取后台js变量值_这些鲜为人知的前端冷知识，你都GET了吗？
背景
最近公司項(xiàng)目不多，比較清閑，劃水摸魚混跡于各大技術(shù)博客平臺(tái)，瞬間又GET了好多前端技能，一些屬于技巧，一些則是聞所未聞的冷知識(shí)，一時(shí)間還消化不過來，不由的發(fā)出一聲感嘆！
前端可真是博大精深于是突發(fā)奇想，現(xiàn)分類整理出來分享給大家，也補(bǔ)充了一些平時(shí)的積累和擴(kuò)展了一些內(nèi)容，俗話說，獨(dú)樂樂不如眾樂樂，大家一起來接受前端的洗禮吧！！！
論被玩壞了的前端HTML篇
瀏覽器地址欄運(yùn)行JavaScript代碼
這個(gè)很多人應(yīng)該還是知道的，在瀏覽器地址欄可以直接運(yùn)行JavaScript代碼，做法是以javascript:開頭后跟要執(zhí)行的語(yǔ)句。比如：
javascript:alert('hello from address bar :)');將以上代碼貼到瀏覽器地址欄回車后alert正常執(zhí)行，一個(gè)彈窗神現(xiàn)。
需要注意的是如果是通過copy paste代碼到瀏覽器地址欄的話，IE及Chrome會(huì)自動(dòng)去掉代碼開頭的javascript:，所以需要手動(dòng)添加起來才能正確執(zhí)行，而Firefox中雖然不會(huì)自動(dòng)去掉，但它根本就不支持在地址欄運(yùn)行JS代碼，sigh~瀏覽器地址欄運(yùn)行HTML代碼
如果說上面那條小秘密知道的人還算多的話，這條秘笈知道的人就要少一些了，在非IE內(nèi)核的瀏覽器地址欄可以直接運(yùn)行HTML代碼！
比如在地址欄輸入以下代碼然后回車運(yùn)行，會(huì)出現(xiàn)指定的頁(yè)面內(nèi)容。
data:text/html,<h1>Hello, everybody!</h1>瀏覽器秒變編輯器
這個(gè)還是在瀏覽器地址欄上面做文章，將以下代碼復(fù)制粘貼到瀏覽器地址欄，運(yùn)行后瀏覽器就變成了一個(gè)原始簡(jiǎn)單的編輯器，和window自帶的notepad差不多，長(zhǎng)見識(shí)了吧，話不多說，我們來試試。
data:text/html, <html contenteditable>歸根結(jié)底多虧了HTML5中新加的contenteditable屬性，當(dāng)元素指定了該屬性后，元素的內(nèi)容成為可編輯狀態(tài)。同理，在控制臺(tái)執(zhí)行以下代碼，同樣可以將整個(gè)頁(yè)面變得可以編輯。
document.body.contentEditable='true';實(shí)時(shí)編寫樣式的輸入框
同理，也是利用了HTML5中的contenteditable屬性，巧妙的在body增加一個(gè)可編輯的style標(biāo)簽。
<body><style style="display:block; position: fixed;" contentEditable>body { background: red; }</style> </body>利用a標(biāo)簽解析url
很多時(shí)候我們有從一個(gè)URL中提取域名，查詢關(guān)鍵字，變量參數(shù)值等的需要,然而處理 url 字符串是比較麻煩的，可以使用 a 標(biāo)簽自動(dòng)解析 url。
主要方法就是在JS中創(chuàng)建一個(gè)a標(biāo)簽，然后將需要處理的URL賦值給我們新創(chuàng)建的a標(biāo)簽的href屬性，然后就可以得到我們想要的東西了。
var a = document.createElement('a'); a.href = 'https://juejin.cn/user/2796746682939054/posts'; console.log(a.host);利用這一方法，稍微進(jìn)行封裝一下，就可以得到一個(gè)非常實(shí)用的工具函數(shù)了，下面提供一個(gè)網(wǎng)上常見的封裝示例。
function urlParse(url, key) {var a = document.createElement('a')a.href = urlvar result = {href: url,protocol: a.protocol.replace(':', ''),port: a.port,query: a.search,params: (function(){var ret = {}, centArr,seg = a.search.replace(/^?/, '').replace(/^?/,'').split('&')for (i = 0, len = seg.length; i < len; i ++) {if (!seg[i]) { continue }centArr = seg[i].split('=')ret[centArr[0]] = centArr[1]}return ret}()),hash: a.hash,file: (a.pathname.match(//([^/?#]+)$/i) || [, ''])[1],path: a.pathname.replace(/^([^/])/, '/$1'),relative: (a.href.match(/tps?://[^/]+(.+)/) || [, ''])[1],segments: a.pathname.replace(/^//, '').split('/')}a = nullreturn key ? result[key] : result }H5 有新的 API URL 也可以快速的處理一個(gè)鏈接var url = new URL('https://www.baidu.com/') url.hash ...帶有 Id 屬性的元素，會(huì)創(chuàng)建全局變量
在一張HTML頁(yè)面中，所有設(shè)置了ID屬性的元素會(huì)在JavaScript的執(zhí)行環(huán)境中創(chuàng)建對(duì)應(yīng)的全局變量，這意味著document.getElementById像人的智齒一樣顯得多余了。但實(shí)際項(xiàng)目中最好還是老老實(shí)實(shí)該怎么寫就怎么寫，畢竟常規(guī)代碼出亂子的機(jī)會(huì)要小得多。
<div id="test"></div> <script>console.log(test) </script>script標(biāo)簽保存任意信息
我們可以通過將script標(biāo)簽的type屬性設(shè)置為'text'，然后就可以在里面保存任意信息，后面在js中獲取信息也十分的方便。
<script type="text" id="template"><h1>歡迎光臨</h1> </script>var text = document.getElementById('template').innerHTMLCSS篇
文字模糊效果
只需要添加以下兩行代碼，即可達(dá)到將文字模糊處理的目的。
color: transparent; text-shadow: #111 0 0 5px;我們這群人，苦沒有真正苦過，愛沒有用力愛過。 每天受著信息大潮的沖擊，三觀未定又備受曲折。 貧窮不再是正義，又妄圖不讓金錢成為唯一的追求。 過早看到了更大的世界，勤奮卻又不過三天。 熱血透不過屏幕，回憶止于游戲和工作。 像一群沒有根的孩子，在別人的經(jīng)歷和精神里吵鬧。
正常文字VS模糊文字，是不是很酷，哈哈哈。
毛玻璃效果
其實(shí)毛玻璃的模糊效果技術(shù)上比較簡(jiǎn)單，只是用到了 css 濾鏡（filter）中的 blur 屬性。但是要做一個(gè)好的毛玻璃效果，需要注意很多細(xì)節(jié)。下面提供一個(gè)簡(jiǎn)單示例：
.blur {display: block;width: 300px;height: 300px;margin: 100px auto;filter: blur(10px); }<img src="./img/test.png" class="blur" alt="">圖片是我養(yǎng)的可愛的藍(lán)胖子(●'?'●)多重邊框
在css中，我們可以利用重復(fù)指定box-shadow來達(dá)到多個(gè)邊框的效果。
/*CSS Border with Box-Shadow Example*/ div {box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.2), 0 0 0 12px rgba(0, 0, 0, 0.2), 0 0 0 18px rgba(0, 0, 0, 0.2), 0 0 0 24px rgba(0, 0, 0, 0.2);height: 200px;margin: 50px auto;width: 400px }CSS中也可以做簡(jiǎn)單運(yùn)算
在日常開發(fā)中，我們時(shí)常會(huì)遇到這樣的需求：
左側(cè)或者右側(cè)寬度固定，然后剩余部分自動(dòng)充滿。可能很多小伙伴會(huì)想到用flex布局，通過設(shè)置flex:1;使其自動(dòng)充滿，當(dāng)然這個(gè)做法也是對(duì)的，但是我們還有更為簡(jiǎn)便的方法，那就是利用css的calc函數(shù)，示例代碼如下：
.container{width: calc(100% - 50px); }calc() 函數(shù)用于動(dòng)態(tài)計(jì)算長(zhǎng)度值。
- 需要注意的是，運(yùn)算符前后都需要保留一個(gè)空格，例如：width: calc(100% - 10px)；
- 任何長(zhǎng)度值都可以使用calc()函數(shù)進(jìn)行計(jì)算；
- calc()函數(shù)支持 "+", "-", "*", "/" 運(yùn)算；
- calc()函數(shù)使用標(biāo)準(zhǔn)的數(shù)學(xué)運(yùn)算優(yōu)先級(jí)規(guī)則；
JS篇
兩個(gè)變量值的交換
一般兩個(gè)變量值交換，大家首先想到的可能是通過一個(gè)中間變量進(jìn)行轉(zhuǎn)換，但是其實(shí)還有更快的寫法，代碼如下：
var a=1, b=2 a=[b, b=a][0]浮點(diǎn)數(shù)快速向下取整
JavaScript中是沒有整型概念的，但利用好位操作符可以輕松處理，同時(shí)獲得效率上的提升。
|0和~~是很好的一個(gè)例子，使用這兩者可以將浮點(diǎn)轉(zhuǎn)成整型且效率方面要比同類的parseInt,Math.round 要快。在處理像素及動(dòng)畫位移等效果的時(shí)候會(huì)很有用。
(12.4 / 4.13) | 0 // => 3 ~~(12.4 / 4.13) // => 3生成隨機(jī)字符串
生成隨機(jī)字符串，我們第一想到的，可能是先定義一個(gè)字符串?dāng)?shù)組，然后通過隨機(jī)取數(shù)組中的字符進(jìn)而拼接成一個(gè)隨機(jī)長(zhǎng)度的字符串。
但是下面還有一個(gè)更簡(jiǎn)單的方法，代碼如下：
function generateRandomAlphaNum(len) {var rdmString = "";for (; rdmString.length < len; rdmString += Math.random().toString(36).substr(2));return rdmString.substr(0, len); }主要是利用了toString() 方法的特性什么情況下a === a - 1
咋一看，這個(gè)全等式怎么看都是false，但是萬(wàn)物存在既有理，接下來，讓我們看看哪些情況下該等式是成立的呢。
第一種情況就是Infinity，或者可以說是正負(fù)Infinity。
知識(shí)點(diǎn): 在 JavaScript 里，Infinity是一個(gè) Number 類型的字面量，表示無窮大。當(dāng)一個(gè) Number 類型的值，在運(yùn)算過程中超過了所能表示的最大值，就會(huì)得到無窮大。let a = Infinity;console.log(a === a - 1); // truelet b = -Infinity;console.log(b === b - 1); // true那么還有沒有其他情況下也成立呢？或者說換成a == a-1又有哪些情況成立呢？歡迎各位大佬在下面評(píng)論區(qū)參與討論。惡搞篇
CSS惡搞
大家猜測(cè)一下，如果在代碼中加上一下樣式，會(huì)是一個(gè)什么效果？
{cursor: none !important; }(圖片來源于網(wǎng)絡(luò)，如有侵權(quán)請(qǐng)聯(lián)系我刪除)
console.log惡搞
Chrome的console.log是支持對(duì)文字添加樣式的，甚至log圖片都可以。于是可以重寫掉默認(rèn)的log方法，把將要log的文字應(yīng)用到CSS的模糊效果，這樣當(dāng)有人試圖調(diào)用console.log()的時(shí)候，出來的是模糊不清的文字。好冷，我表示沒有笑。
var _log = console.log; console.log = function() {_log.call(console, '%c' + [].slice.call(arguments).join(' '), 'color:transparent;text-shadow:0 0 2px rgba(0,0,0,.5);'); }; console.log('你是逗逼嗎')如果本篇文章有任何錯(cuò)誤和建議，歡迎大家指出！
作者：monkeysoft鏈接：https://juejin.cn/post/6901528736567394318
來源：掘金
總結(jié)
以上是生活随笔為你收集整理的前端wxml取后台js变量值_这些鲜为人知的前端冷知识，你都GET了吗？的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 财源滚滚的意思 财源滚滚解释
- 下一篇： python isodd奇偶_Pytho