云顶娱乐集团

当前位置:云顶娱乐集团 > 云顶娱乐集团 > HTML也能够静态编写翻译,前端基础进级

HTML也能够静态编写翻译,前端基础进级

来源:http://www.clubskodakaroq.com 作者:云顶娱乐集团 时间:2019-10-06 17:14

纯 HTML+CSS+JavaScript 编写的计算器应用

2016/09/26 · CSS, HTML5, JavaScript · 2 评论 · 计算器

初稿出处: dunizb   

前面贰个基础进级(10):面向对象实战之封装拖拽对象

2017/04/02 · JavaScript · 面向对象

初稿出处: 波同学   

云顶娱乐集团 1

终于

前边几篇小说,作者跟咱们大快朵颐了JavaScript的有个别基础知识,那篇文章,将会进去第多少个实战环节:利用前边几章的所波及到的学问,封装三个拖拽对象。为了能够支持我们探听越来越多的法子与拓宽相比,笔者会使用二种不相同的办法来兑现拖拽。

  • 不封装对象直接达成;
  • 动用原生JavaScript封装拖拽对象;
  • 通过扩充jQuery来达成拖拽对象。

正文的事例会停放于codepen.io中,供大家在阅读时直接查看。假诺对于codepen不通晓的同桌,能够花点时间稍微明白一下。

拖拽的兑现进度会波及到非常多的实用小知识,因而为了加固自己本人的文化储存,也为了我们能够学到越来越多的学问,作者会尽量详细的将某些细节分享出来,相信大家认真读书之后,一定能学到一些事物。

拥抱Web设计新取向:SVG 7-Ups试行应用

2016/07/30 · HTML5 · 1 评论 · Sprites, SVG

最早的小讲出处: 坑坑洼洼实验室   

云顶娱乐集团 2

页面制作之付出调节和测量试验工具(1)

2015/04/14 · CSS, HTML5, JavaScript · 调试

原来的书文出处: jingwhale   

HTML也得以静态编写翻译?

2016/11/30 · HTML5 · 1 评论 · binding.scala, React, 前端

本文小编: 伯乐在线 - ThoughtWorks 。未经作者许可,禁绝转发!
迎接加入伯乐在线 专辑作者。

More than React种类小说:

《More than React(一)为啥ReactJS不切合复杂的前端项目?》

《More than React(二)React.Component损害了复用性?》

《More than React(三)虚拟DOM已死?》

《More than React(四)HTML也得以静态编写翻译?》


《More than React》连串的上一篇文章《虚拟DOM已死?》相比了Binding.scala和任何框架的渲染机制。本篇小说少将介绍Binding.scala中的XHTML语法。

一道笔试题

此前不常看见二个小卖部的笔试题,标题如下:

用HTML5、CSS3、JavaScript,做一个网页,完毕如下图格局总括器

云顶娱乐集团 3

现实须要:

  1. 有且只有二个文件:index.html。不容许再有别的文件,不容许再有独立的CSS、JS、PNG、JPG文件。
  2. 运作遇到为 谷歌(Google) Chrome。
  3. 必需支持规范的四则运算。举个例子:1+2*3=7。
  4. 请在收到邮件的48小时内独立完开销测量检验,并回涨本邮件。
1、怎么样让三个DOM成分动起来

大家平时会通过修改成分的top,left,translate来其的任务发生改动。在下边包车型大巴事例中,每点击二次开关,对应的要素就能够移动5px。大家可点击查阅。

点击查看二个让成分动起来的小例子

由于修改贰个因素top/left值会孳生页面重绘,而translate不会,因而从性质优化上来判定,大家会优先采用translate属性。

前言

随着移动互连网的惠临,各个高清显示器移动装备的见惯司空,导致H5应用在运动道具retina屏幕下平时会赶过海体育场地标不清晰的难点。

为了化解显示器分辨率对Logo影响的问题,日常使用CSS Coca Cola,Icon Font,CSS Icon以及SVG以适应@x1屏、@2屏、@3屏,绝对相比来讲SVG矢量性、缩放无损等重重亮点,更应受前端设计员的推崇,可在大多同盟社的移位项目选拔中却少之甚少见,究其主要原因在于SVG开采学习开销比较高以及在绘制的习性上比PNG要差。此篇作品将从SVG快速导出到SVG、SVG Symbol组件化在品种中实战实行解说,并提供SVG Symbol快捷导出工具,教您什么样巩固SVG开拓功能减资。

开辟工具介绍

开采工具常常分为两种类型:文本编辑器和购并开采条件(IDE)

常用的文本编辑器:Sublime Text、Notepad++、EditPlus等

常用的IDE:WebStorm、Intellij IDEA、Eclipce等

大家这里根本介绍怎么样行使Sublime Text编辑器,它基本满足大家对前端开垦工具的需求。

其余前端框架的主题材料

一道笔试题引发的三个练手项目

花了有个别光阴写好的第一版,相符了笔试题的供给。后来左看右看认为还足以革新做的更好,于是给它不断的革新,加新功能等,那样下来没完没了,利用业余时间一点一点的写,从刚最早的网页版,到新兴做响应式的移动版,再到这段日子的移动App,短短续续大约写了半年啊。

2、如何赢妥贴前浏览器帮助的transform包容写法

transform是css3的性质,当大家利用它时就只能面临包容性的主题材料。区别版本浏览器的协作写法差不离有如下两种:

['transform', 'webkitTransform', 'MozTransform', 'msTransform', 'OTransform']

故而我们必要推断当前浏览器境况协助的transform属性是哪个种类,方法如下:

JavaScript

// 获取当前浏览器帮衬的transform包容写法 function getTransform() { var transform = '', divStyle = document.createElement('div').style, // 或许涉及到的两种包容性写法,通过轮回找寻浏览器度和胆识其余那一个 transformArr = ['transform', 'webkitTransform', 'MozTransform', 'msTransform', 'OTransform'], i = 0, len = transformArr.length; for(; i < len; i++) { if(transformArr[i] in divStyle) { // 找到之后马上赶回,甘休函数 return transform = transformArr[i]; } } // 若无找到,就直接回到空字符串 return transform; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 获取当前浏览器支持的transform兼容写法
function getTransform() {
    var transform = '',
        divStyle = document.createElement('div').style,
        // 可能涉及到的几种兼容性写法,通过循环找出浏览器识别的那一个
        transformArr = ['transform', 'webkitTransform', 'MozTransform', 'msTransform', 'OTransform'],
 
        i = 0,
        len = transformArr.length;
 
    for(; i < len; i++)  {
        if(transformArr[i] in divStyle) {
            // 找到之后立即返回,结束函数
            return transform = transformArr[i];
        }
    }
 
    // 如果没有找到,就直接返回空字符串
    return transform;
}

该措施用于获取浏览器支持的transform属性。如果回到的为空字符串,则代表近年来浏览器并不援救transform,今年我们就须要选用left,top值来更动成分的岗位。假若支持,就改造transform的值。

SVG简介

SVG是一种开放标准的矢量图形语言,使用svg格式大家得以直接用代码来描写图像,能够用别的文字管理工科具张开svg图像,通过改换部分代码来使图像具有交互功效,并得以每天插入到HTML中经过浏览器来浏览。

一、Sublime Text的特点:

跨平台、启动快

多行选取

各个实用插件

Snippets

支撑VIM宽容方式

Sublime Text获取地址:

对HTML的欠缺协理

先前大家选取其余前端框架,比方Cycle.js 、Widok、ScalaTags时,由于框架不协理HTML语法,前端程序员被迫浪费大批量岁月,手动把HTML改写成代码,然后稳步调试。

正是是永葆HTML语法的框架,比方ReactJS,帮忙情状也很星落云散。

诸如,在ReactJS中,你不可能这么写:

JavaScript

class BrokenReactComponent extends React.Component { render() { return ( <ol> <li class="unsupported-class">不支持 class 属性</li> <li style="background-color: red">不支持 style 属性</li> <li> <input type="checkbox" id="unsupported-for"/> <label for="unsupported-for">不支持 for 属性</label> </li> </ol> ); } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
class BrokenReactComponent extends React.Component {
  render() {
    return (
      <ol>
        <li class="unsupported-class">不支持 class 属性</li>
        <li style="background-color: red">不支持 style 属性</li>
        <li>
          <input type="checkbox" id="unsupported-for"/>
          <label for="unsupported-for">不支持 for 属性</label>
        </li>
      </ol>
    );
  }
}

前面三个程序猿必须手动把 classfor 属性替换到 classNamehtmlFor,还要把内联的 style 样式从CSS语法改成JSON语法,代码能力运维:

JavaScript

class WorkaroundReactComponent extends React.Component { render() { return ( <ol> <li className="workaround-class">被迫把 class 改成 className</li> <li style={{ backgroundColor: "red" }}>被迫把体制表改成 JSON</li> <li> <input type="checkbox" id="workaround-for"/> <label htmlFor="workaround-for">被迫把 for 改成 htmlFor</label> </li> </ol> ); } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
class WorkaroundReactComponent extends React.Component {
  render() {
    return (
      <ol>
        <li className="workaround-class">被迫把 class 改成 className</li>
        <li style={{ backgroundColor: "red" }}>被迫把样式表改成 JSON</li>
        <li>
          <input type="checkbox" id="workaround-for"/>
          <label htmlFor="workaround-for">被迫把 for 改成 htmlFor</label>
        </li>
      </ol>
    );
  }
}

这种开采形式下,前端程序员尽管能够把HTML原型复制粘贴到代码中,但还索要大量改动能力实际运维。比Cycle.js、Widok只怕ScalaTags省四处太多事。

品类地址

最后版的计算器,项目地址和预览图片在 GitHub:。

3、 怎么样获得成分的启幕地点

小编们第一要求得到到对象成分的起先地方,因而这里大家须求五个极度用来博取元素样式的效果函数。

但是获取成分样式在IE浏览器与别的浏览器有一部分不及,由此大家供给二个宽容性的写法。

JavaScript

function getStyle(elem, property) { // ie通过currentStyle来获得成分的样式,其他浏览器通过getComputedStyle来获得return document.defaultView.getComputedStyle ? document.defaultView.getComputedStyle(elem, false)[property] : elem.currentStyle[property]; }

1
2
3
4
function getStyle(elem, property) {
    // ie通过currentStyle来获取元素的样式,其他浏览器通过getComputedStyle来获取
    return document.defaultView.getComputedStyle ? document.defaultView.getComputedStyle(elem, false)[property] : elem.currentStyle[property];
}

有了这几个情势之后,就能够起来动手写获取指标成分开端地点的措施了。

JavaScript

function getTargetPos(elem) { var pos = {x: 0, y: 0}; var transform = getTransform(); if(transform) { var transformValue = getStyle(elem, transform); if(transformValue == 'none') { elem.style[transform] = 'translate(0, 0)'; return pos; } else { var temp = transformValue.match(/-?d+/g); return pos = { x: parseInt(temp[4].trim()), y: parseInt(temp[5].trim()) } } } else { if(getStyle(elem, 'position') == 'static') { elem.style.position = 'relative'; return pos; } else { var x = parseInt(getStyle(elem, 'left') ? getStyle(elem, 'left') : 0); var y = parseInt(getStyle(elem, 'top') ? getStyle(elem, 'top') : 0); return pos = { x: x, y: y } } } }

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
function getTargetPos(elem) {
    var pos = {x: 0, y: 0};
    var transform = getTransform();
    if(transform) {
        var transformValue = getStyle(elem, transform);
        if(transformValue == 'none') {
            elem.style[transform] = 'translate(0, 0)';
            return pos;
        } else {
            var temp = transformValue.match(/-?d+/g);
            return pos = {
                x: parseInt(temp[4].trim()),
                y: parseInt(temp[5].trim())
            }
        }
    } else {
        if(getStyle(elem, 'position') == 'static') {
            elem.style.position = 'relative';
            return pos;
        } else {
            var x = parseInt(getStyle(elem, 'left') ? getStyle(elem, 'left') : 0);
            var y = parseInt(getStyle(elem, 'top') ? getStyle(elem, 'top') : 0);
            return pos = {
                x: x,
                y: y
            }
        }
    }
}

在拖拽进程中,大家须要不停的安装目标元素的新岗位,那样它才会移动起来,因而大家须求叁个设置指标成分地点的点子。

JavaScript

// pos = { x: 200, y: 100 } function setTargetPos(elem, pos) { var transform = getTransform(); if(transform) { elem.style[transform] = 'translate('+ pos.x +'px, '+ pos.y +'px)'; } else { elem.style.left = pos.x + 'px'; elem.style.top = pos.y + 'px'; } return elem; }

1
2
3
4
5
6
7
8
9
10
11
// pos = { x: 200, y: 100 }
function setTargetPos(elem, pos) {
    var transform = getTransform();
    if(transform) {
        elem.style[transform] = 'translate('+ pos.x +'px, '+ pos.y +'px)';
    } else {
        elem.style.left = pos.x + 'px';
        elem.style.top = pos.y + 'px';
    }
    return elem;
}

SVG优缺点:

优点 缺点
1.缩放无损还原,显示清晰 1.SVG在绘制的性能上比PNG要差
2.语义性良好 2.局限性,对应单色或普通渐变没什么问题,但对不规则的渐变以及特效叠加效果显示不全
3.可用CSS控制图标样式以及动画 3.兼容性稍差,android4.1才开始支持
4.减少http请求 4.学习应用成本较高

二、常用的插件

Package Control:安装别的插件在此之前,首先先安装Package Control

Emmet:Web开垦者的工具包,能够大大进步你的HTML和CSS的办事流程

SublimeCodeIntel:代码提醒

DocBlocker:对js代码举行注脚

云顶娱乐集团,JSFormat:格式化js代码

Terminal:使用vim命令

不一致盟原生DOM操作

另外,ReactJS等片段前端框架,会生成设想DOM。设想DOM无法配合浏览器原生的DOM API ,导致和jQuery、D3等其余库同盟时困难重重。比方ReactJS更新DOM对象时日常会损坏掉jQuery控件。

Reddit重重人商酌了那个难点。他们不曾章程,只好弃用jQuery。作者司的某客户在用了ReactJS后也被迫用ReactJS重写了大气jQeury控件。

效果与利益表达

最终版的功用如下:

  1. 分界面布局选择CSS3 的 Flex box布局
  2. 嵌入两套主题可切换
  3. 测算历史记录展现
  4. 左滑右滑能够切换双臂情势(App)
  5. 当输动手提式有线电话机号码后长按约等于号能够拨打手机号码(App)
  6. 本子更新检查(App)

分界面布局

由于那么些项目只是练手,所以利用了HTML5个CSS3才具,也不筹算包容IE等低版本浏览器,所以直接行使CSS3提供的Flexbox布局格局。而且采纳rem单位来进展自动计算尺寸。

计算总计历史记录展现效果,使用HTML5提供的地头存款和储蓄功用之Local Storage,为了方便使用Local Storage,对它实行了总结的包裹(见js/common.js文本)使之key值按自然规律生产,方便管理。

云顶娱乐集团 4

key由appName+id组成,id是机动增进不重复的,能够按id和appName删除一条记下,输入*则整个去除。

打包APP

活动Web版总括器写完后,又想把他做成都电讯工程大学脑软件在手提式有线电话机上运营,由于小编没用过混合应用软件诸如ionic之类的框架,所以参谋了一晃,选用了Hbuild来进行付出和APP的包装,极其便利。(HBuild).

双脚形式

左滑右滑能够切换单臂格局,这就供给活动端的touch事件了,使用如下代码判别是左滑依旧又滑:

JavaScript

/** 双臂格局 */ function singleModel(){ var calc = document.getElementById("calc"); var startX = 0,moveX = 0,distanceX = 0; var distance = 100; var width = calc.offsetWidth; //滑动事件 calc.add伊芙ntListener("touchstart",function(e){ startX = e.touches[0].clientX; }); calc.addEventListener("touchmove",function(e){ moveX = e.touches[0].clientX; distanceX = moveX - startX; isMove = true; }); window.addEventListener("touchend",function(e){ if(Math.abs(distanceX) > width/3 && isMove){ if( distanceX > 0 ){ positionFun("right"); //右滑 }else{ positionFun("left"); //作滑 } } startY = moveY = 0; isMove = false; }); }

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
/** 单手模式 */
function singleModel(){
    var calc = document.getElementById("calc");
    var startX = 0,moveX = 0,distanceX = 0;
    var distance = 100;  
    var width = calc.offsetWidth;
    //滑动事件
    calc.addEventListener("touchstart",function(e){
        startX = e.touches[0].clientX;
    });
    calc.addEventListener("touchmove",function(e){
        moveX = e.touches[0].clientX;
        distanceX = moveX - startX;
        isMove = true;
    });
    window.addEventListener("touchend",function(e){
        if(Math.abs(distanceX) > width/3 && isMove){
            if( distanceX > 0 ){
                positionFun("right");        //右滑
            }else{
                positionFun("left");          //作滑
            }
        }
        startY = moveY = 0;
        isMove = false;
    });  
}

假诺是坐滑,就position:absolut;left:0,bottom:0,再把最外层DIV缩短到七成,那样就落到实处了左滑总计器缩短移动到左下角。右滑道理同样。

对讲机拨打功效

当输动手提式无线电话机号码后长按相当于号能够拨打手提式有线电话机号码。这些作用没什么神奇,在运动Web上会对那几个看起来疑似电话号码的数字管理为电话链接,比方:

  • 7位数字,形如:1234567
  • 带括号及加号的数字,形如:(+86)123456789
  • 双连接线的数字,形如:00-00-00111
  • 11位数字,形如:13800138000

或然还应该有其他类别的数字也会被辨认。大家得以通过如下的meta来开启电话号码的自动识别:

XHTML

<meta name="format-detection" content="telephone=yes" />

1
<meta name="format-detection" content="telephone=yes" />

敞开电话职能

XHTML

<a href="tel:123456">123456</a>

1
<a href="tel:123456">123456</a>

翻开短信功用:

XHTML

<a href="sms:123456">123456</a>

1
<a href="sms:123456">123456</a>

可是,在Android系统上,只可以调用系统的拨号分界面,在iOS上则能调过这一步直接把电话拨打出来。

本子更新检查

在关于页面,有三个本子更新检查按钮,就会检查是还是不是有新本子,这些功用的规律是发送叁个JSOPN乞请去反省服务器上的JSON文件,比对版本号,借使服务器上的本子比APP的本子高则会提示有新本子能够下载。

客户端JavaScript代码:

JavaScript

云顶娱乐网站,function updateApp(){ //检查新本子 var updateApp = document.getElementById("updateApp"); updateApp.onclick = function(){ var _this = this; $.ajax({ type:'get', url:'', dataType:'jsonp', beforeSend : function(){ _this.innerHTML = "<i class='iconfont updateAppIcon updateAppIconRotate'></i> 正在检查新版本..."; }, success:function(data){ var newVer = data[0].version; if(newVer > appConfig.version){ var log = data[0].log; var downloadUrl = data[0].downloadUrl; if(confirm("检查到新本子【"+newVer+"】,是不是立时下载?n 更新日志:n " + log)){ var a = document.getElementById("telPhone"); a.href = downloadUrl; a.target = "_blank"; a.click(); } }else{ alert("你很潮哦,当前早已经是最新版本!"); } _this.innerHTML = "<i class='iconfont updateAppIcon'></i> 检查新本子"; }, error:function(msg){ _this.innerHTML = "<i class='iconfont updateAppIcon'></i> 检查新本子"; alert("检查战败:"+msg.message); } }); } }

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
function updateApp(){
    //检查新版本
    var updateApp = document.getElementById("updateApp");
    updateApp.onclick = function(){
        var _this = this;
        $.ajax({
            type:'get',
            url:'http://duni.sinaapp.com/demo/app.php?jsoncallback=?',
            dataType:'jsonp',
            beforeSend : function(){
                _this.innerHTML = "<i class='iconfont updateAppIcon updateAppIconRotate'></i> 正在检查新版本...";
            },
            success:function(data){
                var newVer = data[0].version;
                if(newVer > appConfig.version){
                    var log = data[0].log;
                    var downloadUrl = data[0].downloadUrl;
                    if(confirm("检查到新版本【"+newVer+"】,是否立即下载?n 更新日志:n " + log)){
                        var a = document.getElementById("telPhone");
                        a.href = downloadUrl;
                        a.target = "_blank";
                        a.click();
                    }
                }else{
                    alert("你很潮哦,当前已经是最新版本!");
                }
                _this.innerHTML = "<i class='iconfont updateAppIcon'></i> 检查新版本";
            },
            error:function(msg){
                _this.innerHTML = "<i class='iconfont updateAppIcon'></i> 检查新版本";
                alert("检查失败:"+msg.message);
            }
        });
    }
}

服务端JSON:

JavaScript

[ { "version":"3.1.0", "downloadUrl":"", "hashCode":"二〇一五0812224616", "log":"1.新扩充切换主题功用 n 2.新增加双臂切换形式功效 n 3.调整UI " } ]

1
2
3
4
5
6
7
8
[
    {
        "version":"3.1.0",
        "downloadUrl":"http://dunizb.b0.upaiyun.com/demo/app/myCalc-3.1.0.apk",
        "hashCode":"20160812224616",
        "log":"1.新增切换主题功能 n 2.新增单手切换模式功能 n 3.调整UI "
    }
]
5、大家供给用到什么样事件?

在pc上的浏览器中,结合mousedown、mousemove、mouseup那七个事件能够帮助我们达成拖拽。

  • mousedown 鼠标按下时接触
  • mousemove 鼠标按下后拖动时接触
  • mouseup 鼠标甩手时触发

而在移动端,分别与之相应的则是touchstart、touchmove、touchend

HTML也能够静态编写翻译,前端基础进级。当我们将成分绑定这几个事件时,有三个事变目的将会作为参数字传送递给回调函数,通过事件指标,大家得以拿走到当下鼠标的确切地方,鼠标地点音讯是贯彻拖拽的主要。

事件目的比较重大,当中包括了那多少个多的有效的音信,这里小编就不扩充了,大家能够在函数中将事件指标打字与印刷出来查看里面的求实性质,那几个法子对于记不清事件目的首要性质的童鞋特别有效。

PS:SVG 为啥平昔不代表 iconfont?

1.PC 端 SVG 有宽容性难点,因此 PC 端依旧用 iconfont 相比可相信。那么,与其为活动端多弄一套 SVG 方案,为啥不直接公用同一套 iconfont 库?开销难题。

2.明白 SVG Pepsi-Cola 的人异常少,而 iconfont 几乎成为前端面试必考题了。

3.抛开宽容,再不怕SVG的局限性:单色或线性渐变(从左向右笔直进行潜移默化),径向渐变(从内到外进行圆形渐变)都没难点、不过不法则的渐变、就落实持续了。

4.SVG比图片麻烦、设计稿假如不优化节点、直接导出、代码量那一个惊人,但是ai导出的SVG代码、节点优化后,也不能够直接用、还得小改、总体来讲SVG比图片好成本功力太多。

2.1 Package Control

安装别的插件以前,首先先安装Package Control,具体步骤如下:

使用Ctrl+`飞速键可能通过View->Show Console菜单展开命令行,

Sublime text3粘贴如下代码:

JavaScript

import urllib.request,os; pf = 'PackageControl.sublime-package'; ipp = sublime.installed_packages_path();urllib.request.install_opener( urllib.request.build_opener(urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf),'wb').write(urllib.request.urlopen( '; + pf.replace('','%20')).read())

1
import urllib.request,os; pf = &#039;PackageControl.sublime-package&#039;; ipp = sublime.installed_packages_path();urllib.request.install_opener( urllib.request.build_opener(urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf),&#039;wb&#039;).write(urllib.request.urlopen( &#039;http://sublime.wbond.net/&#039; + pf.replace(&#039;&#039;,&#039;%20&#039;)).read())

Sublime text2粘贴如下代码:

JavaScript

import urllib2,os; pf='PackageControl.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs(ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener(urllib2.build_opener( urllib2.ProxyHandler( ))); open( os.path.join( ipp, pf),'wb' ).write( urllib2.urlopen( '; +pf.replace( '','%20' )).read()); print( 'Please restart Sublime Text to finishinstallation')

1
import urllib2,os; pf=&#039;PackageControl.sublime-package&#039;; ipp = sublime.installed_packages_path(); os.makedirs(ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener(urllib2.build_opener( urllib2.ProxyHandler( ))); open( os.path.join( ipp, pf),&#039;wb&#039; ).write( urllib2.urlopen( &#039;http://sublime.wbond.net/&#039; +pf.replace( &#039;&#039;,&#039;%20&#039; )).read()); print( &#039;Please restart Sublime Text to finishinstallation&#039;)

假若顺遂的话,此时就足以在Preferences菜单下见到Package Settings和Package Control多少个菜单了。

大概鉴于各个缘由,不能够运用代码安装,这能够透过以下步骤手动安装Package Control:

a.Package Control下载地址:
b.点击Preferences>BrowsePackages菜单
c.进去展开的目录的上层目录,然后再进来Installed Packages/目录
d.下载Package Control.sublime-package并复制到Installed Packages/目录
e.重启SublimeText。

Binding.scala中的XHTML

最近有了Binding.scala ,能够在@dom措施中,直接编写XHTML。譬如:

JavaScript

@dom def introductionDiv = { <div style="font-size:0.8em"> <h3>Binding.scala的优点</h3> <ul> <li>简单</li> <li>概念少<br/>功能多</li> </ul> </div> }

1
2
3
4
5
6
7
8
9
@dom def introductionDiv = {
  <div style="font-size:0.8em">
    <h3>Binding.scala的优点</h3>
    <ul>
      <li>简单</li>
      <li>概念少<br/>功能多</li>
    </ul>
  </div>
}

如上代码会被编译,间接创立真实的DOM对象,而尚未设想DOM。

Binding.scala对浏览器原生DOM的协助很好,你能够在那几个DOM对象上调用DOM API,与 D3、jQuery等别的库交互也统统没极度。

ReactJS对XHTML语法的欠缺不全。相比较之下,Binding.scala援助完整的XHTML语法,前端程序猿能够平昔把设计好的HTML原型复制粘贴到代码中,整个网址就可以运维了。

下个本子安插

眼前3.1.0本子还存在部分标题:

  1. 出于JS本身存在计量浮点数精度遗失难题,所以这些难题在类型中允许存在,必要和睦去管理那些主题材料
  2. 由于使用了第三方的气象接口,用了jquery.Ajax方法,所以违背了动用纯原生写的最初的心意。

由此下个本子的开辟安插为:

  1. 缓和浮点数计算精度难点
  2. 把得到天气音信的jquery.Ajax方法替换为原生JavaScript代码,自身封装JSONP央浼函数
  3. 应用面向对象格局重构应用软件

接待大家到github上来寻访,假如喜欢能够star、watch一下,或提issue。

4 赞 21 收藏 2 评论

云顶娱乐集团 5

6、拖拽的准绳

当事件触发时,大家能够因而事件目的获得到鼠标的精切地点。那是落实拖拽的首要。当鼠标按下(mousedown触发)时,大家须要牢记鼠标的发端地点与对象成分的发端地方,咱们的对象正是贯彻当鼠标移动时,指标成分也随之移动,依照原理我们得以吸取如下事关:

挪动后的鼠标地方 - 鼠标开头地方 = 移动后的指标成分地点 - 指标成分的伊始地方

1
移动后的鼠标位置 - 鼠标初始位置 = 移动后的目标元素位置 - 目标元素的初始位置

如若鼠标地方的差值大家用dis来表示,那么目的成分的地点就非凡:

移步后指标成分的职位 = dis + 目的成分的最早位置

1
移动后目标元素的位置 = dis + 目标元素的初始位置

通过事件目的,大家得以精确的驾驭鼠标的近些日子地点,因而当鼠标拖动(mousemove)时,大家得以不停的猜度出鼠标移动的差值,以此来求出指标成分的当前职分。那一个进度,就兑现了拖拽。

而在鼠标松手(mouseup)甘休拖拽时,大家需求管理部分完毕专门的学问。详细的情况见代码。

Web应用中SVG的运用格局

2.2 Emmet

Emmet是三个Web开垦者的工具包,能够大大进步你的HTML和CSS的办事流程。

很多,大好些个的文件编辑器都会同意你存款和储蓄和重用一些代码块,大家称为“片段”。即使有的能很好地力促您得生产力,但大多数的落成都有那样一个重疾:你不能够不先定义你得代码片段,並且无法再运维时开展实行。Emmet把一些这么些概念升高到了一个新的档次:你能够安装CSS情势的能够动态被深入分析的表达式,然后依据你所输入的缩写来博取相应的内容。Emmet是很成熟的还要极度适用于编写HTML/XML 和 CSS 代码的前端开垦人士,但也足以用来编程语言。

云顶娱乐集团 6

Binding.scala中XHTML的类型

@dom措施中XHTML对象的花色是Node的派生类。

比如,<div></div> 的类别便是HTMLDivElement,而 <button></button> 的类型便是 HTMLButtonElement。

此外, @dom 阐明会修改总体艺术的重回值,包装成两个Binding。

JavaScript

@dom def typedButton: Binding[HTMLButtonElement] = { <button>按钮</button> }

1
2
3
@dom def typedButton: Binding[HTMLButtonElement] = {
  <button>按钮</button>
}

注意typedButton是个原生的HTMLButtonElement,所以能够直接对它调用 DOM API。比如:

JavaScript

@dom val autoPrintln: Binding[Unit] = { println(typedButton.bind.innerHTML) // 在调控台中打印按键内部的 HTML } autoPrintln.watch()

1
2
3
4
@dom val autoPrintln: Binding[Unit] = {
  println(typedButton.bind.innerHTML) // 在控制台中打印按钮内部的 HTML
}
autoPrintln.watch()

这段代码中,typedButton.bind.innerHTML 调用了 DOM API HTMLButtonElement.innerHTML。通过autoPrintln.watch(),每当开关发生更新,autoPrintln中的代码就能够施行三回。

7、 作者又来推举思维导图协助写代码了

日常有新人朋友跑来问作者,借使逻辑思维技能不强,能或无法写代码做前端。小编的答案是:能。因为依附思维导图,可以相当轻易的弥补逻辑的短板。况兼比在和谐头脑中脑补逻辑更是清晰明了,不易出错。

下面第六点笔者介绍了规律,因而咋做就展现不是那么难了,而实际的手续,则在底下的考虑导图中显明给出,大家只须求遵守那个手续来写代码就能够,试试看,一定非常轻易。

云顶娱乐集团 7

行使思维导图清晰的表达出总体拖拽进程大家需求干的业务

1.用到img、object、embed 标签直接征引SVG

此方法的欠缺首要在于每一种Logo都需单独保存成三个 SVG 文件,使用时单身乞请,增添了HTTP央求数量。

XHTML

<img src="" width="300" />

1
<img src="http://www.w3school.com.cn/svg/rect1.svg"  width="300" />
2.2.1 安装Emmet

a、经过火速键组合ctrl+shift+P唤出命令面板
b、在面板中输入“install package”后回车
c、跟着输入“Emmet”,等待安装到位。

其他HTML节点

Binding.scala支持HTML注释:

JavaScript

@dom def comment = { <!-- 你看不见作者 --> }

1
2
3
@dom def comment = {
  <!-- 你看不见我 -->
}

Binding.scala也支持CDATA块:

JavaScript

@dom def inlineStyle = { <section> <style><![CDATA[ .highlight { background-color:gold } ]]></style> <p class="highlight">Binding.scala真好用!</p> </section> }

1
2
3
4
5
6
7
8
9
10
@dom def inlineStyle = {
  <section>
    <style><![CDATA[
      .highlight {
        background-color:gold
      }
    ]]></style>
    <p class="highlight">Binding.scala真好用!</p>
  </section>
}
8、代码完成

part1、筹算干活

JavaScript

// 获取指标成分对象 var oElem = document.getElementById('target'); // 申明2个变量用来保存鼠标起始地点的x,y坐标 var startX = 0; var startY = 0; // 阐明2个变量用来保存目的成分开头地方的x,y坐标 var sourceX = 0; var sourceY = 0;

1
2
3
4
5
6
7
8
9
10
// 获取目标元素对象
var oElem = document.getElementById('target');
 
// 声明2个变量用来保存鼠标初始位置的x,y坐标
var startX = 0;
var startY = 0;
 
// 声明2个变量用来保存目标元素初始位置的x,y坐标
var sourceX = 0;
var sourceY = 0;

part2、作用函数

因为前边已经贴过代码,就不再重复

JavaScript

// 获取当前浏览器扶助的transform宽容写法 function getTransform() {} // 获取成分属性 function getStyle(elem, property) {} // 获取成分的初叶地点function getTargetPos(elem) {} // 设置成分的发端地方 function setTargetPos(elem, potions) {}

1
2
3
4
5
6
7
8
9
10
11
// 获取当前浏览器支持的transform兼容写法
function getTransform() {}
 
// 获取元素属性
function getStyle(elem, property) {}
 
// 获取元素的初始位置
function getTargetPos(elem) {}
 
// 设置元素的初始位置
function setTargetPos(elem, potions) {}

part3、注明多个事件的回调函数

这四个主意正是促成拖拽的中坚所在,小编将从严遵照上边思维导图中的步骤来完毕大家的代码。

JavaScript

// 绑定在mousedown上的回调,event为流传的事件指标 function start(event) { // 获取鼠标初阶地点 startX = event.pageX; startY = event.pageY; // 获取成分开始地方 var pos = getTargetPos(oElem); sourceX = pos.x; sourceY = pos.y; // 绑定 document.add伊夫ntListener('mousemove', move, false); document.add伊夫ntListener('mouseup', end, false); } function move(event) { // 获取鼠标当前任务 var currentX = event.pageX; var currentY = event.pageY; // 总括差值 var distanceX = currentX - startX; var distanceY = currentY - startY; // 总括并安装成分当前岗位 setTargetPos(oElem, { x: (sourceX + distanceX).toFixed(), y: (sourceY + distanceY).toFixed() }) } function end(event) { document.removeEventListener('mousemove', move); document.removeEventListener('mouseup', end); // do other things }

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
// 绑定在mousedown上的回调,event为传入的事件对象
function start(event) {
    // 获取鼠标初始位置
    startX = event.pageX;
    startY = event.pageY;
 
    // 获取元素初始位置
    var pos = getTargetPos(oElem);
 
    sourceX = pos.x;
    sourceY = pos.y;
 
    // 绑定
    document.addEventListener('mousemove', move, false);
    document.addEventListener('mouseup', end, false);
}
 
function move(event) {
    // 获取鼠标当前位置
    var currentX = event.pageX;
    var currentY = event.pageY;
 
    // 计算差值
    var distanceX = currentX - startX;
    var distanceY = currentY - startY;
 
    // 计算并设置元素当前位置
    setTargetPos(oElem, {
        x: (sourceX + distanceX).toFixed(),
        y: (sourceY + distanceY).toFixed()
    })
}
 
function end(event) {
    document.removeEventListener('mousemove', move);
    document.removeEventListener('mouseup', end);
    // do other things
}

OK,贰个粗略的拖拽,就这么欢畅的贯彻了。点击下边包车型大巴链接,能够在线查看该例子的demo。

利用原生js达成拖拽

2.Inline SVG,直接把SVG写入 HTML 中

Inline SVG 作为HTML文书档案的一有个别,不要求独自须要。有的时候必要修改有个别Logo的形态也正如平价。不过Inline SVG使用上比较麻烦,供给在页面中插入一大块SVG代码不符合手写,Logo复用起来也相比较辛劳。

XHTML

<body> <svg width="100%" height="100%"> <rect x="20" y="20" width="250" height="250" style="fill:#fecdddd;"/> </svg> </body>

1
2
3
4
5
<body>
    <svg width="100%" height="100%">
        <rect x="20" y="20" width="250" height="250" style="fill:#fecdddd;"/>
    </svg>
</body>
2.2.2 使用Emmet

内嵌Scala代码

除开能够把XHTML内嵌在Scala代码中的 @dom 方法中,Binding.scala 还辅助用 { ... } 语法把 Scala 代码内嵌到XHTML中。比方:

JavaScript

@dom def randomParagraph = { <p>生成一个随意数: { math.random.toString }</p> }

1
2
3
@dom def randomParagraph = {
  <p>生成一个随机数: { math.random.toString }</p>
}

XHTML中内嵌的Scala代码能够用 .bind 绑定变量只怕调用其余 @dom 方法,比如:

JavaScript

val now = Var(new Date) window.setInterval(一千) { now := new Date } @dom def render = { <div> 现在时间:{ now.bind.toString } { introductionDiv.bind } { inlineStyle.bind } { typedButton.bind } { comment.bind } { randomParagraph.bind } </div> }

1
2
3
4
5
6
7
8
9
10
11
12
13
val now = Var(new Date)
window.setInterval(1000) { now := new Date }
 
@dom def render = {
  <div>
    现在时间:{ now.bind.toString }
    { introductionDiv.bind }
    { inlineStyle.bind }
    { typedButton.bind }
    { comment.bind }
    { randomParagraph.bind }
  </div>
}

上述代码渲染出的网页中,时间会动态更动。

9、封装拖拽对象

在眼前一章作者给大家大饱眼福了面向对象怎么着贯彻,基于那个基础知识,我们来将地点完结的拖拽封装为三个拖拽对象。大家的对象是,只要大家声多美滋(Dumex)(Karicare)个拖拽实例,那么传入的指标元素将电动具备能够被拖拽的意义。

在骨子里支出中,一个目标我们经常会单独放在八个js文件中,那几个js文件将独自作为多少个模块,利用各类模块的方法组织起来使用。当然这里未有复杂的模块交互,因为这一个例子,大家只需求二个模块就能够。

为了幸免变量污染,大家须求将模块放置于三个函数自进行办法模拟的块级作用域中。

JavaScript

; (function() { ... })();

1
2
3
4
;
(function() {
    ...
})();

在通常的模块协会中,大家只是独自的将洋洋js文件减弱成为二个js文件,由此这里的第多少个分店则是为了防止万一上一个模块的终极不用分号导致报错。不能缺少。当然在经过require恐怕ES6模块等艺术就不会并发如此的动静。

大家了然,在包装叁个对象的时候,大家能够将品质与方法放置于构造函数或许原型中,而在扩张了自实行函数之后,大家又有啥不可将品质和格局幸免与模块的里边功效域。那是闭包的学识。

那便是说大家面对的挑衅就在于,如何客观的管理属性与艺术的任务。

理当如此,每三个目的的情状都分化,不能够同样注重,大家须求鲜明的领悟这两种职位的特色工夫做出最切合的支配。

  • 构造函数中: 属性与情势为当前实例单独具备,只好被当下实例访谈,何况每声明一(Karicare)个实例,个中的点子都会被再度创立一回。
  • 原型中: 属性与方法为保有实例共同全体,可以被全体实例访谈,新申明实例不会再度成立方法。
  • 模块作用域中:属性和形式不能够被别的实例访问,但是能被中间方法访问,新评释的实例,不会再度创立同样的秘籍。

对于措施的剖断相比轻巧。

因为在构造函数中的方法总会在宣称一个新的实例时被再度创立,因而我们注脚的办法都尽量幸免现身在构造函数中。

而一旦您的章程中须要用到构造函数中的变量,恐怕想要公开,那就供给放在原型中。

如若措施须求个人不被外面访谈,那么就放置在模块功能域中。

对于属性放置于怎么着职位有个别时候很难做出科学的推断,由此笔者很难交付一个标准的定义告诉您怎么着性质必供给放在如何地点,那需求在骨子里支出中不仅的下结论经验。不过总的来讲,如故要组成那四个岗位的特色来做出最合适的判断。

假设属性值只可以被实例单独具备,举例person对象的name,只好属于某三个person实例,又比如此处拖拽对象中,某三个成分的上马地点,也仅仅只是这么些成分的当下地点,那么些特性,则切合放在构造函数中。

而只要五个性质仅仅供内部方法访谈,那天性格就切合放在模块作用域中。

至于面向对象,下边包车型大巴几点酌量本人觉着是那篇小说最值得认真思索的精髓。如若在封装时未有考虑清楚,很恐怕会碰到重重你想不到的bug,所以提议我们结合自个儿的支出经历,多多考虑,总括出团结的见地。

依附这个思想,大家能够团结尝试封装一下。然后与自个儿的做一些比较,看看大家的主见有何分化,在上边例子的解说中,作者将本人的主见表明出来。

点击查阅已经封装好的demo

js 源码

JavaScript

; (function() { // 那是三个私家属性,无需被实例访谈 var transform = getTransform(); function Drag(selector) { // 放在构造函数中的属性,都以属于每一个实例单独具备 this.elem = typeof selector == 'Object' ? selector : document.getElementById(selector); this.startX = 0; this.startY = 0; this.sourceX = 0; this.sourceY = 0; this.init(); } // 原型 Drag.prototype = { constructor: Drag, init: function() { // 开首时需求做些什么事情 this.setDrag(); }, // 稍作改换,仅用于获取当前因素的天性,类似于getName getStyle: function(property) { return document.defaultView.getComputedStyle ? document.defaultView.getComputedStyle(this.elem, false)[property] : this.elem.currentStyle[property]; }, // 用来拿到当前因素的地方消息,注意与此前的不相同之处 getPosition: function() { var pos = {x: 0, y: 0}; if(transform) { var transformValue = this.getStyle(transform); if(transformValue == 'none') { this.elem.style[transform] = 'translate(0, 0)'; } else { var temp = transformValue.match(/-?d+/g); pos = { x: parseInt(temp[4].trim()), y: parseInt(temp[5].trim()) } } } else { if(this.getStyle('position') == 'static') { this.elem.style.position = 'relative'; } else { pos = { x: parseInt(this.getStyle('left') ? this.getStyle('left') : 0), y: parseInt(this.getStyle('top') ? this.getStyle('top') : 0) } } } return pos; }, // 用来安装当前因素的职位 setPostion: function(pos) { if(transform) { this.elem.style[transform] = 'translate('+ pos.x +'px, '+ pos.y +'px)'; } else { this.elem.style.left = pos.x + 'px'; this.elem.style.top = pos.y + 'px'; } }, // 该措施用来绑定事件 setDrag: function() { var self = this; this.elem.add伊夫ntListener('mousedown', start, false); function start(event) { self.startX = event.pageX; self.startY = event.pageY; var pos = self.getPosition(); self.sourceX = pos.x; self.sourceY = pos.y; document.add伊夫ntListener('mousemove', move, false); document.add伊夫ntListener('mouseup', end, false); } function move(event) { var currentX = event.pageX; var currentY = event.pageY; var distanceX = currentX - self.startX; var distanceY = currentY - self.startY; self.setPostion({ x: (self.sourceX + distanceX).toFixed(), y: (self.sourceY + distanceY).toFixed() }) } function end(event) { document.removeEventListener('mousemove', move); document.removeEventListener('mouseup', end); // do other things } } } // 私有方法,仅仅用来取得transform的相配写法 function getTransform() { var transform = '', divStyle = document.createElement('div').style, transformArr = ['transform', 'webkitTransform', 'MozTransform', 'msTransform', 'OTransform'], i = 0, len = transformArr.length; for(; i < len; i++) { if(transformArr[i] in divStyle) { return transform = transformArr[i]; } } return transform; } // 一种对外暴光的办法 window.Drag = Drag; })(); // 使用:注解2个拖拽实例 new Drag('target'); new Drag('target2');

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
;
(function() {
    // 这是一个私有属性,不需要被实例访问
    var transform = getTransform();
 
    function Drag(selector) {
        // 放在构造函数中的属性,都是属于每一个实例单独拥有
        this.elem = typeof selector == 'Object' ? selector : document.getElementById(selector);
        this.startX = 0;
        this.startY = 0;
        this.sourceX = 0;
        this.sourceY = 0;
 
        this.init();
    }
 
 
    // 原型
    Drag.prototype = {
        constructor: Drag,
 
        init: function() {
            // 初始时需要做些什么事情
            this.setDrag();
        },
 
        // 稍作改造,仅用于获取当前元素的属性,类似于getName
        getStyle: function(property) {
            return document.defaultView.getComputedStyle ? document.defaultView.getComputedStyle(this.elem, false)[property] : this.elem.currentStyle[property];
        },
 
        // 用来获取当前元素的位置信息,注意与之前的不同之处
        getPosition: function() {
            var pos = {x: 0, y: 0};
            if(transform) {
                var transformValue = this.getStyle(transform);
                if(transformValue == 'none') {
                    this.elem.style[transform] = 'translate(0, 0)';
                } else {
                    var temp = transformValue.match(/-?d+/g);
                    pos = {
                        x: parseInt(temp[4].trim()),
                        y: parseInt(temp[5].trim())
                    }
                }
            } else {
                if(this.getStyle('position') == 'static') {
                    this.elem.style.position = 'relative';
                } else {
                    pos = {
                        x: parseInt(this.getStyle('left') ? this.getStyle('left') : 0),
                        y: parseInt(this.getStyle('top') ? this.getStyle('top') : 0)
                    }
                }
            }
 
            return pos;
        },
 
        // 用来设置当前元素的位置
        setPostion: function(pos) {
            if(transform) {
                this.elem.style[transform] = 'translate('+ pos.x +'px, '+ pos.y +'px)';
            } else {
                this.elem.style.left = pos.x + 'px';
                this.elem.style.top = pos.y + 'px';
            }
        },
 
        // 该方法用来绑定事件
        setDrag: function() {
            var self = this;
            this.elem.addEventListener('mousedown', start, false);
            function start(event) {
                self.startX = event.pageX;
                self.startY = event.pageY;
 
                var pos = self.getPosition();
 
                self.sourceX = pos.x;
                self.sourceY = pos.y;
 
                document.addEventListener('mousemove', move, false);
                document.addEventListener('mouseup', end, false);
            }
 
            function move(event) {
                var currentX = event.pageX;
                var currentY = event.pageY;
 
                var distanceX = currentX - self.startX;
                var distanceY = currentY - self.startY;
 
                self.setPostion({
                    x: (self.sourceX + distanceX).toFixed(),
                    y: (self.sourceY + distanceY).toFixed()
                })
            }
 
            function end(event) {
                document.removeEventListener('mousemove', move);
                document.removeEventListener('mouseup', end);
                // do other things
            }
        }
    }
 
    // 私有方法,仅仅用来获取transform的兼容写法
    function getTransform() {
        var transform = '',
            divStyle = document.createElement('div').style,
            transformArr = ['transform', 'webkitTransform', 'MozTransform', 'msTransform', 'OTransform'],
 
            i = 0,
            len = transformArr.length;
 
        for(; i < len; i++)  {
            if(transformArr[i] in divStyle) {
                return transform = transformArr[i];
            }
        }
 
        return transform;
    }
 
    // 一种对外暴露的方式
    window.Drag = Drag;
})();
 
// 使用:声明2个拖拽实例
new Drag('target');
new Drag('target2');

这么贰个拖拽对象就封装达成了。

建议大家依据本人提供的商讨方法,多多尝试封装一些组件。比方封装二个弹窗,封装二个巡回轮播等。练得多了,面向对象就不再是难点了。这种思想方法,在以往其他时候都以力所能致采用的。

下一章深入分析jQuery对象的贯彻,与哪些将大家那边封装的拖拽对象扩展为jQuery插件。

2 赞 1 收藏 评论

云顶娱乐集团 8

3.SVG Sprite

此地的7-Up本领,类似于CSS中的百事可乐本领。Logo图形组成在一齐,实际显示的时候正确展现特定Logo。其实基础的SVG 7-Up也只是将原先的位图改成了SVG而已,调控SVG大小、颜色需求再一次合併SVG文件。

XHTML

.icon-bg{ display: inline-block; width: 30px; height: 30px; background: url(./res/svg-sprite-background.svg); background-size:100% 100%; } .icon-facebook-logo{ background-position: 0 0; } .icon-earth{ background-position: 0 -30px; } <span class="icon-bg icon-facebook-logo"></span> <span class="icon-bg icon-earth"></span>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.icon-bg{
    display: inline-block;
    width: 30px;
    height: 30px;
    background: url(./res/svg-sprite-background.svg);
    background-size:100% 100%;
}
.icon-facebook-logo{
    background-position: 0 0;
}
.icon-earth{
    background-position: 0 -30px;
}
<span class="icon-bg icon-facebook-logo"></span>
<span class="icon-bg icon-earth"></span>
1) html初始化

输入“!”或“html:5”,然后按Tab键:

云顶娱乐集团 9

html:5 或!:用来HTML5文书档案类型
html:xt:用于XHTML过渡文书档案类型
html:4s:用以HTML4严谨文书档案类型

强类型的 XHTML

Binding.scala中的XHTML 都支持静态类型检查。举例:

JavaScript

@dom def typo = { val myDiv = <div typoProperty="xx">content</div> myDiv.typoMethod() myDiv }

1
2
3
4
5
@dom def typo = {
  val myDiv = <div typoProperty="xx">content</div>
  myDiv.typoMethod()
  myDiv
}

是因为上述代码有拼写错误,编写翻译器就会报错:

JavaScript

typo.scala:23: value typoProperty is not a member of org.scalajs.dom.html.Div val myDiv = <div typoProperty="xx">content</div> ^ typo.scala:24: value typoMethod is not a member of org.scalajs.dom.html.Div myDiv.typoMethod() ^

1
2
3
4
5
6
typo.scala:23: value typoProperty is not a member of org.scalajs.dom.html.Div
        val myDiv = <div typoProperty="xx">content</div>
                     ^
typo.scala:24: value typoMethod is not a member of org.scalajs.dom.html.Div
        myDiv.typoMethod()
              ^

本文由云顶娱乐集团发布于云顶娱乐集团,转载请注明出处:HTML也能够静态编写翻译,前端基础进级

关键词: