「Stay hungry，stay foolish.」

闭包是 JavaScript 的一个重要知识点，对于学前端的人来说是必须要理解的一个知识点，它其实已经时不时地被我们使用着，只不过我们“日用而不知”，本文带你一起来学习下闭包。 全局作用域与局部作用域在认识闭包之前，首先要了解下 JavaScript 的作用域概念。看看下面这段代码：12345var x = 2;function test() { return x * x;&... 阅读全文…

JavaScript 的标准 ECMAScript6 到目前为止已经得到广泛使用并被绝大数浏览器所支持，相比 ES5 ，ES6 增加了许多新特性，帮助开发者简化了许多操作，下面一起来看看这些新特性。 箭头函数ES6 新增了用 => 来表示函数，在这之前，定义一个加法函数是这样子的123function add (x,y) { return x + y;} 而现... 阅读全文…

vue基础环境搭建使用 vue 脚手架 vue-cli 开启项目,npm 全局安装1npm install -g vue-cli 查看是否安装成功 vue listcd 进入到创建好的 sell (项目名称，可自取)目录下,执行 vue init webpack, 这样就创建好了一个完整项目所需的配置文件。webpack 是一个环境，它可以将各种资源打包，然后输出 js,css,渲染图片等。... 阅读全文…

CSS 变量是 CSS 引入的一个新特性，目前绝大多数浏览器已经支持了，它可以帮助我们用更少的代码写出同样多的样式，大大提高了工作效率，本篇文章将教你如何使用 CSS 变量（css variable）。 变量声明使用 :root 来声明 css 变量，root 相当于根元素 html，例如声明一个背景颜色为红色的 red 变量,示例如下123:root{ --red: #f0... 阅读全文…

在学 CSS 的时候偶尔都会碰到 flex 布局，由于一直以来都使用传统的 display ，float ，以及 position 来实现基本的布局，因此对 flex 布局没有过多的了解。但对于一些特殊的布局，flex 布局会相对友好些。于是在网上查了资料学习后，也用这篇文章来记录下。 首先要了解下什么是 flex 布局，来看下 MDN web docs 对其的解释： Flexible B... 阅读全文…

侧边导航栏以及回到顶部已经越来越成为每个网站的必要功能之一，主要向网站的访客展示一些电话、客服QQ、邮箱或者其它信息，通常附带一个「回到顶部」的箭头。网上有很多关于这类效果的例子，姑且自己也总结一个出来，有需要的可以参考。不同的样式效果虽然不同，但原理都是差不多的，下面以小米商城的右侧栏为例 ... 阅读全文…

不管你是否对 Photoshop 有深入的研究，现在抠图、修图已成为很多大学生的必备技能， 在这篇博客中，你将学习到抠图，将下面图 1 中的人以及婚纱抠出来，放到图 2 的风景图中， 图 1 ... 阅读全文…

有时候拍了一张图片想分享到社交网络上，单单把整张图片放上去有些许单薄，这时可以尝试用 PS 制作一个相框，小小地美化一下，看起来也舒服些。首先选择你想制作相框的图片，打开 Photoshop ，把图片直接拖进就可以开始编辑。制作相框的简单步骤如下：第一步，双击右下角图层面板，此时会弹出一个「新建图层」的提示框，点击「确定」即可解锁背景图层，这里随便选取了以下图片： ... 阅读全文…

现在很多网站都会用到轮播图效果，轮播图的应用会给你的网站增色不少，本文将一步步带你用原生JavaScript捣鼓出一个轮播图，如果有不正确的地方希望指出，一起交流讨论，先来看下轮播图用到的基本知识点:1.绝对定位与相对定位2.overflow: hidden;3.闭包 HTML布局12345678910111213141516171819202122232425262728293031323... 阅读全文…

class继承之前讲到JavaScript中并没有类的概念，所以只能通过原型去实现类以及继承的效果，这样做代码实现量大，而且还要实现正确的原型链指向，比较麻烦。现在，最新的ES6开始引入了新的class关键字，终于可以像写Java的类那样写JavaScript的继承了！之前用函数实现类Student是这样的：123456function Student(name) { this.... 阅读全文…