Menu
Woocommerce Menu

从本质认识JavaScript的原型继承和类继承,Web开发人员应有的15本免费电子书

0 Comment


从本质认识JavaScript的原型继承和类继承

2016/04/06 · JavaScript
· 1 评论 ·
继承

原文出处:
十年踪迹(@十年踪迹)   

JavaScript发展到今天,和其他语言不一样的一个特点是,有各种各样的“继承方式”,或者稍微准确一点的说法,叫做有各种各样的基于prototype的模拟类继承实现方式。

在ES6之前,JavaScript没有类继承的概念,因此使用者为了代码复用的目的,只能参考其他语言的“继承”,然后用prototype来模拟出对应的实现,于是有了各种继承方式,比如《JavaScript高级程序设计》上说的 原型链,借用构造函数,组合继承,原型式继承,寄生式继承,寄生组合式继承 等等

那么多继承方式,让第一次接触这一块的小伙伴们内心有点崩溃。然而,之所以有那么多继承方式,其实还是因为“模拟”二字,因为我们在说继承的时候不是在研究prototype本身,而是在用prototype和JS特性来模拟别的语言的类继承。

我们现在抛开这些种类繁多的继承方式,来看一下prototype的本质和我们为什么要模拟类继承。

HTML5 — 让拖放变的流行起来

2015/12/29 · HTML5 · 4
评论 ·
拖放

原文出处: 韩子迟   

先上 Demo,尽量用
chrome,代码可参考
Github。

在 HTML5 出现之前,页面元素的拖放需要监听 mousedown、mouseover 以及
mouseup 等一系列事件,然后改变元素的相对位置来实现这一效果。HTML
DnD(Drag-and-Drop)API 的出现,使得拖放变的简单。但是由于 DnD
尚处在草案阶段,各浏览器对其规范并未统一,有些事件在不同浏览器中会出现不同效果。

要使用
DnD,需要明确两件事情,一是需要拖动的元素,二是可放置拖动元素的位置。拖放无非是将元素从一个位置拖到另一个位置。

Web开发人员应有的15本免费电子书

2011/07/05 · HTML5,
JavaScript · 2
评论 ·
HTML5,
Javascript

当今互联网已经成为每一个人的信息知识来源。假如你想学习任何事情,可以很容易在互联网上轻松找到相关的信息,即使它是很简单的事情。在互联网上有成千上万的教程和指南可以用来学习与工作相关的技术和内容。

Web开发人员同样也经常通过互联网获取关于HTML和编码的相关知识。为了帮助这些开发人员,以下是我们收集的一些优秀电子书供大家学习。

  1. HTML5 Quick Learning
    Guide

图片 1

 

如果您想学习HTML5,这本电子书将帮助您学习所有HTML5的基本标签元素。

  1. Head First HTML with CSS and
    XHTML

图片 2

有了这本电子书,你可以使用HTML和CSS技术轻松地创建基于标准的网页。

  1. Best Practices for Developing a Web
    Site

图片 3

这是一个很好的电子书,将引导你建立一个网站和计划项目,无论你正在开发一个内部网站或外包项目。

  1. HTML Wtf?

图片 4

这本书简要概述了由HTML5带来的变化。

  1. HTML And
    XHTML

图片 5

一个了解HTML和XHTML的简单而全面的指南。

  1. Javascript Programming for The Absolute
    Beginner

图片 6

对JavaScript不了解?不要担心,这本书将帮助你学习JavaScript,即使你不知道任何关于JavaScript的知识。

  1. Dive into Accessibility

图片 7

这本电子书回答了一些关于如何建设一个网站的简单问题。

  1. Getting Real

图片 8

这本电子书介绍了在建设一个网站时需要注意的一些问题。

  1. Web Design in a
    Nutshell

图片 9

这本书包含了CSS与XHTML编码和Web设计所有相关的信息。

  1. Foundations of
    Ajax

图片 10

本书介绍了Ajax技术到现有应用或新开发应用程序所需要所有工具。

  1. Up to Speed on HTML5 and CSS
    3

图片 11

介绍关于新兴的HTML5和CSS3标准。

  1. Learning PHP
    5

图片 12

这本将帮助你学习PHP5拥有的一些高级功能,如面向对象功能和对XML与Web
Services的支持等。

  1. 20 Things I Learned about Browsers and The
    Web

图片 13

这本书包含了所有你想了解的关于网站、Cookie和历史记录等知识。

  1. Web Style Guide: 3rd
    Edition

图片 14

这本书将告诉你如何使你的网站更容易让大家使用。

  1. Essential Javascript and JQuery Design
    Patterns

图片 15

通过这本电子书,你将学习到如何使用Javascript和jQuery设计模式。

原文:smashinghub
译文:open-open

3 赞 25 收藏 2
评论

图片 16

原型继承

“原型”
这个词本身源自心理学,指神话、宗教、梦境、幻想、文学中不断重复出现的意象,它源自民族记忆和原始经验的集体潜意识。

所以,原型是一种抽象,代表事物表象之下的联系,用简单的话来说,就是原型描述事物与事物之间的相似性.

想象一个小孩子如何认知这个世界:

当小孩子没见过老虎的时候,大人可能会教他,老虎啊,就像是一只大猫。如果这个孩子碰巧常常和邻居家的猫咪玩耍,那么她不用去动物园见到真实的老虎,就能想象出老虎大概是长什么样子。

图片 17

这个故事有个更简单的表达,叫做“照猫画虎”。如果我们用JavaScript的原型来描述它,就是:

JavaScript

function Tiger(){ //… } Tiger.prototype = new Cat();
//老虎的原型是一只猫

1
2
3
4
5
function Tiger(){
    //…
}
 
Tiger.prototype = new Cat(); //老虎的原型是一只猫

很显然,“照猫画虎”(或者反过来“照虎画猫”,也可以,取决孩子于先认识老虎还是先认识猫)是一种认知模式,它让人类儿童不需要在脑海里重新完全构建一只老虎的全部信息,而可以通过她熟悉的猫咪的“复用”得到老虎的大部分信息,接下来她只需要去到动物园,去观察老虎和猫咪的不同部分,就可以正确认知什么是老虎了。这段话用JavaScript可以描述如下:

JavaScript

function Cat(){ } //小猫喵喵叫 Cat.prototype.say = function(){ return
“喵”; } //小猫会爬树 Cat.prototype.climb = function(){ return
“我会爬树”; } function Tiger(){ } Tiger.prototype = new Cat();
//老虎的叫声和小猫不同,但老虎也会爬树 Tiger.prototype.say = function(){
return “嗷”; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function Cat(){
 
}
//小猫喵喵叫
Cat.prototype.say = function(){    
  return "喵";
}
//小猫会爬树
Cat.prototype.climb = function(){
  return "我会爬树";
}
 
function Tiger(){
 
}
Tiger.prototype = new Cat();
 
//老虎的叫声和小猫不同,但老虎也会爬树
Tiger.prototype.say = function(){
  return "嗷";
}

所以,原型可以通过描述两个事物之间的相似关系来复用代码,我们可以把这种复用代码的模式称为原型继承。

Drag


首先我们需要指定要拖动的元素,设置方式很简单,给该 DOM 元素设置
draggable 属性,属性值设置为 true。比如这样:

<code> <img src=”images/0.jpg” draggable=”true” id=”img0″/>
</code>

1
2
3
<code>
  <img src="images/0.jpg" draggable="true" id="img0"/>
</code>

事实上,以上代码多此一举了,页面中的图片(img)、链接(带 href 的 a
标签)以及文本默认即为可拖动。为了统一,最好还是都加上该 draggable
属性为好。

draggable 属性还有两个值,分别是 falseauto,顾名思义,false
即设置为不可拖动,auto 即为浏览器默认值。

当我们左键点击(按下)可拖动的 DOM 元素,轻轻移动,即触发 ondragstart
事件,该事件只会触发一次。通常我们会在 ondragstart
事件中记录正在被拖动的元素信息(ondrop 的时候好对其进行处理)。比如 demo
中记录了正在被拖动的元素 id:

for (var i = lis.length; i–; ) { lis[i].ondragstart = function(e) {
e.dataTransfer.setData(‘id’, e.target.id); }; }

1
2
3
4
5
for (var i = lis.length; i–; ) {
  lis[i].ondragstart = function(e) {
    e.dataTransfer.setData(‘id’, e.target.id);
  };
}

ondragstart 事件触发后,直到拖放事件结束,会一直触发 ondrag 事件。

类继承

几年之后,当时的小孩子长大了,随着她的知识结构不断丰富,她认识世界的方式也发生了一些变化,她学会了太多的动物,有喵喵叫的猫,百兽之王狮子,优雅的丛林之王老虎,还有豺狼、大象等等。

这时候,单纯的相似性的认知方式已经很少被使用在如此丰富的知识内容里,更加严谨的认知方式——分类,开始被更频繁使用。

图片 18

这时候当年的小孩会说,猫和狗都是动物,如果她碰巧学习的是专业的生物学,她可能还会说猫和狗都是脊索门哺乳纲,于是,相似性被“类”这一种更高程度的抽象表达取代,我们用JavaScript来描述:

JavaScript

class Animal{ eat(){} say(){} climb(){} … } class Cat extends Animal{
say(){return “喵”} } class Dog extends Animal{ say(){return “汪”} }

1
2
3
4
5
6
7
8
9
10
11
12
class Animal{
    eat(){}
    say(){}
    climb(){}
    …
}
class Cat extends Animal{
    say(){return "喵"}
}
class Dog extends Animal{
    say(){return "汪"}
}

Drop


其次我们需要明确被拖动元素可放置的位置,ondragover
事件规定在何处放置被拖动的数据。
默认地,无法将元素放置到其他元素中,如果需要设置允许放置,我们必须阻止对元素的默认处理方式:

var dus = document.querySelector(‘.dustbin’); dus.ondragover =
function(e) { e.preventDefault(); };

1
2
3
4
5
var dus = document.querySelector(‘.dustbin’);
 
dus.ondragover = function(e) {
  e.preventDefault();
};

当元素被拖动到某一元素上时,即会触发后者的 ondrop
事件,如果需要正确触发 ondrop 事件,还需要取消一些 DnD
事件的默认行为:

dus.ondrop = function(e) { // 调用 preventDefault()
来避免浏览器对数据的默认处理(drop 事件的默认行为是以链接形式打开)
e.preventDefault(); e.stopPropagation(); // 兼容ff var id =
e.dataTransfer.getData(‘id’) , node = document.getElementById(id);
node.parentNode.removeChild(node); };

1
2
3
4
5
6
7
8
9
10
dus.ondrop = function(e) {
  // 调用 preventDefault() 来避免浏览器对数据的默认处理(drop 事件的默认行为是以链接形式打开)
  e.preventDefault();
  e.stopPropagation(); // 兼容ff
 
  var id = e.dataTransfer.getData(‘id’)
    , node = document.getElementById(id);
 
  node.parentNode.removeChild(node);
};

有些文献中说要取消 ondragenter()
事件的默认行为,楼主在实际操作中并未发现这点。

标签:,

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关文章

网站地图xml地图