利用Strapdown.js和markdown写极简...-JavaScript中instanceof对于不同的...-深入浅出 JQuery (一) 浅析JQuery

当前位置: 编程技术>WEB前端

本页文章导读:

▪利用Strapdown.js和markdown写极简静态博客有些人认为使用markdown建站有个缺陷是需要服务器支持，如jeklly或higridcms等，其实higrid认为并不是这样的。对只有静态空间的朋友，higrid介绍一个静态渲染markdown的利器，就是Strapdown.js。使用St.........

▪JavaScript中instanceof对于不同的构造器可能都返回true 我们知道 instanceof 运算符用来检查对象是否为某构造器的实例。下面列举它返回true的各种情景。1、对象obj是通过new Constructor创建的，那么obj instanceof Constructor 为truefunction Person(n, a) {this.name = n.........

▪深入浅出 JQuery (一) 浅析JQuery 1. 概述一种新技术、新思维的出现都是因为它更方便了人们的需要，解决了目前的一些问题，.........

[1]利用Strapdown.js和markdown写极简静态博客

来源: 发布时间: 2013-11-06

有些人认为使用markdown建站有个缺陷是需要服务器支持，如jeklly或higridcms等，其实higrid认为并不是这样的。对只有静态空间的朋友，higrid介绍一个静态渲染markdown的利器，就是Strapdown.js。使用Strapdown.js是markdown to html 的javascript，并且带有界面效果，不需要你写CSS样式，只要在html页面里面写markdown，他就會把你寫的文字解析然后在浏览器呈现出用户体验良好的布局。

使用Strapdown.js和markdown写极简静态博客

既然Strapdown.js有这个用处，一些极简主义者完全可以利用Strapdown.js和markdown写博客，而这个博客真的是极简静态博客，应该是技术控的最爱，不是说了吗？网站的技术最重要，不需要考虑界面，极简静态博客是我们的追求。

好了，不扯远了，先看看Strapdown.js的用法

官方介绍是这样的：Strapdown.js makes it embarrassingly simple to create elegant Markdown documents. No server-side compilation required. Use it to quickly document your projects, create tutorials, home pages, etc. (For example, the page you are reading was generated by Strapdown).Simply copy the HTML template below and drop it on any static file server:

简单的说：Strapdown.js 可以让你非常简单的创建优雅的 Markdown 文档，无需服务器端编译支持，只需要简单的复制 HTML 代码并修改标题和 Markdown 文本即可。

项目主页：http://strapdownjs.com/
下载地址：https://github.com/arturadib/strapdown

Features

Search-engine friendly
Cross-browser compatible (tested with mobile Safari, IE 8/9, Firefox, Chrome)
Github-flavored Markdown (tables, syntax highlighting, etc)
Themeable

一个典型的页面：

< html>
< title>Hello Strapdown</title>
< xmp theme="united" >
# Markdown text goes in here
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
< /xmp>
< script src="http://strapdownjs.com/v/0.2/strapdown.js"></script>
< /html>
利用php会使Strapdown.js和markdown更有效

使用Strapdown.js写markdown当然没有问题，存在的缺陷是整个站点都是静态的，当博客文章多了就不方便组织。现在很多人都有动态空间，加上php一点小代码，就可以做成一个blog了，当然，网上也有现成的，名字叫Singularity，这个名字用的太多，网上搜出一大堆都不是，经过higrid的仔细查找，作者原来跟我们一样是个中国人，不过他的站点是采用英文的。

higrid现在把Singularity推荐给大家，并且提供演示和下载，希望大家喜欢。

目前版本higrid认为存在的缺陷是标题无法SEO、缺少文章列表、文章标签功能，不过这也是一个很简单的函数就搞定，后面higrid会陆续介绍到，不知道写得对不对？有研究的大虾可以提提建议，谢谢。

本文链接

[2]JavaScript中instanceof对于不同的构造器可能都返回true

来源: ▪三个不常见的 HTML5 实用新特性简介 iis7站长之家发布时间: 2013-11-06

我们知道 instanceof 运算符用来检查对象是否为某构造器的实例。下面列举它返回true的各种情景。

1、对象obj是通过new Constructor创建的，那么obj instanceof Constructor 为true

function Person(n, a) {
this.name = n;
this.age = a;
}
var p = new Person('John Backus', 82);
console.log(p instanceof Person); // true

2、如果存在继承关系，那么子类实例 instanceof 父类也会返回true

function A(){}
function B(){}
var p = new A();
B.prototype = p; // B继承于A

var b = new B();
console.log(b instanceof A); // true

3、由于Object是根类，所有其它自定义类都继承于它，因此任意构造器的实例 instanceof Object 都返回true

function A() {}
var a = new A();
console.log(a instanceof Object); // true

var str = new String('hello');
console.log(str instanceof Object); // true

var num = new Number(1);
console.log(num instanceof Object); // true

甚至包括构造器自身

function A() {}
console.log(A instanceof Object); // true
console.log(String instanceof Object); // true
console.log(Number instanceof Object); // true

4、所有构造器 instanceof Function 返回true

function A() {}
console.log(A instanceof Function); // true
console.log(String instanceof Function); // true
console.log(Number instanceof Function); // true

以上四点总结为一句话：如果某实例是通过某类或其子类的创建的，那么instanceof就返回true。或者说某构造函数的原型存在与对象obj的内部原型链上，那么返回true。即instanceof的结果与构造器自身并无直接关系。

Java的表现也类似，定义了一个类Person，实例p对于Person和Object都返回true

class Person {
public String name;
public int age;
Person (String n, int a) {
this.name = name;
this.age = a;
}
public static void main(String[] args) {
Person p = new Person("John Backus", 82);
System.out.println(p instanceof Person); // true
System.out.println(p instanceof Object); // true
}
}

Java语言中如果存在继承关系，那么子类实例 instanceof 父类也返回true

class Person {
public String name;
public int age;
Person (String n, int a) {
name = name;
age = a;
}
}

public class Man extends Person{
public String university;
Man(String n, int a, String s) {
super(n, a);
university = s;
}

public static void main(String[] args) {
Man mm = new Man("John Resig", 29, "PKU");
System.out.println(mm instanceof Man); // true
System.out.println(mm instanceof Person); // 也是true
}
}

知道了这些，JS中以下的表现就不奇怪了

// 定义两个构造器
function A(){}
function B(){}
A.prototype = B.prototype = {a: 1};

// 分别创建两个不同构造器的实例
var a = new A();
var b = new B();
console.log(a instanceof B); // true
console.log(b instanceof A); // true

我们看到a, b分别是用A和B创建的，但a instanceof B和 b instanceof A都是true。即a虽然不是用构造器B创建的，但仍然返回true。因为B.prototype存在于a的内部原型链上。

由于JS的动态语言特性，可以修改原型，因此下面返回false也不足为奇了。因为A.prototype已经不在a的内部原型链中，链条被打断了。

function A(){}
var a = new A();
A.prototype = {}; // 动态修改原型，注意必须在创建a后
console.log(a instanceof A); // false

实际在ECMAScript标准中（以5.1为准），instanceof 内部实现会调用构造器的内部方法[[HasInstance]]，描述如下

1，如果instanceof左运算符V不是对象类型，直接返回false

var a, b = 1, c = true, d = 'hello';
console.log(a instanceof Object); // false
console.log(b instanceof Object); // false
console.log(c instanceof Object); // false
console.log(d instanceof Object); // false

2，取构造器F的prototype属性，如果不是对象类型，须抛出TypeError异常，

function A(){}
A.prototype = 1; // A的prototype设为非对象类型
var a = new A();
console.log(a instanceof A);

各浏览器抛出的异常提示不同，

Firefox：

Chrome:

Safari: