细说 JavaScript 的对象

JavaScript 原型链 继承 反射 ES6

JavaScript是面向对象语言,通过原型机制实现继承,通过『闭包』等方式可以实现封装。 本文来探讨JavaScript对象的特殊之处:原型链、引用、反射、属性遍历等特性。

对象创建

JavaScript拥有非常直观的对象创建方式:

var emptyObject = {};
var person = {
    name: 'harttle',
    age: 24
};

相当于:

var xx = new Object(); 
xx.name = 'hartle'; 
xx.age = 24;

属性访问

属性可以通过两种语法访问:

  • person.age
  • person['age']

当属性名不存在时JavaScript会沿着原型链去查找。 赋值可以更新或创建一个属性,属性可以通过delete person.age来删除。

undefined获取属性会引发TypeError,一般通过&&来解决:

// person.girl === undefined
person.girl.name;                // TypeError
person.girl && person.girl.name; // undefined

利用浮动和清除浮动进行布局

float overflow CSS HTML

CSS有三种基本定位方式:正常流(static),浮动(float),绝对定位(absolute、fixed)。 HTML元素默认采取正常流的方式进行布局,而浮动是HTML布局中最常用的定位方式。 下面先探讨浮动定位的行为,然后介绍一个需要清除浮动的场景,以及几种替代方案。

浮动

浮动元素会向左/右偏移,直至外边界碰到容器或另一个元素的边缘。 浮动会使得元素脱离文档流,后面元素进行布局时,前面的浮动元素就像不存在一样。

float right

如果右侧没有足够空间,浮动元素就会下坠,直到有足够的空间(折行)。 如果浮动元素有着不同的高度,那么可能在下坠过程中卡在某个位置。

get-stuck

CSS 外边距合并

CSS HTML inline-block

外边距合并是CSS中一个特殊的概念。当两个外边距相邻时,它们会合并为较大的那一个。 无论是相邻元素的上下边距,还是父子元素的上边距,甚至是同一元素的上下边距。

相邻元素

当两个元素上下相邻时,上面的下外边距会与下面元素的上外边距会合并。

contain@2x

如果元素左右相邻呢?一个典型的场景是几个inline-block元素并排显示。 但inline-block元素的外边距是不合并的,它们会保持自己的间隔。

inline-block的上下外边距仍然是不起作用的,因为它们是行内元素呀!

DOCTYPE的作用:文档类型与浏览器模式

DOCTYPE HTML DTD XML SGML

DTD(document type definition,文档类型定义)是一系列的语法规则, 用来定义XML或(X)HTML的文件类型。浏览器会使用它来判断文档类型, 决定使用何种协议来解析,以及切换浏览器模式。

事实上DTD可以定义所有SGML语族的文档类型,但由于太过繁琐, XML Schema反而更加流行。

多数HTML编辑器都会为我们添加一行DOCTYPE声明,但DOCTYPE却是我们最容易忽略的部分。 下面我们会看到,DOCTYPE声明并不是可有可无的。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

那些 JavaScript 的优秀特性

DOM JavaScript Lambda Promise 继承 闭包 作用域 弱类型 原型链 ES6

说起编程语言,理科生们最初接触的应当是C++。那是P校的必修课。 事实上第一个让我认真去用的语言是.NET C#, 我学习了几乎所有的语言特性、窗口控件以及WPF样式字典。 这样便可以成为一个C#伪专家,去解答别人关于C#的各种问题 :)

此后由于各种原因去学习JavaScript、Python、Ruby,逐渐地发现成功使用一门语言的关键不在于熟悉所有语言特性,而是学着只用那些优雅的、表达力强的语言特性来完成整个工程。

那么JavaScript能否进化为一个只包含有点的语言呢? 在这一点上标准化协会其实也无能为力,去除任何语言特性都会造成依赖于该特性的工程失效。 我们可以使用JSLint等工具来提示我们,确保项目中没有使用那些糟糕的语言特性。

Online Judge Toolkit 发布啦

C++ Github Makefile 数组 算法 链表 队列 二叉树 运算符重载

IT公司的校招笔试通常是一些算法类的题目,近年来基本都是在线OJ的形式。 于是有一个本地的OJ工具能有很大帮助,比如数组、字典的cout/cin, 常见算法的C++实现等。现在Harttle整理了一个OJ工具库:oj.h, 近日已完成工具文档,欢迎试用和贡献代码!

基本使用

从Github下载工具库:https://github.com/harttle/oj.h

代码仓库中的main.cpp便是一个使用示例。

引入其中的oj.h并使用oj命名空间即可。比如下面的数组输入输出:

#include "oj.h"
using namespace oj;

int main() {
    vector<int> v;
    // input: 2 1 3 4
    cin >> v;
    // output: [2,1,3,4]
    cout << v << endl;
    return 0;
}

jQuery社会化分享:支持微信、微博、Github...

CSS Github HTML JavaScript jQuery 微信 二维码

一个既美观有支持微信的社会化分享工具:harttle/social-share。 支持微信(二维码)、微博、Github、Google+、LinkedIn、Twitter、Facebook、RSS…, 支持四种大小设置。

  • 在线Demo: https://harttle.land/social-share/

  • 文档: https://github.com/harttle/social-share

最近在天码营和本博客中添加社会化分享,调研和尝试了不少第三方工具。 国内最方便的应当是jiathis,然而并不美观。国外的工具基本都没有微信(二维码)的支持。 于是诞生了 harttle/social-share

导航: 上一页 下一页

🔝