您的位置:奥门新浦京网址 > Wed前段 > 页面制作之开发调试工具,前端简洁并实用的工

页面制作之开发调试工具,前端简洁并实用的工

发布时间:2019-12-03 06:53编辑:Wed前段浏览(56)

    使用 SVG 输出 Octicon

    2016/03/18 · HTML5 · SVG

    原文出处: aaronshekey   译文出处:[百度EFE

    • Justineo]()   

    GitHub.com 现在不再使用字体来输出图标了。我们把代码库中所有的 Octicon 替换成了 SVG 版本。虽然这些改动并不那么明显,但你马上就能体会到 SVG 图标的优点。

    图片 1

    Octicon 上的对比

    切换到 SVG 以后,图标会作为图片渲染而非文字,这使其在任何分辨率下都能很好地在各种像素值下显示。可以比较一下左侧放大后的字体版本和右侧清晰的 SVG 版本。

    页面制作之开发调试工具(1)

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

    原文出处: jingwhale   

    前端简洁并实用的工具类函数封装

    2018/03/06 · JavaScript · 函数

    原文出处: 火狼   

    为何使用 SVG?

    开发工具介绍

    开发工具一般分为两种类型:文本编辑器和集成开发环境(IDE)

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

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

    我们这里主要介绍如何使用Sublime Text编辑器,它基本满足我们对前端开发工具的需求。

    前言

    本文主要从日期,数组,对象,axios,promise和字符判断这几个方面讲工作中常用的一些函数进行了封装,确实可以在项目中直接引用,提高开发效率.

    图标字体渲染问题

    图标字体从来只是一种 hack。我们之前使用一个自定义字体,并将图标作为 Unicode 符号。这样图标字体就可以通过打包后的 CSS 来引入。只要简单地在任意元素上添加一个 class,图标就可以显示出来。然后我们只使用 CSS 就能即时改变图标的尺寸和颜色了。

    不幸的是,虽然这些图标是矢量图形,但在 1x 显示屏下的渲染效果并不理想。在基于 WebKit 的浏览器下,图标可能会在某些窗口宽度下变得模糊。因为此时图标是作为文本输出的,本来用于提高文本可读性的次像素渲染技术反而使图标看起来糟糕许多。

    一、Sublime Text的特点:

    跨平台、启动快

    多行选择

    各种实用插件

    Snippets

    支持VIM兼容模式

    Sublime Text获取地址:

    1.日期

    日期在后台管理系统还是用的很多的,一般是作为数据存贮和管理的一个维度,所以就会涉及到很多对日期的处理

    对页面渲染的改进

    因为我们直接将 SVG 注入 HTML(这也是我们选择这种方式更大的原因),所以不再会出现图标字体下载、缓存、渲染过程中出现的样式闪动。

    图片 2页面闪动

    二、常用的插件

    Package Control:安装其他插件之前,首先先安装Package Control

    Emmet:Web开发者的工具包,可以大大提高你的HTML和CSS的工作流程

    SublimeCodeIntel:代码提示

    DocBlocker:对js代码进行注释

    JSFormat:格式化js代码

    Terminal:使用vim命令

    1.1 element-UI的日期格式化

    图片 3

    DatePicker日期选择器默认获取到的日期默认是Date对象,但是我们后台需要用到的是yyyy-MM-dd,所以需要我们进行转化

    方法一:转化为dd-MM-yyyy HH:mm:ss

    export const dateReurn1=(date1)=>{ date1.toLocaleString("en-US", { hour12: false }).replace(/bdb/g, '0$&').replace(new RegExp('/','gm'),'-') }

    1
    2
    3
    export const dateReurn1=(date1)=>{
        date1.toLocaleString("en-US", { hour12: false }).replace(/bdb/g, '0$&').replace(new RegExp('/','gm'),'-')
    }

    方法二:
    从element-UI的2.x版本提供了value-format属性,可以直接设置选择器返回的值
    图片 4

    可访问性

    就像在《图标字体已死》一文中所述,有些用户会覆盖掉 GitHub 的字体。对于患有读写障碍的用户,某些特定字体是更加容易阅读的。对于修改字体的用户来说,我们基于字体的图标就被渲染成了空白方框。这搞乱了 GitHub 页面布局,而且也不提供任何信息。而不管字体覆盖与否,SVG 都可以正常显示。对于读屏器用户来说,SVG 能让我们选择是读出 alt 属性还是直接完全跳过。

    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 = '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( 'http://sublime.wbond.net/' + pf.replace('','%20')).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='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( 'http://sublime.wbond.net/' +pf.replace( '','%20' )).read()); print( 'Please restart Sublime Text to finishinstallation')

    如果顺利的话,此时就可以在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。

    1.2 获取当前的时间yyyy-MM-dd HH:mm:ss

    没有满10就补0

    export default const obtainDate=()=>{ let date = new Date(); let year = date.getFullYear(); let month = date.getMonth() + 1; let day=date.getDate(); let hours=date.getHours(); let minu=date.getMinutes(); let second=date.getSeconds(); //判断是否满10 let arr=[month,day,hours,minu,second]; arr.forEach(item=>{ item

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    export default const obtainDate=()=>{
    let date = new Date();
          let year = date.getFullYear();
          let month = date.getMonth() + 1;
          let day=date.getDate();
          let hours=date.getHours();
          let minu=date.getMinutes();
          let second=date.getSeconds();
          //判断是否满10
          let arr=[month,day,hours,minu,second];
          arr.forEach(item=>{
            item

    图形尺寸更合适

    我们目前对每个图标在所有尺寸下提供单一的图形。因为站点的加载依赖了图标字体的下载,我们曾被迫把图标集限制在最重要的 16px 尺寸下。这让每个符号在视觉上做出一些让步,因为我们是针对 16px 方格进行优化的。当在新页面或营销页上缩放这些图标时,显示的还是 16px 的版本。而 SVG 可以方便地 fork 全部的图标集,在我们指定的每个尺寸提供更合适的图形。当然对图标字体也可以这么做,但这样用户需要下载两倍的数据量,可能更多。

    2.2 Emmet

    Emmet是一个Web开发者的工具包,可以大大提高你的HTML和CSS的工作流程。

    基本上,大多数的文本编辑器都会允许你存储和重用一些代码块,我们称之为“片段”。虽然片段能很好地推动你得生产力,但大多数的实现都有这样一个缺点:你必须先定义你得代码片段,并且不能再运行时进行拓展。Emmet把片段这个概念提高到了一个新的层次:你可以设置CSS形式的能够动态被解析的表达式,然后根据你所输入的缩写来得到相应的内容。Emmet是很成熟的并且非常适用于编写HTML/XML 和 CSS 代码的前端开发人员,但也可以用于编程语言。

    图片 5

    2.数组

    便于创作

    打包自定义字体是复杂的。一些 web 应用因此而生,我们内部也自己搞了一个。而用 SVG 的话,添加一个新图标会变得像把一个 SVG 文件拖入一个目录这样轻而易举。

    2.2.1 安装Emmet

    a、通过快捷键组合ctrl+shift+P唤出命令面板
    b、在面板中输入“install package”后回车
    c、接着输入“Emmet”,等待安装完成。

    2.1 检测是否是数组

    export default const judgeArr=(arr)=>{ if(Array.isArray(arr)){ return true; } }

    1
    2
    3
    4
    5
    export default const judgeArr=(arr)=>{
            if(Array.isArray(arr)){
                return true;
            }
        }

    可添加动画效果

    并非一定要加动画,而是有了添加动画的可能性。而且 SVG 动画也的确在例如预加载动画等地方有实际应用。

    2.2.2 使用Emmet

    2.2数组去重set方法

    1.常见利用循环和indexOf(ES5的数组方法,可以返回值在数组中第一次出现的位置)这里就不再详写,这里介绍一种利用ES6的set实现去重.

    2.set是新怎数据结构,似于数组,但它的一大特性就是所有元素都是唯一的.

    3.set常见操作
    大家可以参照下面这个:新增数据结构Set的用法

    4.set去重代码

    export const changeReArr=(arr)=>{ return Array.from(new Set([1,2,2,3,5,4,5]))//利用set将[1,2,2,3,5,4,5]转化成set数据,利用array from将set转化成数组类型 } 或者 export const changeReArr=(arr)=>{ return [...new Set([1,2,2,3,5,4,5])]//利用...扩展运算符将set中的值遍历出来重新定义一个数组,...是利用for...of遍历的 }

    1
    2
    3
    4
    5
    6
    7
    8
    export const changeReArr=(arr)=>{
        return Array.from(new Set([1,2,2,3,5,4,5]))//利用set将[1,2,2,3,5,4,5]转化成set数据,利用array from将set转化成数组类型
    }
     
    或者
    export const changeReArr=(arr)=>{
        return [...new Set([1,2,2,3,5,4,5])]//利用...扩展运算符将set中的值遍历出来重新定义一个数组,...是利用for...of遍历的
    }

    Array.from可以把带有lenght属性类似数组的对象转换为数组,也可以把字符串等可以遍历的对象转换为数组,它接收2个参数,转换对象与回调函数,…和Array.from都是ES6的方法

    如何实现

    Octicon 在整个 GitHub 的代码库中出现了约 2500 次。在用 SVG 之前,我们简单地用 `` 这样简单的标签来引入。要切换到 SVG,我们先给添加了一个用来往 HTML 内直接注入 SVG 路径的 Rails helper。我们先用这个 helper 让员工测试了不同的 SVG 输出方式,然后才对外发布。

    1) html初始化

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

    图片 6

    html:5 或!:用于HTML5文档类型
    html:xt:用于XHTML过渡文档类型
    html:4s:用于HTML4严格文档类型

    2.3 纯数组排序

    常见有冒泡和选择,这里我写一下利用sort排序

    export const orderArr=(arr)=>{ arr.sort((a,b)=>{ return a-b //将arr升序排列,如果是倒序return -(a-b) }) }

    1
    2
    3
    4
    5
    export const orderArr=(arr)=>{
            arr.sort((a,b)=>{
                return a-b //将arr升序排列,如果是倒序return -(a-b)
            })
        }

    Helper 的用法

    输入 <%= octicon(:symbol => "plus") %>

    输出

    XHTML

    <svg aria-hidden="true" class="octicon octicon-plus" width="12" height="16" role="img" version="1.1" viewBox="0 0 12 16"> <path d="M12 9H7v5H5V9H0V7h5V2h2v5h5v2z"></path> </svg>

    1
    2
    3
    <svg aria-hidden="true" class="octicon octicon-plus" width="12" height="16" role="img" version="1.1" viewBox="0 0 12 16">
        <path d="M12 9H7v5H5V9H0V7h5V2h2v5h5v2z"></path>
    </svg>
    2) head标签内操作

    引入外部样式表:link:css+tab

    CSS

    <link rel="stylesheet" href="style.css">

    1
    <link rel="stylesheet" href="style.css">

    引入内部样式表:style+tab

    CSS

    <style></style>

    1
    <style></style>

    引入外部js文件:script:src+tab

    JavaScript

    <script src=""></script>

    1
    <script src=""></script>

    引入内部js文件:script+tab

    JavaScript

    <script></script>

    1
    <script></script>

    添加网站图标:link:favicon+tab

    CSS

    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">

    1
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">

    设置字符编码:meta:utf+tab

    XHTML

    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

    1
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

    设置兼容模式meta:compat+tab

    XHTML

    <meta http-equiv="X-UA-Compatible" content="IE=7">

    1
    <meta http-equiv="X-UA-Compatible" content="IE=7">

    演示如下:

    图片 7

    2.4 数组对象排序

    export const orderArr=(arr)=>{ arr.sort((a,b)=>{ let value1 = a[property]; let value2 = b[property]; return value1 - value2;//sort方法接收一个函数作为参数,这里嵌套一层函数用 //来接收对象属性名,其他部分代码与正常使用sort方法相同 }) }

    1
    2
    3
    4
    5
    6
    7
    8
    export const orderArr=(arr)=>{
            arr.sort((a,b)=>{
                let value1 = a[property];
                let value2 = b[property];
                return value1 - value2;//sort方法接收一个函数作为参数,这里嵌套一层函数用
                //来接收对象属性名,其他部分代码与正常使用sort方法相同
            })
        }      

    我们的方案

    可以看见,我们最终上线的方案是往页面 HTML 中直接注入 SVG。这样就可以灵活地实时调整 CSS 的 fill: 声明来修改颜色。

    我们现在有一个 SVG 图形的目录而不是一个图标字体,我们通过挑选,将里面这些符号的路径用 helper 直接注入到 HTML 里。比如,通过 <%= octicon(:symbol => "alert") %> 来调用 helper 就可以的到一个警告图标。Helper 会查找同名的文件名,并且注入 SVG。

    我们尝试过好几种在页面中添加 SVG 图标的方法,其中有些由于受到 GitHub 生产环境的限制而失败了。

    1. 外部 .svg 文件——最开始我们尝试提供一个单一的外部“SVG 仓库”,然后用 <use> 元素来引入 SVG 拼图中的单个图形。在我们当前的跨域安全策略和资源管道条件下,提供在外部提供 SVG 拼图很难做到。
    2. SVG 背景——这种方式无法实时调整图标的颜色。
    3. 用 <img> 与 src 属性来引入 SVG——这种方式无法实时调整图标的颜色。
    4. 将“SVG 仓库”整个嵌入到每个视图,然后使用 <use> ——把每个 SVG 都嵌入到整个 GitHub.com 的每个单页想想就不对,特别是有时候这个页面一个图标都没用到。
    3)  body体内容编辑

    ●标签:标签名(+tab)

    ●id:标签名#+类名称(+tab),可以跟多个类

    类:标签名.+id名称(+tab),仅可以跟一个id

    图片 8

    只输入.item,则Emmet会根据父标签进行判定,一般为div。比如在<ul>中输入.item,就会生成<li></li>。

    图片 9

    下面是所有的隐式标签名称:

    li:用于ul和ol中
    tr:用于table、tbody、thead和tfoot中
    td:用于tr中
    option:用于select和optgroup中

    ●标签的内容:标签名{内容}

    标签内的属性:标签名[属性名=属性值],如:a[href=www.baidu.com]

    图片 10

    补充:

    表单method属性

    form:post(get)

    input属性添加缩写(部分)

    input->inp input:hidden->input:h input:text->input:t
    input:password->input:p
    input:checkbox->input:c
    input:radio->input:r
    input:submit->input:s input:button->input:b

    ●嵌套

    >:子元素符号,表示嵌套的元素
    +:同级标签符号
    ^:可以使该符号前的标签提升一行

    图片 11

    ●分组()
    可以通过嵌套和括号来快速生成一些代码块,比如输入(.foo>h1)+(.bar>h2),会自动生成如下代码:

    图片 12

    ●定义多个元素***
    要定义多个元素,可以使用
    **符号。比如,ul>li3可以生成如下代码

    图片 13

    ●计数器 $
    在我们做”轮播“时,给元素的命名(id或者class),都会有一个计数位,这个时候,我们就可以使用 $ 它来实现了,如下:

    图片 14

    可以合理组合各种操作来写出复杂样式的代码块。

    2.5 数组的”短路运算”every和some

    数组短路运算这个名字是我自己加的,因为一般有这样一种需求,一个数组里面某个或者全部满足条件,就返回true

    情况一:全部满足 export const allTrueArr=(arrs)=>{ return arr.every((arr)=>{ return arr>20;//如果数组的每一项都满足则返回true,如果有一项不满足返回false,终止遍历 }) } 情况二:有一个满足 export default const OneTrueArr=(arrs)=>{ return arr.some((arr)=>{ return arr>20;//如果数组有一项满足则返回true,终止遍历,每一项都不满足则返回false }) }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    情况一:全部满足
     
        export const allTrueArr=(arrs)=>{
              return arr.every((arr)=>{
                 return arr>20;//如果数组的每一项都满足则返回true,如果有一项不满足返回false,终止遍历
              })  
        }
     
    情况二:有一个满足
    export default const OneTrueArr=(arrs)=>{
          return arr.some((arr)=>{
             return arr>20;//如果数组有一项满足则返回true,终止遍历,每一项都不满足则返回false
          })  
    }

    以上两种情景就和||和&&的短路运算很相似,所以我就起了一个名字叫短路运算,当然两种情况都可以通过遍历去判断每一项然后用break和return false 结束循环和函数.

    性能

    在切换到 SVG 以后,我们还没发现页面加载和性能上有任何不良影响。我们之前曾预计渲染时间会大幅下降,但往往性能和人的感知更相关。由于 SVG 图标被渲染为了指定宽高的图像,页面也不再会像之前那样闪动了。

    同时由于我们不再输出字体相关的 CSS,我们还能干掉一些多余的 CSS 代码。

    2.2.3 CSS缩写

    3.对象

    缺点和坑

    • Firefox 对 SVG 仍然有像素值计算的问题,虽然图标字体也有相同的问题。
    • 如果你需要 SVG 有背景色,你可能需要在外面包一层额外的 div。
    • 由于 SVG 是作为图片提供的,某些 CSS 的覆盖问题也需要重新考量。如果你看到我们的页面布局有任何奇怪的地方,请告知。
    • IE 浏览器下,需要对 svg 元素指定宽高属性,才能正常显示大小。
    • 在技术方案升级过程中,我们层同时输出 SVG 和图标字体。在我们仍然为每个 SVG 图标指定 font-family 时会导致 IE 崩溃。在完全转用 SVG 以后,这个问题就解决了。
    1).  值

    比如要定义元素的宽度,只需输入w100,即可生成

    CSS

    width: 100px;

    1
    width: 100px;

    图片 15
    除了px,也可以生成其他单位,比如输入h10p+m5e,结果如下

    CSS

    height: 10%; margin: 5em;

    1
    2
    height: 10%;  
    margin: 5em;

    单位别名列表: p 表示%、e 表示 em、表示 ex

    3.1 对象遍历

    export const traverseObj=(obj)=>{ for(let variable in obj){ //For…in遍历对象包括所有继承的属性,所以如果 //只是想使用对象本身的属性需要做一个判断 if(obj.hasOwnProperty(variable)){ console.log(variable,obj[variable]) } } }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    export const traverseObj=(obj)=>{
            for(let variable in obj){
            //For…in遍历对象包括所有继承的属性,所以如果
             //只是想使用对象本身的属性需要做一个判断
            if(obj.hasOwnProperty(variable)){
                console.log(variable,obj[variable])
            }
            }
        }

    总结

    通过换掉图标字体,我们能更方便、更快速、更有可访问性地提供图标了。而且它们看起来也更棒了。享受吧。

    1 赞 2 收藏 评论

    图片 16

    2).  附加属性

    @f+

    图片 17

    3.2 对象的数据属性

    1.对象属性分类:数据属性和访问器属性;

    2.数据属性:包含数据值的位置,可读写,包含四个特性包含四个特性:

    configurable:表示能否通过delete删除属性从而重新定义属性,能否修改属性的特性,或能否把属性修改为访问器属性,默认为true enumerable:表示能否通过for-in循环返回属性 writable:表示能否修改属性的值 value:包含该属性的数据值。默认为undefined

    1
    2
    3
    4
    configurable:表示能否通过delete删除属性从而重新定义属性,能否修改属性的特性,或能否把属性修改为访问器属性,默认为true
    enumerable:表示能否通过for-in循环返回属性
    writable:表示能否修改属性的值
    value:包含该属性的数据值。默认为undefined

    3.修改数据属性的默认特性,利用Object.defineProperty()

    export const modifyObjAttr=()=>{ let person={name:'张三',age:30}; Object.defineProperty(person,'name',{ writable:false, value:'李四', configurable:false,//设置false就不能对该属性修改 enumerable:false }) }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    export const modifyObjAttr=()=>{
      let person={name:'张三',age:30};
      Object.defineProperty(person,'name',{
        writable:false,
        value:'李四',
        configurable:false,//设置false就不能对该属性修改
        enumerable:false
      })
    }

    本文由奥门新浦京网址发布于Wed前段,转载请注明出处:页面制作之开发调试工具,前端简洁并实用的工

    关键词:

上一篇:面向对象实战之封装拖拽对象,扎克伯格

下一篇:没有了