GithubHelp home page GithubHelp logo

notes's People

Contributors

wss534857356 avatar

Stargazers

avatar

Watchers

avatar

notes's Issues

HTML语义化

用正确的标签做正确的事情。
html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;
即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的;
搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO;
使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

摘自: 前端面试题

Object.prototype.deepClone 

Object.prototype.deepClone = function(top) {
  var Obj = [];
  if(!top)
    top = this;
  for(var key in this) {
    if(top === this[key]) {
      return;
    }
    Obj[key] = typeof this[key] === 'object'
      ? Obj[key] = this[key].deepClone(top)
      : Obj[key] = this[key];
  }
  return Obj;
}
Object.prototype.deepClone = function(top) {
      var Obj = [];
      if(!top) {
        top = this;
      }
      for(var key in this) {
        if(top === this[key]) {
          return;
        }
        if(typeof this[key] !== 'object' ){
          // will find the deepClone function in the prototype.Object
          if(typeof this[key] === 'function' && 
              this[key] !== Object.prototype.deepClone){
            var func = function () {};
            func.prototype = this[key].deepClone(top);
            Obj[key] = new this[key];
            Obj[key].prototype = new func;
          } else {
            Obj[key] = this[key];
          }
        } else {
          Obj[key] = this[key].deepClone(top)
        }
      }
      return Obj;
    }

拆解数组

// 拆分以下数据 返回 [1, 2, 3, 4, 5, 6, 7, 8, "a", {foo: 'bar'}]
var arrayC = [1,2,3,[4,5,6,[7,8],'a'], {foo: 'bar'}]

function flattenDeep(arrayA) {
let arr = arguments[0]
arr.map((val, index) => {
val instanceof Array && arr.splice(index,1,...flattenDeep(val))
})
return arr
}
flattenDeep(arrayC)

如何利用一个小范围随机数生成一个大范围的随机数

用一个5以内的随机数函数生成一个7以内的随机数函数

var rand5 = () => ~~(Math.random()*5) // 利用这个函数生成5以内的随机数

这题的解题思路很简单, 只要利用这个函数生成一个平均分布的范围大于7的随机数就可以了

var rand7 = function() {
  var val = rand5()*5 + rand5() // 平均分布 6~30 所以标准范围是6~26
  return val>26?rand7():val%7+1 // 27~30之间的数据全部抛弃重新随机
}
var b = [0,0,0,0,0,0,0,0,]
for(var i=0; i<100000000;i++) {
  b[rand7()]++
  // [0, 14286297, 14287880, 14282580, 14287830, 14278935, 14285595, 14290883]
  // 从数据看出是随机的
}

延伸: 从这题可以拓展另一个问题: 如何利用一个小范围随机数生成一个大范围的随机数
重点在于如何保证随机数的平均分布
从rand5()*5 + rand5() 可以看出实现的原理是先生成一个[5,10,15,20,25]间隔为5的随机数组后再使用一个随机数去填充这个数组, 那么对于更大范围的数比如一个大于25的数, 就需要rang5()*5*5+rand5()*5+rand5() 得到一个区间是 31~155 总的范围长度为125的数组
所以只需要递归获得一个大于范围的数组长度, 就可以得到一个由小范围随机数生成的大范围随机数, 具体代码就不贴出来了, 有兴趣可以自己实现一下

// 这里给出一个我偶然想到的阶乘
const factorial = function(n, x, num=n) {
  // n 是对应的进制
  // x 表示进位的长度
  // num 表示被用于做乘法的数
  // 所以 factorial(n, x, num) = num * n^x
  const val = num.toString(n)
  return x?parseInt(val.padEnd(val.length+x,"0"),n):1
}
console.log(factorial(2, 4, 5) === 5<<4) // true

js中判断一个变量是不是Array

// 当时阿里电面的时候全忘光了, 书都白看了, 吸取教训。。

  1. arr instanceof Array // true
  2. arr.constructor === Array // true
  3. Object.prototype.toString.call([]).slice(8,13) === 'Array'
  4. ES5的 Array.isArray() 方法
  5. 类数组判断:
function ArrayLike(obj){
  if( obj
    && typeof obj === "object"
    && isFinite(obj.length)
    && obj.length === Math.floor(obj.length)
    && obj.length < 4294967296)
    return ture
  else
    return false
}

数组组合 算法题

// 类似这种
［1，2，5，10，20，50，100］，可以从里面取若干个数，要求得出和为100的不同取法有多少？
解题思路就是递归调用, 同时防止数据重复, 类似乘法中的25=52的情况
比如1, 2, 3 三个分支, 递归三次 1只调用 1, 2, 3分支, 2只调用2, 3分支, 3只调用3自己
递归的数组应该为:
[1,1,1],
[1,1,2],
[1,2,2],
[1,2,3],
[1,3,3],
[2,2,2],
[2,2,3],
[2,3,3],
[3,3,3],

以下是js的解决方案

(function() {
    var s = 0;
    var arr = [1, 2, 5, 10, 20, 50, 100];
    function sum(n, k) {
      s++;
      var num =0;
      if(n === 0) return 1;
      if(n < 0)return 0;
      for(let i = k||0 ; i< arr.length; i++) {
        num += sum(n-arr[i], i);
      }
      return num;
    }
    console.log(sum(100));
    console.log(s);
  }())

HTTP状态码知道哪些？

100 Continue 继续，一般在发送post请求时，已发送了http header之后服务端将返回此信息，表示确认，之后发送具体参数信息
200 OK 正常返回信息
201 Created 请求成功并且服务器创建了新的资源
202 Accepted 服务器已接受请求，但尚未处理
301 Moved Permanently 请求的网页已永久移动到新位置。
302 Found 临时性重定向。
303 See Other 临时性重定向，且总是使用 GET 请求新的 URI。
304 Not Modified 自从上次请求后，请求的网页未修改过。
400 Bad Request 服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求。
401 Unauthorized 请求未授权。
403 Forbidden 禁止访问。
404 Not Found 找不到如何与 URI 相匹配的资源。
500 Internal Server Error 最常见的服务器端错误。
503 Service Unavailable 服务器端暂时无法处理请求（可能是过载或维护）。

哪些性能优化的方法

（1） 减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存 ，图片服务器。
（2） 前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数
（3） 用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。
（4） 当需要设置的样式很多时设置className而不是直接操作style。
（5） 少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。
（6） 避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)。
（7） 图片预加载，将样式表放在顶部，将脚本放在底部 加上时间戳。

html 中有几种

  1. px 代表像素, 像素px是相对于显示器屏幕分辨率而言的
  2. em 代表相对长度单位, 相对于当前对象内文本的字体尺寸。
    同时: em 的值并不是固定的; em 会继承父级元素的字体大小。当父元素的字体为 1.6em 时, 其子元素的字体大小应为 1em
    默认情况下: 1 em = 16 px
  3. rem 是CSS3新增的一个相对单位, 设置大小时只相对于 html 根元素, 而不会逐层传递

闭包问题及什么是闭包

函数的作用域链( scope chain ) 只在被定义时被确定, 而不是在被执行的作用域中, 保持作用域链的过程就是闭包( closure )

17年阿里实习笔试 捕获页面上有所ajax请求

我本来找到篇博客讲的是 jquery 的 ajax 请求如何重写方法, 巴拉巴拉, 在这里
后来发现 jquery 的 ajax 有 Global Ajax Event Handlers api
原生的ajax不太容易, 搜了一圈才弄明白, 跟博客内封装ajax请求一样, 自己还是太弱了...这里

GET和POST的区别

GET 通过地址栏传输, POST 通过报文传输。
GET 参数有长度限制( 受限于浏览器 url 长度限制), 而 POST 无限制。
GET 产生一个 TCP 数据包; POST 产生两个 TCP 数据包( firefox 只发送一个)。
GET 直接发送 TCP 数据, POST 先发送一个 header, 当服务器响应 100 响应码时, 客户端再继续发送数据。
GET 用于获取数据, POST 用于修改数据。

函数声明语句和函数定义表达式

#function
##Function declaration statements

function funcname({arguments}) {
    // return some statements
}

##Function definition expressions

var funcname = function({arguments}) {
    // return some statements
}

Function declaration statements may only appear at the top level of the funtion they are nested within.That is, function definitions may not appear within if statements, while loop, or any other statements.
The function declaration statement also declares the function name as a variable and assigns the function object to it. Like variables declared with var, functions defined with function definition statements are implicitly "hoisted" to the top of the containing script or function, so that they are visible throughout the script or function. With var, only the variable declaration is hoisted—the variable initialization code remains where you
placed it.
Both the function name and the function body are hoisted: all functions in a script or all nested functions in a function are declared before any other code is run. This means that you can invoke a Javascript function before you declare it.
Like the var statement, function declaration statements create variables that cannot be deleted. These variables are not read-only, however, and their value can be overwritten

box-sizing常用的属性有哪些

box-sizing: content-box|border-box|inherit;
content-box:宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框(元素默认效果)。
border-box:元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。元素宽度 = width + margin-left + margin-right; 元素高度 = height + margin-top + margin-bottom;

洗牌算法 

const MySwap = function(x, y, num) {  
  let temp = num[x];  
  num[x] = num[y];  
  num[y] = temp;  
}  
  
const Shuffle = function(num) {  
  let rand;
  // time: o(n)
  for(let i=num.length-1; i>=1; i--) {  
    rand = Math.round(Math.random()*(i));
    MySwap(i, rand, num);  
  }  
  return num;
} 

let b = new Array(2000);
for(let i = 0; i< b.length; i++) {
   b[i]=i;
}
console.log(Shuffle(b));
console.log(b);

Function.prototype.bind() 

Function.prototype.bind = function (oThis) {
    if (typeof this !== "function") {
      throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");
    }

    var aArgs = Array.prototype.slice.call(arguments, 1), 
        fToBind = this, 
        fNOP = function () {},
        fBound = function () {
          return fToBind.apply(
              this instanceof fNOP && oThis ? this : oThis || window,
              aArgs.concat(Array.prototype.slice.call(arguments))
          );
        };
    // (function(){}).prototype ===fToBind;
    fNOP.prototype = fToBind.prototype;
    // function.bind(/* sob */).prototype === new fToBind;
    fBound.prototype = new fNOP();
    return fBound;
  };

两个div如何并排

  1. float
    float 使 div 变为浮动布局, 需要清除样式转回流式布局
    float 浮动样式清除,
    1.1父元素加after伪元素, 设置display: block; clear:both; content: "";
    1.2父元素设置: overflow: auto; zoom: 1; ( zoom 兼容IE6/7)
  2. inline-block
    块级内联样式, 设置元素大小后, 元素内容不会影响元素大小

null和undefined的区别

null是一个表示非对象，转为数值时为0；undefined是一个表示"无"的原始值，转为数值时为NaN。
undefined：
（1）变量被声明了，但没有赋值时，就等于undefined。
（2) 调用函数时，应该提供的参数没有提供，该参数等于undefined。
（3）对象没有赋值的属性，该属性的值为undefined。
（4）函数没有返回值时，默认返回undefined。
null：
（1） 作为函数的参数，表示该函数的参数不是对象。
（2） 作为对象原型链的终点。

我觉得以上解释是错误的...
undefined 代表未定义, 未预料的的空值, null 代表预料内的, 正常的空值, 赋值给变量和对象的属性, 以及给函数入参时, 应该选择 null

this 对象

this 的指向全局 window 对象, 在严格模式下总是返回 undefined。
在函数内部调用时, 指向直接调用者。
用new 关键字声明的函数中, 指向新产生的对象。
在事件绑定中, 指向被绑定的元素。

作用域

setTimeout作用域及promise作用域

行内元素和块级元素

行内元素: 会在水平方向排列，不能包含块级元素，设置 width 无效, height 无效(可以设置 line-height )，margin 上下无效, padding 上下无效。
块级元素: 各占据一行, 垂直方向排列, 从新行开始结束接着一个断行。
兼容性行内块级元素: display: inline-block; *display: inline; *zoom: 1;

阿里模拟笔试undo-redo简单实现

思路是用链表去存上一步和下一步, 实现起来很简单

(function () {
  const doc = document
  // 链表存取上一步下一步, 和当前状态
  let chain = {
    'lastNode': null,
    'active': null,
    'nextNode': null
  }
  // 删除这个动作对链表做的操作
  const delActive =  function (lastNode, active) {
    const delNode = {
      'lastNode': lastNode,
      'active': active,
      'nextNode': null
    }
    // 绑定上个节点的下个节点
    if(lastNode!= null)
      lastNode.nextNode = delNode
    return delNode
  }
  // 绑定删除操作
  const handleDel = function(srcNode) {
    const active = {}
    const nextActive = {}
    const topNode = srcNode.parentNode.parentNode
    // 保存当前状态
    active.payload = topNode.innerHTML.trim()
    // 删除所选列
    topNode.removeChild(srcNode.parentNode)
    // 保存下一状态
    nextActive.payload = topNode.innerHTML.trim()
    // 链表保存当前动作
    chain = delActive(chain.lastNode, active)
    // 链表的下一节点
    chain.nextNode = delActive(chain, nextActive)
    // 移动节点
    chain = chain.nextNode
  }
  const handleUndo = function(ulNode) {
    if(chain.lastNode !== null){
      chain = chain.lastNode
      ulNode.innerHTML = chain.active.payload
    }
  }
  const handleRedo = function (ulNode) {
    if(chain.nextNode !== null){
      chain = chain.nextNode
      ulNode.innerHTML = chain.active.payload
    }
  }
  doc.addEventListener('click', function (e) {
    const srcNode = e.srcElement
    const ulNode = document.getElementById('J_List')
    if(srcNode.className === 'user-delete') {
      handleDel(srcNode)
    }
    if(srcNode.className === 'undo') {
      handleUndo(ulNode)
    }
    if(srcNode.className === 'redo') {
      handleRedo(ulNode)
    }
  })
})()

完整的答案下面:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <!--code here-->
  <title>demo</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }
    
    .head, li div {
      display: inline-block;
      width: 70px;
      text-align: center;
    }

    li .id, li .sex, .id, .sex {
      width: 15px;
    }

    li .name, .name {
      width: 40px;
    }

    li .tel, .tel {
      width: 90px;
    }

    li .del, .del {
      width: 15px;
    }

    ul {
      list-style: none;
    }

    .user-delete {
      cursor: pointer;
    }

  </style>
</head>

<body>
  <div id="J_container">
    <div class="record-head">
      <div class="undo">撤销</div>
      <div class="redo">恢复</div>

      <div class="head id">序号</div><div class="head name">姓名</div><div class="head sex">性别</div><div class="head tel">电话号码</div><div class="head province">省份</div><div class="head">操作</div>
    </div>
    <ul id="J_List">
      <li><div class="id">1</div><div class="name">张三</div><div class="sex">男</div><div class="tel">13788888888</div><div class="province">浙江</div><div class="user-delete">删除</div></li>
      <li><div class="id">2</div><div class="name">李四</div><div class="sex">女</div><div class="tel">13788887777</div><div class="province">四川</div><div class="user-delete">删除</div></li>
      <li><div class="id">3</div><div class="name">王二</div><div class="sex">男</div><div class="tel">13788889999</div><div class="province">广东</div><div class="user-delete">删除</div></li>
    </ul>
  </div>

<script>
// 此处也可换成ES6的写法
function Contact(){
    this.init();
}
  
// your code here 

(function () {
  const doc = document
  let chain = {
    'lastNode': null,
    'active': null,
    'nextNode': null
  }
  const delActive =  function (lastNode, active) {
    const delNode = {
      'lastNode': lastNode,
      'active': active,
      'nextNode': null
    }
    if(lastNode!= null)
      lastNode.nextNode = delNode
    return delNode
  }
  const handleDel = function(srcNode) {
    const active = {}
    const nextActive = {}
    const topNode = srcNode.parentNode.parentNode
    active.payload = topNode.innerHTML.trim()
    topNode.removeChild(srcNode.parentNode)
    nextActive.payload = topNode.innerHTML.trim()
    chain = delActive(chain.lastNode, active)
    chain.nextNode = delActive(chain, nextActive)
    chain = chain.nextNode
  }
  const handleUndo = function(ulNode) {
    if(chain.lastNode !== null){
      chain = chain.lastNode
      ulNode.innerHTML = chain.active.payload
    }
  }
  const handleRedo = function (ulNode) {
    if(chain.nextNode !== null){
      chain = chain.nextNode
      ulNode.innerHTML = chain.active.payload
    }
  }
  doc.addEventListener('click', function (e) {
    const srcNode = e.srcElement
    const ulNode = document.getElementById('J_List')
    if(srcNode.className === 'user-delete') {
      handleDel(srcNode)
    }
    if(srcNode.className === 'undo') {
      handleUndo(ulNode)
    }
    if(srcNode.className === 'redo') {
      handleRedo(ulNode)
    }
  })
})() 
</script>
</body>
</html>

三栏布局

三栏布局及类似固定加百分比布局
常用方案:

.div_left {
  float: left;
  width: 100px;
}
.div_center {
  margin: 0 100px;
}
.div_right {
  float: right;
  width: 100px;
}

//TODO: other project

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.