发表于: 2017-05-07 09:52:32
1 996
今天完成的事情:
今天顺势把昨天看的Javascript 面向对象编程(一):封装这篇文章的后两篇也看了。
之前提过“封装”就是把属性和方法集结起来封装成一个对象,然后就可以从原型对象生成实例对象,如原型对象是Animal,实例对象可以是Cat,Cat继承Animal的所有属性和方法。
第二篇文章讲的是构造函数的继承,第三篇是非构造函数的继承。内容和之前小课堂讲的有重合的地方,也有新东西,看完还是收获良多。
之后学习了AngularJS路由的内容,通过路由可以实现多视图的单页Web应用(SPA),AngularJS 路由通过 # + 标记 帮助我们区分不同的逻辑页面并将不同的页面绑定到对应的控制器上。
明天计划的事情:
完成任务6
遇到的问题:
最近看的太多,写的太少,要赶快调整状态,光看不写是学编程的大忌
收获:
构造函数的继承——利用空对象作为中介
function Animal(){
this.species = "动物";
}
var F = function(){};
F.prototype = Animal.prototype;
Cat.prototype = new F();
Cat.prototype.constructor = Cat;
F是空对象,所以几乎不占内存。这时,修改Cat的prototype对象,就不会影响到Animal的prototype对象。
alert(Animal.prototype.constructor); // Animal
可以把上面的方法,封装成一个函数,便于使用
function extend(Child, Parent) {
var F = function(){};
F.prototype = Parent.prototype;
Child.prototype = new F();
Child.prototype.constructor = Child;
Child.uber = Parent.prototype;
}
使用的时候,方法如下
extend(Cat,Animal);
var cat1 = new Cat("大毛","黄色");
alert(cat1.species); // 动物
函数体最后一行
Child.uber = Parent.prototype;
意思是为子对象设一个uber属性,这个属性直接指向父对象的prototype属性。这等于在子对象上打开一条通道,可以直接调用父对象的方法。这一行放在这里,只是为了实现继承的完备性,纯属备用性质。
AngularJS路由
首先要载入实现路由的js文件:angular-route.js
ngRoute 模块作为主应用模块的依赖模块
angular.module('routingDemoApp',['ngRoute'])
使用 ngView 指令。
<div ng-view></div>
该 div 内的 HTML 内容会根据路由的变化而变化。
配置 $routeProvider,AngularJS $routeProvider 用来定义路由规则。
module.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/',{template:'这是首页页面'})
.when('/computers',{template:'这是电脑分类页面'})
.when('/printers',{template:'这是打印机页面'})
.otherwise({redirectTo:'/'});
}]);
评论