您的位置:云顶娱乐v1.8 > 澳门云顶娱乐app官网 > 对象属性描述符,你不可不知的【澳门云顶娱乐

对象属性描述符,你不可不知的【澳门云顶娱乐

2019-10-06 05:53

自在学习 JavaScript(7):对象属性描述符

2018/01/11 · JavaScript · 对象

原来的文章出处: Dhananjay Kumar   译文出处:码农网/小峰   

在JavaScript中,你能够如下所示成立一个对象字面量:

var cat = { name: 'foo', age: 9 };

1
2
3
4
var cat = {
    name: 'foo',
    age: 9
};

乍一看,好像对象cat有字符串和数字值那五个属性。但是,那不只是JavaScript解释器。在ES5中,介绍了品质描述符的概念。在我们接二连三商量属性描述符在此以前,让大家试着回答多少个难点:

  • 何以创设只读属性?
  • 什么样制定更仆难数的性质?
  • 怎么使属性不可配置?
  • 什么规定贰特性质是或不是是只读的?

要是你知道属性描述符,那么您就足以应对全体那个难题。

请看上边包车型地铁代码:

var cat = { name: 'foo', age: 9 }; var a = Object.getOwnPropertyDescriptor(cat, 'name'); console.log(a);

1
2
3
4
5
6
var cat = {
    name: 'foo',
    age: 9
};
var a = Object.getOwnPropertyDescriptor(cat, 'name');
console.log(a);

输出将如下所示:

澳门云顶娱乐app官网 1

正如您在这里看看的,这些本性有五个特点:

value保存属性的数目,而writable,enumerable和configurable则描述属性的别的特色。接下来大家将对那一个特征一一演说。

重新整建总计的部分前端面试题

2016/09/22 · 基本功工夫 · 4 评论 · CSS, HTML, Javascript, 面试

正文小编: 伯乐在线 - Damonare 。未经小编许可,制止转发!
迎接到场伯乐在线 专栏撰稿人。

Base64 的法规、实现及利用

2016/04/06 · 基本功能力 · 1 评论 · Base64

正文作者: 伯乐在线 - Natumsol 。未经小编许可,禁绝转载!
招待到场伯乐在线 专辑撰稿人。

简介

Base64是一种基于61个可打印字符来代表二进制数据的表示方法。由于2的6次方等于64,所以每6个比特为四个单元,对应某些可打印字符。四个字节有23个比特,对应于4个Base64单元,即3个字节必要用4个可打字与印刷字符来代表。它可用来作为电子邮件的传导编码。在Base64中的可打字与印刷字符包罗字母A-Za-z、数字0-9,那样共有陆14个字符,其它的八个可打字与印刷符号在区别的系统中而分歧,日常为+/

您不可不知的 HTML 优化技巧

2016/09/12 · 基本功技术 · 2 评论 · HTML

正文小编: 伯乐在线 - 山葫芦城控件 。未经作者许可,防止转发!
接待到场伯乐在线 专栏小编。

哪些升高Web页面包车型大巴本性,相当多开拓人士从八个地点来出手如JavaScript、图像优化、服务器配置,文件减弱或是调治CSS。

很举世瞩目HTML 已经完成了三个瓶颈,尽管它是付出Web 分界面必备的中坚语言。HTML页面包车型客车载重也是越来越重。大非常多页面平均必要40K的空间,像有些大型网址会含有数以千计的HTML 成分,页面Size会越来越大。

什么样有效的下跌HTML 代码的复杂度和页面成分的数额,本文首要解决了那么些标题,从四个方面介绍了哪些编写简练,清晰的HTML 代码,能够使得页面加载更为高效,且能在种种设施中运作杰出。

用Web Components塑造单页面应用

2015/01/19 · JavaScript · Web Components

本文由 伯乐在线 - 周进林 翻译,Mxt 校稿。未经许可,幸免转发!
克罗地亚共和国语出处:www.polymer-project.org。迎接插手翻译组。

你是哪些使用Polymer构建三个单页应用的?那一个难题大家在Polymer团队里早就问过无数遍了。大家的答案(长期以来地)是“使用组件(component)!”。不过,使用新技术去消除现成的主题材料再三不会立时获得明确的成效。怎么着把一群模块化组件组合到二个特大型的实用的采纳中去?

在本教程,我将会给您显得什么去创设贰个功力完全的单页应用:

澳门云顶娱乐app官网 2

  • 完全采纳Polymer的宗旨成分构建
  • 动用响应式设计
  • 采用数据绑定个性过渡视图
  • 利用UWranglerL路由和深层链接性情
  • 可访谈键盘
  • 按需动态载入内容(可选)

 张开演示

writable

属性的值是或不是足以改变是由writable特征决定的。借使writable设置为false,那么属性的值不能够改换,JavaScript将忽略属性值中的任何变动。请看下边包车型客车代码:

var cat = { name: 'foo', age: 9 }; Object.defineProperty(cat, 'name', { writable: false }); console.log(cat.name); // foo cat.name = "koo"; // JavaScript will ignore it as writable is set to false console.log(cat.name); // foo

1
2
3
4
5
6
7
8
var cat = {
    name: 'foo',
    age: 9
};
Object.defineProperty(cat, 'name', { writable: false });
console.log(cat.name); // foo
cat.name = "koo"; // JavaScript will ignore it as writable is set to false
console.log(cat.name); // foo

你可以运用Object.defineProperty改换writable、enumerable和configurable特征的值。大家稍后会在那篇小说中详尽座谈Object.defineProperty,但正如你在上头的代码片段中看看的那么,大家早就将writable属性设置为false,进而退换了name属性的值。JavaScript将忽略重新分配,况且name属性的值将维持为foo。

一经以从严方式运行代码,那么为了重新分配writable设置为false的属性值,JavaScript将抛出十三分。请看上边的代码:

'use strict'; var cat = { name: 'foo', age: 9 }; Object.defineProperty(cat, 'name', { writable: false }); console.log(cat.name); // foo cat.name = "koo"; // error

1
2
3
4
5
6
7
8
'use strict';
var cat = {
    name: 'foo',
    age: 9
};
Object.defineProperty(cat, 'name', { writable: false });
console.log(cat.name); // foo
cat.name = "koo"; // error

在此处,JavaScript以从严情势运作,因而,当你重新分配name属性的值时,JavaScript将抛出卓殊,如下所示:

澳门云顶娱乐app官网 3

此处的荒谬音信说,你不能够赋值到只读属性。也正是说,即使属性的writable特征设置为false,那么属性将肩负只读属性。

HTML面试题

1.XHTML和HTML有何样差距

  • HTML是一种为主的WEB网页设计语言,XHTML是贰个依照XML的置标语言
    最要害的分裂:
  • XHTML 成分必需被科学地嵌套。
  • XHTML 成分必需被关门。
  • 标具名必需用小写字母。
  • XHTML 文书档案必需有所根成分。

2.前端页面有哪三层构成,分别是什么样?作用是怎么样?

  • 结构层 Html 表示层 CSS 行为层 js;
    3.您做的页面在如何流览器测量检验过?那几个浏览器的基础分别是何许?
  • Ie(Ie内核) 火狐(Gecko) 谷歌(webkit,Blink) opera(Presto),Safari(wbkit)

4.哪些是语义化的HTML?

  • 直观的认知标签 对于找出引擎的抓取有受益,用精确的标签做科学的事务!
  • html语义化便是让页面包车型客车剧情结构化,便于对浏览器、寻找引擎分析;
    在向来不样式CCS情形下也以一种文书档案格式展现,况且是便于阅读的。寻觅引擎的爬虫依赖于标志来规定上下文和各样显要字的权重,利于 SEO。
  • 使阅读源代码的人对网址更便于将网站分块,便于阅读维护明白。

5.HTML5 为啥只供给写 !DOCTYPE HTML?

  • HTML5 不依照S金霉素L,因而不需求对DTD进行援用,但是急需doctype来标准浏览器的行为(让浏览器依照它们应该的方法来运营);而HTML4.01基于S达托霉素L,所以要求对DTD进行援引,手艺告诉浏览器文书档案所使用的文书档案类型。

6.Doctype功力?标准情势与同盟形式各有啥分别?

  • !DOCTYPE申明位于位于HTML文书档案中的第一行,处于html 标签之前。告知浏览器的剖析器用什么文书档案规范深入分析那些文书档案。DOCTYPE不设有或格式不科学会促成文书档案以合营情势表现。
  • 正式情势的排版 和JS运作格局都以以该浏览器帮衬的万丈规范运营。在十二分格局中,页面以宽大的向后万分的方式展现,模拟老式浏览器的一言一动以免御站点无法职业。

7.html5有哪些新特点、移除了那个成分?如哪处理HTML5新标签的浏览器宽容难题?怎么样区分 HTML 和
HTML5?

  • HTML5 现在一度不是 S地霉素L 的子集,首就算有关图像,地方,存款和储蓄,多职责等效果的增添。
  • 绘画 canvas
  • 用以媒介重放的 video 和 audio 成分
  • 当地离线存款和储蓄 localStorage 长时间积攒数据,浏览器关闭后数据不遗弃;
  • sessionStorage 的数量在浏览器关闭后自行删除
  • 语意化越来越好的源委元素,举个例子 article、footer、header、nav、section
  • 表单控件,calendar、date、time、email、url、search
  • 新的工夫webworker, websockt, 吉优location
    移除的因素
  • 纯表现的因素:basefont,big,center,font, s,strike,tt,u;
  • 对可用性产生负面影响的因素:frame,frameset,noframes;
    支持HTML5新标签:
  • IE8/IE7/IE6支持通过document.createElement方法产生的标签,
  • 能够利用这一特征让这一个浏览器辅助HTML5新标签,
  • 浏览器扶助新标签后,还索要加上标签暗中认可的样式:

8.请描述一下 cookies,sessionStorage 和 localStorage 的不一样?

  • cookie在浏览器和服务器间来回传递。 sessionStorage和localStorage不会
  • sessionStorage和localStorage的积存空间越来越大;
  • sessionStorage和localStorage有更加多丰裕易用的接口;
  • sessionStorage和localStorage各自独立的存款和储蓄空间;

9.如何贯彻浏览器内多少个标签页之间的通讯?

  • 调用localstorge、cookies等地面存款和储蓄格局

转移原理

Base64的直白数据源是二进制连串(Binary Sequence)。当然,你也能够将图纸、文本和音摄像调换来二进制类别,再然后转移为Base64编码。大家这里研究的是什么将二进制转变为Base64编码,对于哪些将图纸,文本和音录像转变为二进制体系敬请期望。

在转变前,先定义一张索引表,那张表规定了哪些转移。
澳门云顶娱乐app官网 4
更改的时候大家先将二进制系列分组,每6个比特为一组。不过假诺编码的字节数不可能被3整除,那么最终就能多出1个或多少个字节,能够行使上面包车型地铁章程开展管理:先使用0字节值在最后补足,使其能够被3整除,然后再拓展base64的编码。在编码后的base64文本后增进三个或五个’=’号,代表补足的字节数。也正是说,当最终剩下二个六个人字节(一个byte)时,最终叁个6位的base64字节块有四人是0值,最终附加上四个等号;假如最后剩下七个陆位字节(2个byte)时,最终贰个6位的base字节块有两位是0值,最终附加三个等号。 参谋下表:
澳门云顶娱乐app官网 5

在筹算和支出进度中须求依据以下规范:

  • 布局分离:使用HTML 扩张结构,实际不是样式内容;
  • 保持清洁:为办事流增加代码验证工具;使用工具或样式向导维护代码结交涉格式
  • 上学新语言:获取成分结交涉语义标识。
  • 管教可访问: 使用A哈弗IA 属性和Fallback 属性等
  • 测验: 使网址在三种设施中可知优良运营,可使用emulators和性质工具。

澳门云顶娱乐app官网 6

使用架构

统一打算布局是从头贰个类型的首要任务之一。作为主导要素集结的一片段,Polymer通过多少个布局成分 来支撑应用程序的构架(<core-header-panel>, <core-drawer-panel>, <core-toolbar>)。这个零部件自个儿就很好用,可是为了越来越快地起先项目,大家希图注重于<core-scaffold>。有了它你能够透过组建多少个大旨的元素就会做出贰个响应式的运动端布局。

<core-scaffold>的子成分能够是点名特定的要素或行使一定的竹签(或二者联手行使)。比如,使用<nav>成分创设应用抽屉菜单。你可以在任意的要素里选拔navigation属性(e.g <core-header-panel navigation>)。工具栏通过工具属性标志。它的具有其余子成分都定义在根本内容区域里。

configurable

品质的别样特色是还是不是足以布置决定于configurable的值。借使属性configurable设置为false,则无法改变writable和enumerable的值。请看下边包车型地铁代码:

var cat = { name: 'foo', age: 9 }; Object.defineProperty(cat, 'name', { configurable: false }); Object.defineProperty(cat, 'name', { enumerable: false });

1
2
3
4
5
6
var cat = {
    name: 'foo',
    age: 9
};
Object.defineProperty(cat, 'name', { configurable: false });
Object.defineProperty(cat, 'name', { enumerable: false });

在那边,我们将name属性的configurable设置为false。之后,我们将enumerable设置为false。如前所述,一旦叁个属性的configurable设置为false,那么你就无法更换另一个特点。

对于地点的代码,JavaScript会抛出叁个TypeError卓殊,如下图所示。你会赢得不恐怕再次定义属性名称的错误:

澳门云顶娱乐app官网 7

在应用configurable的时候,你须求记住,改换configurable的值只可以做二回。即使将品质的configurable设置为false,那么你就无法重新分配它;你无法收回对configurable的转移。请看上边包车型客车代码:

var cat = { name: 'foo', age: 9 }; Object.defineProperty(cat, 'name', { configurable: false }); Object.defineProperty(cat, 'name', { configurable: true });

1
2
3
4
5
6
var cat = {
    name: 'foo',
    age: 9
};
Object.defineProperty(cat, 'name', { configurable: false });
Object.defineProperty(cat, 'name', { configurable: true });

笔者们在重新分配name属性的configurable,不过,JavaScript会对上述操作抛出八个TypeError,如下图所示。正如你所看见的,一旦configurable棉被服装置为false,就不可能收回那八个改换。

澳门云顶娱乐app官网 8

澳门云顶娱乐app官网,另三个尤为重要的政工是,就算configurable设置为false,writable也得以从true退换为false——但反之则不然。请看下边包车型客车代码:

var cat = { name: 'foo', age: 9 }; Object.defineProperty(cat, 'name', { configurable: false }); Object.defineProperty(cat, 'name', { writable: false }); cat.name = 'koo'; console.log(cat.name); // foo

1
2
3
4
5
6
7
8
var cat = {
    name: 'foo',
    age: 9
};
Object.defineProperty(cat, 'name', { configurable: false });
Object.defineProperty(cat, 'name', { writable: false });
cat.name = 'koo';
console.log(cat.name); // foo

假定不是在严厉形式下,上边包车型地铁代码不会抛出其余相当。正如大家前边所探讨的,固然configurable为false,writable也得以从true变为false,反之则不然。另一个亟需记住的关键事项是,你不恐怕删除configurable设置为false的属性。

var cat = { name: 'foo', age: 9 }; Object.defineProperty(cat, 'name', { configurable: false }); delete cat.name; // wont delete as configurable is false console.log(cat.name); // foo delete (cat.age); // will be deleted console.log(cat.age); // undefined

1
2
3
4
5
6
7
8
9
var cat = {
    name: 'foo',
    age: 9
};
Object.defineProperty(cat, 'name', { configurable: false });
delete cat.name; // wont delete as configurable is false
console.log(cat.name); // foo
delete (cat.age); // will be deleted
console.log(cat.age); // undefined

在上头的代码中,你会意识JavaScript不会删除name属性,因为name属性的configurable设置为false。

CSS面试题

1.简要说一下CSS的因素分类

  • 块级成分:div,p,h1,form,ul,li;
  • 行内元素 : span>,a,label,input,img,strong,em;

2.CSS掩盖成分的二种艺术(最少讲出三种)

  • Opacity:成分本人依旧攻下它和睦的岗位并对网页的布局起效果。它也将响应顾客交互;
  • Visibility:与 opacity 独一不一致的是它不会响应任何顾客交互。别的,成分在读屏软件中也会被隐形;
  • Display:display 设为 none 任何对该因素直接打客户交互操作都不容许奏效。其它,读屏软件也不会读到成分的剧情。这种办法发生的效力就疑似成分完全荒诞不经;
  • Position:不会潜濡默化布局,能让要素保持能够操作;
  • Clip-path:clip-path 属性还一直不在 IE 或然 Edge 下被全然帮助。要是要在您的 clip-path 中应用外部的 SVG 文件,浏览器帮助度还要低;

3.CSS解除浮动的二种办法(最少二种)

  • 采纳带clear属性的空成分
  • 使用CSS的overflow属性;
  • 使用CSS的:after伪元素;
  • 应用邻接成分管理;

4.CSS居中(包涵水平居花潮垂直居中)

内联元素居中方案

水平居中设置:
1.行内成分

  • 设置 text-align:center;

2.Flex布局

  • 设置display:flex;justify-content:center;(灵活运用,扶助Chroime,Firefox,IE9+)

笔直居中安装:
1.父成分高度分明的单行文本(内联成分)

  • 设置 height = line-height;

2.父成分高度鲜明的多行文本(内联成分)

  • a:插入 table (插入方法和水准居中同样),然后设置 vertical-align:middle;
  • b:先设置 display:table-cell 再设置 vertical-align:middle;

    ### 块级成分居中方案

    水平居中装置:
    1.定宽块状成分

  • 设置 左右 margin 值为 auto;

2.不定宽块状成分

  • a:在要素外到场 table 标签(完整的,包含table、tbody、tr、td),该因素写在 td 内,然后设置 margin 的值为 auto;
  • b:给该因素设置 displa:inine 方法;
  • c:父成分设置 position:relative 和 left:二分之一,子成分设置 position:relative 和 left:百分之五十;

笔直居中安装:

  • 使用position:absolute(fixed),设置left、top、margin-left、margin-top的属性;
  • 接纳position:fixed(absolute)属性,margin:auto那些必得毫无忘记了;
  • 利用display:table-cell属性使内容垂直居中;
  • 行使css3的新属性transform:translate(x,y)属性;
  • 使用:before元素;

5.写出二种IE6 BUG的缓和方法

  • 双边距BUG float引起的 使用display
  • 3像素问题 使用float引起的 使用dislpay:inline -3px
  • 超链接hover 点击后失效 使用科学的书写顺序 link visited hover active
  • Ie z-index难点 给父级增多position:relative
  • Png 透明 使用js代码 改
  • Min-height 最小中度 !Important 化解’
  • select 在ie6下遮盖 使用iframe嵌套
  • 何以向来不议程定义1px左右的拉长率容器(IE6默许的行高形成的,使用over:hidden,zoom:0.08 line-height:1px)

6.对于SASS或是Less的掌握程度?喜欢这些?

  • 语法介绍

7.Bootstrap打探程度

  • 特点,排版,插件的应用;

8.页面导入样式时,使用link和@import有何分歧?

  • link属于XHTML标签,除了加载CSS外,还是能用于定义OdysseySS, 定义rel连接属性等成效;而@import是CSS提供的,只好用来加载CSS;
  • 页面被加载的时,link会同不时候被加载,而@import引用的CSS会等到页面被加载完再加载;
  • import是CSS2.1 提出的,只在IE5之上工夫被识别,而link是XHTML标签,无包容难题;

9.介绍一下CSS的盒子模型?

  • 有三种, IE 盒子模型、规范 W3C 盒子模型;IE的content部分含有了 border 和 pading;
  • 盒模型: 内容(content)、填充(padding)、边界(margin)、 边框(border).

10.CSS 选取符有怎么着?哪些属性能够一连?优先级算法如何计算? CSS3新扩大伪类有那七个?

  • id选择器( # myid)
  • 类选取器(.myclassname)
  • 标签采取器(div, h1, p)
  • 隔壁选取器(h1 + p)
  • 子接纳器(ul > li)
  • 后人选取器(li a)
  • 通配符采取器( * )
  • 脾性选取器(a[rel = “external”])
  • 伪类选拔器(a: hover, li: nth – child)
  • 可接二连三的样式: font-size font-family color, UL LI DL DD DT;
  • 不得一连的样式:border padding margin width height ;
  • 优先级就近原则,同权重景况下样式定义近期者为准;
  • 事先级为:

    JavaScript

    !important > id > class > tag important 比 内联优先级高

    1
    2
    !important >  id > class > tag
    important 比 内联优先级高

11.CSS3有哪些新特征?

  • CSS3落到实处圆角(border-radius:8px),阴影(box-shadow:10px),
    对文字加特效(text-shadow、),线性渐变(gradient),旋转(transform)
  • transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜
    追加了更加多的CSS采取器 多背景 rgba

用JavaScript实现Base64

规律精晓了后头,完毕起来就很轻松了。

JavaScript

define(function(require, exports, module) { var code = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/".split(""); //索引表 /** * @author natumsol@gmail.com * @description 将二进制连串调换为Base64编码 * @param {String} * @return {String} */ function binToBase64(bitString) { var result = ""; var tail = bitString.length % 6; var bitStringTemp1 = bitString.substr(0, bitString.length - tail); var bitStringTemp2 = bitString.substr(bitString.length - tail, tail); for (var i = 0; i < bitStringTemp1.length; i += 6) { var index = parseInt(bitStringTemp1.substr(i, 6), 2); result += code[index]; } bitStringTemp2 += new Array(7 - tail).join("0"); if (tail) { result += code[parseInt(bitStringTemp2, 2)]; result += new Array((6 - tail) / 2

  • 1).join("="); } return result; } /** * @author natumsol@gmail.com * @description 将base64编码调换为二进制体系 * @param {String} * @return {String} */ function base64ToBin(str) { var bitString = ""; var tail = 0; for (var i = 0; i < str.length; i++) { if (str[i] != "=") { var decode = code.indexOf(str[i]).toString(2); bitString += (new Array(7 - decode.length)).join("0") + decode; } else { tail++; } } return bitString.substr(0, bitString.length - tail * 2); } /** * @description 将字符转变为二进制体系 * @param {String} str * @return {String} */ function stringToBin(str) { var result = ""; for (var i = 0; i < str.length; i++) { var charCode = str.charCodeAt(i).toString(2); result += (new Array(9 - charCode.length).join("0") + charCode); } return result; } /** * @description 将二进制系列转变为字符串 * @param {String} Bin */ function BinToStr(Bin) { var result = ""; for (var i = 0; i < Bin.length; i += 8) { result += String.fromCharCode(parseInt(Bin.substr(i, 8), 2)); } return result; } exports.base64 = function(str) { return binToBase64(stringToBin(str)); } exports.decodeBase64 = function(str) { return BinToStr(base64ToBin(str)); } })
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
define(function(require, exports, module) {
 
    var code = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/".split(""); //索引表
 
    /**
     * @author natumsol@gmail.com
     * @description 将二进制序列转换为Base64编码
     * @param  {String}
     * @return {String}
     */
    function binToBase64(bitString) {
        var result = "";
        var tail = bitString.length % 6;
        var bitStringTemp1 = bitString.substr(0, bitString.length - tail);
        var bitStringTemp2 = bitString.substr(bitString.length - tail, tail);
        for (var i = 0; i &lt; bitStringTemp1.length; i += 6) {
            var index = parseInt(bitStringTemp1.substr(i, 6), 2);
            result += code[index];
        }
        bitStringTemp2 += new Array(7 - tail).join("0");
        if (tail) {
            result += code[parseInt(bitStringTemp2, 2)];
            result += new Array((6 - tail) / 2 + 1).join("=");
        }
        return result;
    }
 
    /**
     * @author natumsol@gmail.com
     * @description 将base64编码转换为二进制序列
     * @param  {String}
     * @return {String}
     */
    function base64ToBin(str) {
        var bitString = "";
        var tail = 0;
        for (var i = 0; i &lt; str.length; i++) {
            if (str[i] != "=") {
                var decode = code.indexOf(str[i]).toString(2);
                bitString += (new Array(7 - decode.length)).join("0") + decode;
            } else {
                tail++;
            }
        }
        return bitString.substr(0, bitString.length - tail * 2);
    }
 
    /**
     * @description 将字符转换为二进制序列
     * @param  {String} str
     * @return {String}    
     */
    function stringToBin(str) {
        var result = "";
        for (var i = 0; i &lt; str.length; i++) {
            var charCode = str.charCodeAt(i).toString(2);
            result += (new Array(9 - charCode.length).join("0") + charCode);
        }
        return result;
    }
    /**
     * @description 将二进制序列转换为字符串
     * @param {String} Bin
     */
    function BinToStr(Bin) {
        var result = "";
        for (var i = 0; i &lt; Bin.length; i += 8) {
            result += String.fromCharCode(parseInt(Bin.substr(i, 8), 2));
        }
        return result;
    }
    exports.base64 = function(str) {
        return binToBase64(stringToBin(str));
    }
    exports.decodeBase64 = function(str) {
        return BinToStr(base64ToBin(str));
    }
})

HTML、CSS 和JavaScript三者的关联

HTML 是用以调解页面结会谈剧情的标识语言。HTML 不能够用来修饰样式内容,也不能够在头标签中输入文本内容,使代码变得冗长和复杂性,相反使用CSS 来修饰布局成分和外观相比稳当。HTML成分暗中同意的外观是由浏览器暗中同意的样式表定义的,如在Chrome中h1标签成分会渲染成32px的Times 粗体。

三条通用设计准则:

  1. 动用HTML 来布局页面结构,CSS修饰页面展现,JavaScript完结页面效果。CSS ZenGarden 很好地显示了表现分开。
  2. 万一能用CSS或JavaScript完结就少用HTML代码。
  3. 将CSS和JavaScript文件与HTML 分开存放。这可有援助缓存和调和。

例子

XHTML

<body unresolved fullbleed> <core-scaffold id="scaffold"> <nav>Left drawer</nav> <core-toolbar tool>Application</core-toolbar> <div>Main content</div> </core-scaffold> </body>

1
2
3
4
5
6
7
<body unresolved fullbleed>
  <core-scaffold id="scaffold">
    <nav>Left drawer</nav>
    <core-toolbar tool>Application</core-toolbar>
    <div>Main content</div>
  </core-scaffold>
</body>

让大家一道来深切这个剧情的每一局地

enumerable

对于叁特性能,假使您设置了enumerable:false,那么那几个脾性将不会并发在枚举中,因而它不能用在诸如for … in循环那样的话语中。

请看上面包车型大巴代码:

var cat = { name: 'foo', age: 9 }; Object.defineProperty(cat, 'name', { enumerable: false }); for (let f in cat) { console.log(f); // will print only age }

1
2
3
4
5
6
7
8
var cat = {
    name: 'foo',
    age: 9
};
Object.defineProperty(cat, 'name', { enumerable: false });
for (let f in cat) {
    console.log(f); // will print only age
}

在那边,你只可以猎取age,因为name的enumerable被设置为了false。那是另一个内需牢记的要紧事项:通过设置enumerable:false,独一的品质将不得用于枚举。我们来看上边包车型客车代码:

var cat = { name: 'foo', age: 9 }; Object.defineProperty(cat, 'name', { enumerable: false }); console.log(cat.name); // foo console.log('name' in cat); // true

1
2
3
4
5
6
7
var cat = {
    name: 'foo',
    age: 9
};
Object.defineProperty(cat, 'name', { enumerable: false });
console.log(cat.name); // foo
console.log('name' in cat); // true

在此间,name属性enumerable设置为false,但你能够访问它。在检讨name是或不是属于cat的性质时,你也会意识是true。

突发性,你可能须要检查某些特定属性enumerable是还是不是设置为false或true。你能够因此选取propertyIsEnumerable方法来成功那或多或少:

var cat = { name: 'foo', age: 9 }; Object.defineProperty(cat, 'name', { enumerable: false }); console.log(cat.propertyIsEnumerable("name")); // false

1
2
3
4
5
6
var cat = {
    name: 'foo',
    age: 9
};
Object.defineProperty(cat, 'name', { enumerable: false });
console.log(cat.propertyIsEnumerable("name")); // false

JavaScript面试题

1.javascript的typeof再次回到哪些数据类型

  • Object number function boolean underfind;

2.例举3种强制类型调换和2种隐式类型转变?

  • 强制(parseInt,parseFloat,number)隐式(== – ===);

3.数组措施pop() push() unshift() shift()

  • Push()尾巴部分加多 pop()尾部删除
  • Unshift()尾部增多 shift()尾部删除

4.ajax呼吁的时候get 和post方式的差距?

  • 二个在url前面 三个放在设想载体里面
    有高低限制
  • 对象属性描述符,你不可不知的【澳门云顶娱乐app官网】。安然难题
    利用分歧 三个是论坛等只要求必要的,多个是类似修改密码的;

5.call和apply的区别

  • Object.call(this,obj1,obj2,obj3)
  • Object.apply(this,arguments)

6.ajax呼吁时,怎么样解说json数据

  • 使用eval parse,鉴于安全性考虑 使用parse更可相信;

7.平地风波委托是何许

  • 让使用事件冒泡的法规,让本身的所接触的平地风波,让他的父成分代替施行!

8.闭包是怎么着,有怎么着特色,对页面有怎么着震慑?简单介绍你了然的闭包

  • 闭包就是能够读取其余函数内部变量的函数。

9.加多 删除 替换 插入到某些接点的方法

obj.appendChidl()
obj.innersetBefore
obj.replaceChild
obj.removeChild
10.说一下如何是javascript的同源战略?

  • 一段脚本只可以读取来自于同一来源的窗口和文书档案的质量,这里的一致来源指的是主机名、左券和端口号的结合

11.编写制定二个b承接a的方法;

JavaScript

function A(name){ this.name = name; this.sayHello = function(){alert(this.name+” say Hello!”);}; } function B(name,id){ this.temp = A; this.temp(name); //相当于new A(); delete this.temp; this.id = id; this.checkId = function(ID){alert(this.id==ID)}; }

1
2
3
4
5
6
7
8
9
10
11
function A(name){
    this.name = name;
    this.sayHello = function(){alert(this.name+” say Hello!”);};
}
function B(name,id){
    this.temp = A;
    this.temp(name);        //相当于new A();
    delete this.temp;      
     this.id = id;  
    this.checkId = function(ID){alert(this.id==ID)};
}

12.什么样堵住事件冒泡和暗中同意事件

JavaScript

function stopBubble(e) { if (e && e.stopPropagation) e.stopPropagation() else window.event.cancelBubble=true } return false

1
2
3
4
5
6
7
8
function stopBubble(e)
{
    if (e && e.stopPropagation)
        e.stopPropagation()
    else
        window.event.cancelBubble=true
}
return false

13.底下程序实施后弹出怎么着的结果?

JavaScript

function fn() { this.a = 0; this.b = function() { alert(this.a) } } fn.prototype = { b: function() { this.a = 20; alert(this.a); }, c: function() { this.a = 30; alert(this.a); } } var myfn = new fn(); myfn.b(); myfn.c();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function fn() {
    this.a = 0;
    this.b = function() {
        alert(this.a)
    }
}
fn.prototype = {
    b: function() {
        this.a = 20;
        alert(this.a);
    },
    c: function() {
        this.a = 30;
        alert(this.a);
    }
}
var myfn = new fn();
myfn.b();
myfn.c();

14.谈谈This对象的掌握。

this是js的三个入眼字,随着函数使用地方差别,this的值会产生变化。
但是有一个总原则,那便是this指的是调用函数的不行指标。
this日常景观下:是全局对象Global。 作为艺术调用,那么this正是指那一个指标

15.上边程序的结果

JavaScript

function fun(n,o) { console.log(o) return { fun:function(m){ return fun(m,n); } }; } var a = fun(0); a.fun(1); a.fun(2); a.fun(3); var b = fun(0).fun(1).fun(2).fun(3); var c = fun(0).fun(1); c.fun(2); c.fun(3);

1
2
3
4
5
6
7
8
9
10
11
function fun(n,o) {
  console.log(o)
  return {
    fun:function(m){
      return fun(m,n);
    }
  };
}
var a = fun(0);  a.fun(1);  a.fun(2);  a.fun(3);
var b = fun(0).fun(1).fun(2).fun(3);
var c = fun(0).fun(1);  c.fun(2);  c.fun(3);

//答案:

//a: undefined,0,0,0
//b: undefined,0,1,2
//c: undefined,0,1,1

16.上边程序的出口结果

JavaScript

var name = 'World!'; (function () { if (typeof name === 'undefined') { var name = 'Jack'; console.log('Goodbye ' + name); } else { console.log('Hello ' + name); } })();

1
2
3
4
5
6
7
8
9
var name = 'World!';
(function () {
    if (typeof name === 'undefined') {
        var name = 'Jack';
        console.log('Goodbye ' + name);
    } else {
        console.log('Hello ' + name);
    }
})();

17.领会Node么?Node的采用情状都有怎么着?

  • 高并发、聊天、实时音信推送

18.介绍下你最常用的一款框架

  • jquery,rn,angular等;

19.对以前端自动化营造工具有询问呢?简介一下

  • Gulp,Grunt等;

20.介绍一下您理解的后端语言以及明白程度

将图纸数据举办Base64编码

将图片数据转变为Base64,首先要获得到图片的二进制数据。图片的二进制数据能够透过canvas接口获得。具体达成为:

JavaScript

function getCanvas(w, h) { var c = document.createElement('canvas'); c.width = w; c.height = h; return c; } function getPixels(img) { var c = getCanvas(img.width, img.height); var ctx = c.getContext('2d'); ctx.drawImage(img, 0, 0); return ctx.getImageData(0, 0, c.width, c.height); }

1
2
3
4
5
6
7
8
9
10
11
12
13
function getCanvas(w, h) {
var c = document.createElement('canvas');
c.width = w;
c.height = h;
return c;
}
 
function getPixels(img) {
var c = getCanvas(img.width, img.height);
var ctx = c.getContext('2d');
ctx.drawImage(img, 0, 0);
return ctx.getImageData(0, 0, c.width, c.height);
}

取到图片的二进制数据后,接下去将要拓宽编码了。因为图片不唯有带有像素音讯,还含有长度,宽度音信。所以在编码像素新闻的同期也应将大幅度和惊人音讯按某一约定实行编码,笔者是这么管理的:

  1. 将图纸的像素数值数据转变为二进制类别;
  2. 将大幅度和冲天音信组合成字符串$$width,height$$,调换为二进制连串;
  3. 将图片像素消息的二进制连串和图表宽中度的二进制种类组合起来,然后再张开Base64的编码

切切实实达成为:

JavaScript

function img2Base64(img) { var imgData = getPixels(img).data; var imgWidth = getPixels(img).width; var imgHeight = getPixels(img).height; var bin = ""; for (var i = 0; i < imgData.length; i++) { bin += base.numToString(imgData[i]); } bin = bin + base.stringToBin("$$" + imgWidth + "," + imgHeight + "$$"); return base.binToBase64(bin); }

1
2
3
4
5
6
7
8
9
10
11
function img2Base64(img) {
var imgData = getPixels(img).data;
var imgWidth = getPixels(img).width;
var imgHeight = getPixels(img).height;
var bin = "";
for (var i = 0; i &lt; imgData.length; i++) {
bin += base.numToString(imgData[i]);
}
bin = bin + base.stringToBin("$$" + imgWidth + "," + imgHeight + "$$");
return base.binToBase64(bin);
}

文书档案结构方面也足以做优化,如下:

  • 应用HTML5 文档类型,以下是空文件:

<!DOCTYPE html> <html> <head> <title>Recipes: pesto</title> </head> <body> <h1>Pesto</h1> <p>Pesto is good!</p> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
 
<head>
<title>Recipes: pesto</title>
</head>
 
<body>
 
  <h1>Pesto</h1>
 
  <p>Pesto is good!</p>
 
</body>
</html>
  • 在文档起初地点引用CSS文件,如下:

<head> <title>My pesto recipe</title> <link rel="stylesheet" href="/css/global.css"> <link rel="stylesheet" href="css/local.css"> </head>

1
2
3
4
5
6
7
<head>
  <title>My pesto recipe</title>
 
  <link rel="stylesheet" href="/css/global.css">
  <link rel="stylesheet" href="css/local.css">
 
</head>

使用那三种方法,浏览器会在剖判HTML代码以前将CSS音信绸缪好。因而有利于提高页面加载质量。

在页面底部body甘休标签在此以前输入JavaScript代码,那样有利于提高页面加载的速度,因为浏览器在分析JavaScript代码从前将页面加载成功,使用JavaScript会对页面成分爆发积极的震慑。

<body> ... <script src="/js/global.js"> <script src="js/local.js"> </body>

1
2
3
4
5
6
7
8
<body>
 
  ...
 
  <script src="/js/global.js">
  <script src="js/local.js">
 
</body>

运用Defer和async属性,脚本成分具备async 属性不恐怕保障会按梯次执行。

可在JavaScript代码中增加Handlers。千万别加到HTML内联代码中,比方上面包车型地铁代码则轻松导致错误且不易于尊崇:

index.html:

<head> ... <script src="js/local.js"> </head> <body onload="init()"> ... <button onclick="handleFoo()">Foo</button> ... </body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<head>
  
  ...
 
  <script src="js/local.js">
 
</head>
 
<body onload="init()">
 
  ...
 
  <button onclick="handleFoo()">Foo</button>
 
  ...
 
</body>

下边包车型客车写法比较好:

index.html:

<head> ... </head> <body> ... <button id="foo">Foo</button> ... <script src="js/local.js"> </body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<head>
 
  ...
 
</head>
 
<body>
 
  ...
 
  <button id="foo">Foo</button>
 
  ...
 
  <script src="js/local.js">
 
</body>

js/local.js:

init(); var fooButton = document.querySelector('#foo'); fooButton.onclick = handleFoo();

1
2
3
4
init();
var fooButton =
    document.querySelector('#foo');
fooButton.onclick = handleFoo();

抽屉菜单

你放在导航成分里的标志都定义在滑走的采取抽屉菜单里。为了大家的对象 ,小编坚韧不拔利用标题(<core-toolbar>)和导航链接 (<core-menu>):

XHTML

<nav> <core-toolbar><span>Single Page Polymer</span></core-toolbar> <core-menu selected="0"> <paper-item noink> <core-icon icon="label-outline"></core-icon> <a href="#one">Single</a> </paper-item> <paper-item noink> <core-icon icon="label-outline"></core-icon> <a href="#two">page</a> </paper-item> ... </core-menu> </nav>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<nav>
  <core-toolbar><span>Single Page Polymer</span></core-toolbar>
  <core-menu selected="0">
    <paper-item noink>
      <core-icon icon="label-outline"></core-icon>
      <a href="#one">Single</a>
    </paper-item>
    <paper-item noink>
      <core-icon icon="label-outline"></core-icon>
      <a href="#two">page</a>
    </paper-item>
    ...
  </core-menu>
</nav>

在乎,将来<core-menu selected=”0″>被硬编码为挑选第二个条约。大家随后会把它改为动态的。

本文由云顶娱乐v1.8发布于澳门云顶娱乐app官网,转载请注明出处:对象属性描述符,你不可不知的【澳门云顶娱乐

关键词:

  • 上一篇:没有了
  • 下一篇:没有了