注册IMWeb前端社区, 你可以
第一时间获得最新、最火的技术干货
定期推送您所关注的专题文章
和大牛们一起讨论前端技术
获取IMWeb社区、前端相关的最新活动
立即注册
热文 更多

  • 操作符混淆工具

    序 从一段神奇的JS代码说起 前段时间在公众号看到一段神奇的代码,它长这个样子: (!(~+[])+{})[--[~[]][+[]]*[~+[]]+~~!+[]]+({}+[])[[~!+[]]*~+[]] 如果把这行代码扔到浏览器里面执行以下,就会输出 sb 字符串。[http://7tszky.com1.z0.glb.clouddn.com/FtAp-ZQTBoKHgkGdxlJXIEanw-Th] 这是什么鬼,还有这种操作? 走进科学时间 上面的代码由 !()*+-[]{}~ 这11种符号组成,其实这些符号都是JS的 操作符 ,而上面的代码在执行后转换成字符串则是因为: * 当操作符作用的操作数类型不一致或者不是基本类型时,JS将自动完成类型转化; * 不同的操作符具有不同的优先级 将上面的代码按照 操作符优先级 [https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Operator_Precedence] 进行区域划分,大致可以分为以下的几个部分。

  • React高阶组件(译)

    原文: https://daveceddia.com/extract-state-with-higher-order-components/ [https://daveceddia.com/extract-state-with-higher-order-components/] 高阶组件是对React代码进行更高层次重构的好方法,如果你想精简你的state和生命周期方法,那么高阶组件可以帮助你提取出可重用的函数。 什么是高阶组件?名字来源于高阶函数,一个函数可以接收另一个函数作为参数,并且有可能在执行后返回一个函数,这种函数就称之为高阶函数。你可能使用过高阶函数但是并没有真正意识到,例如 Array.forEach 、 Array.map 、 setTimeout 这些都是高阶函数,我们都知道这些函数全都是接受一个函数作为参数,当新的函数返回时,他已经发生了变化。 // Ok :) setTimeout(function() { // do a thing after 500ms }, 500); // Sure... [1, 2, 3].map(function(i) {

  • 用原生js写一个"多动症"的简历

    用原生JS写一个"多动症"的简历 预览地址 [https://qianlongo.github.io/resume-native/dist/] 源码地址 [https://github.com/qianlongo/resume-native] 最近在知乎上看到@方应杭用vue写了一个 会动的简历 [https://zhuanlan.zhihu.com/p/25541520] ,觉得挺好玩的,研究一下其实现思路,决定试试用原生js来实现。 http://odssgnnpf.bkt.clouddn.com/return.gif [http://odssgnnpf.bkt.clouddn.com/160529jhf0hrzhffcl8jh4.jpg] 会动的简历实现思路 这张会 动 的简历,就好像一个打字员在不断地录入文字,页面呈现动态效果。又好像一个早已经录制好影片,而我们只是坐在放映机前观看。 原理分两个部分 1. 页面能看见的不断跳动着的增加的文字,控制 2. 页面的布局效果由藏在"背后的" style 标签完成

  • 一个很low的问题,forEach怎么跳出循环?

    方法一: TRY CATCH const arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; const _ = require('lodash'); let outArr = []; try { arr.forEach(obj => { console.log(obj); if (obj < 3) { outArr.push(obj); } else { thrownewError('brack'); } }); } catch (err) { } 方法二:污染FOREACH 代码偷自 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/every

  • 微信小程序之购物车功能

    前言 以往的购物车,基本都是通过大量的 DOM 操作来实现。微信小程序其实跟 vue.js 的用法非常像,接下来就看看小程序可以怎样实现购物车功能。 需求 image [https://raw.githubusercontent.com/lin-xin/mini-apps-mall/master/image/1.gif] 先来弄清楚购物车的需求。 * 单选、全选和取消,而且会随着选中的商品计算出总价 * 单个商品购买数量的增加和减少 * 删除商品。当购物车为空时,页面会变为空购物车的布局 根据设计图,我们可以先实现静态页面。接下来,再看看一个购物车需要什么样的数据。 * 首先是一个商品列表(carts),列表里的单品需要:商品图(image),商品名(title),单价(price),数量(num),是否选中(selected),商品id(id) * 然后左下角的全选,需要一个字段(selectAllStatus)表示是否全选了 * 右下角的总价(totalPrice) * 最后需要知道购物车是否为空(hasList)

热问 更多