sanks的博客

写这篇文章的目的就是告诉前端的同学们，ES6 已经是前端程序员必不可少的技能之一，后期再追加 Typescript 的新语法

关键字 async/await 的应用

1. async function 是 Promise 的语法糖封装
2. 异步编程的终极方案 - 以同步的方式写异步

• await 关键字可以 “暂停” async function 的执行
• await 关键字可以以同步的写法获取 Promise 的执行结果
• try-catch 可以获取 await 所得到的错误

3. 一个穿越事件循环存在的 function

引言

react脚手架并不能直接运用到项目中去，需要改造，自己进行了进一步探索，总结创建项目的心酸历程

创建项目的流程

• npx create-react-app jelly3
  备注：你的环境没有全局安装npx，放心，它会自动安装上并执行创建项目的命令
• cd jelly3 切换到自己创建项目根目录下
• yarn eject
• yarn start 启动项目

引言

开始深入研究reactjs，弥补之前的浅尝辄止；一开始自己用官方的项目生成器生成了一个简单的架构，自己从这个简化版逐步加入babel, webpack, eslint 等相关的配置，有兴趣的朋友可以移步 react的基础之上进行引入webpack、eslint、babel的框架搭建, 但是你仔细阅读react项目下的 READEME.md, 你就会发现我绕了远路，其实react提供了 yarn eject 来注入webpack, eslint, label 等相关依赖和配置，可能这就是react给大家提供的 脚手架 吧

需要注意的是：这个命令只能执行一次，而且不可逆转。

虽说自己饶了远路，但是还是学到些东西的，也温习了一些 webpack，babel 的配置和原理等，想亲自动手，亲自实践的朋友按照如下步骤进行就行，我已经为你们绕过了一些坑
比如：babel 升级 6.x 到 7.x, 请参阅 babel 7.x 和 webpack 4.x 配置vue项目, 如果以下步骤有什么不妥之处，欢迎大家给我评论，我会及时修正并回复大家的问题。

原文链接

作者：ziwei3749
https://segmentfault.com/a/1190000012828382

这篇文章的受众

• 第一类,业务需要,急需知道如何深拷贝JS对象的开发者。
• 第二类,希望扎实JS基础,将来好去面试官前秀操作的好学者。

写给第一类读者

你只需要一行黑科技代码就可以实现深拷贝

1
2
3
4
5
6

var copyObj = {
    name: 'ziwei',
    arr : [1,2,3]
}

var targetObj = JSON.parse(JSON.stringify(copyObj))

此时 copyObj.arr !== targetObj.arr 已经实现了深拷贝

别着急走,利用window.JSON的方法做深拷贝存在2个缺点:

• 如果你的对象里有函数,函数无法被拷贝下来
• 无法拷贝copyObj对象原型链上的属性和方法

引言

好多人都已经用Hexo博客框架搭建了自己的博客，而且也部署到了自己的github上（或者是自己的云服务器上），再简单购买一个域名，让别人也可浏览自己的博客。
但是搭建过程中遇到了好多坑，自己的博客代码上传至自己的github上，但是发现除了主题文件夹下的文件，其他都 push 上去了

而自己本地的主题文件夹是有文件的

探索

大家可能想到是因为.gitignore里面忽略了这两个文件夹下的所有文件，但是经过自己的检查，发现并不是这儿的问题，自己的项目的.gitignore内容如下：

引言

图片资源放在本地 source/ 文件夹后，本地服务器浏览时图片正常显示，但部署到 github 上会找不到图片。

究其原因，是图片路径出现问题。开始时自己在 source/ 文件夹下建了 assets 文件夹，专门用于存放文章相关的图片：

1
2
3
4
5

source
    |- _posts
    |- assets
        |- images
            |- image-1.png

使用 markdown 引用图片的方式为

1

![hexo image](../../assets/images/image-1.png)

查看结构，发现部署以后，图片会自动添加日期相关的文件结构目录：

而实际存放的目录是 http://www.sanks-blog.com/assets/images/image-1.png ，导致图片资源访问不到。

为了解决这个问题查了很多资料，才知道原来除了本地存放图片，还可以使用图床。

引语

在VUE中运用 VUE 指令，发现之前的写法存在问题，刷新页面后报错，先贴代码， 再看报错

1
2
3
4
5
6
7
8

// 权限指令
Vue.directive('has', {
    bind: function (el, binding) {
        if (el.parentNode && !Vue.prototype.$_has(binding.value)) {
            el.parentNode.removeChild(el)
        }
    }
})

只要刷新页面会出现如下问题：

引语

场景：工作中遇到一个数据接口同时依赖于另外两个接口的情况,
需要两个接口返回的数据才能实现进一步操作，下面介绍 3 种方法

首先普及一下promise的一些冷门知识

执行 then 和 catch 会返回一个新的 Promise ，该 Promise 最终状态根据 then 和 catch 的回调函数的执行结果决定

• 如果回调函数最终是 throw ， 该 Promise 是 rejected 状态
• 如果回调函数最终是 return ， 该 Promise 是 resolved 状态
• 但如果回调函数最终 return 了一个 Promise ， 该 Promise 会和回调函数的 reurn 的状态保持一致

利用js回调嵌套的方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

// 异步接口1: 科室列表
function getDepartmentsList(callback){
    //模拟实现
    var departmentList = Math.ceil(Math.random()*1000)
    setTimeout(function(){
        callback(departmentList)
    },Math.random()*1000)
}

// 异步接口2: 级别列表
function getLevelList(callback){
    //模拟实现
    var levelList = Math.ceil(Math.random()*1000)+1000
    setTimeout(function(){
        callback(levelList)
    },Math.random()*1000)
}

//异步接口，列表中科室和级别码转换成对应的中文，需要前两个接口的数据
function registrationList(departmentList,levelList,callback){
    //模拟实现
    var percent = Math.ceil(departmentList/levelList*100)
    setTimeout(function(){
        callback(percent)
    },Math.random()*1000)
}

引语

或许你觉得我这篇文章写的很傻，和无聊，但是我跟你说，即使你从事VUE开发一段时间，也不见得求在一些小问题上所求甚解。

有些人认为的VUE版本检查命令是：

1

vue -V

或者

1

vue --version

如下图

解决方案

从项目的可维护和可扩展性考虑，还是改 element-ui 的源码，是最好的解决方案。
添加了了一个属性 look, 更改了展开行中的图标 ＞，如下图

表头 label 属性，源码本身就支持，用就可以了
用的时候这样用,如下:
改变了之后，变为文字，如下图

用法

1
2

<el-table-column label="操作" type="expand" look="查看">
</el-table-column>

源代码文件夹替换替换

将修改后的 lib 文件夹 替换掉你的 element-ui 中的 lib 文件夹, 路径：node-modules/element-ui
点击下载