JS代碼的案例
一串JS代碼Hack簡(jiǎn)單考眼力小游戲
So, 我就開(kāi)始研究如何愉快的用JS作弊了。
網(wǎng)頁(yè)分析
Hack這種事情是講究化勁的，知己知彼才能成功。第一步當(dāng)然是先分析一下網(wǎng)頁(yè)了。打開(kāi)Chrome自帶的開(kāi)發(fā)者工具可以看到，這些方塊不過(guò)就是span標(biāo)簽搭配RGB顏色。而我們知道游戲規(guī)則是所有的方塊里面只有一個(gè)是不同的，所以我們只需要找到那個(gè)不同的，然后模擬點(diǎn)擊那個(gè)元素就可以了。
代碼實(shí)現(xiàn)
說(shuō)干就干。由于游戲限制實(shí)現(xiàn)是60秒，所以我們?yōu)榱苏{(diào)試方便，可以用一段JS先把網(wǎng)頁(yè)內(nèi)所有的計(jì)時(shí)器停掉。
借著根據(jù)我們之前發(fā)現(xiàn)的原理，構(gòu)造原型代碼驗(yàn)證思路。
A few moments later……
這段代碼的意圖很明顯，為每一種顏色建立一個(gè)字典，記錄出現(xiàn)了多少次，然后我們遍歷字典，只出現(xiàn)了一次的顏色自然就是我們要找的方塊了。接著我們拿著得到的顏色代碼，再去文檔中對(duì)著所有的方塊比對(duì)，最后找到元素并點(diǎn)擊。為這個(gè)函數(shù)設(shè)置一個(gè)計(jì)時(shí)器定時(shí)啟動(dòng)，便大功告成了，把代碼輸入開(kāi)發(fā)者工具，試試效果。
Impressive! 效果非常不錯(cuò)，我當(dāng)時(shí)看到的最厲害的人，也不過(guò)只能打到lv40而已。但是我們的代碼還是有一些冗余，還有優(yōu)化提高的空間。
在交流中，其他人在我的代碼的基礎(chǔ)上，給出了性能更強(qiáng)更精簡(jiǎn)的改進(jìn)版。
這段代碼妙就妙在用了requestAnimationFrame代替了計(jì)時(shí)器，真正達(dá)到了機(jī)器能跑多快跑多快，完全釋放了機(jī)器的全部性能，能限制速度的也只有瀏覽器渲染的速度了。
效果可以說(shuō)是相當(dāng)?shù)牟诲e(cuò)了，只不過(guò)到了這個(gè)階段，人類(lèi)早已經(jīng)退出較量了。
總結(jié)
總體來(lái)說(shuō)，這個(gè)游戲挺好玩的，各種意義上。
展開(kāi) 淘寶放大鏡的簡(jiǎn)單實(shí)現(xiàn)，原來(lái)道理很簡(jiǎn)單
css代碼我就不截圖了，簡(jiǎn)單說(shuō)幾個(gè)需要注意的地方就行，一個(gè)就是放大鏡需要設(shè)置透明度，這個(gè)透明度多少就看你自己喜歡了。第二個(gè)就是大圖區(qū)的背景圖需要設(shè)置為兩倍的大小。當(dāng)然不一定要是兩倍，但一定要比本身的寬高要大，不然無(wú)法取得放大的效果。
我們主要來(lái)看看js代碼，
簡(jiǎn)單解釋代碼： 1.鼠標(biāo)移入事件，讓放大鏡出現(xiàn)，并且設(shè)置出現(xiàn)的位置為貼靠在小圖的邊緣。 2.鼠標(biāo)移動(dòng)事件，鼠標(biāo)移動(dòng)伴隨著放大鏡的移動(dòng)。當(dāng)然這里也有限制，鼠標(biāo)一旦超出，放大鏡就會(huì)貼靠或者消失。計(jì)算鼠標(biāo)的xy值，xy值減去放大鏡寬高的一半就是放大鏡的xy值，通過(guò)放大鏡的xy值再減去小圖的xy值，就可以算出放大鏡移動(dòng)的距離。根據(jù)移動(dòng)的距離*2，就是大圖背景移動(dòng)的距離。 邏輯比較繞，覺(jué)得繞的可以在紙上畫(huà)個(gè)圖來(lái)分辨這些距離。
作者：扶墻哥
來(lái)源：掘金
展開(kāi) 如何實(shí)現(xiàn)將ImgURL圖床集成到您的網(wǎng)站
如果您還不清楚ImgURL具有哪些功能，可以先了解下《一篇文章了解ImgURL圖床特色功能》
美洽的在線客服系統(tǒng)試用
與此同時(shí)xiaoz還編寫(xiě)了相關(guān)的js腳本，可以很方便的將ImgURL圖床集成到您的網(wǎng)站，實(shí)現(xiàn)在當(dāng)前頁(yè)面（您的網(wǎng)站）直接上傳圖片到ImgURL圖床。
美洽在線客服平臺(tái)版接入說(shuō)明專(zhuān)業(yè)版
美洽網(wǎng)站插件的標(biāo)準(zhǔn) JS 代碼為：
<scripttype=‘text/javascript’>
(function(m, ei, q, i, a, j, s) { m[a] = m[a] || function() {
(m[a].a = m[a].a || []).push(arguments)
};
j = ei.createElement(q),
s = ei.getElementsByTagName(q)[0];
j.async = true;
j.charset = ‘UTF-8’;
j.src = i + ‘?v=’ + new Date().getUTCDate(); s.parentNode.insertBefore(j, s); })(window, document, ‘script’,
‘//static.meiqia.com/dist/meiqia.js’, ‘_MEIQIA’); _MEIQIA(‘entId’,
#####); // 這里 ##### 代表企業(yè)的 ent_id
/script>
平臺(tái)將此段 JS 代碼插入到平臺(tái)網(wǎng)站模板中即可為平臺(tái)下企業(yè)開(kāi)啟客服功能。
需要提示的是，每個(gè)企業(yè)的 ent_id 都不相同，所以企業(yè)需要將模板中的這部分作為變量處理。
此段代碼使用了異步加載的方式，所以不用擔(dān)心阻塞網(wǎng)站代碼的加載。美洽網(wǎng)站插件還提供了很多方便開(kāi)發(fā)者自定義的 API ，如果有需要請(qǐng)?jiān)L問(wèn) 美洽文檔中心 查閱。
展開(kāi) 
Python爬蟲(chóng)要學(xué)什么？寫(xiě)給小白的Python爬蟲(chóng)必備技能
Python在爬蟲(chóng)方面用得比較多，所以你如果能掌握以下內(nèi)容，找工作的時(shí)候就會(huì)順利很多：
1、Python不是唯一可以做爬蟲(chóng)的，很多語(yǔ)言都可以，尤其是Java,同時(shí)掌握它們和擁有相關(guān)開(kāi)發(fā)經(jīng)驗(yàn)是很重要的加分項(xiàng);
2、大部分的公司都要求爬蟲(chóng)技術(shù)有一定的深度和廣度，深度就是類(lèi)似反反爬、加密破解、驗(yàn)證登錄等等技術(shù);廣度就是分布式、云計(jì)算等，都是加分項(xiàng);
3、爬蟲(chóng)，不是抓取到數(shù)據(jù)就完事了，如果有數(shù)據(jù)抽取、清洗、消重等方面經(jīng)驗(yàn)，也是加分項(xiàng);
4、一般公司都會(huì)有自己的爬蟲(chóng)系統(tǒng)，而新進(jìn)員工除了跟著學(xué)習(xí)以外常做的工作就是維護(hù)爬蟲(chóng)系統(tǒng)，這點(diǎn)要有了解;
5、還有一個(gè)加分項(xiàng)就是前端知識(shí)，尤其是常用的 js、ajax、html/xhtml、css 等相關(guān)技術(shù)為佳，其中 js 代碼的熟悉是很重要的;
6、補(bǔ)充一條，隨著手持設(shè)備的市場(chǎng)占比越來(lái)越高，app 的數(shù)據(jù)采集、抓包工具的熟練使用會(huì)越來(lái)越重要。
展開(kāi) 互聯(lián)網(wǎng)產(chǎn)品研發(fā)流程
WD（前端開(kāi)發(fā)工程師）根據(jù)設(shè)計(jì)頁(yè)面切圖，編寫(xiě)HTML，CSS，JS源代碼。
下面就進(jìn)入了后臺(tái)開(kāi)發(fā)階段，在編碼之前，程序員應(yīng)視其系統(tǒng)需要，進(jìn)行概要設(shè)計(jì)、數(shù)據(jù)庫(kù)設(shè)計(jì)，并進(jìn)行內(nèi)部討論和評(píng)審。程序員對(duì)文檔或原型有疑問(wèn)或不理解，需與PD和ID進(jìn)行溝通，了解其真實(shí)涵義，不得以任何理由私自更改已確定的PRD文檔方案。確有功能需做調(diào)整，程序員需與PD、需求方共同協(xié)商完成。改動(dòng)應(yīng)出具文檔，由需求方、技術(shù)經(jīng)理、PM同意。每個(gè)人寫(xiě)的代碼都不可能完全正確，這樣就需要邊開(kāi)發(fā)邊測(cè)試。
α（alpha最初）測(cè)試。在開(kāi)發(fā)小組內(nèi)部進(jìn)行，測(cè)試的方法也較多，黑盒、白盒、 壓力、應(yīng)力等。此階段應(yīng)完成80%以上的需求開(kāi)發(fā)，測(cè)試以PRD和原型為準(zhǔn)。測(cè)試完成后，收集反饋，修復(fù)BUG，優(yōu)化流程。
β（beta第二次）測(cè)試：有選擇地請(qǐng)一些最終用戶(hù)實(shí)際使用，將發(fā)現(xiàn)的問(wèn)題反饋，開(kāi)發(fā)者對(duì)系統(tǒng)進(jìn)行最后的修改，之后準(zhǔn)備發(fā)布最終產(chǎn)品。β測(cè)試開(kāi)發(fā)者不在場(chǎng)。產(chǎn)品估算開(kāi)發(fā)時(shí)間，以完成β測(cè)試為準(zhǔn)。
產(chǎn)品上線后可能還存在一些bug，這就需要后期的維護(hù)了。等產(chǎn)品穩(wěn)定后就完成了這次開(kāi)發(fā)
展開(kāi) hey，你的Event Loop
但是雖然js是單線程，但是完全可以模擬多線程，靠的就是Event Loop。
我們都知道js中的代碼分 同步 和 異步，所謂的 異步 其實(shí)就是不會(huì)阻塞我們的主線程，等待主線程的代碼執(zhí)行完畢才會(huì)執(zhí)行。callback setTimeout setInterval Promise ... 這些都是都是我們耳熟能詳?shù)?異步 代碼
如圖所示，js中的內(nèi)存分為 堆內(nèi)存(heap) 和 棧內(nèi)存(stack), 堆內(nèi)存 中存的是我們聲明的object類(lèi)型的數(shù)據(jù)，棧內(nèi)存 中存的是 基本數(shù)據(jù)類(lèi)型 以及 函數(shù)執(zhí)行時(shí)的運(yùn)行空間。我們的 同步 代碼就放在 執(zhí)行棧 中，那異步代碼呢？瀏覽器會(huì)將 dom事件 ajax setTimeout等異步代碼放到隊(duì)列中，等待執(zhí)行棧中的代碼都執(zhí)行完畢，才會(huì)執(zhí)行隊(duì)列中的代碼，是不是有點(diǎn)像發(fā)布訂閱模式。
console.log(1); setTimeout(() => { console.log(2); }, 0); console.log(3); 復(fù)制代碼
根據(jù)之前說(shuō)的，setTimeout 會(huì)被放到隊(duì)列中，等待執(zhí)行棧中的代碼執(zhí)行完畢才會(huì)執(zhí)行，所以會(huì)輸出1, 3, 2
但是異步代碼也是有區(qū)別的：
console.log(1) setTimeout(() => { console.log(2) }, 0) Promise.resolve().then(() => { console.log(3) }) 復(fù)制代碼
輸出的永遠(yuǎn)是1, 3, 2, 也就是說(shuō) promise 在 setTimeout 之前執(zhí)行了。這是因?yàn)?異步任務(wù) 分為 微任務(wù)(microtask) 和 宏任務(wù)(task)，執(zhí)行的順序是 執(zhí)行棧中的代碼 => 微任務(wù) => 宏任務(wù)。
展開(kāi) 終極蛇皮上帝視角之微信小程序之告別 setData
更進(jìn)一步地，可以實(shí)現(xiàn) h5 和小程序 js 部分代碼的同構(gòu)
更進(jìn)一步地，增加模板編譯和解析就可以連 wxml/html 部分也同構(gòu)
更進(jìn)一步地，兼容 RN/Weex/快應(yīng)用
更進(jìn)一步地，世界大同，天下為公，前端工程師全部失業(yè)...23333
0.源碼地址
github 地址
1.綁定簡(jiǎn)單屬性
第一步我們先定一個(gè)小目標(biāo)：掙他一個(gè)億！！！
對(duì)于簡(jiǎn)單非嵌套屬性（非對(duì)象，數(shù)組），直接對(duì)其賦值就能改變界面。
<!-- index.wxml --> <view>msg: {{ msg }}</view> <button bindtap="tapMsg">change msg</button> 復(fù)制代碼
// index.js TuaPage({ data () { return { msg: 'hello world', } }, methods: { tapMsg () { this.msg = this.reverseStr(this.msg) }, reverseStr (str) { return str.split('').reverse().join('') }, }, }) 復(fù)制代碼
這一步很簡(jiǎn)單啦，直接對(duì)于 data 中的每個(gè)屬性都綁定下 getter、setter，在 setter 中調(diào)用下 this.setData 就好啦。
展開(kāi) 