码农，程序猿，未来的昏析师

两个月的春招算是正式结束了吧，经历也成长了很多，对于几次面试做了一些简单的记录，把能想起来的问题记下来，需要自提。

腾讯（offer已拿）

腾讯一面

• 自我介绍
• 什么是闭包，用处和缺点
• 列表事件绑定（事件委托）
• 如何确定事件委托的元素是点击的元素（target），那如何知道是当前冒泡的元素呢（currenttarget）
• 那如果每个li元素里面还有子元素，如果点击的是子元素怎么办？（parentNode判断类名是否是li的）
• 前端存储（cookie，localstorage，sessionstorage）区别，大小限制
  阅读全文 »

各个章节的总结

• js文件和代码位置尽量放在页面最后
• 减少全局变量，多用字面量和局部变量
• 闭包中经常访问跨作用域对象建议保存在局部变量中
• innerHTML一般优于document.creatElement(),特别是在老浏览器
• 尽量减少使用获取HTML元素集合的方法
• 在老版本浏览器中，使用nextsibling比childNodes（也是HTML元素集合）查找元素快
• 使用新的queryselectAll获取的是数组元素，不是HTML元素集合所以性能消耗会比较少
• 使用获取DOM位置信息的属性或者使用getComputedStyled方法获取计算属性都会触发回流，导致页面的重新计算与排版
• 多次css属性的修改最好使用cssText或者class属性来修改
• DOM的批量修改应当先让元素脱离文档流，在修改，再将元素带回文档流

js文件位置相关

• 由于js的单线程限制，所以尽量将js文件和代码放在body标签之后，避免由于加载执行js代码造成的浏览器假死

vuepress是尤大大4月12日发布的一个全新的基于vue的静态网站生成器，实际上就是一个vue的spa应用，内置webpack，可以用来写文档。恰好最近需要为一些组件写文档，就动手撸了一波，毕竟刚发布，遇到不少坑，最终还是磕磕碰碰的运行起来了，为了避免大家踩同样的坑，特意将搭建的过程记录下来，分享一波。

以下是几个已知的问题

• 因为util.promisify是在node 8.0之后引入的，所以如果你不想像我一样浪费三个小时的时间，请查看并且更新node版本

• 建议不要使用webpack-simple的模板进行试验，否则会各种运行不起来╮(╯▽╰)╭

• 使用cli的模板如果报错TypeError: Cannot read property ‘vue’ of undefined 是因为vuepress内置的webpack的vueloader使用的版本和你本地的不一样，请将本地的版本更新到稳定最新版本

• 当出现安装官方文档部署之后一直跳转到404的情况时，请使用路由的哈希模式来访问

• 如遇到端口冲突等问题，在docs目录下新建.vuepress文件夹，然后新建config配置文件对prot端口项进行配置即可，具体可参照官方文档

• 全局安装之后项目中再安装的话依赖会冲突，引发Module build failed: CssSyntaxError ，建议写在全局的vuepress

  阅读全文 »

• Set的兼容性处理

  • babel只是转换语法但是不转换api

• 实现拖拽

  • 利用mousedown（moveStart） mousemove（moving） mouseup（moved）利用标志位判断是否可以拖动

• jsdomlist转数组

 <!--  一般用此方法转换成数组，但是在IE8及更早版本吧nodelist实现成一个COM对象，不能用js对象的方法，所以IE8之前需要枚举所有对象 -->
Array.prototype.slice.call(someNode.childNodes,0);

<!-- 通用的方法 -->

function convertListToArray(nodes) {
    var array = null;
    try{
        array = Array.prototype.slice.call(nodes,0);
    }catch(ex){
        array = new Array();
        for(var i = 0,len = nodes.length;i < len;i++) {
            array.push(nodes[i]);
        }
    }

    return array;
}

最近在用vue写一个图书馆的项目的时候，因为项目不是很复杂，就没有上vuex，并按照以往的习惯使用global进行全局变量的设置以及管理。按照往常的经验来说，是没有什么问题的。但是万万没想到踩到了自己挖的坑。

1.全局变量的定义以及使用

在vue-cli生成的模板项目中，若觉得项目不是很复杂没有必要使用vuex的话，我们一般会使用一个bus.js或者global.js用来定义变量，将变量挂在在js的gloabl上，然后在入口页面直接import这个文件即可成为全局变量，这样即可实现vuex的全局变量的功能

在gloabl文件中直接定义，定义完成之后再子组件的文件中，直接使用名称进行访问即可，也可以自己写get/set方法来实现变量的管理。

es6相关

模块化

• es6模块化如何使用，开发环境如何打包
  • 使用babel来对新语法进行转化，在项目根目录配置.babelrc文件，使用babel 文件名可进行转换
  • 使用webpack来对模块化进行处理（common.js规范）
  • AMD（掌握）慢慢成为标准，require.js（也有CMD）
  • commonjs标准是后端的
  • es6的出现，想统一现在所有模块化标准
  • es6在nodejs里面可以写，浏览器尚未统一
  • 对模块化统一的期望

Class与js构造函数的区别

• Class和普通构造函数有何区别
  • js的构造函数和原型继承
  • class的属性是不会参加迭代输出的
  • class实际上就是构造函数的语法糖（本质上一样的，只是更加简单了）
  • class本身实际上就是个函数 typeof 是function
  • class必须用new，而构造函数不一定
  • class中是不存在变量提升的
  • class不提供私有方法，都是public
  • static (静态方法可以和非静态方法重名，没有静态属性，只有静态方法) * get set new.target

    对于前端开发的码农们，跨域问题一定不陌生，在我还是个新手时，就曾被跨域问题折磨的欲仙欲死。

    之前项目开发时，使用了CORS（跨域资源共享），虽然对低版本的IE兼容性有一定的限制，但是胜在方便，能轻松的解决跨域问题。今天突然想起这一茬，决定进行一个详细的记录。

    只要协议、域名、端口有任何一个不同，都被当作是不同的域。即在一个域下的js无法访问不同域下的数据对象。这是浏览器出于安全考虑的做法，几乎所有的浏览器都不允许这种跨域访问。所以当你需要访问其他域名的接口时，这个问题就出现了，这也是本文要探讨的问题。

1.jsonp解决方案

工厂模式

function createPerson(age.name){
    var obj = new Object();
	obj.age = age;
	obj.name = name;
	obj.getName = function(){
		return this.name;
	}
	return obj;
}

一直纠结于要不要写博客，直到最近，手头上事情比较少，有些空闲时间来整理这个事情，花了一上午的时间了解了博客相关的信息，最终决定选用hexo+github来搭建自己的博客，整体过程还是比较顺利，但是过程中还是遇到了不少坑，觉得还是很有必要记录一下整个过程的。

1.环境准备

安装Node

• 直接到Node.js官网现在最新版本，一路安装即可

安装git

• 这个网上的教程有很多，直接到官网下载安装并且设置下环境变量即可

GitHub账号和GitHub Pages

• 在自己的GitHub上新建一个仓库（repository），需要注意的是仓库的名称，比如我的账号是ZhuLiangT,那么我的仓库名称就应该是：ZhuLiangT.github.io,创建完成之后直接访问这个地址就是你的个人主页了。

• 添加SSH公钥到『Account settings -> SSH Keys -> Add SSH Key』，步骤如下:

设置你的用户名密码

git config --global user.email "youremail@XX.com"                   
git config --global user.name "yourname"

生成SSH秘钥

取得元素左和上的偏移量

function getElementLeft(element){
    var acLeft = emement.offsetLeft;
    var current = element.offsetParent;
    while(current !== null){
    	acLeft += current.offsetLeft;
    	current = current.offsetParent;
    }
    return acLeft;
}
function getElementTop(element){
	var acTop = element.offsetTop;
	var current = element.offsetParent;
	while(current !== null){
		acTop += current.offsetTop;
		current = current.offsetParent;
	}
	return acTop;
}