前端基础部分习题

1 / HTML

1.DOCTYPE 的作用是什么？标准模式与兼容模式各有什么区别?

声明文档的解析类型(document.compatMode)，避免浏览器的怪异模式。

!DOCTYPE是一种标准通用标记语言的文档类型声明，它的目的是要告诉浏览器它应该使用什么样的文档类型定义（DTD）来解析文档。

标准模式，浏览器按照W3C的标准解析渲染页面，这样一来，你的页面在所有的浏览器里显示的就都是一个样子了。标准模式的排版 和 JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作！

具体区别

1.盒模型

在严格模式中 ：width是内容宽度 ，元素真正的宽度 = width;

在兼容模式中 ：width则是=width+padding+border

2.兼容模式下可设置百分比的高度和行内元素的高宽

在Standards模式下，给span等行内元素设置wdith和height都不会生效，而在兼容模式下，则会生效。

在standards模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置高度，子元素设置一个百分比的高度是无效的。

3.用margin:0 auto设置水平居中在IE下会失效

使用margin:0 auto在standards模式下可以使元素水平居中，但在兼容模式下却会失效（用text-align属性解决）

4.兼容模式下Table中的字体属性不能继承上层的设置，white-space:pre会失效，设置图片的padding会失效

标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。

HTML 4.01 规定了三种文档类型：Strict、Transitional 以及 Frameset。

XHTML 1.0 规定了三种 XML 文档类型：Strict、Transitional 以及 Frameset。

Standards （标准）模式（也就是严格呈现模式）用于呈现遵循最新标准的网页，而 Quirks（包容）模式（也就是松散呈现模式或者兼容模式）用于呈现为传统浏览器而设计的网页。

2.html5为什么只需要写?你知道多少种Doctype文档类型？

HTML 4.01 中的 doctype 需要对 DTD 进行引用，因为 HTML 4.01 基于 SGML。而 HTML 5 不基于 SGML，因此不需要对 DTD 进行引用，但是需要 doctype 来规范浏览器的行为。其中，SGML是标准通用标记语言,简单的说，就是比HTML,XML更老的标准，这两者都是由SGML发展而来的。BUT，HTML5不是的。

3.行内元素有哪些？块级元素有哪些？ 行内块元素有那些？

常见的块级元素有：

,

,

...

,

,
,

,,

,

,

行内元素：,,,,,,,,,

行内块元素：img|input|select|textarea|button等，也被称为可置换元素（Replaced element）。

4.请说出五种html5的特性

（1）语义化标签：header,footer,nav etc.

（2）canvas 画布

（3）audio, video

（4）drag 拖拽

（5）本地存储 localStorage, sessionStorage

（6）webSocket 长连接

（7）定位

（8）增强型表单 input number, datalist, keygen, output, progress

（9）svg 矢量绘图

（10）webWorker 实现js多进程。

（11）新事件如 ondrag onresize

5.简述a标签target属性的取值和作用？

标签的target属性规定在何处打开连接文档

属性值

_black：点击一次打开一个新窗口

_self：默认，在当前窗口打开

_new：始终在同一个新窗口中打开

_parent：在父级窗口打开

_top：在当前的整个浏览器中打开所链接文档，即在顶级窗口打开

framename：在指定的框架中打开被链接文档

6.请列举几个html5新增的标签？

#video：表示一段视频并提供播放的用户界面#

audio：表示音频

time：日期和时间值

source：为video和audio提供数据源

nav：导航

aside：在一边

article：文章

footer：页尾

header：页眉f

main：主要的

menu：菜单

canvas：表示位图区域

track：为video和audio指定字母

svg：定义矢量图

code：代码段

figure：和文档有关的图例

figcaption：图例的说明

mark：高亮的引用文字

Datalist：提供给其他控件的预定义选项

keygen：秘钥对生成器控件

output：计算值

progress：进度条

embed：嵌入的外部资源

menuitem：用户可点击的菜单项

template：模板

section：部分

7.如何定义一个单选按钮？

input[type='radio']radio定义单选按钮

8.标签上的title属性与alt属性的区别是什么？

alt是在图片不能正常加载时候显示的提示语

title属性是鼠标划上去显示的内容

9.如何处理html5新标签的浏览器兼容问题？

（1）使用静态资源的html5shiv包，载入后，初始化新标签的css

（2）使用js动态插入新标签

10.分别写出以下几个HTML标签：文字加粗、下标、居中、斜体

加粗：、，下标：_，居中：

，斜体：

11.对WEB标准以及W3C的理解与认识

web标准，简单来说就是将页面的结构、表现和行为各自独立实现，尽量使用外链css样式表和js脚本。使结构、表现和行为分为三块，符合规范。同时提高页面渲染速度，提高用户的体验。

标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、

使用外链css和js脚本、

结构行为表现的分离、文件下载与页面速度更快、

内容能被更多的用户所访问、

内容能被更广泛的设备所访问、

更少的代码和组件，容易维护、改版方便，不需要变动页面内容、

提供打印版本而不需要复制内容、

提高网站易用性。

12.前端页面有哪三层构成，分别是什么，作用是什么？

最准确的网页设计思路是把网页分成三个层次，即：结构层、样式层、行为层。

HTML：结构层：

网页的结构或内容层是该页面的基础HTML代码。

CSS：样式层：

该层指示结构化HTML文档如何看待网站的访问者，并由CSS（层叠样式表）定义。

JavaScript：行为层

行为层使网站具有交互性，允许页面响应用户操作或基于一组条件进行更改

13.请讲述一下iframe框架的优缺点？

优：iframe能够原封不动地把嵌入的网页展现出来。如果遇到加载缓慢的第三方内容，如图标和广告等，可以用iframe来解决

缺：会产生很多页面，不容易管理。很多的移动设备（PDA手机）无法完全显示框架，设备兼容性差

现在基本上都是用Ajax来代替iframe，iframe已渐渐退出了前端开发。

14.form表单实现上传文件必不可少的属性是什么？

enctype 属性规定在将表单数据发送到服务器之前如何对其进行编码。

method="post"  、enctype="multipart/form-data"

15.src和href的区别是什么？

href 是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。

src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。

16.input不可编辑，必填属性分别是什么？

disabled不可被编辑； required必填项；

17.请写出input常用的13种type类型，并写出每种类型的应用场景

text 默认的输入类型。

password 密码，表现为一连串的点。

file 文件上传控件。

radio 单选按钮

checkbox 复选框

hidden 隐藏的输入字段，用于在表单中添加对用户不可见

button 按钮

image 图像形式的提交按钮

reset 重置按钮,清除表单中所有数据

submit 提交按钮,提交按钮会把表单数据发送到服务器

color 调色板

tel 包含电话号码的输入域

email 包含email地址的输入域

url 包含URL地址的输入域

search 搜索域

number 包含数值的输入域

range 包含一定范围内数字值的输入域

date 选取日、月、年的输入域

month 选取月、年的输入域

week 选取周、年的输入域

time 选取月、年的输入域

datetime 选取时间、日 月、年的输入域(UTC时间)

datetime-local 选取时间、日 月、年的输入域(本地时间)

18.请简述一下你对语义化标签的理解

⒈用正确的标签做正确的事情

⒉HTML语义化让页面的内容结构化，结构更清晰，便于对浏览器，搜索引擎解析；

⒊即使在没有CSS样式的情况下也以一种文档格式显示，并且是任意阅读的；

⒋搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO；

⒌时阅读源代码的人对网站更容易将网站分块，便于阅读维护理解

19.如何区分html和html5

1、在文档声明上，html有很长的一段代码，并且很难记住这段代码，都只是靠工具直接生成，而html5却不同，只有简简单单的声明，也方便人们的记忆，更加精简。

2、在结构语义上；html4.0没有体现结构语义化的标签。html5在语义上却有很大的优势,提供了一些新的html5标签。

20.img的常用属性

src   图像的源文件

alt   提示文字

width,height   高度，宽度

border   边框

vspac   垂直间距

hspace   水平间距

21.字体加粗的方法

（1）用CSS中font-weight:bold样式给字体加粗

（2）用html中的加粗标签

（3）用html中的加粗标签

22.一个网页从开始请求到最终显示的完整历程

一个网页从开始请求到最终显示的完整历程一般可以分为以下7个步骤：

    1.在客户端浏览器中输入网址URL。

    2.发送到DNS(域名服务器)获得域名对应的WEB服务器的IP地址。

    3.客户端浏览器与WEB服务器建立TCP(传输控制协议)连接。

    4.客户端浏览器向对应IP地址的WEB服务器发送相应的HTTP或HTTPS请求。

    5.WEB服务器响应请求，返回指定的URL数据或错误信息；如果设定重定向，则重定向到新的URL地址。

    6.客户端浏览器下载数据，解析HTML源文件，解析的过程中实现对页面的排版，解析完成后，在浏览器中9显示基础的页面。

    7.分析页面中的超链接，显示在当前页面，重复以上过程直至没有超链接需要发送，完成页面的全部显示。

2 / CSS

1.css性能优化的方法，至少说出五种

1.异步加载CSS

2.js，css文件压缩、

3.有选择地使用选择器

4.优化重排与重绘

5.不要使用@import

6.减少闭包的使用

7.减少dom操作

8.使用精灵图和雪碧图

2.Css选择器有几种？选择器的优先级是怎样的。

元素选择器，id选择器，calss 选择器，后代选择器，子代选

择器，伪类选择器，通配符

内联样式> id>class>元素>通配符>继承样式

3.浮动的原理什么？浮动有几种？

将排成一列的元素变成一行，脱离文档流。

主要是为了让一些标签并排显示

使当前元素脱离普通流，相当于浮动起来一样，浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘

向下浮动向上浮动两种

4.定位有几种，他们的特点分别是什么？是相对于什么进行定位的？

static静态定位

html元素的默认值，不受top、bottom、left、right属性影响，元素出现在正常的文档流中

relative相对定位

相对定位, 特点：不脱离文档流的布局，受top、bottom、left、right属性影响,只改变自身的位置，在文档流原先的位置遗留空白区域。

absolute绝对定位

绝对定位 特点:脱离文档流的布局，遗留下来的空间由后面的元素填充。定位的起始位置为最近的父元素(position不为static)，否则为html文档本身。

fixed固定定位

固定定位, 特点：类似于absolute，但不随着滚动条的移动而改变位置。元素的位置相对于浏览器窗口是固定位置

sticky粘性定位

粘性定位的语法格式如下：

选择器 { position: sticky; top: 10px; }

1、粘性定位可以认为是相对定位和固定定位的混合；

2、粘性定位的元素是以浏览器的可视窗口为参照点移动元素；

3、粘性定位继续占有原先的位置；

4、必须添加top、bottom、left、right其中一个才有效；

5、一般都是跟页面滚动搭配使用；

5.如何设置背景透明？

background-rgba（四个参数）

background-color:rgba(0,0,0,0~1)，使用这个方法就只会设置div背景透明，而不会影响到div里的内容。

background-color:transparent

6.请列举几种布局方式，并列举各自优点

1 静态布局:布局简单，没有兼容性问题。

2 自适应布局:自适应布局是为不同的屏幕分辨率分别定义不同的布局。改变屏幕分辨率可以切换不同的静态布局

3 流式布局:流式布局的特点是随着屏幕的改变，页面的布局没有发生大的变化，可以进行适配调整，这个正好与自适应布局相补。

4 响应式布局:通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。屏幕尺寸不一样展示给用户的网页内容也不一样.利用媒体查询可以检测到屏幕的尺寸(主要检测宽度)，并设置不同的CSS样式，就可以实现响应式的布局

7.css引入方式有几种？link和@import有什么区别？

3种，行内样式，内嵌式，外链式

link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义ref连接属性等作用；

        @import是CSS提供的，只能用于加载CSS;

页面被加载的时，link会同时被加载

        @import引用的CSS会等到页面被加载完再加载; 网络不好的情况下，会造成页面混乱

8.在css样式中使用em和px。各有什么优势，在表现上有什么区别？

px：长度单位，值是固定的

em：值不是固定的，并且会继承父级元素的字体大小。例如浏览器默认字体的高是16px，如果未经调整的话，1em=16px。12px=0.75em

9.请列举几种隐藏元素的方法？（至少三种）

display:none    通过隐藏盒子属性

visibility:hidden    通过隐藏盒子属性

overflow:hidden 溢出隐藏

opacity: 0  ； 通过改变元素的透明度

使用绝对定位，定位到看不见的地方

10.css3中有哪些新属性？（至少五种）

background-size

padding-box

text-shadow

transform：

transition

圆角（border-radius:8px;）

阴影（box-shadow:10px）

对文字加特效（text-shadow）

变换（transform）

rgb：设置颜色不透明度的操 作

旋转 transform:rotate(9deg)

缩放 scale(0.85,0.90)

定位 translate(0px,-30px)

倾斜 skew(-9deg,0deg)

线性渐变（gradient）

增加了更多的 css 选择器

matrix()函数

border-image：图片边框

border-color：为边框设置多种颜色

background-origin：指定背景图片从哪里开始显示

background-clip：指定背景图片从什么位置开始裁剪

word-wrap：自动换行

11.请写出清除浮动有几种方式，分别是什么.

clear：both：

父级添加overflow属性（父元素添加overflow:hidden）

使用after伪元素清除浮动

使用before和after双伪元素清除浮动

12.如何初始化css样式？为什么要初始化css样式？

* {    margin: 0;    padding: 0} 

1.浏览器差异

不同浏览器对有些标签的默认值是不同的，如果没对css初始化会出现浏览器之间的页面显示差异

2.提高编码质量

如果不初始化，整个页面做完会很糟糕，重复的css样式很多

13.如何让一段文本中的所有英文单词的首字母大写？

text-transform：capitalize 首字母大写

text-transform ：uppercase 全部都是大写

text-transform ：lowercase 全都是小写

14.rgba()和opacity的透明效果有什么不同？

opacity作用于元素，以及元素内的所有内容元素

.rgba()只作用于元素的颜色或其背景色，元素的子元素不会继承透明效果

15.行内，块状，行内块元素之间如何进行转换？

display:inline； 行内样式

display:inline-block；行内块元素

display：block; 块状元素

16.如何设置一个元素，固定到网页的底部

bottom：0；

position：fixed；

17.如何使用css将多出范围的字变为...

white-space:nowrap;

overflow:hidden;

text-overflow:ellipsis;

css能做到文本超出第二行显示省略号

  width:100px;

    overflow : hidden;/*必须结合的属性,当内容溢出元素框时发生的事情*/

    text-overflow: ellipsis;/*可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本*/

    display: -webkit-box;/*必须结合的属性 ，将对象作为弹性伸缩盒子模型显示*/

    -webkit-line-clamp: 2;/*用来限制在一个块元素显示的文本的行数*/

-webkit-box-orient: vertical;/*必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式*/

18.如何解决浮动引起的高度坍塌

1.给父元素设置高度

2.设置一个空标签，并且给此标签加上clear:both；

19.margin和padding的区别是什么？

Margin是调盒子与盒子之间的距离，padding调整盒子内部的距离。

20.如何取消a链接点击时的背景颜色

-webkit-tap-highlight-color:transparent;

21.display：none；和visibility：hidden；的区别是什么？

display:none 不占页面空间，visiblity:hidden 占据原先页面空间。、

display:none 引起页面重绘和回流， visiblity:hidden 只引起页面重绘。

22.css3新增的伪类有哪些？

:root 选择文档的根元素，等同于 html 元素

:empty 选择没有子元素的元素

:target 选取当前活动的目标元素

:not(selector) 选择除 selector 元素意外的元素

:enabled 选择可用的表单元素

:disabled 选择禁用的表单元素

:checked 选择被选中的表单元素

:after 在元素内部最前添加内容

:before 在元素内部最后添加内容

:nth-child(n) 匹配父元素下指定子元素，在所有子元素中排序第n

:nth-last-child(n) 匹配父元素下指定子元素，在所有子元素中排序第n，从后向前数

:nth-child(odd)

:nth-child(even)

:nth-child(3n+1)

:first-child

:last-child

:only-child

:nth-of-type(n) 匹配父元素下指定子元素，在同类子元素中排序第n

:nth-last-of-type(n) 匹配父元素下指定子元素，在同类子元素中排序第n，从后向前数

:nth-of-type(odd)

:nth-of-type(even)

:nth-of-type(3n+1)

:first-of-type

:last-of-type

:only-of-type

:selection 选择被用户选取的元素部分

:first-line 选择元素中的第一行

:first-letter 选择元素中的第一个字符

23.请描述一下渐进增强与优雅降级

优雅降级：项目开始就构建站点的完整功能，然后针对浏览器测试和修复。对低版本的浏览器就行兼容性的修复。

渐进增强：项目开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。

渐进增强相当于向上兼容，而优雅降级相当于向下兼容。向下兼容指的是高版本支持低版本的

24.请简述你所了解的css中z-index的权重问题

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

后面的数值越大，表示越要优先显示

25.有哪几种方法可以使html元素脱离文本流？

1:float 2:absolute 3:fixed

26.超链接访问过后hover样式就不出现的问题是什么？如何解决？

被点击访问过的超链接样式不再具有hover和active了，解决办法是改变css属性的排列顺序：L-V-H-A（link,visited,hover,active）

27.介绍一下标准的css的盒子模型？与低版本IE的盒子模型有什么不同？

在 标准盒子模型中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。 IE盒子模型中，width 和 height 指的是内容区域+border+padding的宽度和高度。

28.CSS中哪些属性可以继承？

font：组合字体

font-family：规定元素的字体系列

font-weight：设置字体的粗细

font-size：设置字体的尺寸

font-style：定义字体的风格

text-indent：文本缩进

text-align：文本水平对齐

line-height：行高

color：文本颜色

visibility：元素可见性

光标属性：cursor

29.width: auto 和 width: 100% 的区别？

1、width:100% 并不包含margin-left margin-right的属性值，width直接取其父容器的宽度。如果设置了margin那新的width=100%+margin的值。就会发现加了 margin相对应的边就会多出设置的空白。而且会多出横向滚动条因为宽度已经超出了屏幕的范围，(这条相对于父容器是body)。

2、width:auto包含margin-left/margin-right的属性值。width:auto总是占据整行，如果要设置margin的值那么新width=100%-margin。减去的这个值就是相应边得空白。显著的特征是这个没有横向滚动条出现也就是宽度没有增加。

3、一般width:auto使用的多，因为这样灵活，而width:100%使用比较少，因为在增加padding或者margin的时候，容易使其突破父级框，破环布局。

30.什么是FOUC？你如何来避免FOUC

如果使用import方法对CSS进行导入，会导致某些页面在Windows下的IE出现一些奇怪的现象：

以无样式显示页面内容的瞬间闪烁，这种现象称之为文档样式短暂失效(Flash of Unstyled Content)，简称为FOUC。

原理：当样式表晚于结构性html加载，当加载到此样式表时，页面将停止之前的渲染。此样式表被下载和解析后，将重新渲染页面，也就出现了短暂的花屏现象。

解决方法：使用LINK标签将样式表放在文档HEAD中。

31.content-box和border-box，为什么看起来content-box更合理，但还是经常使用border-box

content-box不包含padding，border-box包含padding

32.如何让一个容器成为弹性容器？

display: flex;

33.弹性布局的布局原理是什么？什么场景下使用弹性布局？

该布局模型的目的是提供一种更加高效的方式来对容器的条目进行布局、对齐和分配空间。适用于移动端，在Android和ios.上也支持

34.如何让实现一个元素在网页中水平垂直居中？

弹性布局用给父元素加上{ display:flex;align-items:center; }

普通元素用：magin:auto

（1）知道子元素的宽高

.child{

      position:absolute;

      top:50%;

      left:50%;

      margin-left:-50px;

      margin-top:-50px;

}

（2）不考虑子元素的宽高

.child{

      position:absolute;

      top:0;

      left:0;

      right:0;

      bottom:0;

      margin:auto;

    }

（3）不用考虑子元素的宽高，且当子元素没有宽高也能居中（兼容性不是很好）

.child{

      background-color: tomato;

      position:absolute;

      top:50%;

      left:50%;

      transform: translate(-50%,-50%);

    }

（4）给父元素设置display:flex

body{

      height: 100%;

      display: flex;

      justify-content: center;

      align-items: center;

}

（5）通过JS实现：

获取当前屏幕的宽高，通过DOM添加css样式达到效果

（6）父元素有固定宽高

同时父元素设置：

body{

      height: 988px; width: 1000px;

      display:table-cell;

      vertical-align: middle;

      text-align: center;

    }

子元素需要设置为inline-block

.child{

      display: inline-block;

}

35.请简述弹性布局与传统盒模型布局的区别和优缺点？

传统布局，基于盒模型，依赖 display属性 、position属性 、float属性。它对于那些特殊布局非常不方便，比如垂直居中

如果屏幕尺寸发生变化,传统布局的页面样式就会发生变化.

弹性盒子可以根据屏幕尺寸或浏览器窗口尺寸自动调整页面中各局部区域的显示方式，即实现非常灵活的布局处理

36.flex是什么？

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为Flex布局。

37.请解释一下css3的flex(弹性盒布局模型)以及使用场景

Flexbox（弹性盒布局模型）

2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

适用场景

布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。–Flex 布局，可以简便、完整、响应式地实现各种页面布局。

38.弹性盒子使用什么样的方式布局的？

CSS3 弹性盒（ Flexible Box 或flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

39.弹性盒子的布局原理是什么？

容器上有 主轴和纵轴的概念，默认主轴（main-axis）是横向，从左到右，纵轴是竖向，从上到下。其中所有的孩子的布局都会受到这两个轴的影响。

40.flex弹性盒子布局与传统盒模型布局的区别

传统盒子模型就是由外边距（margin）、边框（border）、内边距（padding）以及内容（content）组成。

传统方式

布局目标的实现，属性赋值非常松散。

严重依赖于页面结构与内容实际页面大小。

当页面属性发生变化的时候，页面的布局取值都要重新调整。

不是很能够灵活的引用页面结构的变化。

用弹性盒子布局：

相关的css属性赋值，比较统一。

布局方式灵活，可以应对页面结构元素变化。

实现了一种整体控制方法，比较直观，高效。

3/ JavaScript

1.变量命名规则

1.变量命名必须以字母或是下表符号“_”或者“$”为开头

2.变量名长度不能超过255个字符。

3.变量名中不允许使用空格。

4.不使用脚本语言中保留的关键字及保留符号作为变量名。

5.变量名区分大小写。（javascript是区分大小写的语言）

2.js数据类型有几种，判断数据类型的方法

七种数据类型：number，null,undefined,string,boolean,object,symbol

JS数据类型的判断主要有三种方法：typeof、instanceof、Object.prototype.toString.call()

最常用typeof

3.哪些运算符常用作布尔判断简述运算符的优先级

逻辑运算符 ||,&&,!。  . [] () 字段访问、数组下标、函数调用以及表达式分组

4.写出以下常用函数：生成随机数、数字四舍五入、字符串查询子串、字符串分割为数组、检索数组中的元素、数组拼接成字符串、向数组中增删元素

rand()生成随机数，

round() 数字四舍五入

substr（）字符串查询子串

split（）字符串分割为数组

results.push()寻找索引

join("")数组拼接成字符串

push（）增加

remove（）删除

toFixed()保留小数点

5.怎样改变元素的内容、属性、样式

改变内容：innerText/innerHTML

改变属性：setAttribute

改变样式：.style.color = "red"

6.怎样获取浏览器窗口尺寸

网页可见区域宽：document.body.clientWidth

网页可见区域高：document.body.clientHeight

7.怎样控制浏览器前进、后退、页面跳转

后退

前进

刷新

停止

返回主页

第一个方法

跳转页面;在当前页面进行跳转  location前可加 window 也可不加

location.href = "http://127.0.0.1:8080/news";

第二个方法

跳转页面;打开新的标签页进行跳转

window.open("http://127.0.0.1:8080/news");

8.遍历数组和对象的常用方法有哪些

for循环

foreach遍历（可以同时取出数组中的值和值对应的下标）

for --- of遍历

for --- in遍历（常见用在对象中，遍历对应的key值和value值）

map循环

every循环

Each循环

while循环

9.Js数据类型强制转换的方法（写出三种即可）

转换函数、强制类型转换、利用js变量弱类型转换。

10.说明全局变量和局部变量的作用范围和生命周期

局部变量：

1.局部变量：在函数内部用var声明的变量

2.局部变量只作用于函数内，所以不同的函数可以使用相同名称的变量

（函数参数只在函数内起作用，属于局部变量）

3.局部变量在函数开始执行时创建，函数执行完后局部变量会自动销毁

全局变量：

全局变量：变量在函数外定义，网页上的所有脚本和函数都能访问它

变量生命周期：

1.变量生命周期在声明变量时开始

2.局部变量在函数执行完毕后被销毁-

3.全部变量在页面关闭后被销毁

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

强制：to string  string  number  Boolean

隐式：“+”“-”“!!”

12.向数组中添加和删除元素的方法有哪些？至少各写一个

1)push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。

2)unshift方法就是将要添加的元素添加到数组头部

3)pop方法是与push对应的，删除最后一个元素，数组长度-1

4)splice方法是修改方法，具有添加和删除功能

5)shift删除数组中第一个元素

13.什么是事件委托

事件委托就是利用冒泡的原理，把本应该添加到某个元素上的事件委托给他的父级，从而减少DOM交互达到网页优化。

14.闭包是什么？有什么特性？对页面有什么影响？

闭包是将函数内部和函数外部连接起来的桥梁。  特性：函数嵌套函数；内部函数可以读取到外部函数的变量和参数；不会被垃圾回收制度回收。

使用闭包会占有内存资源，过多的使用闭包会导致内存溢出，影响页面刷新速度。

15.如何创建新元素并添加到页面中

先在html页面创建一个空div   var div = document.createElement(‘p’);

Div.appendChild(p);先创建元素然后插入页面中的空div

16.希望获取到页面中所有的checkbox怎么做

var type = document.getElementByClass(input).type=’checkbox‘

var checkBoxList = [];

var len = domList.length; //缓存到局部变量

while (len--) { //使用while的效率会比for循环更高

if (domList[len].type == 'checkbox') {

     checkBoxList.push(domList[len]);

}

}

console.log(checkBoxList)

17.创建一个数组 每一项都是0到50之间的随机数字，请写出关键代码

      var randNums = [];

      for (i = 0; i < 50; i++) {

        var randNum = Math.floor(Math.random() * i);

        randNums.push(randNum);

      }

        console.log(randNums);

18.函数调用的方式有几种（写出三种即可）

1.函数调用模式声明式: function fuc() {}

表达式式: var func = function() {};

Function: new Function( ‘参数’,…,’函数体’ );

2.方法调用 模式 method

3.构造器模式(构造函数模式, 构造方法模式)

特点：使用 new 关键字引导

19.JS有几种引入方式

内部引入。行内引入，外部引入

20.null和undefined的区别是什么？

null是空值typeof返回的是object

undefined是未定义的，返回的是undefined

21.js的特点是什么

简单性，安全性，动态性，跨平台

22.怎样获取到页面中的

documentgetElementById(‘con’);

23.JavaScript输出数据的方法?

弹窗，console.log（）,document.write,innnerhtml,innertext。

24.什么是JavaScript

Js是一种脚本语言，不需要编译。主要用于web，它用于增强html页面；可以嵌入html和代码中。

25.javascript的typeof返回哪些数据类型？（写英文）

object，undefined，number，string，boolean

26.请写出添加 删除 替换 插入节点所用的方法？

创建元素节点：createElement

创建文本节点：createTextNode;

appendChild() //添加

removeChild() //移除

replaceChild() //替换

insertBefore() //插入

27.什么是数组，什么是对象，并说出他们的区别

对象，就是一种无序的数据集合，由若干个“键值对”构成

数组：组也是对象，数组只是将对象里面无序的数据有序化。

区别1、数组表示有序数据的集合，而对象表示无序数据的集合。

数组的数据没有”名称”，2但是有对应的索引；对象的数据有”名称”（属性名），而对象因为是无序数据的集合，所以不存在索引

28.请写出js中的两种定时器，区别是什么？

setTimeout 和 setInterval。

区别setTimeout 只执行一次 setInterval重复执行

29.js两要素是什么

选择器和函数

30.split和join的区别

join() 方法用于把数组中的所有元素放入一个字符串

split(a,b)方法：用于把一个字符串分割成字符串数组

31.请写出js的入口函数？并讲解入口函数的作用。

window.onload

作用1 . 等待页面加载完毕2 . 有一个独立的作用域,

32.pop、Push、unshift、shift的作用？

push：在数组的尾部加入一个元素，并返回原有length+1的长度。

unshift：在数组的头部加入一个元素，并返回原有length+1的长度。

pop：删除数组尾部第一个元素，并返回这个元素。

shift：删除数组头部的第一个元素，并返回这个元素。

33.函数分为几种，区别是什么

声明函数：使用function声明一个函数，并指定函数名，调用时直接调用该函数名

匿名函数：使用function关键字声明一个函数，但未给函数命名，所以叫匿名函数，匿名函数属于函数表达式，

闭包函数：内部函数可以调用外部函数的参数和变量

34.如何判断一个数是不是整数？

If判断用praseInt把这个数转换为整数再与的数

35.innerHTML和innerText的区别是什么？

innerHTML ：innerHTML设置或获取标签所包含的HTML+文本信息

innerText： innerText设置或获取标签所包含的文本信息

36.Break和continue的区别是什么？

“break是结束循环。 continue是结束本次循环并进行下一轮循环

37.this是指向的哪个全局变量，改变this指向的方法有几种（请写出三种）？

call,bind,apply,

38.addEventListener()方法中有几个参数，作用分别是什么?

三个参数

1：要触发的事件

2：要触发得类型

3：ture跟flase  ture为捕获阶段 flase为冒泡阶段 默认为flase

39.http和https分别是什么？区别是什么？为什么https更安全？

http：是超文本传输协议；

https：是超文本传输安全协议；

区别：

1．HTTPS是加密传输协议，HTTP是名文传输协议;

2．HTTPS需要用到SSL证书，而HTTP不用;

3．HTTPS比HTTP更加安全，对搜索引擎更友好，利于SEO

4．HTTPS标准端口443，HTTP标准端口80;

5．HTTPS基于传输层，HTTP基于应用层;

6．HTTPS在浏览器显示绿色安全锁，HTTP没有显示;

40.请讲述一下什么是dom？作用是什么？

Dom是文档对象模型；

使JS有访问HTML的能力，能够实现对HTML中内容的操作

41.dom中的节点分为几种类型？

元素节点             Node.ELEMENT_NODE(1)

属性节点             Node.ATTRIBUTE_NODE(2)

文本节点             Node.TEXT_NODE(3)

42.访问节点和创建节点的方法都有什么？  

创建： createElement、document.innerHTML、createTextNode、createComment

访问：dcoument.getElementById()、dcoument.getElementsByTagName()、getElementsByClass()和dcoument.queryselector(‘.class，p，#div’);

43.数组是什么？声明数组的方法有几种？数组的三大特性是什么？

数组：数组是可以存储着一些任意类型或者相同类型数据的集合。

声明数组的方法：3种

var arr = [1,2,3]

var arr = new Array()

var arr=new Array(3)

数组三大特性：length属性、prototype属性、constructor属性

44.new关键字的作用？

1.创建一个空对象，并使该空对象继承Func.prototype；

2.执行构造函数，并将this指向刚刚创建的新对象；

3.返回新对象；

45.js绑定事件的方法有几种？

在DOM元素中直接绑定；function divFun(){}

在JavaScript代码中绑定；div.Onclick=function{}

绑定事件监听函数。addEventlistener（）

46.你对面向对象编程的理解

面向对象是基于万物皆对象这个哲学观点. 把那里一个对象抽象成类,具体上就是把一个对象的静态特征和动态特征抽象成属性和方法,也就是把一类事物的算法和数据结构封装在一个类之中,程序就是多个对象和互相之间的通信组成的.

面向对象具有封装性,继承性,多态性.封装隐蔽了对象内部不需要暴露的细节,使得内部细节的变动跟外界脱离,只依靠接口进行通信.封装性降低了编程的复杂性. 通过继承,使得新建一个类变得容易,一个类从派生类获得其非私有的方法和公用属性的繁琐工作交给了编译器. 而 继承和实现接口和运行时的类型绑定机制 所产生的多态,使得不同的类所产生的对象能够对相同的消息作出不同的反应,极大地提高了代码的通用性. 

 总之,面向对象的特性提高了大型程序的重用性和可维护性.

47.请讲讲原型链

当我们访问一个对象的属性时，如果这个对象内部不存在这个属性，那么他就会去prototype中去找，这个prototype中会有自己的原型，于是就这样一直找下去，这就是原型链

48.创建对象的方法有哪些？

var obj={};

var obj=new Object();

49.如何阻止事件冒泡和浏览器默认事件？

阻止事件冒泡：

event.stoppropagation()

event.cancelBubble = true;

return false;

阻止默认事件：

event.preventDefault();

event.returnValue=false;

return false;

50.事件流有几种？dom事件流分为几个阶段？

事件流有两种：捕获型事件、冒泡型事件

dom事件流分为三种：

捕获阶段：事件从Document节点自上而下向目标节点传播的阶段；

目标阶段：真正的目标节点正在处理事件的阶段；

冒泡阶段：事件从目标节点自上而下向Document节点传播的阶段。

51.return的作用是什么?

v可以阻止浏览器默认事件

v返回函数值，当函数执行到return,函数后面将不会在执行后面的代码

52.函数声明与函数表达式的区别？

以函数声明的方法定义的函数，函数名是必须的，而函数表达式的函数名是可选的。

以函数声明的方法定义的函数，函数可以在函数声明之前调用，而函数表达式的函数只能在声明之后调用。

以函数声明的方法定义的函数并不是真正的声明，他们仅仅可以出现在全局中或者嵌套在其它函数中。

53.请谈谈cookie、localStorage和SessionStorage的区别和特点

cookie：可设置失效时间，没有设置的话，默认是关闭浏览器后失效，数据只能存放4KB左右

localStorage：除非被手动清除，否则将会永久保存。

sessionStorage：仅在当前网页会话下有效，关闭页面或浏览器后就会被清除

localStorage和sessionStorage可以保存5MB的信息

54.什么是cookie？cookie的优缺点。

优点：

1.只在cookie中存放不敏感数据，即使被盗也不会有重大损失。

2.控制cookie的生命期，使之不会永远有效。就算被盗了偷盗者很可能拿到的是一个过期的cookie。

3.cookie帮助服务端承担了很大的压力，可以利用cookie在和客户端做很多判断而不应经过服务端。

4.极高的扩展性和可用性，使用简单，操作方法方便

缺点：

1.cookie数量和长度的限制。每个cookie长度不能超过4KB，否则会被截掉

2.安全性问题。如果cookie被人拦截了，那人就可以取得所有的session信息。

3.局限性。例如，为了防止重复提交表单，我们需要在服务器端保存一个计数器。如果我们把这个计数器保存在客户端，那么它起不到任何作用。

55.js本地存储有两种，分别是什么？区别是什么？

localStorage和sessionStorage

localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。

sessionStorage生命周期为当前窗口或标签页，一旦窗口或标签页被关闭了，那么所有通过sessionStorage存储的数据也就被清空了。

56.cookie和本地存储的区别是什么？

cookie：不能超过4KB；可设置失效时间，没有设置的话，默认是关闭浏览器后失效，

本地存储：有更大的储存，使用更简单

57.什么是json？json的三种值类型是什么？

Json是一种轻量级的数据交互格式

JSON数据类型：字符串、数字、对象（JSON 对象）、数组、布尔值、Null

json的三种值类型：数组、对象、组合型

58.请解释一下冒泡排序的原理？

1.原理：比较两个相邻的元素，将值大的元素交换到右边

2.思路：依次比较相邻的两个数，将比较小的数放在前面，比较大的数放在后面。

59.js常用的几种事件，请分别描述一下

键盘事件：

onkeydown：键盘的键按下时触发

onkeyup：键盘的键放开时触发

onkeypress：按下或按住键盘键时触发

鼠标事件：

onclick：点击某个对象时触发

ondblclick：双击某个对象时触发

onmouseover：鼠标移入某个元素时触发

onmouseout：鼠标移出某个元素时触发

onmouseenter：鼠标进入某个元素时触发

onmouseleave：鼠标离开某个元素时触发

onmousedown：鼠标按下时触发

onmouseup：鼠标抬起时触发

onmousemove：鼠标被移动时触发

onwheel：鼠标滚轮滚动时触发

oncontextmenu：点击鼠标右键时触发

60.请将此数组进行排序，arr=[22,1,43,12,75,32]（两种方法）

冒泡排序，sort排序

61. IE和标准下有哪些兼容性的写法

1）获取事件对象：var ev = ev || window.event

2）获取页面的可视区的宽度：document.documentElement.clientWidth || document.body.clientWidth

3）获取触发事件的事件源：var target = ev.srcElement||ev.target

62.call和apply的区别

apply：最多只能有两个参数——新this对象和一个数组argArray。

call：它可以接受多个参数，主要用在js对象各方法相互调用的时候，使当前this实例指针保持一致，或者在特殊情况下需要改变this指针

63. js延迟加载的方式有哪些？

1、defer属性

2、async属性

3、动态创建DOM方式

4、使用jQuery的getScript()方法

5、使用setTimeout延迟

6、让JS最后加载

64.说说TCP传输的三次握手四次挥手策略

握手：

第一次握手：“主动方”向“被动方”发送SYN包

第二次握手：“被动方”回给“主动方”一个SYN/ACK包表达确认

第三次握手：“主动方”再向“被动方”发送SYN包，代表握手结束

挥手：

1）Client：我所有东西都说完了

2）Server：我已经全部听到了，但是等等我，我还没说完

3）Server：好了，我已经说完了

4）Client：好的，那我们的通信结束

65.网络传输的七层协议是哪七层？

物理层 数据链层 传输层 网络层 会话层 表示层 应用层

4 / Jquery

1.请写出js和jquery的入口函数，并简述他们的不同

window.οnlοad= function () {}原生js

$(document).ready(function () {}jquery

1．原生Js和jQuery入口函数加载模式不同。

2．编写多个入口函数的区别。

2.请写出jquery动画的显示和隐藏

show（）显示，hide（）隐藏

3.请写出jquery中绑定事件的四种方式

$(“div”).click(function(){})

$(“div”).bind(click, function(){})

$(“div”).delegate(“p”,“click”,function(){})

$(“div”).on(“click”,“p”,function(){})

4.什么是jQuery？

jQuery是一个简洁而快速的JavaScript库，可用于简化事件处理，duHTML文档遍历，Ajax交互和动画，以便快速开发网站。

5.jQuery 库中的 $() 是什么

在Jquery中，$是JQuery的别名，所有使用$的地方也都可以使用JQuery来替换。

6.网页上有 5 个

元素，如何使用 jQuery来选择它们？

$(“div”)，

7.jQuery 里的 ID 选择器和 class 选择器有何不同？

ID选择器使用ID来选择元素，例： $("#idtest1"). 而 class选择器使用CSS class 来选择元素，例：$(".classtest1")。当只需要选择一个元素时，使用ID选择器，如果需要选择具有相同 CSS class的元素，就要用class 选择器。

8. jQuery 里的 each() 是什么函数？你是如何使用它的？

each() 函数就像是 Javascript里的一个 for，它允许你遍历一个元素集合。

$('div').each(function(selected) {

    执行的代码

});

9.$(this) 和 this 关键字在 jQuery 中有何不同？

1、表示对象不同：this表示的是javascript提供的当前对象，$(this)表示的是用jquery封装的当前对象。

2、过程不同：this对象可以直接用this.style修改样式，$(this)可以使用jquery提供的方法访问样式。

10.你如何利用jQuery来向一个元素中添加和移除CSS类?

添加：addClass()方法

移除：removeClass()方法

11.什么是ajax，为什么使用ajax？

AJAX 全称 Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。它并非一种新的技术，而是以下几种原有技术的结合体。

在我们之前的开发，每当用户向服务器发送请求，哪怕只是需要更新一点点的局部内容，服务器都会将整个页面进行刷新。

性能会有所降低(一点内容，刷新整个页面！)

用户的操作页面会中断(整个页面被刷新了)

Ajax就是能够做到局部刷新！

12.ajax都有哪些优点和缺点？

ajax的优点：

1、最大的一点是页面无刷新。

2、使用异步方式与服务器通信。

3、可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，ajax的原则是“按需取数据”，可以最大程度的减少冗余请求，和响应对服务器造成的负担。

4、基于标准化的并被广泛支持的技术。

Ajax的缺点：

1,ajax干掉了back按钮，即对浏览器后退机制的破坏。

2,安全问题

3,对搜索引擎的支持比较弱。

4,破坏了程序的异常机制。

5,另外，像其他方面的一些问题，比如说违背了url和资源定位的初衷。

6,一些手持设备（如手机、PDA等）现在还不能很好的支持ajax.

13.post请求和get请求的区别？

1. get是从服务器上获取数据，post是向服务器传送数据。

2. GET请求把参数包含在URL中，将请求信息放在URL后面，POST请求通过request body传递参数，将请求信息放置在报文体中。

3. get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。但理论上，IIS4中最大量为80KB，IIS5中为100KB。

4. get安全性非常低，get设计成传输数据，一般都在地址栏里面可以看到，post安全性较高，post传递数据比较隐私，所以在地址栏看不到， 如果没有加密，他们安全级别都是一样的，随便一个监听器都可以把所有的数据监听到。

5. GET请求能够被缓存，GET请求会保存在浏览器的浏览记录中，以GET请求的URL能够保存为浏览器书签，post请求不具有这些功能。

6. HTTP的底层是TCP/IP，GET和POST的底层也是TCP/IP，也就是说，GET/POST都是TCP链接。GET和POST能做的事情是一样一样的。你要给GET加上request body，给POST带上url参数，技术上是完全行的通的。

7.GET产生一个TCP数据包，对于GET方式的请求，浏览器会把http header和data一并发送出去，服务器响应200（返回数据）；POST产生两个TCP数据包，对于POST，浏览器先发送header，服务器响应100 continue，浏览器再发送data，服务器响应200 ok（返回数据），并不是所有浏览器都会在POST中发送两次包，Firefox就只发送一次。

14.什么是跨域?

当协议、域名、端口三者之间任意一个不同即为跨域

15.请简述同步和异步的区别.

在计算机领域，同步就是指一个进程在执行某个请求的时候，若该请求需要一段时间才能返回信息，那么这个进程将会一直等待下去，直到收到返回信息才继续执行下去；异步是指进程不需要一直等下去，而是继续执行下面的操作，不管其他进程的状态。当有消息返回时系统会通知进程进行处理，这样可以提高执行的效率。

16.HTTP协议中，GET和POST有什么区别？分别适用什么场景？

Post使用方法：

1、请求的结果有持续的副作用，例如数据库内添加新的数据行

2、若使用GET方法，则表单上收集的数据可能让URL过长

3、要传送的数据不是采用7位的ASCII编码

GET使用方法：

1、请求是为了查找资源，HTML表单数据仅用来帮助搜索

2、请求结果无持续性的副作用

3、收集的数据及HTML表单内输入字段名称的总长度不超过1024个字符

区别：

①传送方式不同：get通过地址栏传输，post通过报文传输。

②get产生一个TCP数据包，post产生两个数据包，对于get方式的请求，浏览器会把http header和data一并发送出去，服务器响应200；而对于post浏览器先发送header，服务器响应100 continue，浏览器再发送data，服务器响应200。

③get参数有长度限制，传送数据量不能大于2kb，post传送数据量不受限制（一般会受服务器配置限制或者内存大小）。

④get安全性非常低，post安全性较高，但是执行效率比post方法好。

⑤get方式服务器端用Request.QueryString获取变量的值，post方式服务器端用Request.Form获取提交的数据。

⑥get是从服务器上获取数据，post是向服务器传送数据。

17.将以下jquery选择符翻译成中文描述：$(“#d div.cls input[type=text][name^=text_]”);

找到ID选择器d 的元素从中找到class为cls的DIV，然后找到input的输入框，输入的typt类型等于text,name为text_开头的元素

18.请说出你知道的跨域的方法有哪些？最常用的是哪个？怎么使用的？

window.name来跨域（最常用）window.name="父页面的值";

document.domain

jsonp

使用HTML5中的window.postMessage方法来跨域传送数据

利用WebSocket跨域

19.常见请求头与响应头你了解哪些？

HTTP请求头：

请求头用于说明是谁或什么在发送请求、请求源于何处，或者客户端的喜好及能力。服务器可以根据请求头部给出的客户端信息，试着为客户端提供更好的响应。

HTTP响应头：

响应头向客户端提供一些额外信息，比如谁在发送响应、响应者的功能，甚至与响应相关的一些特殊指令。这些头部有助于客户端处理响应，并在将来发起更好的请求。

20. 如何设置ajax为同步或异步

Async：ture；异步

Async：flase; 同步

21.请写出ajax框架格式，并简述每个属性的作用

 $.ajax({

          url:'',//接口地址

          type:'POST',//传值方式

          data:'',//需要提供的参数

          success:function(res){

              //成功后需要进行的操作

      }

    })

22.$(document).ready()方法和window.onload有什么区别？

1.执行时间不同

window.onload必须等到页面内的所有元素（）加载完毕后才能执行

$(document).ready()是页面DOM结构绘制完毕后就执行，不必等到加载完毕

2.执行次数不同

window.onload不能同时执行多个，如果同一个页面上面有多个window.onload方法（包括关联js文件中），只会执行最后一个window.onload，也就是向上覆盖。

$(document).ready()可以同时执行多个，如果同一个页面上有多个$(document).ready()方法（包括关联js文件中），JQuery能够很好地处理这些情况，每次调用$(document).ready()方法都会在现有的行为上追加新的行为，这些行为函数会根据注册的顺序依次执行

3.简化写法不同

window.onload没有简化写法。

$(document).ready()有两种简化写法：$().ready(function)、$(function)

23.Flash、Ajax各自的优缺点，在使用中如何取舍

Flash ajax对比

Flash适合处理多媒体、矢量图形、访问机器；对CSS、处理文本上不足，不容易被搜索。

Ajax对CSS、文本支持很好，支持搜索；多媒体、矢量图形、机器访问不足。

共同点：与服务器的无刷新传递消息、用户离线和在线状态、操作DOM

5 / vue

1.简述框架和函数库的区别

库更多是一个封装好的特定的集合，提供给开发者使用；

框架则是为解决一类问题而开发的产品；

库的使用非常灵活，但没有框架方便，这就是框架和库本质的区别。

2.什么是渐进式框架

可以先使用vue的基础功能，然后在此基础上逐渐使用你所需要的其他的功能

3.Vue有哪些优点

优点：

1)组件化开发

2)单页面路由

3)双向的数据绑定

4)单向数据流

5)易于结合其他第三库

6)轻巧、高性能

7)渐进式框架

8)是已数据驱动执行的

缺点：

1)生态系统不够完善

2)可扩展性稍差

3)吃内存

4)报错不明显

5)不支持IE8

6)入门简单,但是缺少高阶文档

7)不利于seo优化

 

4.简述mvvm模式

MVVM 是 Model-View-ViewModel 的缩写

Model: 代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑。我们可以把Model称为数据层，因为它仅仅关注数据本身，不关心任何行为

View: 用户操作界面（DOM）。当ViewModel对Model进行更新的时候，会通过数据绑定更新到View

ViewModel： 业务逻辑层（创建Vue实例），View需要什么数据，ViewModel要提供这个数据；View有某些操作，ViewModel就要响应这些操作，所以可以说它是Model for View.

总结： MVVM模式简化了界面与业务的依赖，解决了数据频繁更新。MVVM 在使用当中，利用双向绑定技术，使得 Model 变化时，ViewModel 会自动更新，而 ViewModel 变化时，View 也会自动变化。

5.Vue常见属性和指令有哪些？（各写出7个以上）

属性：el、data、methods、computed、watch、component、props、filters、render

指令：v-text、v-html、v-if、v-else-if、v-else、v-bind:src或@:src、v-model、v-on或@click、v-show、v-for、v-pre、v-clock

6.计算属性和侦听属性有什么区别？怎样选择

区别：

1、computed不会主动监听数据变化，但是watch会去主动监听，也就是说watch会主动处理数据变化，computed是依赖数据变化才去计算。

2、computed在依赖数据未发生改变时/或者没有依赖数据，自动缓存到应用中，下次获取时不重新计算。

各自使用场景：

watch：适合处理 一个数据影响多个数据更适合处理数据相互独立的场景，主动监听

computed：适合处理一个数据受多个数据的影响 / 多个数据影响一个数据时。数据相互不独立的场景。

7.Vue的生命周期函数有哪些？

创建：beforeCreate、created

挂载：beforeMount、mounted

更新：beforeUpdate、updated

销毁：beforeDestroy、destroyed

8.vue怎样自定义指令？

使用

  

{{nav}}

设置自定义指令 directive

9.简述axios的安装和引入

安装插件依赖包

npm install axios --save   在命令提示符中进行安装；

在项目中的main.js中引用

import axios from 'axios';

Vue.prototype.$axios = axios;

import qs from 'qs';

Vue.prototype.qs = qs;

10.DOM 渲染在哪个周期中就已经完成？

mounted中

11.请说明Vue父组件向子组件传值的方法（代码或文字描述均可）

父组件在调用子组件的时候通过添加自定义属性向子组件传值。子组件通过props接收。

在父调用子的时候添加自定义属性，如：传一个字符串< zi mydata=”father”>,子组件中使用props接收，简单的值可以用数组接收props:[‘mydata’]。当父组件没有传值的时候也可以有默认值，这时候就得使用对象进行接收

    props: {

      myclass: {

        default: "默认值"

      },

      text: {

        default: ""

      }

    },

12.请说出下列axios配置项的含义（五条）

method:创建请求时使用的方法

url:请求的服务器地址

header:即将被发送的自定义请求头

data:请求接口所需要传递的参数

params:即将与请求一起发送的 URL 参数

13.V-for中 key 值的作用

key的作用主要是为了高效的更新虚拟DOM！！！下次v-for不用再重新渲染

15.v-show和v-if指令的共同点和不同点?

相同点：v-show和v-if都能控制元素的显示和隐藏。

不同点：

实现本质方法不同

v-show本质就是通过设置css中的display设置为none，控制隐藏

v-if是动态的向DOM树内添加或者删除DOM元素

编译的区别

v-show其实就是在控制css

v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件

编译的条件

v-show都会编译，初始值为false，只是将display设为none，但它也编译了

v-if初始值为false，就不会编译了

如果要频繁切换某节点时，使用v-show，如果不需要频繁切换某节点时，使用v-if

16.子组件向父组件传参的方式？（请写出关键代码）

子组件通过 $emit 触发自定义事件（一个是父组件事件的名字，一个是传递的参数），通过回传参数向父组件传值。

子：this.$emit(“name”,”param”)

父：@name=fun  methods:{fun(data){console.log(data)}}

子组件向父组件传值成功总结一下：

子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件将需要传的值作为$emit的第二个参数，该值将作为实参传给响应自定义事件的方法，在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听。

在通信中，无论是子组件向父组件传值还是父组件向子组件传值，他们都有一个共同点就是有中间介质，子向父的介质是自定义事件，父向子的介质是props中的属性。抓准这两点对于父子通信就好理解了。

17.使用axios发送请求的格式是什么？请写出示例代码

get:this.$axios({

       url:'请求的接口路径',

        params: {3

        id:要传递的参数

        }

      }).then(function(res) {

      }).catch（function(err) {

})

gost：this.$axios({

        url: '要请求的接口地址',

        method: 'post',

        data: this.qs.stringify({

id:参数

        })

      }).then(function(succ) {

      }).catch(function(err){

})

18.Vue中引入组件需要哪三步？

1）使用import 别名 “@/components/组件名”进行组件引用，

2）然后在components 中注册，

3）在html输出别名标签即可

19.在Vue中使用插件的步骤？

1、安装插件依赖包

#npm install -D open-browser-webpack-plugin

2、引入文件

import Vue from ‘vue’

3、引入使用的组件

import 组件 from ‘组件包名’

Vue.use(组件)

4、在需要位置使用

20.说一下你对dom驱动和数据驱动的理解

dom驱动：直接通过代码操作页面上的html元素。更改页面内容时需重新获取并赋值

数据驱动：通过数据来驱动页面的变化。数据改变时，页面上的内容也会改变

在数据驱动的开发模式下，开发者更多的是关心数据怎么流转，数据怎么变，而不需要通过代码去操作元素。开发过程更加简洁，代码更加简洁专一。

21.请说出路由传参和获取参数的三种方式

先在index.js中注册组件{name：,path: ,component: }

1）需要配置路由参数xxx/:p1/p2

:to="{path:'/btn/p1/p2'}"  param=this.$route.params;

2）需要命名路由

:to="{name:'btn',params:{ }}" param=this.$route.params;

3）需要用query接收

:to="{name:'btn',query:{ }}" param=this.$route.query;

22.子路由的配置方法？

子路由：在父路由中配置children:[]

子路由中的path不能加/，否则会成为跟路径

当匹配到子路由时会将内容放置在子页面的路由出口，而不是跟路由的出口，匹配到的非子

23.Vue-router的编程式导航有哪些方法？

router.go()  router. push()可以返回上一页  router.replace()不能保存，直接替换了

24.导航守卫有哪三种？分别有什么作用

全局路由守卫:

router.beforeEach

router.beforeResolve

router.beforeAfter

组件路由守卫:

const Foo = {

template: '...',

beforeRouteEnter(to, from, next) {

//再渲染该组件的对应的对应路由被confirm前调用

//不能获取组件实例'this'

//因为当前守卫执行前，组件实例化还没有被创建

},

beforeRouteUpdate(to,from,next) {

//在当前路由改变， 但是该组件被复用时调用。

//举例来说， 对于一个带有动态参数的路径 / foo /: id， 在 / foo / 1 和 / foo / 2 之间跳转的时候，。 由于会渲染同样的 Foo 组件， 因此组件实例会被复用。 而这个钩子就会在这个情况下被调用。

//可以访问组件实例 `this`

},

beforeRouteLeave() {

// 导航离开该组件的对应路由时调用。

//可以访问组件实例 `this`

}

}

路由独享守卫:

const router = new VueRouter({

routes:[{

path:'/foo',

component:Foo,

beforeEnter: (to,from,next) => {

}

}]

})

25.简述vuex中的常用属性

vuex： 这个东西就相当于一个公共管理的仓库。在这里定义的东西可以在各个页面获取到。常用来解决同级组件之间的传值问题。

1.state： 用来存储变量。在别的页面就可以使用this.$store.state.这里定义的变量，获取到这个变量的值。

2.mutations和actions： 这两个地方的功能都差不多，是用来执行回调函数从而更改状态的地方。不同的是actions可以进行异步操作。

3.getters: 这个东西就相当于组件中的计算属性。

4.modules: 这个是对处理过后的状态进行分类。它里面可以有很多个组成。而每个组成里面都可以有自己的state,mutations,actions, getters.

26.Vue中如何获取元素？

方法一：直接给相应的元素加id,然后再document.getElementById("id");获取，然后设置相应属性或样式，或者使用document.querySelector(‘ #tet‘)来获取

方法二：使用ref,给相应的元素加ref=“name” 然后再this.$refs.name获取到该元素

27.单页面应用和多页面应用区别及优缺点

单页面：

概念：只有一个html页面，所有跳转方式都是通过组件切换完成的。

优点：页面之间跳转流畅、组件化开发、组件可复用、开发便捷、易维护。

缺点：首屏加载较慢，加载整个项目中使用的css、js，SEO优化不好。

多页面：

概念：整个项目有多个html，所有跳转方式都是页面之间相互跳转的。

优点：首屏加载较快，只加载本页所使用的的css、js，SEO优化较好。

缺点：页面跳转较慢

28.vue组件中data为什么必须是一个函数？

如果data是一个函数的话，这样每复用一次组件，就会返回一份新的data，类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据。而单纯的写成对象形式，就使得所有组件实例共用了一份data，就会造成一个变了全都会变的结果。

6 / 小程序

1.简单描述下微信小程序的目录结构？

app.js 小程序逻辑

app.json 小程序公共配置

app.wxss 小程序公共样式表

xxx.js 页面逻辑

xxx.wxml 页面结构

xxx.json 页面配置

xxx.wxss 页面样式表

2.wxml与标准的html的异同？

开发工具限制：WXML仅能在微信小程序开发工具中预览，而HTML可以在浏览器内预览。

组件封装不同：WXML对组件进行了重新封装，为后续的性能优化提供了可能，同时避免开 发者写出低质量的代码。

没有DOM树：小程序运行在JS Core内，没有DOM树和window对象，没有办法使用相关 API。

4.分析下微信小程序的优劣势？

微信小程序优势：

1）、使用方便：扫码即用，相较于APP而言不用下载、不用安装，还可以直接添加到手机桌面，为手机节省了电量和大量内存；

2）、流量入口众多：公众号菜单、朋友圈（太阳码）、微信群、支持长按二维码识别、附近的小程序、统一的小程序入口、搜一搜、公众号图文推送、支持发会员卡券（官方的）、支持会员卡直接打开小程序；

3）、潜在用户多：小程序依托在微信9亿多用户群体上，不用担心找不到用户，只需专心做好小程序营销；

4）、助力新零售：小程序是新零售的最好载体，将是未来线下门店的发展趋势，如果企业拥有线下实体门店，小程序是最佳选择，可以为企业更好地切合线上线下的流量；

5）、符合消费场景：小程序可以与消费者在任意场景建立链接，即用即走，符合大多数消费场景。

信小程序劣势：

1）、功能不多：微信小程序属于微信，自然也就受限于微信。由于API的限制，小程序的总代码量不能超过2M，这意味着小程序规模有限，这对一些中大型的应用而言是一个致命的缺陷。目前相较于APP而言，微信小程序只是能够实现基本操作，虽然随着开发技术的发展，小程序已经和APP很接近，但差距肯定是存在的；

2）、所有更新需要经过腾讯的审核，才能应用到小程序中，这给应用的更新带来一定的风险，企业希望新加的功能若无法审核通过，则毫无解决办法；

3）、不能用小程序来发推送通知，必须要由用户操作才可以；

4）、小程序无法被分享到微信朋友圈，错失这一流量巨大的入口；

5）、用户留存差，正是因为即用即走的特点，微信小程序对于用户的留存相较于APP、

微信公众号都是非常薄弱的，这就要求企业的营销能力非常突出，才能持续增加用户对小程序的粘性。

5.小程序的数据驱动和vue的双向绑定有何异同？

小程序中的数据驱动

（1）、通过 bindinput 绑定文本框的输入事件

（2）、在 data 中声明一个变量 content ，将其动态绑定成文本框的 value 值

（3）、在 bindinput 事件中通过事件参数 e.detail.value 可以获取到文本框中最新的 value 值

（4）、通过 this.setData 将文本框最新的  value 值 赋值给 动态绑定的value值 content  即可实现数据的双向绑定

vue中的数据双向绑定

（1）、首先为文本框绑定 @input 监听文本框的输入事件

（2）、为文本框动态绑定 value 属性，其值是在data中定义的变量

（3）、在 @input绑定的事件中 通过事件参数 event.target.value 可以获取到 input 框中最新的value值

（4）、将其重新获取到的 value 赋值给 value值动态绑定的那个变量

区别

绑定事件不同，以及获取value值的具体方式不同，

以及在小程序中设置data中的数据，

需要调用 this.setData方法进行设置

6.简述下微信小程序跳转页面wx.navigateTo(), wx.redirectTo(), wx.switchTab(), wx.navigateBack(), wx.reLaunch()的区别？

（1）wx.navigateTo（）：

用于保留当前页面、跳转到应用内的某个页面，使用 wx.navigateBack可以返回到原页 面。对于页面不是特别多的小程序，通常推荐使用 wx.navigateTo进行跳转， 以便返回 原页面，以提高加载速度。当页面特别多时，则不推荐使用。

（2）wx.redirectTo（）：

当页面过多时，被保留页面会挤占微信分配给小程序的内存，或是达到微信所限制的 5 层页面栈。这时应该考虑选择 wx.redirectTo。wx.redirectTo()用于关闭当前页面，跳转到应用内的某个页面。这样的跳转，可以避免跳转前页面占据运行内存，但返回时页面需要重新加载，增加了返回页面的显示时间。

（3）wx.switchTab（）：

对于跳转到 tab bar 的页面，最好选择 wx.switchTab()，它会先关闭所有非 tab bar 的页面。其次，也可以选择 wx.reLaunch()，它也能实现从非 tab bar 跳转到 tab bar，或在 tab bar 间跳转，效果等同 wx.switchTab()。使用其他跳转 API 来跳转到 tab bar，则会跳转失败。

（4）wx.navigateBack（）：

用于关闭当前页面，并返回上一页面或多级页面。开发者可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。这个 API 需要填写的参数只有 delta，表示要返回的页面数。若 delta 的取值大于现有可返回页面数时，则返回到用户进入小程序的第一个页面。当不填写 delta 的值时，就默认其为 1（注意，默认并非取 0），即返回上一页面。

（5）wx.reLaunch（）：

wx.reLaunch()与 wx.redirectTo()的用途基本相同， 只是 wx.reLaunch()先关闭了内存中所有保留的页面，再跳转到目标页面。

7.小程序页面路由传参方法？

通过路径传递参数：wx.navigateTo（）、wx.redirectTo（）和标签等

参数与路径之间使用?分隔，参数键与参数值用=相连，多个参数用&分隔

例：test?id=1 中id为参数键，1 为参数值

在目的页面中onLoad（）方法中option对象即为参数对象，可以通过参数键来取出参数值

8.小程序怎样进行本地存储的读写？

同步：（1）wx.setStorageSync();  //存储值

（2）wx.removeStorageSync();   // 移除指定的值

（3）wx.getStorageSync();  // 获取值

（4）wx.getStorageInfoSync();  // 获取当前 storage 中所有的 key

（5）wx.clearStorageSync();  // 清除所有的key

异步：（1）wx.setStorage();  //存储值

（2）wx.removeStorage();   // 移除指定的值

（3）wx.getStorage();  // 获取值

（4）wx.getStorageInfo();  // 获取当前 storage 中所有的 key

（5）wx.clearStorage();  // 清除所有的key

9.请说明小程序的生命周期以及页面生命周期

小程序生命周期：

onLaunch()

onShow()

onHide()

onError()

onPageNotFound()

页面生命周期：

onLoad()

onReady()

onShow()

onHide()

onUnload()

10.小程序如何刷新当前页面？

方法一：this.onLoad()

方法二：this.onReady() 或者 this.onShow()

方法三：定义标志

在app.js中，定义一个全局变量Flag，默认值为false，

进入其它页面的时候将它置为true,在页面的onShow方法里加一个判断,如果Flag为true的话，

先将它的值设置为false，再调用接口获取数据。

11.小程序中获取openid的方法？

第一步，获取code

第二步，根据code获取openid和session_key

第三步，检测用户登录状态是否有效

12.小程序中获取用户的手机号需要请求哪些aip？并且解密的参数有哪些？

wx.login获取到code，通过code获取到session_key和openid，之后通过button按钮，获取iv（加密算法的初始向量）和encryptedData（加密的用户信息）

获取手机号

onfun(e){

用户授权后获取到

console.log(e.detail.iv)//加密算法的初始向量

console.log(e.detail.encryptedData)//加密的用户信息

通过后台接口传入参数session_key、iv、encryptedData获取到用户解密过的手机号

}

13.在小程序中设置背景图片在开发者工具中可以显示背景图片，但是在手机上背景图片不显示，怎么解决？

图片转成Base64格式

在线转换：https://www.sojson.com/image2base64.html

14.小程序中页面跳转传参的方式有哪些？

微信小程序导航有两种形式：一种是在写在js中进行跳转，

另一种是写在wxml页面中进行跳转。

15.bindtap和catchtap的区别？

bindtap事件绑定不会阻止冒泡事件向上冒泡

catchtap事件绑定可以阻止冒泡事件向上冒泡

16.如何实现下拉刷新？

在app.json中enablePullDownRefresh:true//开启下拉刷新

在页面js中onPullDownRefrsh(){this.onload}/实现下拉刷新

wx.startPullDownRefresh（）

开始下拉刷新。调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。

17.请写出小程序的完整开发流程

（1）申请小程序账号

（2）申请服务器域名

（3）下载并安装开发工具（登录注册的账号）

（4）小程序框架配置并开发

（5）window服务器IIS配置和搭建打包文件上传服务器

 

你可能感兴趣的:(html,css,js,vue,小程序)

• 微信小程序监听用户经纬度变化 某公司摸鱼前端 微信小程序小程序
  一些打卡App需要根据用户的位置来完成打卡那么就需要监听用户位置变化情况：示例：//在某个生命周期函数中，如onLoad中onLoad:function(options){//开始监听位置变化wx.startLocationUpdate({success:function(){console.log('开始更新位置');},fail:function(){console.log('开始更新位置失败
• android 自定义曲线图,Android自定义View——贝赛尔曲线 weixin_39767513 android自定义曲线图
  个人博客：haichenyi.com。感谢关注本文针对有一定自定义View的童鞋，最好对贝赛尔曲线有辣么一丢丢了解，不了解也没关系。花5分钟看一下GcsSloop的安卓自定义View进阶-Path之贝塞尔曲线。本文的最终效果图：最终效果图.gif思路首先他是一个只有上半部分的正弦形状的水波纹，很规则。其次，他这个正弦图左右在移动。然后，就是它这个自定义View，上下也在移动，是慢慢增加的最后，优化
• 华为OD机试 - 单向链表中间节点（Java & JS & Python & C & C++） 华为OD题库 华为od链表java
  须知哈喽，本题库完全免费，收费是为了防止被爬，大家订阅专栏后可以私信联系退款。感谢支持文章目录须知题目描述输出描述解析代码题目描述给定一个单链表L，请编写程序输出L中间结点保存的数据。如果有两个中间结点，则输出第二个中间结点保存的数据。例如：给定L为1→7→5，则输出应该为7；给定L为1→2→3→4，则输出应该为3；输入描述每个输入包含1个测试用例。每个测试用例：第一行给出链表首结点的地址、结点总
• uni-app实现 步骤条 夏夏的码农 uni-app
  实现如图样式html部分代码如下投资期限与收益0?'active':'default'">募集开始1?'active':'default'">募集结束2?'active':'default'">产品成立3?'active':'default'">产品到期0?'active-step1':'step1'">1?'active-st
• v-for 实例 琪33
  v-for实例v-for实例{{item}}{{index+1}}：{{student.name}}-{{student.age}}varapp=newVue({el:'#app',data:{items:[53,23,76,14,54,36,28],students:[{name:'jspang',age:32},{name:'Panda',age:30},{name:'PanPaN',age:
• 用XMLHttpRequest发送和接收JSON数据 潭池先生 jsonXMLHttpRequest前端
  百度的AI回答了一个案例：varxhr=newXMLHttpRequest();varurl="your_endpoint_url";//替换为你的API端点vardata=JSON.stringify({key1:"value1",key2:"value2"});xhr.open("POST",url,true);xhr.setRequestHeader("Content-Type","appl
• npm 搭建 Vite 项目 渺小的虫子 viter前端javascript开发语言
  兼容性注意Vite需要Node.js版本>=12.0.0。1、使用npm安装Viter$npminitvite@latest使用npm初始化项目#npm6.xnpminitvite@latestmy-vue-app--templatevue#npm7+,需要额外的双横线：npminitvite@latestmy-vue-app----templatevue2、配置路由：npminstallvue-
• 大前端-postcss安装使用指南 黑夜照亮前行的路 postcss
  PostCSS是一款强大的CSS处理工具，可以用来自动添加浏览器前缀、代码合并、代码压缩等，提升代码的可读性，并支持使用最新的CSS语法。以下是一份简化的PostCSS安装使用指南：一、安装PostCSS在你的项目目录中，通过npm（NodePackageManager）来安装PostCSS。打开命令行窗口，输入以下命令：bash复制代码npminstallpostcss--save-dev这将把
• 谷歌浏览器驱动Chromedriver（114-120版本）文件以及驱动下载教程 pigerr杨 Pythonpythonchromedrivers
  ChromeDriver官方网站GitHub||GoogleChromeLabs/chrome-for-testingChromeDriver113-125_JSONChromeforTestingavailability123-125zip白月黑羽Python基础|进阶|Qt图形界面|Django|自动化测试|性能测试|JS语言|JS前端|原理与安装
• vue 通信方式 hx_1199 vue.js前端
  1、props和$emit父组件向子组件传递数据是通过props传递的，子组件传递给父组件是通过$emit触发事件来做到的。父组件this.$emit("update:page",newVal)-->importChildfrom'./child'exportdefault{name:"Father",components:{Child,},data(){return{articleList:['
• 3、JavaWeb-Ajax/Axios-前端工程化-Element 所谓远行Misnearch #JavaWeb前端ajaxelementuijava前端框架
  P34Ajax介绍Ajax:AsynchroousJavaScriptAndXML，异步的JS和XMLJS网页动作，XML一种标记语言，存储数据，作用：数据交换：通过Ajax给服务器发送请求，并获取服务器响应的数据异步交互：在不重新加载整个页面的情况下，与服务器交换数据并实现更新部分网页的技术，例如：搜索联想、用户名是否可用的校验等等。同步与异步：同步：服务器在处理中客户端要处于等待状态，输入域名
• python转码 Desamond python开发语言
  转码在许多场景中都有应用，以下是一些常见的场景：网页开发：当用户在网页上输入文本时，可能需要将特殊字符（如空格、引号、特殊符号等）进行转码，以防止这些字符对URL或HTML代码产生干扰。文件名处理：在处理文件名时，可能需要将特殊字符进行转码，以避免文件名被错误地解析或显示。数据传输：在数据传输过程中，为了确保数据的完整性和正确性，可能需要将数据中的特殊字符进行转码。数据存储：在数据库或数据存储中，
• 微信小程序修改checkbox和radio的样式 叶落无痕123 微信小程序小程序
  我们在开发小程序的时候，有时候需要修改小程序中checkbox和radio的原生样式，如何修改呢？这里给大家提供了一份代码，大家可以试试。首先是修改checkbox样式的代码：/*重写checkbox样式*//*未选中的背景样式*/checkbox.wx-checkbox-input{border-radius:50%;/*圆角*/width:40rpx;/*背景的宽*/height:40rpx;
• webpack.prod.js（webpack生产环境配置文件） 门板_ webpackjavascript前端
  生产环境：只打包不运行本地服务器对于在config目录下的webpack.prod.js1.在根目录下运行npxwebpack--config./config/webpack.prod.js2.在package.json文件中配置"build":"npxwebpack--config./config/webpack.prod.js"constpath=require('path')constESL
• Python dict字符串转json对象，小数精度丢失问题 朝如青丝 暮成雪 jsonpython
  一前言JSON(JavaScriptObjectNotation)是一种轻量级的数据交换格式，dict是Python的一种数据格式。本篇介绍一个float数据转换时精度丢失的案例。二问题描述importjsontest_str1='{"π":3.1415926535897932384626433832795028841971}'test_str2='{"value":10.00000}'print
• VUE 页面禁止缩放（华为平板浏览器可能失效） 唐屁屁儿 JSvuewebviewjavascript
  h5页面移动端禁止缩放、web页面禁止浏览器缩放移动端优先，可禁止用户缩放和双击放大；在App.vue中的script内的方法里加入以下代码：window.onload=function(){document.addEventListener('touchstart',function(event){if(event.touches.length>1){event.preventDefault()
• java实体中返回前端的double类型四舍五入（格式化） 婲落ヽ紅顏誶 java
  根据业务，需要通过后端给前端返回部分double类型的数值，一般需要保留两位小数，使用jackson转换对象packagecom.ruoyi.common.core.config;importcom.fasterxml.jackson.core.JsonGenerator;importcom.fasterxml.jackson.databind.JsonSerializer;importcom.f
• Vue 常见面试题(一) 安生生申 面试题vue.js前端javascript
  目录1、Vue的最大的优势是什么？（必会）2、Vue和jQuery两者之间的区别是什么？（必会）3、MVVM和MVC区别是什么？哪些场景适合？（必会）1、基本定义2、使用场景3、两者之间的区别4、Vue数据双向绑定的原理是什么?（必会）5、Object.defineProperty和Proxy的区别（必会）6、Vue生命周期总共分为几个阶段？（必会）7、第一次加载页面会触发哪几个钩子函数？（必会）
• UNDERSTANDING HTML WITH LARGE LANGUAGE MODELS liferecords LLM语言模型人工智能自然语言处理
  UNDERSTANDINGHTMLWITHLARGELANGUAGEMODELS相关链接：arXiv关键字：大型语言模型、HTML理解、Web自动化、自然语言处理、机器学习摘要大型语言模型（LLMs）在各种自然语言任务上表现出色。然而，它们在HTML理解方面的能力——即解析网页的原始HTML，对于自动化基于Web的任务、爬取和浏览器辅助检索等应用——尚未被充分探索。我们为HTML理解模型（经过微调
• Web前端Html的表单 任家伟 前端html
  表单的关键字：form标签表示一个表单区域action=“后端地址”method=“提交数据方式:get/post”input单行输入框type=“text”文本name=“定义名称名字自定义”向后端提交的键readonly=“readonly”只读，不可修改，但是可以提交disabled=“disabled”禁用组件不可修改，不能提交type=“password”密码框type=“radio”单
• react native 总结 一切顺势而行 reactnativereact.jsjavascript
  reactapp.js相当与vueapp.vueimportReactfrom'react';import'./App.css';importReactRoutefrom'./router'import{HashRouterasRouter,Link}from'react-router-dom'classAppextendsReact.Component{constructor(props){su
• JS判断数据类型 风落不归处 Javascriptjavascript前端
  一、typeoftypeof可以检测基本数据类型，但是碰到引用数据类型返回的都是object。typeof通常用来判断基本数据类型，但是用typeof来判断null和引用类型的实例返回的结果都是"object"lets="Nicholas";letb=true;leti=22;letu;letn=null;leto=newObject();functionFn(){}console.log(typ
• Vue 模版编译原理 I will.874 vue.jsjavascript前端
  当我们使用Vue编写完一个组件以后，Vue会根据模版编译一个render函数，调用render函数生成虚拟DOM，然后将虚拟DOM映射成真实DOM当数据发生变化时，Vue会触发更新视图，调用render函数返回新的虚拟DOM，对比新旧虚拟DOM，修改真实DOM，从而更新页面在此期间，有以下4个关键步骤：模版编译。生成渲染函数render执行render函数生成虚拟DOM首次渲染，根据虚拟DOM生成
• reactive和ref的异同、toRef和toRefs的使用 Niucode vue3vue.js前端javascript
  一、reactive和ref有了reactive为什么还要ref？ref处理起基本数据类型来更加的方便快捷，性能要更好。ref内部值的变化只会触发订阅它的副作用函数（effect）更新，而reactive（Proxy）内部对象的任何属性变化都会触发整个对象的重新渲染。相同点：都是Vue3提供的用于创建响应式数据的函数；在组件中都能够触发视图更新，实现数据的双向绑定。不同点：数据类型：reactiv
• JSON与AJAX：网页交互的利器 入冉心 jsonajax前端
  在现代Web开发中，JSON（JavaScriptObjectNotation）和AJAX（AsynchronousJavaScriptandXML）是两项不可或缺的技术。它们共同为网页提供了动态、实时的数据交互能力，为用户带来了更加流畅和丰富的体验。本文将详细介绍JSON和AJAX的概念、原理，并通过代码示例展示它们在实际开发中的应用。一、JSON：轻量级的数据交换格式JSON是一种轻量级的数据
• 程序员开发技术整理 laizhixue 学习前端框架
  前端技术：vue-前端框架element-前端框架bootstrap-前端框架echarts-图标组件C#后端技术：webservice：soap架构：简单的通信协议，用于服务通信ORM框架：对象关系映射，如EF：对象实体模型，是ado.net中的应用技术soap服务通讯：xml通讯ado.net：OAuth2:登录授权认证：Token认证：JWT：jsonwebtokenJava后端技术：便捷工
• 【前端学习——js篇】7.函数缓存 笔下无竹墨下有鱼 前端学习前端学习javascript
  具体见：https://github.com/febobo/web-interview7.函数缓存函数缓存，就是将函数运算过的结果进行缓存本质上就是用空间（缓存存储）换时间（计算过程）常用于缓存数据计算结果和缓存对象。其实现主要通过闭包、柯里化和高阶函数。下面主要介绍下柯里化：①柯里化柯里化（currying)是一种函数式编程的概念，指的是将一个带有多个参数的函数转换成一系列只接受一个参数的函数的
• js 操作属性 if switch 你想Ta吗
  条件语句：条件语句是通过判断指定表达式的值来决定执行还是跳过某些语句。最基本的条件语句：if...else、switch...caseJS操作属性：DOM是为了操作文档（网页）的API，document是它的一个对象BOM是为了操作浏览器的API，window是它的一个对象常用BOM对象还有：alert、定时器等。JS可控换肤：通过按钮的点击来更换皮肤。但是要连接外部样式表，通过点击事件来更换不同
• html版本号 webpack_html-webpack-plugin详解 weixin_39994949 html版本号webpack
  引言最近在react项目中初次用到了html-webapck-plugin插件，用到该插件的两个主要作用：为html文件中引入的外部资源如script、link动态添加每次compile后的hash，防止引用缓存的外部文件问题可以生成创建html入口文件，比如单页面可以生成一个html文件入口，配置N个html-webpack-plugin可以生成N个页面入口有了这种插件，那么在项目中遇到类似上面
• HTML语言剖析 混沌破晓
  HTML语言剖析Html简介-目录全写：HyperTextMark-upLanguage译名：超文本标识语言简释：一种为普通文件中某些字句加上标示的语言，其目的在于运用标签（tag）使文件达到预期的显示效果。由文字（字母，数字、标点符号）及标签组合而成。任何文字编辑器都可以，这里推荐用：Dreamweaver。1.Html特点：►描述性语言，结构语言，用于决定网页内容以什么样的形式显示；►通过标签
• 算法 单链的创建与删除 换个号韩国红果果 c算法
  先创建结构体 struct student { int data; //int tag;//标记这是第几个 struct student *next; }; // addone 用于将一个数插入已从小到大排好序的链中 struct student *addone(struct student *h,int x){ if(h==NULL) //??????
• 《大型网站系统与Java中间件实践》第2章读后感 白糖_ java中间件
         断断续续花了两天时间试读了《大型网站系统与Java中间件实践》的第2章，这章总述了从一个小型单机构建的网站发展到大型网站的演化过程---整个过程会遇到很多困难，但每一个屏障都会有解决方案，最终就是依靠这些个解决方案汇聚到一起组成了一个健壮稳定高效的大型系统。          看完整章内容，
• zeus持久层spring事务单元测试 deng520159 javaDAOspringjdbc
  今天把zeus事务单元测试放出来,让大家指出他的毛病, 1.ZeusTransactionTest.java 单元测试   package com.dengliang.zeus.webdemo.test; import java.util.ArrayList; import java.util.List; import org.junit.Test; import
• Rss 订阅 开发 周凡杨 htmlxml订阅rss规范
                  RSS是 Really Simple Syndication的缩写（对rss2.0而言，是这三个词的缩写，对rss1.0而言则是RDF Site Summary的缩写，1.0与2.0走的是两个体系）。   RSS
• 分页查询实现 g21121 分页查询
  在查询列表时我们常常会用到分页，分页的好处就是减少数据交换，每次查询一定数量减少数据库压力等等。 按实现形式分前台分页和服务器分页： 前台分页就是一次查询出所有记录，在页面中用js进行虚拟分页，这种形式在数据量较小时优势比较明显，一次加载就不必再访问服务器了，但当数据量较大时会对页面造成压力，传输速度也会大幅下降。 服务器分页就是每次请求相同数量记录，按一定规则排序，每次取一定序号直接的数据
• spring jms异步消息处理 510888780 jms
  spring JMS对于异步消息处理基本上只需配置下就能进行高效的处理。其核心就是消息侦听器容器，常用的类就是DefaultMessageListenerContainer。该容器可配置侦听器的并发数量，以及配合MessageListenerAdapter使用消息驱动POJO进行消息处理。且消息驱动POJO是放入TaskExecutor中进行处理，进一步提高性能，减少侦听器的阻塞。具体配置如下：
• highCharts柱状图 布衣凌宇 hightCharts柱图
  第一步：导入 exporting.js,grid.js,highcharts.js;第二步：写controller   @Controller@RequestMapping(value="${adminPath}/statistick")public class StatistickController {  private UserServi
• 我的spring学习笔记2-IoC（反向控制 依赖注入） aijuans springmvcSpring 教程spring3 教程Spring 入门
  IoC（反向控制 依赖注入）这是Spring提出来了，这也是Spring一大特色。这里我不用多说，我们看Spring教程就可以了解。当然我们不用Spring也可以用IoC，下面我将介绍不用Spring的IoC。 IoC不是框架，她是java的技术，如今大多数轻量级的容器都会用到IoC技术。这里我就用一个例子来说明： 如：程序中有 Mysql.calss 、Oracle.class 、SqlSe
• TLS java简单实现 antlove javasslkeystoretlssecure
    1. SSLServer.java package ssl; import java.io.FileInputStream; import java.io.InputStream; import java.net.ServerSocket; import java.net.Socket; import java.security.KeyStore; import
• Zip解压压缩文件 百合不是茶 Zip格式解压Zip流的使用文件解压
     ZIP文件的解压缩实质上就是从输入流中读取数据。Java.util.zip包提供了类ZipInputStream来读取ZIP文件,下面的代码段创建了一个输入流来读取ZIP格式的文件; ZipInputStream in = new ZipInputStream(new FileInputStream(zipFileName));     &n
• underscore.js 学习（一） bijian1013 JavaScriptunderscore
          工作中需要用到underscore.js，发现这是一个包括了很多基本功能函数的js库，里面有很多实用的函数。而且它没有扩展 javascript的原生对象。主要涉及对Collection、Object、Array、Function的操作。       学
• java jvm常用命令工具——jstatd命令(Java Statistics Monitoring Daemon) bijian1013 javajvmjstatd
  1.介绍         jstatd是一个基于RMI（Remove Method Invocation）的服务程序，它用于监控基于HotSpot的JVM中资源的创建及销毁，并且提供了一个远程接口允许远程的监控工具连接到本地的JVM执行命令。         jstatd是基于RMI的，所以在运行jstatd的服务
• 【Spring框架三】Spring常用注解之Transactional bit1129 transactional
  Spring可以通过注解@Transactional来为业务逻辑层的方法(调用DAO完成持久化动作)添加事务能力，如下是@Transactional注解的定义：   /* * Copyright 2002-2010 the original author or authors. * * Licensed under the Apache License, Version
• 我(程序员)的前进方向 bitray 程序员
  作为一个普通的程序员,我一直游走在java语言中,java也确实让我有了很多的体会.不过随着学习的深入,java语言的新技术产生的越来越多,从最初期的javase,我逐渐开始转变到ssh,ssi,这种主流的码农,.过了几天为了解决新问题,webservice的大旗也被我祭出来了,又过了些日子jms架构的activemq也开始必须学习了.再后来开始了一系列技术学习,osgi,restful.....
• nginx lua开发经验总结 ronin47
  使用nginx lua已经两三个月了，项目接开发完毕了，这几天准备上线并且跟高德地图对接。回顾下来lua在项目中占得必中还是比较大的，跟PHP的占比差不多持平了，因此在开发中遇到一些问题备忘一下 1：content_by_lua中代码容量有限制，一般不要写太多代码，正常编写代码一般在100行左右（具体容量没有细心测哈哈，在4kb左右），如果超出了则重启nginx的时候会报 too long pa
• java-66-用递归颠倒一个栈。例如输入栈{1,2,3,4,5}，1在栈顶。颠倒之后的栈为{5,4,3,2,1}，5处在栈顶 bylijinnan java
  import java.util.Stack; public class ReverseStackRecursive { /** * Q 66.颠倒栈。 * 题目：用递归颠倒一个栈。例如输入栈{1,2,3,4,5}，1在栈顶。 * 颠倒之后的栈为{5,4,3,2,1}，5处在栈顶。 *1. Pop the top element *2. Revers
• 正确理解Linux内存占用过高的问题 cfyme linux
  Linux开机后，使用top命令查看，4G物理内存发现已使用的多大3.2G，占用率高达80%以上： Mem:   3889836k total,  3341868k used,   547968k free,   286044k buffers Swap:  6127608k total,&nb
• [JWFD开源工作流]当前流程引擎设计的一个急需解决的问题 comsci 工作流
       当我们的流程引擎进入IRC阶段的时候，当循环反馈模型出现之后，每次循环都会导致一大堆节点内存数据残留在系统内存中，循环的次数越多，这些残留数据将导致系统内存溢出，并使得引擎崩溃。。。。。。       而解决办法就是利用汇编语言或者其它系统编程语言，在引擎运行时，把这些残留数据清除掉。
• 自定义类的equals函数 dai_lm equals
  仅作笔记使用 public class VectorQueue { private final Vector<VectorItem> queue; private class VectorItem { private final Object item; private final int quantity; public VectorI
• Linux下安装R语言 datageek R语言 linux
  命令如下：sudo gedit  /etc/apt/sources.list1、deb http://mirrors.ustc.edu.cn/CRAN/bin/linux/ubuntu/ precise/ 2、deb http://dk.archive.ubuntu.com/ubuntu hardy universesudo apt-key adv --keyserver ke
• 如何修改mysql 并发数(连接数)最大值 dcj3sjt126com mysql
  MySQL的连接数最大值跟MySQL没关系，主要看系统和业务逻辑了   方法一：进入MYSQL安装目录 打开MYSQL配置文件 my.ini 或 my.cnf查找 max_connections=100 修改为 max_connections=1000 服务里重起MYSQL即可 　　方法二：MySQL的最大连接数默认是100客户端登录：mysql -uusername -ppass
• 单一功能原则 dcj3sjt126com 面向对象的程序设计软件设计编程原则
  单一功能原则[ 编辑]     SOLID 原则 单一功能原则 开闭原则 Liskov代换原则 接口隔离原则 依赖反转原则 查   论   编 在面向对象编程领域中，单一功能原则（Single responsibility principle）规定每个类都应该有
• POJO、VO和JavaBean区别和联系 fanmingxing VOPOJOjavabean
  POJO和JavaBean是我们常见的两个关键字，一般容易混淆，POJO全称是Plain Ordinary Java Object / Plain Old Java Object，中文可以翻译成：普通Java类，具有一部分getter/setter方法的那种类就可以称作POJO，但是JavaBean则比POJO复杂很多，JavaBean是一种组件技术，就好像你做了一个扳子，而这个扳子会在很多地方被
• SpringSecurity3.X--LDAP：AD配置 hanqunfeng SpringSecurity
  前面介绍过基于本地数据库验证的方式，参考http://hanqunfeng.iteye.com/blog/1155226，这里说一下如何修改为使用AD进行身份验证【只对用户名和密码进行验证，权限依旧存储在本地数据库中】。   将配置文件中的如下部分删除： <!-- 认证管理器，使用自定义的UserDetailsService，并对密码采用md5加密-->
• mac mysql 修改密码 IXHONG mysql
  $ sudo /usr/local/mysql/bin/mysqld_safe –user=root & //启动MySQL(也可以通过偏好设置面板来启动)$ sudo /usr/local/mysql/bin/mysqladmin -uroot password yourpassword //设置MySQL密码（注意，这是第一次MySQL密码为空的时候的设置命令，如果是修改密码，还需在-
• 设计模式--抽象工厂模式 kerryg 设计模式
  抽象工厂模式：     工厂模式有一个问题就是，类的创建依赖于工厂类，也就是说，如果想要拓展程序，必须对工厂类进行修改，这违背了闭包原则。我们采用抽象工厂模式，创建多个工厂类，这样一旦需要增加新的功能，直接增加新的工厂类就可以了，不需要修改之前的代码。     总结：这个模式的好处就是，如果想增加一个功能，就需要做一个实现类，
• 评"高中女生军训期跳楼” nannan408
     首先，先抛出我的观点，各位看官少点砖头。那就是，中国的差异化教育必须做起来。    孔圣人有云：有教无类。不同类型的人，都应该有对应的教育方法。目前中国的一体化教育，不知道已经扼杀了多少创造性人才。我们出不了爱迪生，出不了爱因斯坦，很大原因，是我们的培养思路错了，我们是第一要“顺从”。如果不顺从，我们的学校，就会用各种方法，罚站，罚写作业，各种罚。军
• scala如何读取和写入文件内容？ qindongliang1922 javajvmscala
  直接看如下代码： package file import java.io.RandomAccessFile import java.nio.charset.Charset import scala.io.Source import scala.reflect.io.{File, Path} /** * Created by qindongliang on 2015/
• C语言算法之百元买百鸡 qiufeihu c算法
  中国古代数学家张丘建在他的《算经》中提出了一个著名的“百钱买百鸡问题”，鸡翁一，值钱五，鸡母一，值钱三，鸡雏三，值钱一，百钱买百鸡，问翁，母，雏各几何？ 代码如下： #include <stdio.h> int main() { int cock,hen,chick; /*定义变量为基本整型*/ for(coc
• Hadoop集群安全性：Hadoop中Namenode单点故障的解决方案及详细介绍AvatarNode wyz2009107220 NameNode
  正如大家所知，NameNode在Hadoop系统中存在单点故障问题，这个对于标榜高可用性的Hadoop来说一直是个软肋。本文讨论一下为了解决这个问题而存在的几个solution。 1. Secondary NameNode 原理：Secondary NN会定期的从NN中读取editlog，与自己存储的Image进行合并形成新的metadata image 优点：Hadoop较早的版本都自带，

按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他

首页 - 关于我们 - 站内搜索 - Sitemap - 侵权投诉

版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.