JavaScript 面向对象编程详解

前言 JavaScript 面向对象编程估计你平时也看到了不少,只不过你可能不知道它就是 JavaScript 面向对象编程,这也就是为什么你会来到这里的原因。话不多说,我们马上开始面向对象之旅。 什么是面向对象编程 面向对象编程(Object Oriented Programming,OOP,面向对象程序设计)简单的说就是用对象的思想去编程,也就是创造一个对象,然后往这个对象身上添加若干属性和方法。 面向对象编程特点 1.封装...

2017
05-22

移动端一个像素问题解决方案

前言 移动端(手机等)已成为人们最常用的设备,对于我们这些前端开发人员来说,为了让用户用得爽,看得服务是不够的,因为你有时候还得听一个人的话,他就是传说中的设计师,比如:有时他会跟你讨论这样一个问题,为什么这条线看起来比我原型稿的粗一些,这也太粗了吧?诸如此类的话,让你连反驳的机会都没有,于是也只能暗暗的研究,找解决方法。 起因 这个原因真的不能怪你,但必需要你自己解决。生...

2017
05-21

CSS3 transform 你知多少?

transform 属于CSS3 的新属性。这个属性可以让我们实现很多以前只能通过 JavaScript 来实现的效果。比如元素的运动(缩放、旋转……)。所以这个新属性还是有必要用专门一篇文章来介绍它。毕竟它让我们通过了另一种方式让网页走向多姿多彩的世界。如果你觉得 transform 只能给你带来一点点便利,那么你就大错特错了,因为 transform 除了可以实现 2D 效果外,它还可以实现 3D 效果。现在让我们开...

2017
05-08

事件冒泡与事件捕获详解

在前端里,说到交互我们就不得不提提 JavaScript 中的事件,而事件又分为很多种,比如:点击事件。但这篇文章的主要内容不是分析有什么事件,而是在另一个角度来了解事件机制。正如标题所说的冒泡以及捕获。 一个事件被触发后,一般会有三个不同的阶段:捕获阶段、目标阶段和冒泡阶段。 捕获阶段:从文档的根节点开始流到目标节点。 目标阶段:当到达目标节点时,进入目标阶段。 冒泡阶段:冒泡正好跟捕获...

2017
04-30

移动端触摸(touch)事件

移动端时代已经到来,作为前端开发的我们没有理由也不应该坐井观天,而是勇敢地跳出心里的那口井,去拥抱蔚蓝的天空。该来的总会来,我们要做的就是接受未知的挑战。正如你所看到的,这是一篇关于移动端触摸事件的文章,也就是我们平时在手机中用得最多的动作:touch。现在让我们开始 touch touch touch 吧! Touch 事件 首先 touch 包含三类事件,它们分别是:touchstart、touchmove、touchend 。望文生...

2017
04-23

按需加载图片(图片懒加载)

前言 按需要加载图片,这是一个非常实用的功能,不仅可以提高网站的性能,还可以为你节省流量。对于用虚拟主机的朋友来说,如果你的网站是一个图片网站或者图片比较多的网站,那么图片懒加载功能真不能少。 原理 实现图片懒加载的原理也非常地简单,默认情况下不给图片 scr 属性赋值。当满足一定的条件时才把图片地址取出来赋值给 src 属性。一般地,这上为了让网站页面有更好的用户体验,我们都会预先...

2017
04-18

Visual Studio Code 让高效进行到底

准备 一直都是用 sublime text 作为开发工具,用久了自然而然会觉得生活无趣,于是决定试试微软的新产品  Visual Studio Code 。 下载地址:https://code.visualstudio.com/ 安装完后给我的第一感觉就是天边送来了一波难以抵抗的视觉盛宴。 在这里界面里你就可以看到一个非常有情怀的快速链接:安装键盘快捷方式(你可以安装包括但不限于 Vim、Sublime、Atom 的键盘快捷方式),所有这个 coding 工具还...

2017
04-03

RequireJS 教程详解

什么是 RequireJS RequireJS 用于代码模块化,RequireJS 以一个相对于 baseUrl 的地址来加载所有的模块代码,使用 RequireJS 来开发,可以很好的避免变量污染全局环境。它的模块管理遵守AMD (Asynchronous Module Definition)规范,通过 define 方法来完成模块的定义以及模块代码的加载。 RequireJS 使用 引入 require.js <script src="js/require.js" defer async="true" data-main="js/main"&...

2017
04-02

移动端侧滑导航、侧滑菜单效果

手机端的侧滑导航、侧滑菜单效果极其地常见,这篇文章就是分享侧滑导航的制作过程。首先这是一个基于 jQuery 库的插件,其实不用 jQuery 库也是可以的,并且代码改起来也不能,这里就不作过多的讲解。 首先做这个效果的时候我们得分析下,要实现这个功能,我们需要什么技术。 所需技术 1.滑动,你可以JavaScript 实现 也可以用 CSS3 实现。这里我用CSS3 实现。 2.JavaScript 事件绑定解绑、事件禁用。 从...

2017
03-24

移动端列表索引效果

移动端列表索引效果非常实用,比如:手机通讯录。你可以根据字母来查找对应的内容。下面这个例子我是参考了 MUI 里的列表索引效果,写出来的代码,代码的结构基本一样,但功能会少一些,去掉了搜索框搜索,只有单纯的字母索引,不过这也基本够用了。这个效果是基于 jQuery 库的,所以在用的时候就记得引入 jQuery 库。 为了版面美观我专门用横屏截了个图,正如你所看到的,样板还是挺好看的,那功能怎么样...

2017
03-22
设置