sf双十一解密答案及详解及分析思路

前言

今天上班百无聊赖的在群里发现一个有趣的链接光棍节程序员闯关秀,点开之后浑身颤抖如获至宝啊。 我最喜欢这种挑战了。 花了一个小时的时间,终于全部解密。下面奉上思路和分析以及代码。由于sf良好的前端氛围,这里全部用JavaScript作为工具语言。 喜欢python的朋友可以参见我另一篇用python作为示例语言的解密一个有意思的解密 话不多说,时间宝贵,我们立马开始解密之旅吧:)

 

冷门JS技巧

前端已经被玩儿坏了!像console.log()可以向控制台输出图片等炫酷的玩意已经不是什么新闻了,像用||操作符给变量赋默认值也是人尽皆知的旧闻了,今天看到Quora上一个帖子,瞬间又GET了好多前端技能,一些属于技巧,一些则是闻所未闻的冷知识,一时间还消化不过来。现分类整理出来分享给大家,也补充了一些平时的积累和扩展了一些内容。 HTML篇 浏览器地址栏运行JavaScript代码 这个很多人应该还是知道的,在浏览器地址栏可以直接运行JavaScript代码,做法是以javascript:开头后跟要执行的语句。比如: javascript:alert('hello from ...

node.js 初体验

先搞点前戏热热场 – 为什么写这篇文章: 1.前段时间单位有新项目启动,服务端要做的工作不多也不算麻烦,就是处理一些中间层的服务,而且我们团队里面个个都会JavaScript,领导就决定试试服务器端的JavaScript,结果本人有幸被派去研究了几天Node,怀着鸡冻的心情开始了node.js的篇章,这篇文章也就是为这几天研究的总结。 2.一个JavaScript工程师如果没听过node.js那么我想你是不是错过了什么,每个优秀的前端工程师都有必要去了解后台处理流程,那么如果又能从JavaScript出发,岂不是一件很美妙的事么。 3.互联网的火热使得Ja ...

js模块化历程

这是一篇关于js模块化历程的长长的流水账,记录js模块化思想的诞生与变迁,展望ES6模块化标准的未来。经历过这段历史的人或许会感到沧桑,没经历过的人也应该知道这段历史。 无模块时代 在ajax还未提出之前,js还只是一种“玩具语言”,由Brendan Eich花了不到十天时间发明,用来在网页上进行表单校验、实现简单的动画效果等等,你可以回想一下那个网页上到处有公告块飘来飘去的时代。 这个时候并没有前端工程师,服务端工程师只需在页面上随便写写js就能搞定需求。那个时候的前端代码大概像这样: if(xx){ //....... } el ...

常用的正则表达式整理

1.    平时做网站经常要用正则表达式,下面是一些讲解和例子,仅供大家参考和修改使用: 2.    “^\d+$”  //非负整数(正整数 + 0) 3.    “^[0-9]*[1-9][0-9]*$”  //正整数 4.    “^((-\d+)|(0+))$”  //非正整数(负整数 + 0) 5.    “^-[0-9]*[1-9][0-9]*$”  //负整数 6.    “^-?\d+$”    //整数 7.    “^\d+(\.\d+)?$”  //非负浮点数(正浮点数 + 0) 8.    “^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[ ...

Javascript 的addEventListener()attachEvent()区别分析

大家都知道事件的用法就是当某个事件(状况)被触发了之后就会去执行某个Function, 尤其是Javascript, 在当红AJAX的催化下, 了解JavascriptEvent用法更加重要, 在这里就大概介绍一下avascriptEvent用法.  <!–more–> Mozilla中: addEventListener的使用方式: target.addEventListener(type, listener, useCapture); target: 文档节点、document、window 或 XMLHttpRequest。 type: 字符串,事件名称,不含“on”,比如“click”、“mouseover”、“keydown”等。 listener :实现了 EventListener 接口或者是 Java ...

使用 webpack + react + redux + es6 开发组件化前端项目

因为最近在工作中尝试了 webpack、react、redux、es6 技术栈,所以总结出了一套 boilerplate,以便下次做项目时可以快速开始,并进行持续优化。 项目结构规划 每个模块相关的 css、img、js 文件都放在一起,比较直观,删除模块时也会方便许多。测试文件也同样放在一起,哪些模块有没有写测试,哪些测试应该一起随模块删除,一目了然。 build |-- webpack.config.js # 公共配置 |-- webpack.dev.js # 开发配置 |-- webpack.release.js # 发布配置 docs ...

了解HTML/HTML5中的download属性

一、download属性是个什么鬼? 首先看下面这种截图: 如果我们想实现点击上面的下载按钮下载一张图片,你会如何实现? 我们可能会想到一个最简单的方法,就是直接按钮a标签链接一张图片,类似下面这样: 1 <a href=“large.jpg”>下载</a> 但是,想法虽好,实际效果却不是我们想要的,因为浏览器可以直接浏览图片,因此,我们点击下面的“下载”链接,并是不下载图片,而是在新窗口直接浏览图片。 下载 看我的眼睛, 于是,基本上,目前的实现都是放弃HTML策略,而是使用,例如php这样的 ...

浅谈浏览器http的缓存机制

针对浏览器的http缓存的分析也算是老生常谈了,每隔一段时间就会冒出一篇不错的文章,其原理也是各大公司面试时几乎必考的问题。 之所以还写一篇这样的文章,是因为近期都在搞新技术,想“回归”下基础,也希望尽量总结的更详尽些。 那么你是否还需要阅读本篇文章呢?可以试着回答下面这个问题: 我们在访问百度首页的时候,会发现不管怎么刷新页面,静态资源基本都是返回 200(from cache): 随便点开一个静态资源是酱的: 哎哟有Response报头数据呢,看来服务器也正常返回了etag什么鬼的应有尽有,那状态200不是应该对应的非缓存状 ...

html5media:兼容、高效的HTML5视频播放器

一劳永逸的音频,视频解决办法 随着HTML5的风行,<video>、<audio>多媒体标签使得多媒体的插入更加容易,但是它们对低版本浏览器的支持度不够高,所以heml5media来了。 大部分主流浏览器,一条代码解决兼容 不要安装任何插件 兼容各种浏览器和移动端 多快好省的解决办法 使用 1 引用 XHTML 1 <script src=”//api.html5media.info/1.1.8/html5media.min.js></script> 2 插入标签 XHTML 1 <video src=”video.mp4” width=”320” height=”200” controls prelo ...

巧用 CSS 的 :target 选择器,打造没有 JS 的 UI 效果

除了链接到新页面,链接元素(<a> 标签)还可以引用到某章节、片段或其它同页面元素,而这几类链接普遍运用于同一页面的导航。 CSS 伪类选择器 :target 是文档内部链接,通过链接元素的 href 属性指定页面某部分,然后选择和为目标元素添加样式的。例如,如果你有一个锚点标签是链接到一篇文章的“深度阅读”部分… XHTML 1 2 3 4 5 6 7 8 9 <a href=“#further-reading” title=“Further reading resources” /> <!– … –> <section id=“further-resources” ...

如何通过 Vue+Webpack 来做通用的前端组件化架构设计

目录:   1. 架构选型     2. 架构目录介绍     3. 架构说明     4. 招聘消息   目前如果要说比较流行的前端架构哪家强,屈指可数:reactjs、angularjs、emberjs、avalonjs、vuejs。 我个人接触使用过:avalonjs、angularjs、vuejs。因为工作以及前端团队能力的问题,所以在不同的公司,在开发工作中选用了不同的前端架构。 以下仅仅是代表我个人选用架构的一些看法和理由,如下: angular: 我觉得angularjs的学习上手周期比较长,可能遇到问题,都无法立刻解决,而且编码的质量明显的很差,如果团队没有制定规范,那写出来的代 ...

前端开发者不得不知的ES6十大特性

ES6(ECMAScript2015)的出现,无疑给前端开发人员带来了新的惊喜,它包含了一些很棒的新特性,可以更加方便的实现很多复杂的操作,提高开发人员的效率。 本文主要针对ES6做一个简要介绍。 主要译自:  http://webapplog.com/ES6/comment-page-1/。也许你还不知道ES6是什么, 实际上, 它是一种新的javascript规范。在这个大家都很忙碌的时代,如果你想对ES6有一个快速的了解,那么请继续往下读,去了解当今最流行的编程语言JavaScript最新一代的十大特性。 以下是ES6排名前十的最佳特性列表(排名不分先后): Default Parameters( ...

用 JavaScript 构建一个3D引擎

我们可以在网页中轻易地展示图片或其他平面形状。然而,当要展示 3D 模型时,事情就不那么简单了,因为三维空间比二维空间更复杂。为了实现 3D 效果,我们可以使用专门的技术和库,如 WebGL 和 Three.js。 然而,如果你只是想展示一些基本形状时,如立方体,那么这些技术就显得大材小用了。另外,使用它们并不会帮助你理解其工作原理,或解答如何在平面中显示 3D 形状的疑问。 我编写这篇教程的目的是:阐述如何在 web 中构建一个简单的 3D 引擎(无 WebGL)。我们将首先学习如何存储 3D 模型,然后学习如何在两种不同视图(正视图和 ...