AngularJS 事件传播($broadcast() || $emit())

前言 由于某种原因我们需要在不同的 controller 之间进行通信,以达到一些特别的需要。那么我们就可以用AngularJS 给我们提供的两个方法配合使用来达到预期效果。这两个方法就是$broadcast() 和 $emit()。 费话少说 $broadcast() $broadcast() 翻译成中文就是广播。也就是上级向下级推送信息。类似于原生 JavaScript 中的事件捕获。 $emit() $emit() 与$broadcast() 正好相反。$emit() 方法向上推...

2017
07-30

Angularjs ngRoute 用法

前言 Angularjs (即Angular 1),虽然 Angular 2 及以上版本已经放出,但 Angular 1 想全身而退,似乎又有点早,所以对于前辈我们需要送上足够的尊重。所以本文只要分享的是 Angularjs 中的ngRout 插件。 ngRoute 初识 ngRoute 中包含的东西也不是很多,主要有以下一些: 1、$routeProvider(when、otherwise) 2、$routeParams (参数) 3、事件($on、$routeChangeStart、$routeChangeSuccess、rout...

2017
07-29

JavaScript 实现照片墙效果

照片墙效果相信你也看到过不少,在这里我们也尝试去做了一个,没有炫丽的效果,没有多余的文字,一时按捺不住成就感,在此把在大神眼里不值一提的照片墙效果献上。请多多包含! HTML 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>照片墙效果-云库前端</title> <link rel="stylesheet" href="./css/style.css">...

2017
06-21

苹果系统菜单动感地缩放效果

苹果系统好用是公认的,虽然有很多限制,但还是无法阻止你去用它。这一次要分享的是一个苹果系统底部的菜单效果。 效果演示:http://yunkus.com/demo/apple-macos-menu/ CSS 代码 .menuBox{ position: absolute; bottom: 0; left: 0; width: 100%; text-align: center; } .menuBox img{ width: 64px; height: 64px; cursor: pointer; } HTML 代码 <div id="...

2017
06-15

JavaScript 实现图片放大效果

图片放大效果在商城类网站最为党见。这种效果不仅提升了网站的性能,切省了流量,还能带来更好的用户体验,何乐而不为。当你在网上商城看某个产品时,注重细节的你是不是会很自然地去把鼠标放到左边的小图片上查看产品的大图。这种效果可能会让人的购买欲倍增,毕业图片都是做得很高大尚的。好了现在回到正题上,这个效果要怎么做? 首先人们得理清下思路,想想这个功能都有会涉及到什么东西。不要觉得这个...

2017
06-10

JavaScript 组件封装的基本套路

这篇文章没有过多的言语来说明什么是组件封装,封装组件有什么好处,这里只会贴出一段代码以便自己日后查阅,如果你碰巧看到了这篇文章,那么我只能跟您说声抱歉了。因为没有过多的说明,可能会让你看完之后更加困惑。所以你用眼睛扫一下,觉得没意思的话,我建议你就不用再往下看了。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>...

2017
06-08

JavaScript 面向对象的继承

什么是面向对象的继承 继承:在不影响影响父类功能及完整性的情况下,子类可以继承父类的一些功能。一个子类(派生类)可以继承自另一个父类(基类),派生类可以覆盖来自基类的方法。在基类中调用派生类对象的方法时,如果这个方法被派生类覆盖,那么应调用派生类的方法(多态) JavaScript 会沿着原型链查找方法,一旦在派生类找到了同名方法,就不会使用基类的方法。 我们先来创建一个自定义对象(父...

2017
05-30

JavaScript 中面向对象的属性和方法

JavaScript 中面向对象的属性和方法比如 hasOwnProperty、constructor ,虽然不是很常用,但是了解它们对于学习 JavaScript 还是有帮助的。下面我们就来看看这些属性和方法 hasOwnProperty() hasOwnProperty:判断是否是对象自身下面的属性 var arr = []; arr.Site = "云库网"; Array.prototype.siteDomain = "yunkus.com"; console.log(arr.hasOwnProperty("site")); // true console.log(arr.hasOw...

2017
05-30

JavaScript 中的包装对象

请看下面这几行代码: var str = "yunkus"; str.length str.charAt(0); str.toUpperCase(); console.log( typeof str ); 相信像上面这样写,你肯定不会觉得奇怪,因为平时你也是这么使用的。但如果你仔细想一想,心里就会有一个疑惑:为什么基本类型也有属性和方法,这不是对象的专利吗?我们都知道 str 是一个字符串类型,也就是基本类型,为什么还会有属性和方法,它是通过什么方式实现的? 没错就是...

2017
05-28

JavaScript 面向对象编程详解

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

2017
05-22