if(dataarray>0){
x+=dataarray[i];
}
}
16.简单jQuery:请写出代码,ul标签下面有1000个li,写一个性能最高的方式实现,在点击li后,输出li的内容
$(“ul”).on(“click”,”li”,function(){
$(this).html(“hit”);
})
17.用fetch方法构造一个Get请求,要求把当前页面cookie传过去,请写出代码;
fetch(url,{
method:"GET",
credentials:"include",
body:document.cookie
})
18.简述下为何通过ajax发送的请求会出现乱码问题,如何解决?
乱码的问题就是编码格式冲突,我们需要传输中文数据前面加一个encodeURI()编码,例如:encodeURI(j$("#fk_info").val());在接受参数的页面对传过来的编码过后的内容用后端语言进行解码
19.简述DOM,HTMLDOM的区别和联系
DOM分为三部分:
(1)核心DOM:遍历DOM树、添加新节点、删除节点、修改节点
(2)HTML DOM:以一种简便的方法访问DOM树
(3)XML DOM:准用于操作XML文档
核心DOM与HTML DOM的区别:
核心DOM :
对象:Document,Node, ElementNode,TextNode,AttributeNode,CommentNode,NodeList
核心DOM提供了统一的操作接口,如:createElement、appendChild、setAttribute等
核心DOM创建新元素:var newNode=document.createElement("img")
给元素添加属性:e.setAttribure()、e.setAttribureNode()
适用场合:核心DOM适合操作节点,如创建,删除,查找等
HTML DOM:
对象:image,Table,Form,Input,Select等等HTML标签对象化
HTML DOM提供了封装好的各种对象,如:Select、Option等等
适用场合:HTML DOM适合操作属性,如读取或修改属性的值
20.什么是事件流
DOM(文档对象模型)结构是一个树型结构,当一个HTML元素产生一个事件时,该事件会在元素结点与根结点之间的路径传播,路径所经过的结点都会收到该事件,这个传播过程可称为DOM事件流。DOM同时支持两种事件模型:捕获型事件和冒泡型事件
**************************************
21.JavaScript原型继承是如何运作的?
每个对象都会在其内部初始化一个属性,就是prototype(原型),当我们访问一个对象的属性时,如果这个对象内部不存在这个属性,那么他就会去prototype里找这个属性,这个prototype又会有自己的prototype,于是就这样一直找下去(知道找到null为止),也就是我们平时所说的原型链的概念。
22.CORS是什么?对于跨域请求,如何将附带凭证(HTTP Cookie 及 HTTP认证信息)的请求发送至服务器端?
CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing)。
它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制。只需要服务器端的Response header 设置下Access-Control-Allow-Origin即可。
只需把相应的cookie信息和认证信息作为post请求发送给服务器端即可。
23.DOM元素Attribute与Property的区别是什么?
1、 property是DOM中的属性,是JavaScript里的对象;而attribute是HTML标签上的特性,它的值只能够是字符串;
2、DOM对象初始化时会在创建默认的基本property;只有在HTML标签中定义的attribute才会被保存在property的attributes属性中;
3、attribute会初始化property中的同名属性,但自定义的attribute不会出现在property中;
4、propety是对象,而attribute的值都是字符串;
5、最关键的两句话:
attribute(特性),是我们赋予某个事物的特质或对象。
property(属性),是早已存在的不需要外界赋予的特质。
24.Long-Polling、WebSocket、SSE(Server-Sent Events)之间有什么差异?请写出WebSocket在浏览器端如何发送及接收消息的相关代码实现(需要考虑传输一场并根据返回数据的格式做不同处理)
Long-Polling 自己主动请求数据来获知文件知否发生变化 缺点:会有很多无效请求
SSE 服务器端通知客户端数据变化 服务器端客户端保持一个长连接 缺点:保持长连接需要占用大量的服务器端只要
WebSocket 实时通信 缺点:浏览器支持情况没有上面两种方法好
25.实现以下函数:
add(10,10);==>20
add(10)(10);==>20
function add(num){
if(arguments.length==1){
return function(num1){
return num+num1;
}
}else{
var sum = 0;
for(var i=0;i
sum += arguments[i];
}
return sum;
}
}
26.实现以下代码:
[a,b,3,4,5].copy();==>[a,b,3,4,5, a,b,3,4,5]
var array = ['a','b',3,4,5];
Array.prototype.copy = function(){
return this.concat(this);
}
console.log(array.copy());
27.指出下面代码的区别
function Order(){
}
var order = Order(); (1)
var order = new Order();(2)
代码(1)是将函数Order()作为一个普通函数去调用的,代码(2)是将Order()作为一个构造函数去调用的;当函数Order的方法体中有this关键之的时候,作为普通函数this指的是window对象,作为构造函数存在的时候this指代的是本对象
28.var foo = "Hello";
(function (){
var bar = "World";
alert(foo+bar);
})();
alert(foo+bar);
以上语句会产生什么样的结果?
(1)HelloWorld
(2)undefined
29.函数call和apply的区别:
相同点:两个方法产生的作用是完全一样的
不同点:方法传递的参数不同,call是参数往后累加,apply是把所有参数合并为一个数组传给函数的第二个参数
30.语句(window.foo||(window.foo=”bar”));执行后,window.foo的值是多少?
Bar
31.使用jquery做一次ajax请求,请求类型为post,传入参数是json格式,url为 http://xxx.com ,传入参数是{username:“abc”},请求成功返回一个数组例如[1,2,3,4,5]然后对这个数组进行处理后得到一个新的数组,[1,2,3,4,5, 1,2,3,4,5]并输出到日志
Array.prototype.copy = function(){
return this.concat(this);
}
$.ajax({
url:“http://xxx.com”,
type:'post',
dataType:“json”,
data: {username:“abc”},
success:function(data){
console.log(data.copy());
}
});
32.以下语句结果a,m的值
var a = "15.56";
var b = 20.23;
var a = parseInt(a)+parseInt(b);
var m = parseFloat(a);
a:35 m:35
33.var numberArray = [ 3,6,2,4,1,5 ],
(1)实现对该数组的倒排 ,输出[5,1,4,2,6,3]
var result = numberArray.reverse( );
alert(result);
(2)实现对该数组的降序排列,输出[6、5、4、3、2、1]
var result = numberArray.sort(function(a,b){return b-a});
alert(result);
34.$(document).ready()是个什么函数?为什么要用它。
问题一: $(document).ready()这个函数是用来取代页面中的window.onload; 不同的是onload()的方法是在页面加载完成后才发生,这包括DOM元素和其他页面元素(例如图片)的加载,因此,使用document.ready()方法的执行速度比onload()的方法要快。
问题二:Javascript 只有在DOM元素已经定义以后才可以对其执行某种操作,jQuery使用document.ready来保证所要执行的代码是在DOM元素被加载完成的情况下执行。
35.读下面代码:
window.color = 'red';
var o= {color:'blue'};
function sayColor(){
alert(this.color);
}
请在每行末尾写出该行的输出:
sayColor();
sayColor.call(this);
sayColor.call(window)
sayColor.call(o)
答案: red 、red、red、blue
36.请写一个正则,匹配输入的字符:第一个必须是字母或下划线开头,后面就是字母和数字或下划线构成,长度5-20.
答案: /^[A-Za-z_]\w{4,19}$/
37.JS中原型链最上层的对象是 object 的原型对象,该对象的_proto_指针指向 null 的原型对象。
38.JS中使用 Object 对象的 defineProperty 函数定义对象属性的访问器。
39.如何对一篇文章进行敏感词替换?假如有几千个敏感词。(写一下思路即可)
将这篇文章以字符串的形式赋给一个变量。定义一个正则表达式,以全局匹配的方式查找所有敏感词,并用replace方法替换掉
40.添加、删除、更改、插入节点的方法
appendChild
removeChild
replaceChild
insertBefore
41.在javascript编程中,请至少说出三种异步操作的使用场景?
回调函数
事件监听
Promise对象
Nodejs的异步方法
42.请用闭包的方式写一个方法,第一次执行返回999,第二次返回1000.
function bb(){
var num = 999;
return function(){
return num++;
}
}
var fun = bb();
fun();
fun();
43.现在有一个数组[1,4,5,8,100],请写一个方法,每秒输出数组的第一个元素,直到整个数组输出完毕
var arr = [1,4,5,8,100];
function output(){
setTimeout(function(){
console.log(arr.splice(0,1)[0]);
if(arr.length>0){
output();
}
},1000);
}
output();
44.请给Array本地对象的prototype添加一个原型方法,它的作用是剔除重复的条目,并将新数组返回
Array.prototype.unique = function(){//数组去除重复
var res = [];
var json = {};
for(var i = 0; i < this.length; i++){
if(!json[this[i]]){
res.push(this[i]);
json[this[i]] = 1;
}
}
return res;
}
第五部分:JS单选题
1、 下列JavaScript的循环语句中(D)是正确的
A、 if(var i < 10;i++)
B、 for(var i = 0;i < 10)
C、 for var i = 1 to 10
D、 for(var i = 0;i <= 10;i++)
2、 下列的哪一个表达式将会返回假(B)
A、 !(3<1)
B、 (4>=4)&&(5<=2)
C、 (“a”==”a”)&&(“C”!=”d”)
D、 (2<3)||(3<2)
3、 下列选项中,(D)不是网页事件
A、 onclick
B、 onmouseover
C、 onsubmit
D、 Onp
4、 有语句“var x = 0;while( )x+=2;”,要使while循环体执行10次,空白的循环判断式应该为(D )
A、 x < 10;
B、 x <= 10;
C、 x < 20;
D、 x <= 20;
5、 以下说法中错误的是(D )
A、 var a = 111;
B、 var a = “张三”;
C、 var _name = “小明”;
D、 var &_id = “1”;
6、 下列JS的判断语句中(A)是正确的
A、 if( i == 0)
B、 if( i = 0)
7、下列JavaScript的循环语句中()是正确的
A.if(var i < 10; i++)
B.for(var i = 0;i < 10)
C.for var i = 1 to 10
D.for(var i=0; i<10; i++)
答案:D
8、下列的哪一个表达式将会返回假()
!(3 <= 1)
(4 >= 4) && (5 <= 2)
( “a” == “a”) && (“C” != “d”)
(2<3) || (3<2)
答案:B
9、下列选项中,()不是网页中的事件
onclick
onmouseover
onsubmit
onp
答案:D
10、有语句“var x = 0; while( )x+2;”,要是while循环体执行10次,空白的循环判定式应该为()
x < 10
x <= 10
x < 20
x <= 20;
答案:C
11、以下说法错误的是()
var a = 111;
VAR a = ‘张三’;
var _name = “小明”;
var &_id=1;
答案:BD
12、以下JS的判断语句中()是正确的
if (i == 0)
if (i =0)
答案:A
13、以下不是引入js的方式选项的是(D)
A.使用script标签
B . 引入外部的js文件
C . 在事件中编写js
D . 使用 引入
14、 Js语句
var a1 = 10;
var a2 = 20;
alert("a1+a2="+a1+a2)将显示的结果是(B)
A.a1+a2=30
B.a1+a2=1020
C.a1+a2=a1+a2
D.a1+a2=30+a1+a2
15.var a=document.getElementById(“id”);
a.onclick = fun1;
a.onclick = fun2;
对象a被绑定的点击事件执行函数是什么?(B)
fun1
fun2
执行错误
两个函数都被绑定
16.以下那条会产生运行错误(A)
var obj = ()
var obj = []
var obj = 11
var obj
17.以下说法正确的是(C)
A.数字+字符=数字 (字符)
B.数字+boolean = true;(数字)
C. 数字+null = 数字
D.数字+undefined = isNaN (NaN)
18.以下不是引入javascript的方式 的选项是? (D)
使用script标签
引入外部的javascript文件
在事件中编写javascript
使用 引入
第六部分:HTML5+CSS3
1.HTML5、CSS3里面都新增了那些新特性?
新的语义标签
本地存储
离线存储
Websocket
2d,3d变换
Transition,animation
媒体查询
新的单位(rem,vw,vh等)
2.HTML5 为什么只需要写 ?
HTML5 不基于 SGML(标准通用标记语言),因此不需要对DTD进行引用,但是需要doctype来规范浏览器的行为(让浏览器按照它们应该的方式来运行);
而HTML4.01基于SGML,所以需要对DTD进行引用,才能告知浏览器文档所使用的文档类型。
3.如何处理HTML5新标签的浏览器兼容问题?
IE8/IE7/IE6支持通过document.createElement方法产生的标签,
可以利用这一特性让这些浏览器支持HTML5新标签,
浏览器支持新标签后,还需要添加标签默认的样式。
将上代码复制到head部分,记住一定要是head部分(因为IE必须在元素解析前知道这个元素,所以这个js文件不能在其他位置调用,否则失效)
最后在css里面加上这段:
article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}
主要是让这些html5标签成块状,像div那样。
4.cookies,sessionStorage 和 localStorage 的区别?
cookie是网站为了标示用户身份而储存在用户本地终端(Client Side)上的数据(通常经过加密)。
cookie数据始终在同源的http请求中携带(即使不需要),记会在浏览器和服务器间来回传递。
sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存。
存储大小:
cookie数据大小不能超过4k。
sessionStorage和localStorage 虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大。
生命周期:
localStorage 存储持久数据,浏览器关闭后数据不丢失除非主动删除数据;
sessionStorage 数据在当前浏览器窗口关闭后自动删除。
cookie 设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭
5.什么叫优雅降级和渐进增强?
优雅降级:Web站点在所有新式浏览器中都能正常工作,如果用户使用的是老式浏览器,则代码会针对旧版本的IE进行降级处理了,使之在旧式浏览器上以某种形式降级体验却不至于完全不能用。
如:border-shadow
渐进增强:从被所有浏览器支持的基本功能开始,逐步地添加那些只有新版本浏览器才支持的功能,向页面增加不影响基础浏览器的额外样式和功能的。当浏览器支持时,它们会自动地呈现出来并发挥作用。
如:默认使用flash上传,但如果浏览器支持 HTML5 的文件上传功能,则使用HTML5实现更好的体验;
6.transition和animation的区别
transition是过渡,animation是动画。transition只能从一种状态过渡到另外一种状态,animation可以定制复杂动画,可以定义动画的区间等。
transition必须通过一些行为才能触发(js或者伪类来触发),animation的话直接就可以触发。
7.HTML5的form如何关闭自动完成功能?
给不想要提示的 form 或某个 input 设置为 autocomplete=off。
8.margin-left:calc(-100%-100px) 代码中用到了一个calc(),这个函数的作用是什么?
答:通过计算来确定CSS属性值。
calc是英文单词calculate(计算)的缩写,是css3的一个新增的功能,你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。calc()可以使用数学运算中的简单加(+)、减(-)、乘(*)和除(/)来解决问题,而且还可以根据单位如px,em,rem和百分比来转化计算
9.简述HTML5新增的canvas、audio、svg标签的作用
canvas被称作画布,canvas 元素使用 JavaScript 在网页上绘制图像。 画布是一个矩形区域,可以控制其每一像素。
audio标签可以引用音频资源,在页面上播放音乐
svg用XML格式定义图形,可以用来制作矢量图形。
10.简述如何通过CSS进行响应式布局的方式
响应式布局使用媒体查询@media 定义多个分辨率下的样式,使页面在不同的分辨率下显示不同的样式
11.CSS的单位中,设定元素的长度或宽度与父元素字体大小相关的单位是什么?与html文档元素大小相关的单位是什么?
em 、rem
13.在CSS中使用 media 关键字判断不同的屏幕使用不同CSS文件,使用 @media 个关键字判断不同屏幕使用不同的CSS样式类。
14.CSS3实现一段阴影文本持续淡入淡出?
HTML结构 :
文本
CSS样式:
.box {
text-shadow : 1px 1px 2px #F00;
-moz-animation:fade 1s infinite;
-webkit-animation:fade 1s infinite;
-o-animation:fade 1s infinite;
animation:fade 1s infinite;
}
@keyframes fade {
0% { opacity: 0;}
50% { opacity: 100;}
100% { opacity: 0;}
}
@-webkit-keyframes fade {
0% { opacity: 0;}
50% { opacity: 100;}
100% { opacity: 0;}
}
@-moz-keyframes fade {
0% { opacity: 0;}
50% { opacity: 100;}
100% { opacity: 0;}
}
@-o-keyframes fade {
0% { opacity: 0;}
50% { opacity: 100;}
100% { opacity: 0;}
}
15.简述如何通过CSS进行响应式布局的方式。
meta标签定义: 使网页适配设备宽度。
使用Media Queries适配对应样式
16.如何使用Canvas来画一条简单的线?
var canvas=document.getElementById("canvas");
var cxt=canvas.getContext('2d');
cxt.beginPath();
cxt.lineWidth=10;
cxt.strokeStyle="#00ff00";
cxt.moveTo(20,20);
cxt.lineTo(100,20);
cxt.stroke();
cxt.closePath();
17.rgba和opacity的透明效果有什么不同?
opacity会继承父元素的 opacity 属性,而RGBA设置的元素的后代元素不会继承不透明属性。比如rgba的话,内部的文字透明度不会发生变化,而opacity的话,会影响到内部的文字
18.FontAwesome和iconfont是什么?他们有什么异同,问什么要使用它,有什么弊端?
两个都是图标字体。Font Awesome 是一套完美的图标字体,主要目的是和 Bootstrap 搭配使用
Iconfont是阿里的字体库,可以定制自己要的字体图标。
优势:
1、轻量性 :一个图标字体比一系列的图像(特别是在Retina屏中使用双倍图像)要小。一旦图标字体加载了,图标就会马上渲染出来,不需要下载一个图像。可以减少HTTP请求,还可以配合HTML5离线存储做性能优化。
2、灵活性 :图标字体可以用过font-size属性设置其任何大小,还可以加各种文字效果,包括颜色、Hover状态、透明度、阴影和翻转等效果。可以在任何背景下显示。使用位图的话,必须得为每个不同大小和不同效果的图像输出一个不同文件。
3、兼容性 :网页字体支持所有现代浏览器,包括IE低版本。详细兼容性可以点击这里。
弊端:
只能单色
跨域问题
字体图标库似乎体积显得有些过大
19.什么是响应式设计?
它是关于网站的制作或网页制作的工作。不同的设备有不同的尺寸和不同的功能。响应式设计是让所有的人能在这些设备上让网站运行正常。一部分是媒体查询和不同的视觉效果。一部分是不同的资源(如不同的Javascript来处理触摸与点击自动适应屏幕的对比)。
20.解释下这个CSS选择器什么发生什么?
[role=navigation] > ul a:not([href^=mailto] ) {}
定义了role属性,并且值为navigation的任何元素,其子元素列表下的除邮箱链接之外的所有链接元素。
能够用语言表达清楚这个选择器,证明你理解他们和可以使用他们做一些技术交流。
第七部分:必考题
HTML+CSS篇:
1. 如何处理HTML5新标签的浏览器兼容问题? (自己需要试试)
将上代码复制到head部分,记住一定要是head部分(因为IE必须在元素解析前知道这个元素,所以这个js文件不能在其他位置调用,否则失效)
最后在css里面加上这段:
article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}
主要是让这些html5标签成块状,像div那样。
2. 简单介绍下 CSS的盒子模型 ,他都包含哪些属性 ?
width,height,margin,padding,border
3. 宽高都200px的div在浏览器窗口居中(水平垂直都居中)?
position:fixed;width:200px;height:200px;left:50%;top:50%;margin-left:-100px;margin-top:-100px;
4. 经常遇到的浏览器的兼容性有哪些?原因,解决方法是什么,常用hack的技巧 ?
不同浏览器都会带有自己的浏览器默认样式,一般我们需要把这些浏览器默认自带的样式给清楚,一般我们借助reset.css(我们公司里开发前端页面都用这个来清楚浏览器默认样式)
display:inline-block(IE7及以下不支持)
需要对低版本IE特殊处理:{display:inline-block;*display:inline;*zoom:1;}
display:inline-block 什么时候会显示间隙?怎样消除间隙?
父元素font-size设置成0,子元素重新设置font-size
display:inline-block滥用容易出现布局方面的问题,尤其在左中右、左右等布局方面的问题尤为突出。因此如果是左右布局的话,尽量都用浮动来代替
z-index在IE7及以下版本的话,有时会发现不是谁z-index设置的越高谁就显示在最上面。碰到这种问题需要设置父元素有相对定位属性元素的z-index。先比较父元素的z-index再比较子元素的
IE6双边距
IE6中,元素向左浮动并且设置了左侧的外边距出现了这样的双边距bug。同理,元素向右浮动并且设置右边距也会出现同样的情况。同一行如果有多个浮动元素,第一个浮动元素会出现这个双边距bug,其它的浮动元素则不会。只需要给浮动元素加上display:inline;这样的CSS属性就可以了。
margin-top,margin-bottom的bug
父元素的第一个子元素设置了margin-top,会作用于父元素(值为父元素的margin-top与该margin-top两者中的最大值),而子元素和父元素的边距则没有发生变化。
5. IE8-(IE8及以下) rgba模式 不兼容的解决方案
IE8以及以下用滤镜, filter:Alpha(opacity=20);6. CSS Hack
什么是CSS hack
由于不同厂商的流览器或某浏览器的不同版本(如IE6-IE11,Firefox/Safari/Opera/Chrome等),对CSS的支持、解析不一样,导致在不同浏览器的环境中呈现出不一致的页面展现效果。这时,我们为了获得统一的页面效果,就需要针对不同的浏览器或不同版本写特定的CSS样式,我们把这个针对不同的浏览器/不同版本写相应的CSS code的过程,叫做CSS hack!
CSS hack的原理
由于不同的浏览器和浏览器各版本对CSS的支持及解析结果不一样,以及CSS优先级对浏览器展现效果的影响,我们可以据此针对不同的浏览器情景来应用不同的CSS。
CSS hack分类
科普
lte:就是Less than or equal to的简写,也就是小于或等于的意思。
lt :就是Less than的简写,也就是小于的意思。
gte:就是Greater than or equal to的简写,也就是大于或等于的意思。
gt :就是Greater than的简写,也就是大于的意思。
! :就是不等于的意思,跟javascript里的不等于判断符相同
CSS Hack大致有3种表现形式,CSS属性前缀法、选择器前缀法以及IE条件注释法(即HTML头部引用if IE)Hack,实际项目中CSS Hack大部分是针对IE浏览器不同版本之间的表现差异而引入的。
属性前缀法(即类内部Hack):例如 IE6能识别下划线""和星号" * ",IE7能识别星号" * ",但不能识别下划线"",IE6~IE10都认识"\9",但firefox前述三个都不能认识.
.all IE{property:value\9;} .gte IE 8{property:value\0;} .lte IE 7{*property:value;} .IE 8/9{property:value\0;} .IE 9{property:value\9\0;} .IE 7{+property:value;} .IE 6{_property:value;} .not IE{property//:value;}
选择器前缀法(即选择器Hack):例如 IE6能识别html .class{},IE7能识别+html .class{}或者*:first-child+html .class{}。
IE条件注释法(即HTML条件注释Hack):针对所有IE(注:IE10+已经不再支持条件注释): ,针对IE6及以下版本: 。这类Hack不仅对CSS生效,对写在判断语句里面的所有代码都会生效。
只在IE下生效
只在IE6下生效
只在IE6以上版本生效 <--[if gte IE 6]> 这段文字只在IE6以上(包括)版本IE浏览器显示
只在IE8上不生效
非IE浏览器生效
7. 让学生写一个CSS3动画?并让描述transition和animation的区别
transition是过渡,animation是动画。transition只能从一种状态过渡到另外一种状态,animation可以定制复杂动画,可以定义动画的区间等。
transition必须通过一些行为才能触发(js或者伪类来触发),animation的话不需要直接就可以触发。
JS篇:
知道不知道事件冒泡?知不知道阻止浏览器的默认行为?对应的原生兼容性写法该怎么写
知道事件冒泡,一般我们需要阻止事件冒泡。
事件冒泡
父元素和子元素上面的话都添加的有click(不仅仅是click事件,只要保证是同一个事件即可)。子元素的click事件触发的时候,会导致该click事件冒泡到它的父元素上面,为了阻止父元素的事件触发,我们一般需要给子元素的事件里写上阻止事件冒泡的方法
场景:(下拉菜单)点击空白区域关闭下拉菜单
兼容性写法:
if(event.stopPropagation){
event.stopPropagation();
}else if(event.cancelBubble){
event.cancelBubble = true;
}
阻止浏览器默认行为
当我们不希望一些浏览器默认行为触发的时候,就需要给对应的事件添加上阻止浏览器默认行为。
场景:
禁止a链接的点击后发生跳转
禁止UC等手机浏览器左右滑动切换到前一页或者下一页(我们可以通过给document的touchmove事件加上阻止浏览器默认行为的方法)
知不知道用没用过事件委托?它的好处是啥?
1, 提高性能。
2, 新添加的元素还会有之前的事件。
详见: http://www.jb51.net/article/88425.htm
1>提高性能 2>新添加的元素还会有之前的事件
什么是闭包(closure),为什么要用它?
闭包就是能够读取其他函数内部变量的函数,如果一个函数内部又定义了一个内部函数,并将该内部函数作为返回值返回或者存储在某个对象的属性里,这时就会形成一个闭包。
使用场景:1.匿名自执行函数2缓存 3实现封装(封装的方式有很多,闭包只是其中一种,不是说到封装就一定会用闭包)
闭包的优缺点
闭包的优点:
1.缓存
2.面向对象中的对象
3.实现封装,防止变量跑到外层作用域中,发生命名冲突
4.匿名自执行函数,匿名自执行函数可以减小内存消耗
闭包的缺点:
1.闭包有一个非常严重的问题,那就是内存浪费问题,这个内存浪费不仅仅因为它常驻内存,更重要的是,对闭包的使用不当的话会造成无效内存的产生
2.性能问题 使用闭包时,会涉及到跨作用域访问,每次访问都会导致性能损失。
因此在脚本中,最好小心使用闭包,它同时会涉及到内存和速度问题。不过我们可以通过把跨作用域变量存储在局部变量中,然后直接访问局部变量,来减轻对执行速度的影响。
知道原型和原型链么,一般什么时候需要用?
原型:
主要作用是用于继承
原型的作用是为函数对象声明通用的变量或者函数,构造函数的实例都会从原型上继承属性和方法。
每个对象中都有__proto__属性,这个属性指向的就是它基于的原型对象。
原型链:
var person = function(name){
this.name = name
};
person.prototype.getName = function(){
return this.name;
}
var zjh = new person(‘zhangjiahao’);
zjh.getName(); //zhangjiahao
JS在创建对象(不论是普通对象还是函数对象)的时候,都有一个叫做__proto__的内置属性,用于指向创建它的函数对象的原型对象prototype。以上面的例子为例:
console.log(zjh.__proto__ === person.prototype) //true
同样,person.prototype对象也有__proto__属性,它指向创建它的函数对象(Object)的prototype
console.log(person.prototype.__proto__ === Object.prototype) //true
继续,Object.prototype对象也有__proto__属性,但它比较特殊,为null
console.log(Object.prototype.__proto__) //null
我们把这个有__proto__串起来的直到Object.prototype.__proto__为null的链叫做原型链
我们调用一个对象的属性或者方法的时候,会存在一个优先级的问题。 优先级为:
构造函数内定义的属性>构造函数的原型上定义的属性>沿着__proto__指定的原型(原型链)一直往上找,直到找到null为止。任何一步一旦找到就立马停止,不会继续往下找。
有没有封装过插件,你一般怎么封装呢
逼格低点的话这样说:
封装过,以前我主要是把一些公共的功能封装成函数来实现简单封装,比如tab切换封装的时候我会定义一个叫tab的函数,选项卡节点和内容节点作为函数tab的参数。假如我一个页面有多个tab切换,我只需要执行函数的时候给函数传入不同的参数即可。
逼格高点的这样说:
封装过,我们主要用面向对象中的混合模式来封装插件,把可变的属性或者方法(通常都是属性)在构造函数内定义,把一些不变的属性或者方法(通常是方法)定义在函数的原型上面。我们封装好的插件通常会放在一个匿名自执行函数里面,这样做的目的是为了避免变量冲突。
怎么判断一个变量str是否被赋值?
typeof str == “undefined”
怎么判断一个变量arr的话是否为数组(此题用typeof不行)
arr instanceofArray
Ajax和jsonp的原理?
Ajax的原理(最次最次也得把XMLHttpRequest对象说出来)
Ajax基于XMLHttpRequest对象与Web服务器端进行异步数据通信。
首先基于这个对象的open方法创建一个浏览器跟服务器端连接,通过send方法从浏览器向服务器端发送请求。我们可以通过这个对象的onreadystatechange事件来监听请求的状态,当请求成功之后的话,我可以获取到这个对象responseText等方法获取到请求过来的数据,然后通过js对这些数据进行解析
Jsonp原理
Ajax不能跨域,但是script标签和img标签都可以跨域。jsonp的话就是动态创建一个script标签,把jsonp数据格式(callback(json))的接口的地址赋值给我们的script标签的src属性。每一次发送jsonp请求的时候都会创建一个全局的回调函数,全局回调函数名称跟我们jsonp接口里面的函数名称是一致的。全局函数里面写的就是对请求过来数据的操作。
Ajax不能跨域,JSONP可以跨域。
移动篇:
1.你们移动端怎么开发的?用的什么单位、js框架呢、怎么真机调试你们程序、怎么解决前缀问题呢
首先我们移动端用的是rem这个单位,移动端实际上还新增了vw,vh等一些单位,但是相对于rem来说,他们的兼容性都不好。rem是一个相对单位,是相对于根节点的font-size的比例。我们还会引用一个外部的js,这个js可以通过屏幕宽度动态计算根节点的font-size值。
我们移动端用的JS框架是zepto.js,因为相应来说它的的体积的话要小很多。而且我们项目中有时会需要使用一些触屏事件,比如滑动事件,那么我们还会调用它里面的touch模块
我们webapp的话都是基于gulp搭建的前端工程来开发,因为利用gulp起一个webserver特别简单,并且我还可以实现livereload功能(当我监控的文件发生变化的时候,可以触发浏览器的自动刷新功能),而且在css3里面加前缀的话是一个很头疼的问题,我们现在只需要用autoprefixer模块就可以很容易实现自动加css3前缀这个功能了。
2. 移动端兼容性?
1>ios移动端click事件300ms的延迟响应. 用fastclick来解决
2>zepto的touch模块的tap事件有点透的问题,也是用fastclick来解决
3>一些情况下对非可点击元素如(label,span)监听click事件,ios下不会触发,css增加cursor:pointer就搞定了
4>ios下取消input在输入的时候英文首字母的默认大写
5>fixed定位缺陷
ios下fixed元素容易定位出错,软键盘弹出时,影响fixed元素定位
android下fixed表现要比iOS更好,软键盘弹出时,不会影响fixed元素定位
ios4下不支持position:fixed
解决方案: 可用iScroll插件解决这个问题
6>Input 的placeholder会出现文本位置偏上的情况
input 的placeholder会出现文本位置偏上的情况:PC端设置line-height等于height能够对齐,而移动端仍然是偏上,解决是设置line-height:normal
7>calc的兼容性处理
CSS3中的calc变量在iOS6浏览器中必须加-webkit-前缀,目前的FF浏览器已经无需-moz-前缀。
Android浏览器目前仍然不支持calc,所以要在之前增加一个保守尺寸:
div {
width: 95%;
width: -webkit-calc(100% - 50px);
width: calc(100% - 50px);
}
8>在移动端修改难看的点击的高亮效果,iOS和安卓下都有效:
* {-webkit-tap-highlight-color:rgba(0,0,0,0);}
9>阻止旋转屏幕时自动调整字体大小
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:none;}
3.谈谈你对bootstrap的认识,用它做过项目么?
用Bootstrap主要用来做一些响应式的网站,它里面栅格化这块比较强大,我可以针对不同的屏幕尺寸定制不同页面结构。
我还用它做过后台管理系统,因为它里面集成的有风格标准统一的组件、插件、全局样式等,是我们做后台管理系统的话,不用再花大精力去布局页面了。而且甚至产品给我们一个原型图我们就可以开始开发,大大提高了开发效率。
综合:
网页前端性能优化的方式有哪些?
1.压缩css,js,图片
2.减少http请求次数, 合并css,js 合并图片(雪碧图)
3.使用CDN
4.减少dom元素数量
5.图片懒加载
6.静态资源另外用无cookie的域名
7.减少dom的访问(缓存dom)
8.巧用事件委托
9.样式表置顶、脚本置低
简单描述一下你做过的项目研发流程?
1>约定规范(目录结构、命名规范、代码书写规范)
2>由我们组长(公司有的叫组长有的叫leader)给我们搭建前端工程gulp(最起码把browsersync模块能说出来,用它创建一个局域网server并实现监控文件有变化就自动刷新功能)(另外搭建前端工程的时候就会把我们会用到的库或者插件放进去)、拆分不同的前端模块给我们开发
3>正式开发(我们通过git工具来进行)
4>代码review(由我们组长来帮我们做)
5>交付给后端开发工程师,需要帮他们联调的话到时再帮他们联调
看你简历上面写的你会nodejs还有gulp,能给我描述下你都用这俩东西做过什么东西么?
nodejs可以做一些服务器端的应用,比如我们可以用它搭建一个webserver(基于express框架可以实现)。我本人呢nodejs搭建webserver这块主要也是从网上看到一些文档自学的,谈不上精通。
我们公司的话主要用gulp来实现我们前端自动化。比如以前我们公司做webapp的项目有这样的需求,我们会用sass这个预编译器,我们写css3属性的时候我们经常还会用autoprefixer这个插件,我们发布上线的时候还需要把css文件进行压缩,如果没有一个很好的工具能帮我们管理并自动实现上面的操作的话,还是挺麻烦的。现在我们就可以用gulp来实现这些操作的自动化
你有跟后端合作的经验是吧,你们都怎么 协作 的呀?
第一种回答:(smarty啥都描述不出来,ajax交互这块特别特别差的学生,但这限定了你能就业的公司,因为大部分公司还是希望他招的人是很全面的人才,所以这个不推荐)
我们公司前端代码做完之后,直接就把前端代码的话交给后端了,页面绑定数据和ajax这块基本上都是后端开发工程师来完成的。除非他们碰到一些复杂点的js特别难写或者有些js的话需要处理样式这块的话会来让我们弄。
第二种回答:(适合大部分同学,前提你得理清楚)
我们公司的话,后端用的php语言,平时的话我们也会套一些smarty模板,只要我们前后端约定一下数据格式,然后我按照smarty模板的一些语法把数据解析成最终的HTML。
另外我们公司ajax这块的话一般都由我们前端来做,而且后端做的ajax这块我们通常也会去看下,尤其是ajax调用成功还需要js操作css样式这块的情况。Ajax接口这块的话,我们会事先约定下数据格式,我们公司的接口一般都是json格式的,而且我们有个文档是专门描述这个接口(里面通常会描述下返回结果是对象还是数组,对应里面的每一项又都是啥),我们前端只需要把json格式的数据结合上html渲染到我们也没对应的位置即可。我们拿到数据的话,现在一般很少直接用js拼接html了,一般会借助js模板引擎(handlerbars)来做这方面工作。
其他:
1.平常碰到问题一般都是怎么解决的呢?
百度、看一些博客(csdn、博客园cnblogs)、去论坛提问(比如知乎)、开发者问答社区(segmentfault)、会加一些qq技术交流群
看前端大牛的博客
玉伯 kissy框架(PC端淘宝、天猫),sea.js(前端模块加载器)
司徒正美 avalon(前端MVC框架)
阮一峰(翻译了很多国外文档)
张鑫旭(写了大量的博客,用生活化的例子来解释难点)
大漠穷秋(angular1,angular2慕课网视频教程)
徐飞(技术栈)
朴灵
寸志
2.专业宽度方面:最近在学习哪些新技术呀,以后准备往哪方面发展?
我最近在学习react。。。
我最近在学习sea.js。。。
我最近在学require.js。。。
我最近正在恶补node.js。。。
技术方向:高级前端开发工程师、全栈工程师(前端+后端nodejs)、前端架构师
管理方向:前端leader(前端主管、前端经理)、项目经理、CTO
*********************************************************************************************************
3.你都做过什么项目呢?让他具体聊某一个项目中运用的技术
注意:用心找自己做的项目中自己感觉最拿出来手的(复杂度最高,用的技术最多的项目),描述的时候尽可能往里面添加一些技术名词
布局我们用html5+css3
我们会用reset.css重置浏览器的默认样式
JS框架的话我们选用的是jQuery(也可能是Zepto)
我们用版本控制工具git来协同开发
我们会基于gulp搭建的前端自动化工程来开发(里面包含有我们的项目结构、我们需要引用的第三方库等一些信息,我们还实现了sass编译、CSS3加前缀等的自动化)
我们的项目中还用到了表单验证validate插件、图片懒加载Lazyload插件
4.为啥要离开上家单位呀(或者从前从事的不是计算机相关,为啥改行了)?
1.千万别说这行工资高之类的
2.要说,自己对这个很感兴趣,大学的时候加入的有这个社团,跟着学长学了这个东西,越学越感兴趣,于是利用大学课余时间自学了前端的知识(也可以把这个东西说成自己亲戚)
5.我们这边的话会有加班的情况,不知道你能接受不?
可以,个人愿意与公司一块成长的,而且也有了解这行会有加班,会配合公司把项目用心完成的。
6.有没有什么问题要问我?
1.别问加班和啥时候调工资之类的
2.社保、公积金交么(千万别说基数是多少)
3.问公司做的项目主要是哪方面呢,我擅长的技术****(具体技术)不知道公司需不需要
注意:如果去的是国企,国企很强调奉献,尽量往这方面靠
面试公司前最好搜索下公司是干什么的,能把他们产品说上来点就更好了(上市公司、国企尤其得这样)
第八部分:前端 MVC框架
1、Angular的数据绑定采用什么机制?详述原理。
脏检查机制。
双向数据绑定是 AngularJS 的核心机制之一。当 view 中有任何数据变化时,会更新到 model ,当 model 中数据有变化时,view 也会同步更新,显然,这需要一个监控。
原理就是,Angular 在 scope 模型上设置了一个 监听队列,用来监听数据变化并更新 view 。每次绑定一个东西到 view 上时 AngularJS就会往 $watch 队列里插入一条$watch ,用来检测它监视的 model 里是否有变化的东西。当浏览器接收到可以被 angular context 处理的事件时, $digest 循环就会触发,遍历所有的 $watch ,最后更新 dom。
第九部分:优化
1.sprites是什么,它的作用是什么?
雪碧图
减少http请求
2.前端优化常用技巧?
1.压缩css,js,图片
2.减少http请求次数, 合并css,js 合并图片(雪碧图)
3.使用CDN
4.减少dom元素数量
5.图片懒加载
6.静态资源另外用无cookie的域名
7.减少dom的访问(缓存dom)
8.巧用事件委托
9.样式表置顶、脚本置底
3.如果已经开发完一个web应用用于手机端访问,请问需要在哪方面优化页面?
按需加载
静态资源压缩
巧用图标字体
保证首屏相应速度
动画能用css3实现的尽量用css3实现
移动端事件优化(fastclick)
原文链接:https://www.cnblogs.com/le220/p/8469918.html
你可能感兴趣的:(JavaScript)
notepad++软件介绍(含安装包)
LQS2020
notepad++
Notepad++是一款开源的文本编辑器,主要用于编程和代码编辑。它是一个功能强大的替代品,常常被用来替代Windows系统自带的记事本。Notepad++win系统免费下载地址以下是Notepad++的一些主要特点和功能:多语言支持:Notepad++支持多种编程语言,包括Python、JavaScript、HTML、CSS、C++、Java等。它能够根据文件类型自动高亮显示语法,使代码更加易读
【LangChain】使用LangChain的提示词模板:技巧与总结
子夜时辰
LangChain的学习 langchain javascript node.js AIGC chatgpt
作者简介:前端开发爱好者,致力学习前端开发技术⭐️个人主页:夜宵饽饽的主页❔系列专栏:JavaScript小贴士学习格言:成功不是终点,失败也并非末日,最重要的是继续前进的勇气前言:这里是关于LangChain框架中的提示词模板使用的技巧,希望可以帮助到大家,欢迎大家的补充和纠正文章目录一、使用LangChain的提示词模板:技巧与总结1、格式化示例集2、示例选择器来组合提示词模板3、在聊天模型中
转码日记——Javascript笔记(8)
zzcoding_
转码日记 数据结构 javascript 前端 开发语言
数组(Array)数组也是一个对象,和普通对象功能类似。普通对象使用字符串作为属性名,而数组使用数字来作为索引操作。索引:从0开始的整数。数组的存储效率比较高,对属性名没有要求的时候可以使用。基本应用//创建数组对象vararr=newArray();//向数组中添加对象//语法:数组[索引]=值;arr[0]=10;arr[1]=33;//如果读取不存在的索引则返回undefined//获取数组
python中selenium中使用ajax_使用selenium和python捕获AJAX响应
weixin_39946534
我曾经截获了一些使用selenium向页面注入javascript的ajax调用.历史的不好的一面是,硒有时可能是,说“脆弱”.因此,无论如何我在进行注射时都会遇到硒异常.无论如何,我的想法是拦截XHR调用,并将其响应设置为我创建的一个新的dom元素,我可以从selenium操作.在拦截的条件下,你甚至可以使用发出请求的url来拦截你真正想要的那个(self._url)也许这有帮助.browser
(代码可运行)Bootstrap框架的HTML示例
程序员大侠
前端 CSS html bootstrap 前端
Bootstrap:一套流行的前端开发框架,基于HTML、CSS和JavaScript,适用于快速构建响应式Web应用。以下是一个使用Bootstrap构建的简单响应式Web应用的HTML示例:BootstrapExampleHello,Bootstrap!CardtitleSomequickexampletexttobuildonthecardtitleandmakeupthebulkofthe
移动端测试
渔jy
Android系统及应用 android linux
三种移动端产品类型介绍移动端应用的测试其自身特点,和其他传统测试又有一些独特的测试方法与思路。移动端应用又可以进一步细分为三大类:WebApp指的是移动端的Web浏览器,其实和PC端的Web浏览器没有任何区别,只不过Web浏览器所依附的操作系统不再是Windows和Linux了,而是iOS和Android了。WebApp采用的技术主要是,传统的HTML、JavaScript、CSS等Web技术栈,
JavaScript 常用模块化规范
渡鸦七
JavaScript javascript 开发语言 ecmascript
JavaScript模块化规范1.模块化概述1.1什么时模块化将程序文件依据一定规则拆分成多个文件,这种编码方式就是模块化的编码方式。拆分出来每个文件就是一个模块,模块中的数据都是私有的,模块之间相互隔离。同事也能通过一些手段,可以把模块内的指定数据“交出去”,提供其他模块使用。1.2为什么使用模块化随着应用的复杂度越来越高,其代码量和文件数据都会急剧增加,会逐渐引发一些问题:全局污染问题。依赖混
深入探索从ES6到ES2023
hai40587
es6 前端 ecmascript
从ES6到ES2023,我们深入探索ECMAScript(简称ES)的演变与发展,了解这一JavaScript标准背后的技术革新和进步。ECMAScript作为JavaScript的标准化版本,每年都在不断推出新版本,为开发者带来更加丰富和强大的功能。本文将从ES6的引入开始,逐步介绍到最新的ES2023,同时探讨这些新特性对现代Web开发的影响。ECMAScript简介与JavaScript的关
我们在进行前后端联调的时候 如何避免数据丢失 拿不到返回数据 查看不了状态信息等问题?
朱道阳
底层原理 面试八股 回归 前端 npm git python
最近在进行前后端联调开发的全栈开发工作但是这时候会出现很多问题比如说前端拿不到数据获得的状态码可能是正确的传的值却是null我进行了学习总结出一下几点一、数据校验前端程序员必须对后端提供的数据进行严格的数据校验。数据校验的目的是确保接收到的数据符合预期的格式和类型。在JavaScript中,可以使用typeof操作符或Array.isArray()方法进行基本的类型检查。更复杂的数据结构,可以使用
WebKit 简介及工作流程深度解析
不知名靓仔
webkit chrome safari edge
WebKit是一个开源的浏览器引擎,最初由苹果公司为Safari浏览器开发,后来被多个浏览器和应用采纳,如早期的Chrome和众多移动平台上的浏览器。WebKit不仅仅是一个渲染引擎,它集成了HTML、CSS、JavaScript的解析与渲染能力,以及网络资源加载、图形处理、排版布局等功能,为用户提供丰富的网页浏览体验。本文将深入探讨WebKit的核心组件以及其复杂的工作流程。WebKit核心架构
JavaScript对象
yeyang111
1.varfram={framer:'小明',dogs:["小兔","小猫"],field:[2,3,4]}六角学院截图.png2.向对象里边增加varfram={framer1:'小明',dogs:["小兔","小猫"],field:[2,3,4]}fram.framer2='小蕴'可以在控制台发现增加了一个0X7M8BN7.png3.像对象里边增加函数(方法)varfram={framer1:
标题:深入理解 JavaScript 中的定时器
小刘|
javascript 前端 开发语言
目录一、定时器的基本概念1.setInterval2.setTimeout二、代码示例分析一、定时器的基本概念在JavaScript中,定时器是一种用于在特定时间间隔后执行代码或者重复执行代码的机制。主要包含两种类型的定时器:setInterval和setTimeout。1.setIntervalsetInterval()是一个周期函数,它会在指定的时间间隔后,重复执行指定的函数。例如:vari=
js函数eval()
温暖前端
javascript 前端 开发语言
1.eval()函数简介eval()是JavaScript中的一个全局函数,它可以将传入的字符串当作JavaScript代码来执行。eval()函数的基本语法如下:eval(string)其中,string是要执行的JavaScript代码字符串。eval()函数会返回最后一个表达式的结果。2.eval()的工作原理当调用eval()函数时,JavaScript解释器会执行以下步骤:a.解析传入的
JavaScript之OOP基础概念学习总结一:scopes
gaoshu883
这个系列的文章是去年在搭架完静态博客后撰写的(博客已经不再维护啦,哦还能访问)↓最近在探究JavaScript中的scopes概念。经过一番研究,我觉得要从Interpreter的角度,才能更好地理解这个概念。毕竟程序员主要是编写指令,而Interpreter则是把程序员编写的代码一行一行读下去并翻译出来(执行出来),最终结果就会直接反映在Web浏览器的页面上。不过还要注意的是,并不是所有的sco
Puppeteer Heap Snapshot: 探索JavaScript内存世界的利器
金畏战Goddard
PuppeteerHeapSnapshot:探索JavaScript内存世界的利器puppeteer-heap-snapshotadriancooney/puppeteer-heap-snapshot:puppeteer-heap-snapshot是一个Node.js包,提供了通过Puppeteer获取浏览器内存堆快照的功能,以辅助JavaScript应用的内存泄漏检测和性能优化工作。项目地址:h
Puppeteer-Sign:自动化网页签名解决方案
杭臣磊Sibley
Puppeteer-Sign:自动化网页签名解决方案项目简介是一个基于谷歌的Puppeteer库开发的工具,用于自动化处理网页表单的签名过程。它模拟了真实用户的交互行为,可以用于需要电子签名的各种场景,比如在线合同签署、文档审批等。项目以JavaScript编写,易于集成到Web应用或者CI/CD流程中。技术分析Puppeteer库Puppeteer是由GoogleChrome团队维护的一个Nod
判断PDF与图片是否可以预览
马优晨
判断PDF是否可以预览 判断图片是否可以预览 PDF是否可以预览 图片是否可以预览 js判断PDF是否可以预览
一、判断图片是否可以预览在JavaScript中,可以使用Image对象来判断一个图片URL是否可以访问。如果图片可以被加载,那么load事件会被触发;如果图片无法访问,error事件会被触发。functioncheckImageAccessibility(url,callback){varimg=newImage();img.onload=function(){callback(true);//
jswebrtc 支持 SRS 的 Webrtc 播放器
王小工
前端 webrtc js
WebRTCWebRTC(WebReal-TimeCommunication)是一项实时通讯技术,它允许网络应用或站点在不借助中间媒介的情况下,建立浏览器之间点对点(Peer-to-Peer)的连接,实现视频流、音频流或其他任意数据的传输。WebRTC整体架构从上到下一共分为三层:WebAPI层:暴露给开发人员的用于开发WebRTC应用的JavaScriptAPI,如RTCPeerConnecti
ECMAScript简介
老四点COM
ecmascript 前端 开发语言
前言ECMAScript(通常简称为ES)由ECMA国际标准化组织制定的一种脚本语言标准,Netscape最初开发的JavaScript演变而来。ECMAScript为JavaScript提供了基础语言结构和功能。最初设计成一种脚本语言,用来服务Web。作为脚本语言ES同时具备其他脚本语言一样的性质。一、发展历史ECMAScript的历史可以追溯到1995年12月,当时升阳与网景联合推出了Java
JS中const有没有变量提升
北原_春希
javascript 前端 开发语言
在JavaScript中,const关键字用于声明一个只读的常量,其值在初始化后不能被重新赋值。关于变量提升(Hoisting),它是JavaScript中一个重要的概念,指的是无论变量或函数声明在何处,它们都会被“提升”到其所在作用域的最顶部。但是,这个规则不完全适用于const和let声明的变量。变量提升(Hoisting)的传统理解在ES6之前,JavaScript只有var关键字用于声明变
js知识总结
软件技术NINI
js javascript vue.js 前端
JavaScript(JS)是一种广泛使用的编程语言,主要用于网页开发,但也适用于非浏览器环境(如Node.js)。它支持面向对象、命令式、声明式(如通过函数式编程)和事件驱动式编程风格。以下是对JavaScript核心知识的一个总结:1.基础语法变量:使用var、let、const声明变量。let和const具有块级作用域,而var具有函数作用域或全局作用域。数据类型:包括原始类型(如Strin
Springboot+vue.js+协同过滤推荐+余弦相似度算法实现新闻推荐系统
计算机程序优异哥
针对海量的新闻资讯数据,如何快速的根据用户的检索需要,完成符合用户阅读需求的新闻资讯推荐?本篇文章主要采用余弦相似度及基于用户协同过滤算法实现新闻推荐,通过余弦相似度算法完成针对不同新闻数据之间的相似性计算,实现分类标签。通过协同过滤算法发现具备相似阅读习惯的用户,展开个性化推荐。本次新闻推荐系统:主要包含技术:springboot,mybatis,mysql,javascript,vue.js,
Dojo-CodeLab: JavaScript与Dojo框架学习与实践指南
陈马登Morden
本文还有配套的精品资源,点击获取简介:Dojo-CodeLab是一个提供学习和实践JavaScript及其Dojo框架的项目,专注于为初学者提供无需特定环境限制的编程平台。通过开发一个简单的计算器应用,学习者将掌握JavaScript基础语法和Dojo工具集的使用,涵盖变量、数据类型、控制结构、函数、对象、数学运算、事件处理和DOM操作等关键概念。本项目通过实际编码练习帮助学习者加深对前端开发的理
Qt Creator
morcake
qt 开发语言
QtCreator是一个跨平台的C++、JavaScript和QML集成开发环境,它简化了GUI应用的开发。支持用户在Linux、Mac以及Windows系统上使用,它是QtGUI应用开发框架的SDK的一部分。该编辑器具有语法高亮和自动补全等功能。Qt(/ˈkjuːt/,发音同“cute”[4][5][6])是一个跨平台的C++应用程序开发框架。广泛用于开发GUI程序,这种情况下又被称为部件工具箱
Yarn:一个快速、可靠且安全的JavaScript包管理工具
小周不想卷
# 前端node.js入门 yarn
(创作不易,感谢有你,你的支持,就是我前行的最大动力,如果看完对你有帮助,还请三连支持一波哇ヾ(@^∇^@)ノ)目录一、Yarn简介二、Yarn的安装1.使用npm安装Yarn2.在macOS上使用Homebrew安装Yarn3.在Windows上使用Chocolatey安装Yarn4.在Linux上使用包管理器安装Yarn三、Yarn的配置1.全局配置2.项目配置四、Yarn的基本用法1.初始化
JSON:轻量级的数据交换格式
Tsingfeng.
基础释疑 json
JSON(JavaScriptObjectNotation,JS对象简谱)是一种轻量级的数据交换格式。它基于ECMAScript(EuropeanComputerManufacturersAssociation,欧洲计算机协会制定的js规范)的一个子集,采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得JSON成为理想的数据交换语言。易于人阅读和编写,同时也易于机器解析和生
【华为OD统一考试B卷 | 100分】 快递运输(C++ Java JavaScript Python)
她与残局皆遗憾..
图灵学院 java 架构 开发语言
华为OD统一考试A卷+B卷新题库说明2023年5月份,华为官方已经将的2022/0223Q(1/2/3/4)统一修改为OD统一考试(A卷)和OD统一考试(B卷)。你收到的链接上面会标注A卷还是B卷。请注意:根据反馈,目前大部分收到的都是B卷。但是仍有概率抽到A卷。A卷对应2023的新题库(2022Q420223Q1)B卷对应20022部分考题以及新出的题目专栏:2023华为OD机试(A卷+B卷)(
JavaScript Promise
我是一个粉刷酱
浏览器支持推荐使用Chrome以及Firefox浏览器开局放图,忍不住吐槽一下----垃圾IE!!。什么是PromiseThePromiseobjectrepresentstheeventualcompletion(orfailure)ofanasynchronousoperation,anditsresultingvalue.Promise对象表示异步操作的最终完成(或失败)及其结果值。也就是说
探索 PubSubJS:高效的消息发布/订阅库
甄如冰Lea
探索PubSubJS:高效的消息发布/订阅库PubSubJSDependencyfreepublish/subscribeforJavaScript项目地址:https://gitcode.com/gh_mirrors/pu/PubSubJS在现代前端开发中,组件间的通信是一个常见且重要的问题。PubSubJS是一个基于JavaScript的轻量级、高效的消息发布/订阅库,它通过主题(topic)
JavaScript设计模式(装饰器模式)
Wsr_ecc6
1.装饰器模式的定义在不改变其原有的结构和功能为对象添加新功能。classCoffee{make(water){return`${water}+咖啡`;}cost(){return10;}}classMilkCoffee{constructor(parent){this.parent=parent;}make(water){return`${this.parent.make(water)}+牛奶`
knob UI插件使用
换个号韩国红果果
JavaScript jsonp knob
图形是用canvas绘制的
js代码
var paras = {
max:800,
min:100,
skin:'tron',//button type
thickness:.3,//button width
width:'200',//define canvas width.,canvas height
displayInput:'tr
Android+Jquery Mobile学习系列(5)-SQLite数据库
白糖_
JQuery Mobile
目录导航
SQLite是轻量级的、嵌入式的、关系型数据库,目前已经在iPhone、Android等手机系统中使用,SQLite可移植性好,很容易使用,很小,高效而且可靠。
因为Android已经集成了SQLite,所以开发人员无需引入任何JAR包,而且Android也针对SQLite封装了专属的API,调用起来非常快捷方便。
我也是第一次接触S
impala-2.1.2-CDH5.3.2
dayutianfei
impala
最近在整理impala编译的东西,简单记录几个要点:
根据官网的信息(https://github.com/cloudera/Impala/wiki/How-to-build-Impala):
1. 首次编译impala,推荐使用命令:
${IMPALA_HOME}/buildall.sh -skiptests -build_shared_libs -format
2.仅编译BE
${I
求二进制数中1的个数
周凡杨
java 算法 二进制
解法一:
对于一个正整数如果是偶数,该数的二进制数的最后一位是 0 ,反之若是奇数,则该数的二进制数的最后一位是 1 。因此,可以考虑利用位移、判断奇偶来实现。
public int bitCount(int x){
int count = 0;
while(x!=0){
if(x%2!=0){ /
spring中hibernate及事务配置
g21121
Hibernate
hibernate的sessionFactory配置:
<!-- hibernate sessionFactory配置 -->
<bean id="sessionFactory"
class="org.springframework.orm.hibernate3.LocalSessionFactoryBean">
<
log4j.properties 使用
510888780
log4j
log4j.properties 使用
一.参数意义说明
输出级别的种类
ERROR、WARN、INFO、DEBUG
ERROR 为严重错误 主要是程序的错误
WARN 为一般警告,比如session丢失
INFO 为一般要显示的信息,比如登录登出
DEBUG 为程序的调试信息
配置日志信息输出目的地
log4j.appender.appenderName = fully.qua
Spring mvc-jfreeChart柱图(2)
布衣凌宇
jfreechart
上一篇中生成的图是静态的,这篇将按条件进行搜索,并统计成图表,左面为统计图,右面显示搜索出的结果。
第一步:导包
第二步;配置web.xml(上一篇有代码)
建BarRenderer类用于柱子颜色
import java.awt.Color;
import java.awt.Paint;
import org.jfree.chart.renderer.category.BarR
我的spring学习笔记14-容器扩展点之PropertyPlaceholderConfigurer
aijuans
Spring3
PropertyPlaceholderConfigurer是个bean工厂后置处理器的实现,也就是BeanFactoryPostProcessor接口的一个实现。关于BeanFactoryPostProcessor和BeanPostProcessor类似。我会在其他地方介绍。
PropertyPlaceholderConfigurer可以将上下文(配置文件)中的属性值放在另一个单独的标准java
maven 之 cobertura 简单使用
antlove
maven test unit cobertura report
1. 创建一个maven项目
2. 创建com.CoberturaStart.java
package com;
public class CoberturaStart {
public void helloEveryone(){
System.out.println("=================================================
程序的执行顺序
百合不是茶
JAVA执行顺序
刚在看java核心技术时发现对java的执行顺序不是很明白了,百度一下也没有找到适合自己的资料,所以就简单的回顾一下吧
代码如下;
经典的程序执行面试题
//关于程序执行的顺序
//例如:
//定义一个基类
public class A(){
public A(
设置session失效的几种方法
bijian1013
web.xml session失效 监听器
在系统登录后,都会设置一个当前session失效的时间,以确保在用户长时间不与服务器交互,自动退出登录,销毁session。具体设置很简单,方法有三种:(1)在主页面或者公共页面中加入:session.setMaxInactiveInterval(900);参数900单位是秒,即在没有活动15分钟后,session将失效。这里要注意这个session设置的时间是根据服务器来计算的,而不是客户端。所
java jvm常用命令工具
bijian1013
java jvm
一.概述
程序运行中经常会遇到各种问题,定位问题时通常需要综合各种信息,如系统日志、堆dump文件、线程dump文件、GC日志等。通过虚拟机监控和诊断工具可以帮忙我们快速获取、分析需要的数据,进而提高问题解决速度。 本文将介绍虚拟机常用监控和问题诊断命令工具的使用方法,主要包含以下工具:
&nbs
【Spring框架一】Spring常用注解之Autowired和Resource注解
bit1129
Spring常用注解
Spring自从2.0引入注解的方式取代XML配置的方式来做IOC之后,对Spring一些常用注解的含义行为一直处于比较模糊的状态,写几篇总结下Spring常用的注解。本篇包含的注解有如下几个:
Autowired
Resource
Component
Service
Controller
Transactional
根据它们的功能、目的,可以分为三组,Autow
mysql 操作遇到safe update mode问题
bitray
update
我并不知道出现这个问题的实际原理,只是通过其他朋友的博客,文章得知的一个解决方案,目前先记录一个解决方法,未来要是真了解以后,还会继续补全.
在mysql5中有一个safe update mode,这个模式让sql操作更加安全,据说要求有where条件,防止全表更新操作.如果必须要进行全表操作,我们可以执行
SET
nginx_perl试用
ronin47
nginx_perl试用
因为空闲时间比较多,所以在CPAN上乱翻,看到了nginx_perl这个项目(原名Nginx::Engine),现在托管在github.com上。地址见:https://github.com/zzzcpan/nginx-perl
这个模块的目的,是在nginx内置官方perl模块的基础上,实现一系列异步非阻塞的api。用connector/writer/reader完成类似proxy的功能(这里
java-63-在字符串中删除特定的字符
bylijinnan
java
public class DeleteSpecificChars {
/**
* Q 63 在字符串中删除特定的字符
* 输入两个字符串,从第一字符串中删除第二个字符串中所有的字符。
* 例如,输入”They are students.”和”aeiou”,则删除之后的第一个字符串变成”Thy r stdnts.”
*/
public static voi
EffectiveJava--创建和销毁对象
ccii
创建和销毁对象
本章内容:
1. 考虑用静态工厂方法代替构造器
2. 遇到多个构造器参数时要考虑用构建器(Builder模式)
3. 用私有构造器或者枚举类型强化Singleton属性
4. 通过私有构造器强化不可实例化的能力
5. 避免创建不必要的对象
6. 消除过期的对象引用
7. 避免使用终结方法
1. 考虑用静态工厂方法代替构造器
类可以通过
[宇宙时代]四边形理论与光速飞行
comsci
从四边形理论来推论 为什么光子飞船必须获得星光信号才能够进行光速飞行?
一组星体组成星座 向空间辐射一组由复杂星光信号组成的辐射频带,按照四边形-频率假说 一组频率就代表一个时空的入口
那么这种由星光信号组成的辐射频带就代表由这些星体所控制的时空通道,该时空通道在三维空间的投影是一
ubuntu server下python脚本迁移数据
cywhoyi
python Kettle pymysql cx_Oracle ubuntu server
因为是在Ubuntu下,所以安装python、pip、pymysql等都极其方便,sudo apt-get install pymysql,
但是在安装cx_Oracle(连接oracle的模块)出现许多问题,查阅相关资料,发现这边文章能够帮我解决,希望大家少走点弯路。http://www.tbdazhe.com/archives/602
1.安装python
2.安装pip、pymysql
Ajax正确但是请求不到值解决方案
dashuaifu
Ajax async
Ajax正确但是请求不到值解决方案
解决方案:1 . async: false , 2. 设置延时执行js里的ajax或者延时后台java方法!!!!!!!
例如:
$.ajax({ &
windows安装配置php+memcached
dcj3sjt126com
PHP Install memcache
Windows下Memcached的安装配置方法
1、将第一个包解压放某个盘下面,比如在c:\memcached。
2、在终端(也即cmd命令界面)下输入 'c:\memcached\memcached.exe -d install' 安装。
3、再输入: 'c:\memcached\memcached.exe -d start' 启动。(需要注意的: 以后memcached将作为windo
iOS开发学习路径的一些建议
dcj3sjt126com
ios
iOS论坛里有朋友要求回答帖子,帖子的标题是: 想学IOS开发高阶一点的东西,从何开始,然后我吧啦吧啦回答写了很多。既然敲了那么多字,我就把我写的回复也贴到博客里来分享,希望能对大家有帮助。欢迎大家也到帖子里讨论和分享,地址:http://bbs.csdn.net/topics/390920759
下面是我回复的内容:
结合自己情况聊下iOS学习建议,
Javascript闭包概念
fanfanlovey
JavaScript 闭包
1.参考资料
http://www.jb51.net/article/24101.htm
http://blog.csdn.net/yn49782026/article/details/8549462
2.内容概述
要理解闭包,首先需要理解变量作用域问题
内部函数可以饮用外面全局变量
var n=999;
functio
yum安装mysql5.6
haisheng
mysql
1、安装http://dev.mysql.com/get/mysql-community-release-el7-5.noarch.rpm
2、yum install mysql
3、yum install mysql-server
4、vi /etc/my.cnf 添加character_set_server=utf8
po/bo/vo/dao/pojo的详介
IT_zhlp80
java BO VO DAO POJO po
JAVA几种对象的解释
PO:persistant object持久对象,可以看成是与数据库中的表相映射的java对象。最简单的PO就是对应数据库中某个表中的一条记录,多个记录可以用PO的集合。PO中应该不包含任何对数据库的操作.
VO:value object值对象。通常用于业务层之间的数据传递,和PO一样也是仅仅包含数据而已。但应是抽象出的业务对象,可
java设计模式
kerryg
java 设计模式
设计模式的分类:
一、 设计模式总体分为三大类:
1、创建型模式(5种):工厂方法模式,抽象工厂模式,单例模式,建造者模式,原型模式。
2、结构型模式(7种):适配器模式,装饰器模式,代理模式,外观模式,桥接模式,组合模式,享元模式。
3、行为型模式(11种):策略模式,模版方法模式,观察者模式,迭代子模式,责任链模式,命令模式,备忘录模式,状态模式,访问者
[1]CXF3.1整合Spring开发webservice——helloworld篇
木头.java
spring webservice CXF
Spring 版本3.2.10
CXF 版本3.1.1
项目采用MAVEN组织依赖jar
我这里是有parent的pom,为了简洁明了,我直接把所有的依赖都列一起了,所以都没version,反正上面已经写了版本
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="ht
Google 工程师亲授:菜鸟开发者一定要投资的十大目标
qindongliang1922
工作 感悟 人生
身为软件开发者,有什么是一定得投资的? Google 软件工程师 Emanuel Saringan 整理了十项他认为必要的投资,第一项就是身体健康,英文与数学也都是必备能力吗?来看看他怎么说。(以下文字以作者第一人称撰写)) 你的健康 无疑地,软件开发者是世界上最久坐不动的职业之一。 每天连坐八到十六小时,休息时间只有一点点,绝对会让你的鲔鱼肚肆无忌惮的生长。肥胖容易扩大罹患其他疾病的风险,
linux打开最大文件数量1,048,576
tianzhihehe
c linux
File descriptors are represented by the C int type. Not using a special type is often considered odd, but is, historically, the Unix way. Each Linux process has a maximum number of files th
java语言中PO、VO、DAO、BO、POJO几种对象的解释
衞酆夼
java VO BO POJO po
PO:persistant object持久对象
最形象的理解就是一个PO就是数据库中的一条记录。好处是可以把一条记录作为一个对象处理,可以方便的转为其它对象。可以看成是与数据库中的表相映射的java对象。最简单的PO就是对应数据库中某个表中的一条记录,多个记录可以用PO的集合。PO中应该不包含任何对数据库的操作。
BO:business object业务对象
封装业务逻辑的java对象