后边一个技术员必备本领

奥门威尼斯网址 1

电阻通常都采用色环标示法。色标法就是用棕、红、橙、黄、绿、兰、紫、灰、白、黑十种颜色代表1234567890十个阿拉伯数字,金、银两种颜色代表倍率0.1、0.01或误差5%、10%.套件中附有颜色样本的实物和多款色环电阻常见的四道色环要读取三位有效数字,一二位表示有效数,第三位表示倍率。例:黄紫红金,三位有效数为472,表示47乘以102等于4700,即4.7K欧姆;再如:棕黑黑金,三位有效数为100,表示10乘以100等于10,即10欧姆。
在实验进程中,如果三极管的基极和其它引脚间不具备有单向导电特性的(或说单向导电特性不明显),就说明三极管是坏的;另外,即使单向导电特性正常,但不能受基极控制或不稳定,也说明三极管是坏的,或性能很差。
可控硅在控制极加上合适的触发电流,可控硅就能够从断开状态变成为导通状态,这时,我们取消控制极的触发电流,但可控硅仍然能维持导通状态。如果流过可控硅的电流开始变小,当小于维持导通的能力时,可控硅才关断,直到下次触发时才会导通。

1、HTTP协议的主要特点

  • (1) 简单快速
    每个资源得到URI是固定的,想访问某个资源,只需要输入这个资源对应的URI就可以了。
    (URL(Uniform Resource Location)统一资源定位符,URI(Uniform Resource
    Identifier)统一资源标识符。URL是URI的子集,URL就是用定位的方式实现的URI。)

  • (2) 灵活
    每个HTTP头部有个Content-Type奥门威尼斯网址,,一个HTTP协议通过设置不同的Content-Type值,可以完成不同类型的资源的传输。

  • (3) 无连接
    限制每次连接只处理一个请求。服务器处理完客户的请求,并收到客户的应答后,即断开连接。采用这种方式可以节省传输时间。

  • (4) 无状态
    HTTP协议对于事务处理没有记忆能力。知乎一句简单回单很好:就是第二次来你无法识别它曾经来过。(人生若只如初见)
    但是,在通过增加cookie和session机制的前提下,现在的网络请求其实是有状态的。

前端工程师必备技能

金刚

前端

前端工程师

今天在技术群里看到几张讲前端的图片,好棒,记录下。以后慢慢扩展相关领域。

 

奥门威尼斯网址 2

前端技术汇总.jpg

 

 

奥门威尼斯网址 3

前端工程师所需要掌握的技能.jpg

 

 

奥门威尼斯网址 4

前端工程师所需要掌握的技能.jpg

 2016.4.27 修改

添加大图下载地址:

点我下载

最近在找实习,看了很多公司的招聘要求,在这儿将知名的一些企业要求贴这儿,也是给有想进该行业的人努力的方向。

1、DOM结构 ——
两个节点之间可能存在哪些关系以及如何在节点之间任意移动。

2、HTTP报文

HTTP报文分为请求报文响应报文

  • (1) 请求报文:由 请求行、请求头、空行和请求体组成
    请求行包含HTTP方法,页面地址、HTTP协议和版本
    请求头包含一些key:
    value值来告诉服务端需要哪些内容,要注意哪些类型
    空行
    最后一个请求头之后是一个空行,发送回车符和换行符,通知服务器以下不再有请求头。
    请求体:即请求正文。
    如下是一个HTTP请求报文示例:

    奥门威尼斯网址 5

    HTTP请求报文

  • (2) 响应报文:由 状态行、响应头、空行和响应体组成

    状态行由3部分组成,分别为:协议版本,状态码,状态码描述,之间由空格分隔
    响应头与请求头部类似,为响应报文添加了一些附加信息
    空行
    最后一个响应头之后是一个空行,发送回车符和换行符,通知客户端以下不再有响应头。
    响应体:即响应正文。
    如下是一个HTTP响应报文示例:

    奥门威尼斯网址 6

    HTTP响应报文

1、百度

1、包含与被包含

3、HTTP方法

常用的HTTP方法有如下5种:
GET:获取资源
POST:传输资源
PUT:更新资源
DELETE:删除资源
HEAD:获取报文首部

奥门威尼斯网址 7

A.contains(B)检测B节点是否是A节点的子节点,返回布尔值

4、POST和GET的区别

主要的区别有如下几点:

  • ① GET在浏览器回退是无害的,而POST会再次提交请求
  • ② GET产生的URL地址可以被收藏,而POST不可以
  • ③ GET请求会被浏览器主动缓存,而POST不会,除非手动设置

  • GET请求参数会被完整保留在浏览器历史记录里,而POST中的参数不会被保留

  • GET请求在URL中传送的参数长度是有限制的,基本为2Kb,所以传送参数不要太长,否则会被浏览器截断,而POST没有限制
  • ⑥ GET参数通过URL传递,而POST放在Request body中

  • POST比GET安全,因为GET请求参数直接暴露在URL上,所以不能用来传递敏感信息

2、滴滴打车

2、父与子获取父节点:

5、HTTP状态码

  • 1xx:指示信息。表示请求已经接受,继续处理
  • 2xx:成功。表示请求已被成功接受
  • 3xx:重定向。要完成请求必须进行更进一步的操作
  • 4xx:客户端错误。请求有有语法错误或请求无法实现
  • 5xx:服务器错误。服务器未能实现合法的请求

常用HTTP状态码:
200 OK:客户端请求成功
206 Partual
Content:客户发送了一个带有Range头的GET请求,服务器完成了它
301 Moved
Permanently:所有请求的页面已经转移至新的URL(永久重定向
302 Found:所有请求的页面已经临时转移到新的URL(临时重定向
304 Not
Modifiled:客户端有缓冲的文档并发出了一个条件性的请求,服务器告诉客户,原来缓冲的文档还可以继续使用
400 Bad Request:客户端请求有语法错误,不能被服务器所理解
401
Unauthorized:请求未经授权,这个状态码必须和WWW-Authenticate报头域一起使用
403
Forbidden:请求页面禁止被访问,一般某个地址只允许服务端访问,客服端访问时就会给出403
404 Not Found:请求资源不存在
500 Internal Server Error:服务器错误
503 Server
Unavailable:请求未完成,服务器临时过载或宕机,一段时间后可能恢复正常

奥门威尼斯网址 8

node.parentNode,node.parentElement,两者区别在于后者只能获取元素获取子节点:childNodes(NodeList对象存在的子节点集合),firstChild,lastChild

6、持久连接

HTTP协议采用“请求-应答”模式,当使用普通模式,即非
Keep-Alive(持久连接)模式时,每个请求/应答客户和服务器都要新建一个连接,完成之后立即断开连接(HTTP协议无连接的协议)

当使用Keep-Alive模式时,Keep-Alive功能使客户端到服务器端的连接持续有效,当出现对服务器的后继请求时,Keep-Alive功能避免了建立或者重新建立连接

Keep-Alive只有在HTTP/ 1.1才支持,HTTP 1.0版本是不支持的。

3、搜狐

3、同辈

6、管线化

奥门威尼斯网址 9

nextSibling,previousSibling

(1) 什么是管线化?

持久连接(Keep-Alive)的情况下,某个连接上消息的传递类似于:
请求1 —> 响应1 —> 请求2 —> 响应2 —> 请求3 —> 响应3

这个过程中请求一直没有断开的

HTTP管线化(HTTP pipelining) 连接上的消息变成了这样:
请求1 —> 请求2 —> 请求3 —> 响应1 —> 响应2 —> 响应3

请求通道是持久建立的,但并不是请求一次,响应一次,而是将所有请求一次打包过去,然后响应也一次打包回来。

4、亚信

4、Element Travel API给DOM添加的属性

(2) 管线化特点
  • 管线化通过持久连接完成,仅HTTP/ 1.1支持此技术
  • 只有GET和HEAD请求可以进行管线化,而POST则有所限制
  • 初次创建连接时,不应启动管线机制,因为对方(服务器)不一定支持HTTP/1.1版本协议
  • 管线化不会影响响应到来的顺序,如上面箭头所示,响应返回的顺序并未改变。
  • 开启管线化很可能并不会带来性能上的大幅度提升,而且很多服务端和代理程序对管线化支持并不好,因此现代浏览器像
    Chrome 和 Firefox 默认并未开启管线化支持。

奥门威尼斯网址 10

childElementCount,firstElementChild,lastElementChild,nextElementSilbling,previousElementSibling,他们与之前的方法的区别是多了Element,保证只返回元素节点,而之前的方法普通的文本节点及注释节点也会返回,之前的方法在非IE浏览器中还会把元素之间的空白符当文本节点返回

5、品友

5、children属性

奥门威尼斯网址 11

与childNodes不同的地方在于:children只包含元素子节点

就贴这么多吧,前端开发要求都有一些类似,也会有一些不同的侧重点。之所以觉得有贴在这儿的必要,是因为看到这些以后我才知道现在的趋势,才知道自己还应该补充学习什么,也希望能帮到更多人。

2、DOM操作 —— 如何添加、移除、移动、复制、创建和查找节点等。

如果有大神觉得还有别的应该进修的,也请指教,谢谢,一起努力!

1、创建新节点

 

createDocumentFragment() 创建一个DOM片段creatElement() 创建一个具体的元素creatTextNode() 创建一个文本节点

2、添加、移除、替换、插入

appendChild()removeChild()replaceChild()insertBefore() 在已有的子节点前插入一个新的子节点

3、查找

getElementsByTagName() 通过标签名称getElementsByName() 通过元素的name属性的值getElementById() 通过元素id,唯一性

3、事件 —— 如何使用事件,以及IE和标准DOM事件模型之间存在的差别。

1、关于事件流ie事件流:事件冒泡 由事件的目标(event.srcElement)接受事件,然后逐级向上(例如:下一个为包含event.srcElement的节点传递事件,直到文档节点document) (2) 其他浏览器支持的另一种事件流:事件捕获 与事件冒泡正好相反,文档节点document先监听到事件,然后把事件逐级向下传递事件,直到节点目标节点event.target (3) dom事件流 dom2级事件规范的事件流综合了以上两种,把事件流分为了以下三个阶段: 一、事件捕获阶段:不涉及事件目标,或者说这个阶段在目标之前就结束了 二、处于目标阶段:被看作冒泡阶段的一部分,所以可以在冒泡阶段在目标事件上操作事件 三、事件冒泡阶段 (4) 规范和浏览器实现的差别 dom2级事件规范的捕获阶段,事件从文档节点document开始传播,现代浏览器大多数是从window对象开始传播事件的 dom2级事件规范捕获阶段不涉及事件目标,现代浏览器大多数都在这个阶段包含事件目标2、如何使用事件?以下几种用来响应事件的事件处理程序 html事件处理程序|dom0级事件处理程序|dom2级事件处理程序|ie的事件处理程序 html事件处理程序: 指定事件:button type="button" onclick="alert('响应事件的处javascript代码,可以用全局的函数')"Click Me!/button 优缺点:简单,但是与HTML代码紧密耦合,更改不方便; 删除事件:同DOM0的删除事件处理方式; dom0级事件处理程序 指定事件:document.onclick = function(){alert("document has been clicked")}; 优缺点:简单且跨浏览器 删除事件:document.onclick = null; 实质: 为元素指定方法(栗子中为document指定onclick方法),移除方法,所以其处理程序是在元素的作用域运行的; dom2级事件处理程序: 指定事件:addEventListener("引号括起来的事件名", 触发事件后调用的事件处理程序, 是否在捕获节点调用时间处理程序的布尔值) 栗子:var funA = function(){alert(" DOM2级事件处理程序")}; document.addEventListener("click", funA, false); 删除事件: document.removeEventListener("click", funA, false); 如果指定的处理程序是匿名函数则不能删除,因为没有函数名; 优缺点: 可以添加多个监听事件,缺点必须指定函数名才能删除 ie事件处理程序 指定事件: attachEvent("onclick", function(){alert("is no longer supported in ie11")}); 删除事件: detachEvent("onclick", funA); 如果指定的处理程序是匿名函数则不能删除,因为没有函数名; 优缺点:可以添加多个监听事件,缺点必须指定函数名才能删除3、ie和标准dom事件模型之间存在的差别 这里的IE是IE11以下; 参数的差别: attachEvent()的第一个参数比addEventListener()的事件名多一个"on",且没有第三个参数,因为IE事件模型只支持冒泡事件流; 事件处理函数作用域的区别: IE中事件处理程序处于全局作用域,其内的this会指向window;而用DOM级事件的事件处理程序的作用域是元素作用域,其内的this指向其所属的元素 例: document.addEventListener("click", function(){ if(this == document){ alert("此时this指向document"); } }, false); 事件对象event的属性方法的差别 IE DOM cancelBubble = true stopPropagation() //停止冒泡 returnValue = false preventDefault() //阻止元素默认事件 srcEelement target //事件目标

4、XMLHttpRequest ——
这是什么、怎样完整地执行一次GET请求、怎样检测错误。

1、关于XMLHttpRequest 作用:提供了网页加载后在后台与服务器通信的方法;实现AJAX通信; 创建: var xhr = new XMLHttpRequest();//不适用于IE7之前的版本,其他低版本IE可通过 ActiveXObject构造; readyState,可取的值见图 对象事件: readyState的值的改变会触发readyStatechange事件;错误会触发error事件; 优缺点: 在不重新加载页面的情况下更新网页; XMLHttpRequest 2级: FromData对象:用来序列化表单或者创建与表单格式相同的数据;其实例可直接传给send()方法使用; 例: var form1 = document.forms[0]; xhr.send(new FormData(form1));2、一次GET请求分析,并检测执行过程 异步GET var xhr = new XMLHttpRequest();xhr.onerror = function(){alert("我出错啦")};xhr.onreadystatechange = function(){switch(xhr.readyState){ case 0 : alert("未初始化,及还未调用open方法"); break; case 1 : alert("启动,未调用send方法"); break; case 2 : alert("发送,未收到响应"); break; case 3 : alert("接受,取得部分数据"); break; case 4 : if((xhr.status =200  xhr.status  300) || xhr.status ==304){ alert(xhr.responceText); }; break; default : alert("are you kidding?"); }};xhr.open("get", "url", true)//启动一个请求,未发送xhr.send(null);//发送请求. 如果该请求是异步模式(默认),该方法会立刻返回. 相反,如果请求是同步模式,则直到请求的响应完全接受以后,该方法才会返回XMLHttpRequest.readyState可取的值:

5、严格模式与混杂模式 ——
如何触发这两种模式,区分它们有何意义。
Doctype:(Document
Type)文档类型,它位于文档中最前面的位置,处于标签之前。如果你想制作符合标准的页面,一个必不可少的关键组成部分就是DOCTYPE的声明。确定了正确的Doctype,xhtml里面的标识和css才能正常生效(也就是说它会很负责地告诉浏览器怎么解释你的这个标签和你写的css)。既然它是一种声明,它的责任就是告诉浏览器文档使用哪种html或者xhtml规范。为了获取正确的Doctype声明,关键就是让dtd与文档所遵循的标准对应。例如:假定文档遵循的是xhtml
1.0
strict,那么文档的Doctype声明就应该是相应的dtd,如果Doctype声明指定的是xhtml
dtd,但文档包含的依旧是html标记就是不恰当的。类似的,如果文档包含的是xhtml
1.0 strict标记,但是Doctype声明指定是html
dtd也是不恰当的。一、选择什么样的DOCTYPE?xhtml
1.0中有3种dtd声明可以选择,过渡性的(Transitional)、严格的(Strict)、框架的(Frameset)。下面我们来分别介绍:1、过渡的:一种要求不很严格的,允许在html中使用html
4.01的标识(符合xhtml语法标准),过渡的dtd写法如下:

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""

2、严格的:一种要求严格的dtd,不允许使用任何表现层的标识和属性,严格的dtd写法如下:

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ""

3、框架的:一种专门针对框架页面所使用的dtd,当页面中含有框架元素时,就要采用这种dtd,写法如下:

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""

PS:使用严格的dtd来制作页面当然是最理想的方式,但是对于还没有深入了解web标准的网页设计者,比较适合用过渡的dtd,因为这种dtd还允许使用表现层的标识、元素和属性,比较适合大多数的网页制作人员(当然量力而为了!)二、什么是标准模式与混杂模式?不同文档模式主要影响CSS内容的呈现,尤其是浏览器对盒模型的解析,但在某些情况下也会影响到JavaScript的解释执行。1、文档模式目前有四种:混杂模式//让IE的行为与IE5相同标准模式//让IE的行为更接近标准行为准标准模式//这种模式下的浏览器特性有很多都是符合标准的,不标准的地方主要体现在处理图片间隙的时候。超级标准模式
//IE8引入的一种新的文档模式,超级文档模式可以让IE以其所有版本中最符合标准的方式来解释网页内容。ps:总的来看,混杂模式让IE像IE5,标准模式使用IE7的呈现引擎,而超级标准模式则是IE8的默认文档模式。2、两种模式间的差异对于这两种模式之间的差异,最显著的一个例子与Windows上IE专有的盒模型有关。在IE
6出现时,在标准模式中使用的是正确的盒模型,在混杂模式中使用的则是老式的专有盒模型。为了维持对IE
5和更低版本的向后兼容性,Opera
7和更高版本也在混杂模式中使用有缺点的IE盒模型。

呈现方面的其他差异比较小,而且是与特定浏览器相关的,包括对于十六进制颜色值不需要#号、假设CSS中没有指定单位的长度的单位是像素,以及在使用关键字时将字号增加一级。

3、如何触发两种模式DOCTYPE不存在或形式不正确会导致HTML和XHTML文档以混杂模式呈现。触发严格模式:

!-- HTML 4.01 严格型 --!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" ""!-- XHTML 1.0 严格型 --!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ""

触发混杂模式

!-- HTML 4.01 过渡型 --!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ""!-- HTML 4.01 框架集型 --!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "" !-- XHTML 1.0 过渡型 --!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "" !-- XHTML 1.0 框架集型 --!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" ""

IE8关闭超标准模式

meta "X-UA-Compatible" content="IE=7" /content属性中IE的值用于指定使用哪个版本的呈现引擎来呈现页面。设计这个值的目的就是为了向后兼容那些专门为老版本的IE设计的站点和页面。

6、盒模型 ——
外边距、内边距和边框之间的关系,及IE8以下版本的浏览器中的盒模型
1、w3c盒模型通过在文档顶部加doctype声明就会按.W3C盒模型显示;整体见下图

2、ie8以下版本的浏览器中的盒模型IE8以下浏览器的盒模型中定义的元素的宽高包括内边距和边框设置box-sizing:border-box可以让宽度高度包含border盒padding

7、块级元素与行内元素 ——
怎么用CSS控制它们、以及如何合理的使用它们
1.块级元素:每个块级元素默认占一行高度,若有块级元素则同行无法再添加其他元素特点:高度行高以及外边距内边距都可控制
宽度默认100%
可以容纳内联元素及块元素2.行内元素:可以和其他元素都在一行上.特点:宽度就是它的文本或图片的宽度,不可改变
内联元素只能容纳文本或者其他的内联元素 设置宽度width无效
设置高度height无效,可通过line-height来设置
设置margin只有左右有效,上下无效
设置padding只有左右padding有效,上下无效3.行内块状元素:综合了行内元素与块状元素的特性,但是各有取舍特点:不自动换行
能够识别宽高 默认排列方式从左到右4.块级元素有哪些:div | dl(定义列表) |
h1(h开头系列) | hr | menu | ol | p | table | ul5.行内元素有哪些:a | b |
br | em | i | img | input | label | select | span | strong|sub |
textarea | u6.行内块状元素有哪些:button | del | iframe | ins | map |
object

块级元素,用CSS中的display:inline;属性则变为行内元素行内元素,用CSS中的display:block;属性则变为块级元素

影响:周围元素显示在同一行或换行显示,根据具体情况调整样式

8、浮动元素 ——
怎么使用它们、它们有什么问题以及怎么解决这些问题。
需要浮动的元素可使用CSS中float属性来定义元素的浮动位置,left:往左浮动,right:往右浮动浮动元素引起的问题:父元素的高度无法被撑开,影响与父元素同级的元素与浮动元素同级的非浮动元素会跟随其后若非第一个元素浮动,则该元素之前的元素也需要浮动,否则会影响页面显示的结构解决方法:使用CSS中的clear:both;属性来清除元素的浮动可解决2、3问题,对于问题1,添加如下样式,给父元素添加clearfix样式:

.clearfix:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;}.clearfix{display: inline-block;} /* for IE/Mac */

9、HTML与XHTML ——
二者有什么区别,你觉得应该使用哪一个并说出理由。
主要区别:

 XHTML 元素必须被正确地嵌套 XHTML 元素必须被关闭,空标签也必须被关闭,如 br 必须写成 br / XHTML 标签名必须用小写字母 XHTML 文档必须拥有根元素 XHTML 文档要求给所有属性赋一个值 XHTML 要求所有的属性必须用引号""括起来 XHTML 文档需要把所有  、、 等特殊符号用编码表示 XHTML 文档不要在注释内容中使“--” XHTML 图片必须有说明文字 XHTML 文档中用id属性代替name属性

10、JSON ——
作用、用途、设计结构。
作用用途:可以转换为任意语言中的对象,json在开发中的主要用来数据的交互。json和js对象格式一样,只不过json字符串中的属性名必须加双引号其他得和js语法一致;是一种基于文本,独立于语言的轻文本交换格式,易于人的阅读和编写,也易于机器的解析和生成用法:json写法:

var json1 = { "username":"smally", "age":20}var json2 = [ {"username":"smally","age":20}, {"username":"liuteng","age":20}, {"username":"lizhongshuo","age":20}]

json中允许的值,

 1.字符串 2.数值 3.布尔值 4.null 5.对象 6.数组

json转化为js对象用parse方法

var o=JSON.parse(json);console.log(o.name);

js对象转化为json

JSON.stringify()

发表评论

电子邮件地址不会被公开。 必填项已用*标注