pa

最新推荐文章于 2023-07-17 17:44:57 发布

weixin_30835923

最新推荐文章于 2023-07-17 17:44:57 发布

阅读量154

点赞数

文章标签：前端网络 webpack ViewUI

原文链接：http://www.cnblogs.com/justSmile2/p/11227721.html

版权

1. HTML5新增的表单输入类型有哪些

number <input type=”number” />只能输入数字

tel <input type=”tel” />电话

range <input type=”range” min=”20” max=”100”value=”30” step=”” />特性范围内数值选择器，其中step是指每移动一次的步数

email <input type=”email” />邮箱，验证规则：只识别英文和@。

url <input type=”url” />会在提交时对url字段集进行验证，只识别全程http://baidu.com

search <input type=”search” />搜索框

color <input type=”color” />拾色器

date <input type=”date/month/week” /> 年月日 / 年月 / 年周
time <input type=”time” />时间，时与分
datetime-local <input type=”datetime-local” />当地时间，年月日时分秒

2.HTML 本地存储分别有哪几种方式

localstorage sessionstorage (getItem //取记录 setIten//设置记录 removeItem//移除记录)

application cache

IndexedDB

3.JS的基本数据类型有哪些

Number,,Boolean,String Undefined,Null symbol ( symbol 不可强制转换 )

4. CSS实现隔行换色代码

div:nth-of-type(odd){ background:#00ccff;}
div:nth-of-type(even){ background:#ffcc00;}

div:nth-child(2n){
background-color: red;
}
div:nth-child(2n+1){
background-color: yellow;
}

5. DOM事件流的模型包括哪几种？

捕获和冒泡（ie用的是事件冒泡）

6. 流行的构建工具有哪几种

Grunt Gulp Browserify Webpack

7.实现浏览器多个标签页的通信有哪几种方式

localstorge、cookies

8.substr和substring

substr（startIndex,lenth） startIndex 支持负数

substring（startIndex, endIndex） startIndex 不支持负数（视为0 ， str.substring(0)）

9.写一个正则表达式允许所有数字、小数点、下划线

/[0-9\.\_]/g.test(2)

10. JS实现继承的方式有哪几种

父类

function Animal (name) {
  this.name = name || 'Animal';
  this.sleep = function(){
    console.log(this.name + '正在睡觉！');
  }
}

Animal.prototype.eat = function(food) {
  console.log(this.name + '正在吃：' + food);
};

View Code

10.1 原型链继承：将父类的实例作为子类的原型

function Cat() {
}
Cat.prototype = new Animal()
Cat.prototype.name = "cat"

var cat = new Cat();
console.log(cat.name)
console.log(cat.eat('fish'))
console.log(cat.sleep())
console.log(cat instanceof Animal)  // true
console.log(cat instanceof Cat) // true

View Code

10.2 构造继承：：使用父类的构造函数来增强子类实例

function Cat(name){
    Animal.call(this);
    this.name= name || 'Tom';
} 

// Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat instanceof Animal);   //false
console.log(cat instanceof Cat); // true

View Code

10.3 实例继承：父类实例添加新特性，作为子类实例返回

function Cat(){
  var instance = new Animal();
  instance.name = name || 'Tom';
  return instance;
}

// Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat instanceof Animal); // true
console.log(cat instanceof Cat); // false

View Code

10.4 拷贝继承

function Cat(name){
  var animal = new Animal();
　// 遍历拷贝属性
  for(var p in animal){
    Cat.prototype[p] = animal[p];
  }
  Cat.prototype.name = name || 'Tom';
}

// Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat instanceof Animal); // false
console.log(cat instanceof Cat); // true

View Code

10.5 Class 继承

class Cat extends Animal {
    constructor(name){
　　　　super(name);<br>　　　　this.name= name || 'Animal';
    }
}

var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat instanceof Animal); // true
console.log(cat instanceof Cat); //true

View Code

11.对象A直接调用对象B的某个方法，实现交互逻辑。但是导致的问题是A和B紧密耦合，修改B可能导致A调用B的方法失效。2、为了解决耦合导致的问题，我们可以设计成：对象A生成消息 -> 将消息通知给一个消息处理器（Observable）-> 消息处理器将消息传递给B具体的调用过程变成：A.emit(‘message’,data); B.on(‘message’,function(data){});请实现这一事件消息代理功能//请将事件消息功能补充完整function EventEmitter(){}

function EventEmitter() {
    this.eventFunctionMap = {};
}

EventEmitter.prototype.emit = function(eventName, data){
    this.eventFunctionMap[eventName].call(this, data);
}

EventEmitter.prototype.on = function(eventName, callback) {
    this.eventFunctionMap[eventName] = callback;
}

View Code

12.闭包是什么？有什么好处和坏处？

闭包：能够读取其他函数内部变量的函数。（应用场景：顺序加载，依次输出）

闭包的优点：1.能够读取函数内部的变量 2.让这些变量一直存在于内存中，不会在调用结束后，被垃圾回收机制回收

闭包的缺点：正所谓物极必反，由于闭包会使函数中的变量保存在内存中，内存消耗很大，所以不能滥用闭包，解决办法是，退出函数之前，将不使用的局部变量删除。

13.移动开发点透是什么原因？如何防止透传

什么条件发生点透（移动端click还有延迟200-300ms的关系）
A z-index大于B，即A显示在B浮层之上
A发生touch， A touch后立即消失， B事件绑定click

阻止click事件发生

A.addEventListener('touchend', function(e) { e.preventDefault(); });

/ 统一用touch事件代替 click 事件

14. JS WebSocket API主要有哪几个？分别有什么用

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

15. MVVM模式是什么？你知道哪些框架是MVVM模式（vue react angular）

Mvvm定义MVVM是Model-View-ViewModel的简写。即模型-视图-视图模型。

【模型】指的是后端传递的数据。【视图】指的是所看到的页面。【视图模型】mvvm模式的核心，它是连接view和model的桥梁。

16. 有哪些操作会造成JS内存泄露，该如何调试和避免

哪些操作会造成内存泄露：意外的全局变量引起的内存泄露、闭包引起的内存泄露、没有清理的DOM元素引用、被遗忘的定时器或者回调

解决之道：将事件处理函数定义在外部，解除闭包,或者在定义事件处理函数的外部函数中，删除对dom的引用

如何分析内存的使用情况：Google Chrome浏览器提供了非常强大的JS调试工具，Memory 视图 profiles 视图

怎样避免内存泄露：

减少不必要的全局变量，或者生命周期较长的对象，及时对无用的数据进行垃圾回收；
注意程序逻辑，避免“死循环”之类的；
避免创建过多的对象原则：不用了的东西要及时归还。

17.call和apply的含义和区别

调用一个对象的一个方法，用另一个对象替换当前对象

call可以传入多个参数；
apply只能传入两个参数，所以其第二个参数往往是作为数组形式传入

18.RequireJS的核心是什么？如何实现动态加载的

requirejs 加载模块的核心思想是利用了动态加载脚本的异步性以及 onload 事件使用回调函数来解决模块加载的问题。

requireJS是使用创建script元素，通过指定script元素的src属性来实现加载模块的（缓存src属性）

19. 用户登录界面有用户名、密码、验证码三个字段，请使用面向对象的方式设计一个业务组件，实现登录、校验、显示、隐藏等，实现方式不定，描述主体部分即可

  var datas=['user','pwd','code'];

  function Field(val){
    this.val=val;
    this.show=function(){};
    this.hide=function(){};
    this.init();
  }
  Field.prototype={ 
    init:function(){
      if(this.test()){
        this.success()
        return true;
      }else{
        this.failed()
        return false;
      }      
    },
    test:function(){},
    success:function(){},
    failed:function(){}
  }

  function Action(datas){
    datas.forEach(function(item,index){
      if(!new Field(item).init()){
        break;
      }    
    })
  }

  new Action(datas);

View Code

20.设计一个简单的前端缓存方案，实现前端组件和样式等变动较少的文件实现前端缓存，同时能够在组件改变时进行升级。

比如有样式文件cmsui.css和业务组件login.js 需要从v1版本升级到v2版本并删除原有低版本组件，其他组件不变。

请说明你准备采用的存储方式和设计思路，并用伪代码描述缓存方案的核心部分

？

合并文件、增加随机数、设置缓存头

<script type="text/javascript">
    var timestamp = new Date().getTime();
    var versionStamp = sessionStorage.version;
    if (versionStamp == null || (timestamp - versionStamp) > 1800000) {
     sessionStorage.version = timestamp;
    }
    document.write("<script type='text/javascript' src='js/index_tool.js?v="+sessionStorage.version+"'><"+'/'+"script>");
    document.write("<link rel='stylesheet' type='text/css' href='/css/layout.css?v="+sessionStorage.version+"'>"); <\/script>');
</script>

View Code

21.前端工程化

转载于:https://www.cnblogs.com/justSmile2/p/11227721.html

weixin_30835923

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
pa

1. HTML5新增的表单输入类型有哪些number <input type=”number” />只能输入数字tel <input type=”tel” />电话range <input type=”range” min=”20” max=”100”value=”30” step=”” />特性范围内数值选择器，其中step是指每...
复制链接

扫一扫