你该知道的字体,换个思路理解Javascript中的thi

HTML 5 History API的”前生今世”

2014/10/23 · HTML5 · HTML5

原稿出处: tuts+   译文出处:忘记浅思的博客(@dwido卡塔尔国   

History是有趣的,不是吗?在前面包车型客车HTML版本中,大家对浏览历史记录的操作特轻易。大家得以来回使用能够使用的情势,但那正是任何我们能做的了。

只是,利用HTML 5的History API,我们能够越来越好的垄断(monopoly卡塔 尔(英语:State of Qatar)浏览器的历史记录了。比方:大家可以增多一条记下到历史记录的列表中,可能在未曾刷新时,能够纠正鸿基土地资金财产址栏的U翼虎L。

幽默的CSS标题(12卡塔尔国:你该知道的书体 font-family

2017/01/06 · CSS · 1 评论 · 字体

本文作者: 伯乐在线 - chokcoco 。未经笔者许可,禁止转发!
应接参与伯乐在线 专辑撰稿者。

微小的书体其实有大大的学问,大概与字体相关的众多文化都偏设计,但是俗话说技多不压身,不时获得的人胆量大,多领悟掌握放区救济总会归没有错。

图片 1

换个思路清楚Javascript中的this

2017/07/27 · JavaScript · this

原稿出处: Leechikit   

在网络海人民广播广播台湾大学文章都对 Javascript 中的 this 做了详尽的牵线,但基本上是介绍各种绑定形式或调用方式下 this 的指向,于是笔者想有三个联结的思路来越来越好驾驭 this 指向,使大家更好剖断,以下有一点内容不是常理,而是风流洒脱种解题思路。

为什么介绍History API ?

在此篇文章中,大家将明白HTML 第55中学History API的发源。在此之前,我们平时利用散列值来改造页面内容,特别是那么些对页面特别重大的剧情。因为从没刷新,所以对于单页面应用,更换其UPAJEROL是不容许的。别的,当您转移ULX570L的散列值值,它对浏览器的历史记录未有其他影响。

然后,现在对于HTML 5的History API来讲,那么些都以足以私行完结的,不过由于单页面应用没必要选择散列值,它恐怕须求额外的支付脚本。它也允许我们用意气风发种对SEO友好的法子确立新应用。其他,它能减小带宽,但是该怎么注明呢?

在篇章中,笔者将用History API开荒四个单页应用来验证上述的主题素材。

那也代表笔者不得不先在首页加载须求的能源。今后上马,页面仅仅加载供给的内容。换句话说,应用而不是一开端就加载了全体的剧情,在伸手第三个利用内容时,才会被加载。

小心,您要求实行一些服务器端编码只提供一些能源,并非生机勃勃体化的页面内容。

字体的分类

就 Web 常用的局地字体来讲,平日听他们讲的字体类型,大约能够分成这两种:

  • serif(衬线)
  • sans-serif(无衬线)
  • monospace(等宽)
  • fantasy(梦幻)
  • cuisive(草体)

事实上海高校体上分为衬线字体和无衬线字体,等宽字体中也许有衬线等宽和无衬线等宽字体,那5 个分类是 font-family 的 5 个可用字连串列取值。

图片 2

也正是说,上述 5 个名字,代表的决不某些特定字体,而是生龙活虎多重字体,那些通用的称呼允许顾客代理(常常正是浏览器卡塔尔国从相应集结中甄选风流浪漫款字体。

那也很好解释了,font-family 中的 family ,家庭的情致,也正是不单单指贰个,而是能够钦定两个,上述 5 个塞尔维亚(Serbia卡塔 尔(英语:State of Qatar)语单词都以 font-family 的可用取值,下文还有大概会详细讲到。

上边详细询问一下每类字体。(本来每八个字体都有贴暗暗表示图的,万般无奈网易摆出来太影响雅观,能够移动笔者的Github阅读)

从call方法早前

call 方法允许切换函数实行的上下文情形(context),即 this 绑定的靶子。

大多数介绍 this 的文章中都会把 call 方法放到最终介绍,但此文大家要把 call 方法放在第壹个人介绍,并从 call 方法切入来商讨 this ,因为 call 函数是显式绑定 this 的照准,大家来探视它怎么着模拟达成(不思索传入 nullundefined 和原始值卡塔尔国:

Function.prototype.call = function(thisArg) { var context = thisArg; var arr = []; var result; context.fn = this; for (let i = 1, len = arguments.length; i < len; i++) { arr.push('arguments[' + i + ']'); } result = eval("context.fn(" + arr + ")"); delete context.fn; return result; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
Function.prototype.call = function(thisArg) {
    var context = thisArg;
    var arr = [];
    var result;
 
    context.fn = this;
 
    for (let i = 1, len = arguments.length; i < len; i++) {
        arr.push('arguments[' + i + ']');
    }
 
    result = eval("context.fn(" + arr + ")");
 
    delete context.fn;
 
    return result;
}

从上述代码大家得以见到,把调用 call 方法的函数作为第3个参数对象的点子,当时约等于把第三个参数对象作为函数试行的上下文意况,而 this 是指向函数实行的上下文意况的,由此 this 就本着了第三个参数对象,落成了 call 方法切换函数实施上下文境况的作用。

浏览器协理

在写这篇小说的时候,各主流浏览器对History API的协助是特别准确的,能够点击这里翻看其支持景况,这一个链接会告诉你协理的浏览器,并行使此前,总有一级的推行来检查评定扶助的一定功能。

为了用形成情势显明浏览器是不是扶助这一个API,可以用下边包车型地铁后生可畏行代码查验:

XHTML

return !!(window.history && history.pushState);

1
return !!(window.history && history.pushState);

此外,小编提出仿效一下那篇小说:Detect Support for Various HTML5 Features.(ps:后续会翻译)

若果你是用的现世浏览器,能够用上边包车型客车代码:

XHTML

if (Modernizr.history) { // History API Supported }

1
2
3
if (Modernizr.history) {
    // History API Supported
}

假使你的浏览器不扶持History API,能够应用history.js代替。

serif — 衬线字体

serif,意为有衬线的书体,衬线的趣味是在字符笔画末端有号称衬线的小细节的额外装饰,并且笔画的粗细会有所分化,这一个细节在大写字母中专门精晓。

OK,那么有啥样常用字体归属衬线字体呢?

指标方法中的this

在模拟 call 方法的时候,大家利用了目的方法来退换 this 的指向性。调用对象中的方法时,会把指标作为艺术的上下文境遇来调用。

既然 this 是指向推行函数的上下文意况的,那大家先来研讨一下调用函数时的奉行上下文景况。

上边笔者门来拜望调用对象方法时施行上下文是什么样的:

var foo = { x : 1, getX: function(){ console.log(this.x); } } foo.getX();

1
2
3
4
5
6
7
var foo = {
    x : 1,
    getX: function(){
        console.log(this.x);
    }
}
foo.getX();

图片 3

从上航海用教室中,大家能够看来getX艺术的调用者的上下文是foo,因此getX方法中的 this 指向调用者上下文foo,转换成 call 方法为foo.getX.call(foo)

上面我们把其他函数的调用情势都按调用对象方法的思路来改变。

使用History

HTML 5提供了四个新办法:

1、history.pushState();                2、history.replaceState();

二种办法都同意大家抬高和改过历史记录,它们的行事规律相似并且能够增加数量相同的参数。除了艺术之外,还恐怕有popstate事件。在后文上将介绍怎么选用和哪些时候使用popstate事件。

pushState()和replaceState()参数相同,参数表达如下:

1、state:存款和储蓄JSON字符串,能够用在popstate事件中。

2、title:现在超越1/4浏览器不扶助还是忽略这些参数,最佳用null替代

3、url:大肆有效的U牧马人L,用于更新浏览器的地址栏,并不留意U安德拉L是或不是曾经存在地址列表中。更重视的是,它不会重复加载页面。

七个章程的要紧差距正是:pushState()是在history栈中增多多少个新的条约,replaceState()是替换当前的记录值。假如您还对那一个有吸引,就用部分示范来注脚那一个区别。

如果我们有八个栈块,多少个符号为1,另四个符号为2,你有第八个栈块,标志为3。当实行pushState()时,栈块3将被增添到已经存在的栈中,由此,栈就有3个块栈了。

同等的比如情景下,当推行replaceState()时,就要块2的旅舍和停放块3。所以history的记录条数不改变,也正是说,pushState()会让history的数额加1.

比较结实如下图:

图片 4

 

到此,为了操纵浏览器的历史记录,我们忽略了pushState()和replaceState()的平地风波。不过假使浏览器总括了不知凡几的不良记录,客户恐怕会被重定向到这几个页面,或者也不会。在此种气象下,当客户使用浏览器的上扬和落后导航开关时就能爆发意料之外的难点。

尽管当大家利用pushState()和replaceState()实行管理时,期望popstate事件被触发。但其实,情形并非那样。相反,当您浏览会话历史记录时,不管您是点击前行或许后退按键,仍然选拔history.go和history.back方法,popstate都会被触发。

In WebKit browsers, a popstate event would be triggered after document’s onload event, but Firefox and IE do not have this behavior.(在Web基特浏览器中,popstate事件在document的onload事件后触发,Firefox和IE未有这种展现卡塔 尔(阿拉伯语:قطر‎。

宋体(SimSun)

Windows 下大多数浏览器的默许中文字体,是为适应印制术而现身的豆蔻梢头种汉字字体。笔画有粗细变化,是生龙活虎种衬线字体,陶文在小字号下的来得效果还足以担当,不过字号一大意验就很糟糕了,所以使用的时候要注意,不建议做标题字体选取。

构造函数中的this

function Foo(){ this.x = 1; this.getX = function(){ console.log(this.x); } } var foo = new Foo(); foo.getX();

1
2
3
4
5
6
7
8
function Foo(){
    this.x = 1;
    this.getX = function(){
        console.log(this.x);
    }
}
var foo = new Foo();
foo.getX();

执行 new 借使不思考原型链,只寻思上下文的切换,就一定于先成立三个空的目的,然后把那一个空的靶子作为构造函数的上下文,再去试行构造函数,最终回来那个目的。

var newMethod = function(func){ var context = {}; func.call(context); return context; } function Foo(){ this.x = 1; this.getX = function(){ console.log(this.x); } } var foo = newMethod(Foo); foo.getX();

1
2
3
4
5
6
7
8
9
10
11
12
13
var newMethod = function(func){
    var context = {};
    func.call(context);
    return context;
}
function Foo(){
    this.x = 1;
    this.getX = function(){
        console.log(this.x);
    }
}
var foo = newMethod(Foo);
foo.getX();

Demo示例

HTML:

XHTML

<div class="container"> <div class="row"> <ul class="nav navbar-nav"> <li><a href="home.html" class="historyAPI">Home</a></li> <li><a href="about.html" class="historyAPI">About</a></li> <li><a href="contact.html" class="historyAPI">Contact</a></li> </ul> </div> <div class="row"> <div class="col-md-6"> <div class="well"> Click on Links above to see history API usage using <code>pushState</code> method. </div> </div> <div class="row"> <div class="jumbotron" id="contentHolder"> <h1>Home!</h1> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> </div> </div> </div> </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div class="container">
    <div class="row">
        <ul class="nav navbar-nav">
            <li><a href="home.html" class="historyAPI">Home</a></li>
            <li><a href="about.html" class="historyAPI">About</a></li>
            <li><a href="contact.html" class="historyAPI">Contact</a></li>
        </ul>
    </div>
    <div class="row">
        <div class="col-md-6">
            <div class="well">
                Click on Links above to see history API usage using <code>pushState</code> method.
            </div>
        </div>
        <div class="row">  
            <div class="jumbotron" id="contentHolder">
                <h1>Home!</h1>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
            </div>
        </div>
    </div>
</div>

JavaScript:

JavaScript

<script type="text/javascript"> jQuery('document').ready(function(){ jQuery('.historyAPI').on('click', function(e){ e.preventDefault(); var href = $(this).attr('href'); // Getting Content getContent(href, true); jQuery('.historyAPI').removeClass('active'); $(this).addClass('active'); }); }); // Adding popstate event listener to handle browser back button window.addEventListener("popstate", function(e) { // Get State value using e.state getContent(location.pathname, false); }); function getContent(url, addEntry) { $.get(url) .done(function( data ) { // Updating Content on Page $('#contentHolder').html(data); if(addEntry == true) { // Add History Entry using pushState history.pushState(null, null, url); } }); } </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<script type="text/javascript">
    jQuery('document').ready(function(){
 
        jQuery('.historyAPI').on('click', function(e){
            e.preventDefault();
            var href = $(this).attr('href');
 
            // Getting Content
            getContent(href, true);
 
            jQuery('.historyAPI').removeClass('active');
            $(this).addClass('active');
        });
 
    });
 
    // Adding popstate event listener to handle browser back button
    window.addEventListener("popstate", function(e) {
 
        // Get State value using e.state
        getContent(location.pathname, false);
    });
 
    function getContent(url, addEntry) {
        $.get(url)
        .done(function( data ) {
 
            // Updating Content on Page
            $('#contentHolder').html(data);
 
            if(addEntry == true) {
                // Add History Entry using pushState
                history.pushState(null, null, url);
            }
 
        });
    }
</script>

Demo 1:HTML 5 History API – pushState

正史条约在浏览器中被总计,並且能够相当的轻巧的运用浏览器的演化和倒退按键。View Demo  (ps:你在点击demo1的选项卡时,其记录会被增多到浏览器的历史记录,当点击后退/前行按键时,能够重临/跳到您前边点击的选项卡对应的页面卡塔 尔(英语:State of Qatar)

Demo 2:HTML 5 History API – replaceState

正史条目款项在浏览器中被更新,况兼无法动用浏览器的前行和向下按键举办浏览。View Demo  (ps:你在点击demo1的选项卡时,其记录会被轮番当前浏览器的历史记录,当点击后退/前行按钮时,不得以回来/跳到你以前点击的选项卡对应的页面,而是回到/跳到您步入demo2的上三个页面卡塔 尔(英语:State of Qatar)

Times New Roman

Mac 平台 Safari 下私下认可的塞尔维亚语字体,是最广大且广为人知的西方文字衬线字体之生龙活虎,众多网页浏览器和文字管理软件都以用它看做暗许字体。

图片 5

计算(ps:喜欢那三个字~^_^~)

HTML 5中的History API 对Web应用具备异常的大的熏陶。为了更便于的始建有功用的、对SEO友好的单页面应用,它移除了对散列值的正视。

赞 1 收藏 评论

图片 6

sans-serif — 无衬线字体

sans 的意趣是无,sans-serif 也正是无衬线的意味。专指西方文字中绝非衬线的字体,与汉字字体中的钟鼓文相呼应。与衬线字体相反,该类字体平常是教条主义的和统一线条的,它们往往具有相像的曲率,笔直的线条,锐利的转角。

汉语下,无衬线字体正是石籀文,大篆字也等于又称方体或等线体,未有衬线装饰,字形方正,笔画横平竖直,笔迹全体相似粗细。

拜望又有何样置之不理的无衬线字体。

DOM事件管理函数中的this

DOMElement.addEventListener('click', function(){ console.log(this); });

1
2
3
DOMElement.addEventListener('click', function(){
    console.log(this);
});

把函数绑定到DOM事件时,能够作为在DOM上平添一个函数方法,当接触那几个事件时调用DOM上相应的风云措施。

DOMElement.clickHandle = function(){ console.log(this); } DOMElement.clickHandle();

1
2
3
4
DOMElement.clickHandle = function(){
    console.log(this);
}
DOMElement.clickHandle();

图片 7

微软雅黑(Microsoft Yahei卡塔 尔(英语:State of Qatar)

享誉的微软雅黑相信都不不熟悉,从 windows Vista 初始,微软提供了那款新的字体,意气风发款无衬线的行草类字体,显明提升了字体的来得效果。今后那款字体已经化为 windows 浏览器最值得使用的中文字体。

平凡函数中的this

var x = 1; function getX(){ console.log(this.x); } getX();

1
2
3
4
5
var x = 1;
function getX(){
    console.log(this.x);
}
getX();

这种气象下,咱们创造七个虚构上下文对象,然后普通函数作为那一个编造上下文对象的章程调用,那时常常性函数中的this就照准了那几个编造上下文。

那那一个编造上下文是什么呢?在非严苛形式下是大局上下文,浏览器里是 window ,NodeJs里是 Global ;在严俊格局下是 undefined

var x = 1; function getX(){ console.log(this.x); } [viturl context].getX = getX; [viturl context].getX();

1
2
3
4
5
6
7
var x = 1;
function getX(){
    console.log(this.x);
}
 
[viturl context].getX = getX;
[viturl context].getX();

图片 8

华文大篆(STHeiti卡塔 尔(英语:State of Qatar)、华文细黑(STXihei卡塔 尔(阿拉伯语:قطر‎

归于同一字体亲族连串,MAC OS X 10.6 此前的简体中文系统分界面包车型大巴暗中同意粤语字体,正常粗细正是华文细黑,粗体下则是华文金鼎文。

闭包中的this

var x = 1; var foo = { x: 2, y: 3, getXY: function(){ (function(){ console.log("x:" + this.x); console.log("y:" + this.y); })(); } } foo.getXY();

1
2
3
4
5
6
7
8
9
10
11
12
var x = 1;
var foo = {
    x: 2,
    y: 3,
    getXY: function(){
        (function(){
            console.log("x:" + this.x);
            console.log("y:" + this.y);
        })();
    }
}
foo.getXY();

这段代码的上下文如下图:图片 9

这里须要留意的是,大家再钻探函数中的 this 指向时,只必要关爱 this 所在的函数是什么调用的, this 所在函数外的函数调用都以浮云,是不要求关切的。因而在具有的图示中,大家只须求关怀浅绿框中的内容。

进而这段代码我们关切的片段唯有:

(function(){ console.log(this.x); })();

1
2
3
(function(){
    console.log(this.x);
})();

与管见所及函数调用相似,创制二个伪造上下文对象,然后普通函数作为这几个虚构上下文对象的法子马上调用,佚名函数中的 this 也就本着了这么些编造上下文。图片 10

黑体-简(Heiti SC)

从 MAC OS X 10.6 开头,楷书-简替代华文小篆用作简体中国语言法学系统分界面暗中认可字体,苹果生态最常用的字体之生龙活虎,饱含One plus、surface 等配备用的也是那款字体。

参数中的this

var x = 1; var foo = { x: 2, getX: function(){ console.log(this.x); } } setTimeout(foo.getX, 1000);

1
2
3
4
5
6
7
8
var x = 1;
var foo = {
    x: 2,
    getX: function(){
        console.log(this.x);
    }
}
setTimeout(foo.getX, 1000);

函数参数是值传递的,因而地方代码等同于以下代码:

var getX = function(){ console.log(this.x); }; setTimeout(getX, 1000);

1
2
3
4
var getX = function(){
    console.log(this.x);
};
setTimeout(getX, 1000);

下一场大家又回来了平日函数调用的题目。

本文由澳门新葡亰平台官网发布于web前端,转载请注明出处:你该知道的字体,换个思路理解Javascript中的thi

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。