当前位置: 首页 > 工具软件 > Tc-play > 使用案例 >

TC - front end

壤驷骁
2023-12-01

JS

1、一个数组 par 中存放有多个人员的信息,每个人员的信息由年龄 age 和姓名 name 组成,如{age: 2, name: ‘xx’}。请写一段 JS 程序,对这个数组按年龄从小到大进行排序。

function getAge (arr) {
return arr.sort(function(x,y){
return x.age - y.age;
});
}

2、有字符串 var = ‘abc345efgabcab’,请写出 3 条 JS 语句分别实现如下 3 个功能:
1)去掉字符串中的a、b、c 字符,形成结果:‘345efg’
2)将字符串中的数字用中括号括起来,形成结果:‘abc[3][4][5]efgabcab’
3)将字符串中的每个数字的值分别乘以 2,形成结果:‘abc6810efgabcab’

str.replace(/[a-c]/g,’’);
str.replace(/(\d)/g, “[$1]”);
str.replace(/(\d)/g, function(a){return a*2});

3、请写一段 JS 程序类,定义一个列表类List,该类包含两个成员:属性 length(表示列表中的元素个数)和方法 add (像列表中添加元素),其中要求构造函数和 add 方法的参数为动态参数。

function List(arrArg){
this.arr = arrArg || [];
this.arrlength = this.arr.length || 0;
}

List.prototype = {
constructor: List,
add: function(arg) {
this.arr.push(arg);
this.arrlength = this.arr.length;
return this.arr;
}

}

4、请问以下 JS 程序有什么问题?应该如何优化?

function setStyle(element) {
element.style.fontWeight = “bold”;
element.style.textDecoration = “none”;
element.style.color = “#000000”;
}
我这边优化如下:

function setStyle(element) {
if (!element.style) {
return;
}
var eleStyle = element.style;
eleStyle.fontWeight = “bold”;
eleStyle.textDecoration = “none”;
eleStyle.color = “#000000”;
}

5、请写出一下正则表达式:
1)匹配一个全部是数字的字符串
2)提取一个 url 所使用的协议类型如 http、ftp 和 host 名称

我这边实现如下:

// 1)
var str = ‘1234’;
/^\d+KaTeX parse error: Expected 'EOF', got '\/' at position 81: …a-zA-Z]{3,5})\:\̲/̲\/)?(www\.)?([a…/);

6、请写出下面 JS 程序中几个 document.write 的结果:

function Parent() {
this.a = 1;
this.b = [1, 2, this.a];
this.c = {demo: 5};
this.show = function() {
document.write(this.a + ’ ’ + this.c.demo + ‘:’ + this.b + ‘
’)
}
}
function Child() {
this.a = 2;
this.change = function() {
this.b.push(this.a);
this.a = this.b.length;
this.c.demo = this.a++;
}
}
Child.prototype = new Parent();
var parent = new Parent();
var child1 = new Child();
var child2 = new Child();
child1.a = 11;
child2.a = 12;
parent.show();
child1.show();
child2.show();
child1.change();
child2.change();
parent.show();
child1.show();
child2.show();

7、请用 js 程序实现二分算法。

8、JS作用域:
for es5

1、没有var声明属于全局申明,一般不太规范
2、变量提前在申明前使用,变量提升
3、js没有块级作用域,只有函数作用域
4、函数内部可以访问外部变量,外部无法访问内部变量
5、函数中变量查找是就近原则去寻找

作用域链:多层嵌套,最深层的作用域在作用域链的最开始层(水平描述在最左侧),最上层的作用域window在作用域链的最终层(水平描述在最右侧),作用域链最深访问处理越耗时;

9、变量查找顺序
javascript搜索引擎LHS和RHS作用域链查询

LHS - 等号左侧: 试图找到变量容器的本身,对其赋值;
RHS - 等号右侧:找到变量

非严格模式下,a = 4; console.log(a); // LHS查询,找不到变量给它赋值全局变量
console.log(b); b = 4; // RHS查询,找不到变量,则返回引用异常未定义ReferenceError:b is not defined

func();
// 先通过RHS查找变量,可以找到定义不报ReferenceError错, 但使用不合法;
// func 为undefined,执行了一个函数
var func = function () {
console.log(100);
};

ReferenceError代表作用域判别失败,也就是作用域内查询变量失败。
TypeError代表作用域判别成功,但是对结果的操作是非法或者不合理的。

10、JS事件模型

DOM0级模型
html事件绑定:

html事件


js事件绑定:
var ep = document.getElementById(‘eventP’);
ep.onclick = fun;
事件移除:
ep.onclick = null;

IE事件模型
var btn = document.getElementById(’.btn’);
btn.attachEvent(‘onclick’, showMessage);
btn.detachEvent(‘onclick’, showMessage);

DOM2级模型
见 11、
11、浏览器事件模型
捕获阶段
目标阶段
冒泡阶段

一个3层元素结构模型,点击最里层元素,触发流程:
由外向里层层捕获,到目标,层层向上冒泡,
如果给目标绑定捕获和冒泡事件,即触发2次,

addEventListener(event, fn, Boolean);
// event, 事件方法
// fn 执行事件函数
// Booolean, true为捕获阶段触发事件,false为冒泡阶段触发事件

attachEvent(on + ‘event’, fn); // ie事件模型, 仅有冒泡阶段事件处理,没有捕获阶段的程序控制,但整个事件流程也是有捕获和冒泡的;

阻止事件传播
e.stopPropagation(),阻止事件传播既可以是在冒泡阶段,也可以是在捕获阶段;
(e.stopPropagation()很少用到在捕获阶段去阻止事件的传播,大家就以为e.stopPropagation()只能阻止事件在冒泡阶段传播。)

阻止默认行为
e.preventDefault(), 默认行为是指:点击a标签就转跳到其他页面、拖拽一个图片到浏览器会自动打开、点击表单的提交按钮会提交表单等等,因为有的时候我们并不希望发生这些事情,所以需要阻止默认行为。

DOM事件模型中的事件对象常用属性:

    type用于获取事件类型

    target获取事件目标

    stopPropagation()阻止事件冒泡

	preventDefault()阻止事件默认行为

IE事件模型中的事件对象常用属性:

	type用于获取事件类型
	
	srcElement获取事件目标
	
	cancelBubble阻止事件冒泡
	
	returnValue阻止事件默认行为

自定义事件:
JS中已经内置了很多事件,如click, mouseover等等,但是内置事件毕竟有限,有时候我们想自己定义一些事件,例如三连击,threeclick。如何实现自定义事件呢?

首先要创建一个事件。可以使用以下方式:

var event = new Event('threeclick', {"bubbles":true, "cancelable":false});
然后我们需要为事件注册监听函数:

target.addEventListener('threeclick', hello, false);
最后我们要在合适的时机触发该事件,我们可以使用dispatchEvent函数。该方法在当前节点触发指定事件,从而触发监听函数执行。该方法返回一个布尔值,只要有一个监听函数调用了Event.preventDefault(), 则返回false, 否则返回true。
target.dispatchEvent(event);

JQuery Event模型
JQuery解决的一个主要问题就是浏览器的兼容问题,它有自己的事件模型实现方式。它主要有以下特性:

重定义了JQuery.Event对象, 统一了事件属性和方法, 统一了事件模型

可以在一个事件类型上添加多个事件处理函数, 可以一次添加多个事件类型的事件处理函数

支持自定义事件(事件命名空间)

提供了toggle, hover组合事件

提供了one, live-die, delegate-undelegate

提供了统一的事件封装, 绑定, 执行, 销毁机制

$(document).ready();

....

12、事件捕获作用

13、事件代理原理/事件委托
事件代理: 事件在冒泡过程中会上传到父节点,因此可以把子节点的监听函数定义在父节点上,由父节点的监听函数统一处理多个子元素的事件,这种方式称为事件代理(Event delegation)。
我们有一个div元素,它包含三个按钮:

<div id="box">
    <input type="button" value="按钮" id="btn">
    <input type="button" value="按钮2" id="btn2">
    <input type="button" value="按钮3" id="btn3">
</div>
我们可以在父节点上一次性的为所有子节点注册监听函数:

var box = document.getElementById('box');

box.addEventListener('click', function(event) {
  if (event.target.tagName.toLowerCase() === 'input') {
    // some code
  }
});

14、脱敏数据:可逆脱敏(进行序列化等转化可转化回来的数据)与不可逆脱敏(将数据转化为某种数据形式,不可转化回原始数据)

15、js和flash这样的插件是如何交互的呢? ExternalInterface

flash使用的actionscript跟javascript是非常相通的,下面描述如何互相调用函数:
1:javascript调用flash中的函数
在flash的脚本中增加
代码:import flash.external.ExternalInterface;
假定要调用的函数是hello,as代码如下
代码:function hello(){
return “hello”;
}
ExternalInterface.addCallback(“hello”, this, hello);
//第一个参数为导出函数名,第三个参数为as的函数名
这样就可以在js中调用as的hello函数了
2:flash调用js的函数
ExternalInterface.call(“hello2”, “jacky”);
//第一个参数是js的函数名,后面的是js函数的参数
3:如何互相调用

html代码如下:
代码:<object type="application/x-shockwave-flash" data="test.swf" width="525" height="390" name="test">
                        <param name="allowScriptAccess" value="sameDomain" />
                        <param name="movie" value="test.swf" />
                        <param name="quality" value="high" />
                        <param name="scale" value="noScale" />
                        <param name="wmode" value="transparent" />
                        
</object>

function callFromFlash() {
    var a=thisMovie("test").hello();
    alert(a);
}

function thisMovie(movieName) {
    if (navigator.appName.indexOf("Microsoft") != -1) {
        return window[movieName]
    }
    else {
        return document[movieName]
    }
}

最近开发网站时遇到一个问题,如何与FLASH里的AS脚本进行交互?

需要在Flash里读取网页JavaScript里的值,用于控制两个Flash协同显示内容。

最后终于在Flash找到了ExternalInterface类,要求环境:AS 1.0,Flash Player 8.0以上

一、在网页中通过JavaScript调用Flash里的ActionScript:
可以通过ExternalInterface的addCallback方法,在Flash里注册一个可以供网页上的JavaScript或ActiveX调用的方法,具体代码如下:
程序代码

import flash.external.*;
var methodName:String = “PlayBB”;
var instance:Object = null;
var method:Function = playB;
var ws:Boolean = ExternalInterface.addCallback(methodName, instance, method);

在JavaScript中调用时,需要为Flash所在的Object标签设置一个ID,并且设置allowScriptAccess属性,示例代码如下:
程序代码

网页中的JavaScript具体的调用示例:
程序代码

function thisMovie(movieName) {
if (navigator.appName.indexOf(“Microsoft”) != -1) {
return window[movieName]
}
else {
return document[movieName]
}
}
(“topFlash”).PlayBB();

二、在Flash的ActionScript中调用网页里的JavaScript:
直接使用ExternalInterface的Call方法就可以了,示例代码如下:
程序代码

import flash.external.*;
var obj:Object = ExternalInterface.Call(“JavaScript方法”, “参数”);

参数可以是任何As中的类型,在调用时Flash会自动封装,多参数使用,分隔。

16、jquery ajax支持的传输数据类型:
xml html script json jsonp text

17、判断一个字符串对象str是否为String?
var str = new String(‘1ksdmw’);
// 通过instanceOf判断是否为实例, str instanceOf String , true
// typeof str // “object”

Css布局及重构

1、viewpoint:移动设备访问页面的像素视图缩放关系,
device-width
user-scalable: no-scale
target-densitydpi: device-dpi: high-dpi, medium-dpi, low-dpi

例:
(设置屏幕宽度为设备宽度,禁止用户手动调整缩放)

(设置屏幕密度为高频,中频,低频自动缩放,禁止用户手动调整缩放) https://blog.csdn.net/shenlei19911210/article/details/51284910

2、border: none(无边框样式),border: 0(边框宽度为0,但如果设置宽度不只是需要设置这个值就行,还需要设置1px solid #color等);
css sprite: 多张图片的合并大小通常还会比单张加起来的总和要小;

3、关于ie和firefox的描述:
innerText IE支持,FIREFOX也支持
document.createElement FIREFOX支持,IE也支持
setAttribute(‘class’,‘styleClass’) FIREFOX支持,
IE也支持但写法为: setAttribute(‘className’,‘styleClass’)

4、假设当前屏幕分别率为1024×768,定义一个居中的占屏幕一半大小的表格的语句是

浏览器及服务器相关

1、状态码

2、dns

3、cdn

4、Netscape原网景公司,mozilla后该公司成立的组织,后该组织建立的gecko引擎,因其市场优异很多开发会根据mozilla标识开发更优良的代码,
微软ie浏览器与之竞争,微软仿造加入mozilla引起这种混乱风,很多浏览器开始仿造加入mozilla标志,chrome, safari,opera等等,因此现在很混乱。
为什么浏览器User-agent总是有Mozilla字样?
https://zhidao.baidu.com/question/1767408752449075980.html
5、常见的浏览器端的存储技术
cookie
localStorage
userData
// session为服务端创建

cookie 是靠谱的浏览器都支持;
localStorge 比 cookie 存的更多,获取更方便,而且存储内容不会随请求发送给服务器;session 虽然需要 cookie 支持(通常存放加密过的 sessionId),但是不在浏览器端存放主要信息,排除;
IE 支持 userData 存储数据,但是基本很少使用到,除非有很强的浏览器兼容需求。

Node

1、设计一个批量输入的页面,一次输入5000条记录,如何设计:
分批次处理:将数据分批次,然后交予异步处理
异步处理:通过nodejs异步读取文件操作异步处理,readFile

安全

1、XSS,CSRF,hash碰撞,阐述与防治

前沿

 类似资料:

相关阅读

相关文章

相关问答