发布于

ES6常用Feature

Post Views: 216

1.数组去重,一行

array = Array.from(new Set(array)) //new Set返回的是个对象,需要from生成数组.

2.数组操作

  • 克隆数组：const arr = [...arr1]
  • 合并数组：const arr = [...arr1, ...arr2]
  • 拼接数组：arr.push(...arr1)
发布于

面试过程中被问到,项目中遇到的难题,或者有什么说的整理.

Post Views: 414

1.富文本编辑器, div contenteditable. + document.execelCommand.

光标问题,

  • div contenteditable嵌套,删除末尾的光标消失.处理方法,加一个image 1宽1高标签.但是又扯到后端返回值和数据校验问题,因为有个修改提示功能,要对比初始数据和改动数据是否一样,这个问题又扯到IE和chrome对于空格的处理不同.同样一段html,解析出来不一样.解析的原因是会将编辑好的文档传给后端,进入页面要解析这堆html和样式.
  • IE兼容问题,比如失焦事件需要手动触发.IE自动定位滚动到赋值的位置,开始用的scrolltop=0,但是画面撕裂,后来用先hide,赋值后,blur,再显示搞定.

    (3.先display:none 隐藏元素，然后对该元素进行所有的操作，最后再显示该元素。因对display:none的元素进行操作不会引起回流、重绘。IE中甚至可以让默认blur事件失效)

  • 整个结构是,wangEditor第三方基础组件源码(有改造,基础用excelCommond实现)–>richEditor封装一个基础输入框,配置项,change,blur事件处理.校验处理,第三方组件没有校验功能,show,hide,setContent,getContent,setText,getText->reminderEmail整个子组件,更加复杂,里面还有个联动时间计算处理校验规则以及切换页面时校验是否有改动的校验。对比后台数据，解析数据，以及页面数据。->外层还有个emailList,因为reminderEmail可以实时增删改,所以还有个List处理.->外层还有总控制的.包含另外一个部分.

继续阅读“面试过程中被问到,项目中遇到的难题,或者有什么说的整理.”

发布于

面试题整理,人手不足要批量面试些外包人员.整理一些题出来

Post Views: 209

1.先聊聊都做了什么项目,负责了什么内容的开发,开发了什么组件,什么模块,什么功能.根据简历聊.

  • 遇到过什么难题?
  • 怎么解决的?

恶趣味。为什么0.1+0.2不等于0.3.。。。。PS：十进制整数转二进制方法：除2取余；十进制小数转二进制方法：乘2除整。0.1的二进制是二进制无限循环小数。bignumber.js

//基础知识

2.谈谈过去开发中的代码规范,自由发挥,主要是对项目,对JS,CSS,结构的规范.如何使代码清晰,易维护

-驼峰命名,class,变量,类名,代码复用

-html,css,js,vue相关的.Eslint,

组件封装

谈谈IE兼容问题.如果说不上来就先跳过.

继续阅读“面试题整理,人手不足要批量面试些外包人员.整理一些题出来”

发布于

理解闭包

Post Views: 267

首先JS函数运行会有一个作用域，全局作用域

函数执行会有一个本地作用域。函数作用域

作用域，作用域就是一套规则，用于确定在何处以及如何查找变量（标识符）的规则。通俗的讲，作用域就是查找变量的地方。

从本地查不到到全局查，这种称为作用域链。

闭包就是访问并保留自身外的作用域对象的函数。

发布于

原型和原型链

Post Views: 189

其他地方都好理解，就这里，十分有意思，Object()是由Function.prototype创建，但是他由继承自object.prototype.由Object()创建。那么到底谁先谁后，鸡蛋问题。先有鸡还是先有蛋。那么答案是什么呢？

先说答案，万物皆对象不准确，应该说万物皆Function创建。不过有个内置的object.prototype.

继续阅读“原型和原型链”

发布于

Vue自定义命令,实现捕获点击对象外部事件处理.

Post Views: 664

Vue一直有个问题就是,像JQuery这种处理下面这行代码的时候可以直接获取html,body之类的DOM对象.但是Vue的组件没办法这么做.

$('html').click(function() {
      $('.nav-dropdown').hide();
});

常见场景是,下图这样一个下拉框,要点击空白处去隐藏就非常难做.

解决方法就是,添加自定义指令

Vue.directive('click-outside', {
  bind: function (el, binding, vnode) {
    el.clickOutsideEvent = function (event) {
      // here I check that click was outside the el and his childrens
      if (!(el == event.target || el.contains(event.target))) {
        // and if it did, call method provided in attribute value
        vnode.context[binding.expression](event);
      }
    };
    document.addEventListener('click', el.clickOutsideEvent);
  },
  unbind: function (el) {
    document.removeEventListener('click', el.clickOutsideEvent);
  },
});

使用方法v-click-outside=’closeEvent’

<ul class="nav-list" v-click-outside='closeEvent' v-show="showList">
            <li v-for="item in menuList" :key="item.title" v-on:click="item.isShow = !item.isShow" >
                <router-link :to=item.href>{{item.title}}</router-link>
                <!-- 有子菜单的 -->
                <ul class="nav-dropdown" v-if="item.dropDown" v-show="item.isShow">
                  <li v-for="subTitle in item.dropDown" :key="subTitle.title">
                    <router-link :to=subTitle.href>{{subTitle.title}}</router-link>
                  </li>
                </ul>
            </li>
          </ul>


—-

methods: {
      backHome: function () {
        this.$store.commit("viewState/updateView", "home");
      },
      closeEvent:function(event){
        // console.log('close event called');
        this.menuList.forEach(function(value,key,arr){
          value.isShow=false;
        });
        // this.showList=false;
      }
    }

类似这样.

还有就是使用插件,但是感觉略麻烦.而且其实一般不想引入太多包。管理起来好麻烦。

https://github.com/ndelvalle/v-click-outside