xml地图|网站地图|网站标签 [设为首页] [加入收藏]
框架比较,Canvas画一张笑脸
分类:web前端

继承的实现方式及原型概述

2015/07/15 · JavaScript · 原型, 继承

原文出处: 名一的博客   

对于 OO 语言,有一句话叫“Everything is object”,虽然 JavaScript 不是严格意义上的面向对象语言,但如果想要理解 JS 中的继承,这句话必须时刻铭记于心。

JS 的语法非常灵活,所以有人觉得它简单,因为怎么写都是对的;也有人觉得它难,因为很难解释某些语法的设计,谁能告诉我为什么 typeof null 是 object 而 typeof undefined 是 undefined 吗?并且这是在 null == undefined 的前提下。很多我们自认为“懂”了的知识点,细细琢磨起来,还是会发现有很多盲点,“无畏源于无知”吧……

JS 框架比较:AngularJS vs ReactJS vs EmberJS

2016/12/08 · JavaScript · 1 评论 · AngularJS, EmberJS, ReactJS

原文出处: Nataliya Orlovska   译文出处:码农网 – 小峰   

选择最适合项目需求的JavaScript框架,可以提高你发布有竞争力的web app的能力。

最后,你对基于JavaScript的app或网站找到了一条奇妙的思路。选择正确的框架可能对你项目的成功有着相当大的影响。它可以影响你按时完成项目并在将来维护代码的能力。JavaScript框架,如Angular.js,Ember.js或React.js,给你的代码带来结构,并保持其有序化,从而使您你的app更灵活,更具可扩展性,并更容易开发。

图片 1

用HTML5 Canvas画一张笑脸

2015/02/24 · HTML5 · 2 评论 · Canvas, HTML5

本文由 伯乐在线 - cucr 翻译,JustinWu 校稿。未经许可,禁止转载!
英文出处:code.tutsplus.com。欢迎加入翻译组。

图片 2

今天,你将学习一项称为Canvas(画布)的web技术,以及它和文档对象模型(通常被称为DOM)的关联。这项技术非常强大,因为它使web开发人员能够通过使用JavaScript访问和修改HTML元素。

现在你可能想知道为什么我们需要大刀阔斧地使用JavaScript。简而言之,HTML和JavaScript是相互依存的,一些HTML组件,如canvas元素,并不能脱离JavaScript单独使用。毕竟,如果我们不能在上面绘图,那canvas能派什么用处呢?

为了更好地理解这个概念,我们一起通过一个示例项目来尝试画一个简单的笑脸。让我们开始吧。

1. 简单对象

既然是讲继承,自然是从最简单的对象说起:

JavaScript

var dog = { name: 'tom' }

1
2
3
var dog = {
  name: 'tom'
}

这便是对象直接量了。每一个对象直接量都是 Object 的子类,即

JavaScript

dog instanceof Object; // true

1
dog instanceof Object; // true

Javascript场景的易变性

Web开发的变化发生的很快。几乎每个月都会引入一个新的JavaScript框架,并且现有的框架经常被更新。由于这些框架是开放源代码的,因此世界各地的大型社区也都可以不断地使之丰满起来。因此,了解每个框架的优点和它们之间的区别并不是一件容易的事情。

开始

首先创建一个新目录来保存你的项目文件,然后打开你最喜欢的文本编辑器或web开发工具。一旦你这样做了,你应该创建一个空的index.html和一个空的script.js,之后我们将继续编辑。

图片 3

接下来,我们来修改index.html文件,这不会涉及很多东西,因为我们项目的大部分代码将用JavaScript编写。我们需要在HTML中做的是创建一个canvas元素和引用script.js,这相当直截了当:

XHTML

<!DOCTYPE html><body> <canvas id='canvas' width='640' height='480'></canvas> <script type='text/javascript' src='script.js'></script> </body></html>

1
2
3
4
5
6
<!DOCTYPE html><body>
 
   <canvas id='canvas' width='640' height='480'></canvas>
   <script type='text/javascript' src='script.js'></script>
 
</body></html>

这么解释,我使用一组标记< html >和< body>,这样,我们可以通过body为文档添加更多的元素。抓住这个机会,我完成了一个id属性为canvas的640*480的canvas元素。

这个属性只是简单地为元素加上一个字符串,目的是为了唯一识别,稍后我们将利用这个属性,在JavaScript文件中定位我们的canvas元素。接下来,我们再使用<script>标记引用JavaScript文件,它指定JavaScript的语言类型和script.js文件的路径。

2. 构造函数

JS 中的构造函数与普通函数并没有什么两样,只不过在调用时,前面加上了 new 关键字,就当成是构造函数了。

JavaScript

function Dog(name) { this.name = name; } var dog = new Dog('tom'); dog instanceof Dog; // true

1
2
3
4
5
6
7
function Dog(name) {
  this.name = name;
}
 
var dog = new Dog('tom');
 
dog instanceof Dog; // true

两个问题,第一,不加 new 关键字有什么后果?

那么 Dog 函数中的 this 在上下文(Context)中被解释为全局变量,具体在浏览器端的话是 window 对象,在 node 环境下是一个 global 对象。

第二,dog 的值是什么?很简单,undefined 。Dog 函数没有返回任何值,执行结束后,dog 的值自然是 undefined 。

关于 new 的过程,这里也顺便介绍一下,这个对后面理解原型(prototype)有很大的帮助:

  1. 创建一个空的对象,仅包含 Object 的属性和方法。
  2. 将 prototype 中的属性和方法创建一份引用,赋给新对象。
  3. 将 this 上的属性和方法新建一份,赋给新对象。
  4. 返回 this 对象,忽略 return 语句。

需要明确的是,prototype 上的属性和方法是实例间共享的,this 上的属性和方法是每个实例独有的。

深入Angular vs React vs Ember

许多开发人员因为JavaScript框架的种类繁多而感到眼花缭乱——框架外观和功能非常不同。

让我们来比较一下三个最流行和广泛使用的JavaScript框架的优势:AngularJS,ReactJS和EmberJS。

框架

AngularJS

ReactJS

Ember.js

是什么?

超级JavaScript MVW框架

一个不止用于构建用户界面的JavaScript库

一个用于创建高要求的web应用程序的框架

建立

由MiškoHevery建立于2009年

创建者:Jordan Walke,2013年开源

最初由Yehuda Katz于2007年创建叫做SproutCore,后被Facebook收购,并于2011年更名为EmberJS

官方主页

https://angularjs.org/

https://reactjs.net/

http://emberjs.com/

Github

https://github.com/angular/angular.js

https://github.com/facebook/react

https://github.com/emberjs/ember.js

Bug 报告

https://github.com/angular/angular.js/issues

https://github.com/facebook/react/issues

许可证

MIT

MIT

BSD-3-Clause

被使用的热门网站

Youtube, Vevo, Freelancer, Istockphoto, Weather, Sky Store

Facebook, Instagram, Khan Academy, New York Times, Airbnb, Flipkart, Sony Lifelog

Apple Music, Yahoo!, LinkedIn, TinderBox, Netflix, Groupon

最适合使用的地方

构建高度活跃和交互式的Web应用程序。

数据设置频繁更改的大型Web应用程序

动态SPA

操作DOM

如其名称“文档对象模型”,我们需要通过使用另一种语言,调用接口访问HTML文档,在这里,我们使用的语言是JavaScript。为此,我们需要在内置文档对象上的布置一个简单引用。这个对象直接对应于我们的< html >标记,类似的,它是整个项目的基础,因为我们可以通过它来获取元素,执行变化。

JavaScript

var canvas = document.getElementById('canvas');

1
var canvas = document.getElementById('canvas');

还记得我们如何使用id =“canvas”来定义一个canvas元素吗?现在我们使用document.getElementById方法,从HTML文档获取这个元素,我们简单地传递匹配所需元素id的字符串。现在我们已经获取了这个元素,接下来就可以用其进行绘画工作了。

为了使用canvas进行绘画,我们必须操作它的上下文。令人惊讶的是,一个canvas不包含任何绘图的方法或属性,但是它的上下文对象有我们需要的所有方法。一个上下文定义如下所示:

JavaScript

var context = canvas.getContext('2d');

1
var context = canvas.getContext('2d');

每一个canvas有几个不同的上下文,根据程序的目的,只需要一个二维的上下文就足够了,它将获得我们需要创建笑脸的所有绘图方法。

在我们开始之前,我必须告知您,上下文存储了两种颜色属性,一个用于画笔(stroke),一个用于填充(fill)。对于我们的笑脸,需要设置填充为黄色,画笔为黑色。

JavaScript

context.fillStyle = 'yellow'; context.strokeStyle = 'black';

1
2
context.fillStyle = 'yellow';
context.strokeStyle = 'black';

设置完上下文所需的颜色后,我们必须为脸画一个圆。不幸的是,上下文中没有圆的预定义方法,因此我们需要使用所谓的路径(path)。路径只是一系列的相连的直线和曲线,路径在绘图完成后关闭。

JavaScript

context.beginPath(); context.arc(320, 240, 200, 0, 2 * Math.PI); context.fill(); context.stroke(); context.closePath();

1
2
3
4
5
context.beginPath();
context.arc(320, 240, 200, 0, 2 * Math.PI);
context.fill();
context.stroke();
context.closePath();

这样解释,我们运用上下文开始一个新的路径。接下来,我们在点(320、240)上创建一个半径为200像素的圆弧。最后两个参数指定构建圆弧的初始和最终角度,所以我们传递0和2 *Math.PI,来创建一个完整的圆。最后,我们运用上下文基于我们已经设置的颜色进行填充并画出路径。

尽管关闭路径不是脚本的功能所必须的,但我们还是需要关闭路径,这样就可以开始绘制笑脸中新的眼睛和嘴。眼睛可以通过同样的方式完成,每个眼睛需要较小的半径和不同的位置。但首先我们必须记住设置填充颜色为白色。

JavaScript

context.fillStyle = 'white'; context.beginPath(); context.arc(270, 175, 30, 0, 2 * Math.PI); context.fill(); context.stroke(); context.closePath(); context.beginPath(); context.arc(370, 175, 30, 0, 2 * Math.PI); context.fill(); context.stroke(); context.closePath();

1
2
3
4
5
6
7
8
9
10
11
12
13
context.fillStyle = 'white';
 
context.beginPath();
context.arc(270, 175, 30, 0, 2 * Math.PI);
context.fill();
context.stroke();
context.closePath();
 
context.beginPath();
context.arc(370, 175, 30, 0, 2 * Math.PI);
context.fill();
context.stroke();
context.closePath();

以上是关于眼睛的所有代码。现在嘴巴很相似,但这次我们不会填满圆弧,我们的角度将配置为一个半圆。要做到这一点,我们需要设置起始角度为零和结束角度为-1 * Math.PI。请记住,不要忘记将画笔的颜色设置为红色。

JavaScript

context.fillStyle = 'red'; context.beginPath(); context.arc(320, 240, 150, 0, -1 * Math.PI); context.fill() context.stroke(); context.closePath();

1
2
3
4
5
6
7
context.fillStyle = 'red';
 
context.beginPath();
context.arc(320, 240, 150, 0, -1 * Math.PI);
context.fill()
context.stroke();
context.closePath();

3. 引入 prototype

现在为 Dog 函数加上 prototype,看一个例子:

JavaScript

function Dog(name) { this.name = name; this.bark = function() {}; } Dog.prototype.jump = function() {}; Dog.prototype.species = 'Labrador'; Dog.prototype.teeth = ['1', '2', '3', '4']; var dog1 = new Dog('tom'), dog2 = new Dog('jerry'); dog1.bark !== dog2.bark; // true dog1.jump === dog2.jump; // true dog1.teeth.push('5'); dog2.teeth; // ['1', '2', '3', '4', '5']

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function Dog(name) {
  this.name = name;
  this.bark = function() {};
}
 
Dog.prototype.jump = function() {};
Dog.prototype.species = 'Labrador';
Dog.prototype.teeth = ['1', '2', '3', '4'];
 
var dog1 = new Dog('tom'),
    dog2 = new Dog('jerry');
 
dog1.bark !== dog2.bark; // true
dog1.jump === dog2.jump; // true
 
dog1.teeth.push('5');
dog2.teeth; // ['1', '2', '3', '4', '5']

看到有注释的那三行应该可以明白“引用”和“新建”的区别了。

那么我们经常说到的“原型链”到底是什么呢?这个术语出现在继承当中,它用于表示对象实例中的属性和方法来自于何处(哪个父类)。好吧,这是笔者的解释。

JavaScript

- Object bark: Dog/this.bark() name: 'tom' - __proto__: Object jump: Dog.prototype.jump() species: 'Labrador' + teeth: Array[4] + constructor: Dog() + __proto__: Object

1
2
3
4
5
6
7
8
9
- Object
  bark: Dog/this.bark()
  name: 'tom'
- __proto__: Object
    jump: Dog.prototype.jump()
    species: 'Labrador'
  + teeth: Array[4]
  + constructor: Dog()
  + __proto__: Object  

上面的是 dog1 的原型链,不知道够不够直观地描述“链”这个概念。

  1. 其中,bark 和 name 是定义在 this 中的,所以最顶层可以看到它俩。
  2. 然后,每一个对象都会有一个 __proto__ 属性(IE 11+),它表示定义在原型上的属性和方法,所以 jump、species 和 teeth 自然就在这儿了。
  3. 最后就一直向上找 __proto__ 中的属性和方法。

  4. 继承的几种实现


AngularJS: 框架领域的冠军

Angular.js是一个开源的Web应用程序框架,具有由Google提供的Model-View-Controller(MVC)架构(Angular 1)和Model-View-ViewModel(MVVM)架构(Angular 2)。它是上面提到的三个框架中最古老的。因此,它拥有最大的社区。 Angular.js通过使用指令扩展HTML的功能来解决开发SPA(单页应用程序)的问题。此框架强调让你的app快速完成和运行。

祝贺

干的不错。你已经完成了本教程,你做了一个很棒的笑脸,同时学习了更多关于Canvas、HTML、JavaScript,和文档对象模型的知识。如果你有任何问题,请留言。

点击这里查看程序的运行状况.

赞 2 收藏 2 评论

本文由澳门新葡亰手机版发布于web前端,转载请注明出处:框架比较,Canvas画一张笑脸

上一篇:没有了 下一篇:一篇真正教会你开发移动端页面的文章,你该知
猜你喜欢
热门排行
精彩图文