js基础知识罗列

let 和 const 的区别

谈谈async和await这两个关键字

es6新增的数组的方法

rem的显示原理，移动端的rem设置方案

hash模式和history模式

npm和yarn的区别

splice和slice的区别

节流函数和防抖函数

for循环中的跳出

写出add(2)(5)的函数实现

以下代码的输出结果是什么？

1
2
3
4
5
6
7
8
9
10
11
12
13
function fun(n,o) {
    console.log(o);
    return{
        fun:function(m){
            return fun(m,n);
        }
    }
}
var a = fun(0);
a.fun(1);
a.fun(2);
a.fun(3);
var b = fun(0).fun(1).fun(2).fun(3);

说说Code Splitting

js有哪些数据类型？

!和!!的区别

!==和!=的区别

===和==的区别

vuetoast组件怎么解决多次调用问题？组件怎么挂载到全局？

手写webpack和一个vue组件

输出 0&&1,1&&1,1<2&&3>4,1<2&&0,-1&&3<4,0&&3<4,-0&&3<4的结果

0,1,false,0,true,0,-0

输出’1’ + 2 + 3,1 + ‘2’ + 3， 1 + 2 + ‘3’,1 + ‘a’,1 + Number(‘a’)的结果

1
"123","123","33","1a",NaN

typeof,intanceof分别代表什么？

vue计算属性的实现原理

如果让你手写一个类似vue的框架，你有什么思路？

ts有没有用过？

箭头用CSS来书写

关键字有哪些？

全局变量和函数有哪些？

0/0,1/0,-1/0的结果是什么？

1
NaN,Infinity,-Infinity

-0==0,-0===0的结果是什么？

用hexo搭建自己的博客并免费发布至github空间

具备以下环境

  1. git已安装
  2. node已安装

具体步骤

  1. 电脑上创建放置博客的文件夹

  2. 打开git bash终端，全局安装hexo-cli依赖

1
npm install hexo-cli -g
  1. 在放置博客的文件夹的位置执行如下命令，此命令的执行会从github上克隆下来博客模板项目并安装上相应的依赖包。
1
2
3
4
hexo init
``` 

4. 本地查看博客效果，执行以下命令

hexo serve

1
2
3
4
5
6

5. 在github官网上[https://github.com](https://github.com)注册自己的账号，注册的时候需要注意留自己可以登录的邮箱注册，通常很多信息会发送到这个邮箱里。注册账号给自己设定一个用户名，如：shelly0702

6. 注册完成后登录，进入主页，点击右上角new repository，输入与自己用户名一致的 Repository name，如：shelly0702.github.io。请注意这里的命名一定需要时username.github.io形式。

7. 创建完成后，克隆项目下来致本机，此时里面的内容可能是空的。在前面自己用hexo创建的项目目录中执行如下命令。

hexo g

1
2
3
4
5
6
7
8

8. 命令执行完成后，将public文件夹下的所有文件拷贝至空项目中。然后git提交计推送至github，过一会儿访问https://username.github.io 例如：[https://shelly0702.github.io](https://shelly0702.github.io/)搞定！

9. 如果觉得第7、8两个步骤比较麻烦啰嗦，你也可以继续往下看步骤。

10. 直接将hexo初始化的项目放置于 https://github.com/username/username.github.io.git的master分支下 例如 https://github.com/shelly0702/shelly0702.github.io.git的master分支

11. 接下来需要配置项目中的_config.yml文件里的deploy配置项。具体配置如下，格式须严格按照如下配置示例进行

deploy:
type: git
repo: https://github.com/username/username.github.io.git
branch: pages

1
2

12. 在项目中安装插件，命令如下

npm install hexo-deployer-git -save

1
2

13. 在项目中跑如下两行命令，hexo g代表在本地生成静态文件，hexo d代表将生成的静态文件提交推送至pages分支中。等待deploy完成，再去github上查看源码发现pages分支里自动生成了静态页面文件。访问https://username.github.io 例如：[https://shelly0702.github.io](https://shelly0702.github.io/)搞定！

hexo g
hexo d
`

初次使用antdesignpro时对其理解

小小感触

  • 我仅仅只是将antdesignsnpro 初始化了一下项目，这套基于react为基础的开箱即用的脚手架真是惊讶到我了。深深感受到它的确是从实际的项目开发中提炼的精华，并将其整理成大家共用的资源，这对于很多中后台的开发，真是节省的很多时间，减少了很多的重复工作量。
  • 往往我们开始一个项目，需要去搭建脚手架，包含对sass或是less的编译、对es6的编译、对ts的编译、html模块的编译、路由的计划、数据请求的封装、数据流的结构搭建、性能优化的方案考虑、编码规范等。
  • 简单的瞄了一下Antdesign pro初始化出来的项目，这些都已经做好了。甚至包含一个新的项目的基础功能，不，不能说是基础功能，连很多复杂的功能细节全都已经实现好，这真的是开箱即用。产品的确是超级用心，相应的文档也是写的非常详细，然而，对于这么方便的产品，不得不说是超好用，但是它毕竟封装的有点厉害，对于个人成长来讲益处比较少，最终能获得的是快速构建好产品，查看api实现产品的定制化，基于他人的代码进行修改代码，原理完全理解不了，只能拿来用。如果是研究它的源码，收货还是能挺大。
  • 阐述利弊，大概就能知道这个东西到底该去怎么研究了。要研究源码，还是需要从运用层面先下手研究。

使用流程

  1. 用以下命令从GitHub仓库中直接克隆最新的项目模板

    1
    git clone --depth=1 https://github.com/ant-design/ant-design-pro.git my-project

  2. 进入项目目录，安装依赖，启动项目

    1
    2
    3
    cd my-project
    npm install
    npm run start

  3. 接下来就可以借鉴该脚手架的优势之处了

  • 清晰的目录结构，具体可以去官网api查看。https://pro.ant.design/docs/getting-started-cn#%E7%9B%AE%E5%BD%95%E7%BB%93%E6%9E%84
  • 主题颜色可配置化，修改一处，全局变化。src/defaultSettings中的primaryColor
  • 网站布局可配置化。脚手架提供了两种，一种是左右结构，一种是上下结构的。
  • 菜单无需单独配置，只要配置好路由即可生成对应菜单。若是菜单有权限等问题，需要从服务端获取相应的菜单数据。只需要在model/menu中发起请求，返回正确格式的json数据就好。
  • ui组件不仅是视图比较完善且整体风格一致，其中还带有缓和的动态效果交互，已经将体验优化到了一定程度。
  • umi乌米是什么？一个让人开发起来更简单的webpack和路由的结合体，无非就是给你的webpack的初始化参数简化，路由的添加及优化自动化添加。如此当你需要添加一个功能页面时，你可能就只是跑一下umi g user。
  • 布局待理解

n. 感觉比较还可以优化的一些东西

  • 可以将redux中的state状态查看器内置于开发模式中，控制台可直观查看到state更新前和更新后的数据结果，而不需要去手动安装react-developer-tools。
  • 路由跳转为什么有直接router.push(‘/dashboard/anyParams’);是直接push写死的路由，而不是push到以别名来代替的东西，这个如果是多处使用跳转的化，会使代码的维护难道增大。

git相关操作命令

常用的git命令

  • git status 查看仓库状态
  • git add . 提交所有更改
  • git commit -am ‘提交注释’
  • git push 推送所有提交的内容到远程仓库

分支相关命令

  • git branch 查看仓库所有命令
  • git checkout aaa 切换仓库分支
  • git checkout -b aaa 创建aaa分支
  • git push origin aaa 提交aaa分支到远程仓库

切换到某个历史版本的命令

  • git reset –hard fcdc86dd 本地回到fcdc86dd版本
  • git push -f -u origin master 将本地的修改推送至远程仓库，远程仓库此时也会回到fcdc86dd版本

vscode中合并分支。举例：将bbb分支的内容合并至dev分支

  1. 切换至dev分支
  2. 按住ctrl+shift+p出现合并分支的选项，选择bbb
  3. 合并完成后推送至远程仓库

mac中报env: node : No such file or directory此错误的根本原因

此蛋疼的问题很多人碰到，但是并没有从根本上解决问题，建议转发给更多的人，让更多的苦逼程序员知道。

问题场景

当你用mac安装了某个npm包，例如：npm install jdcfe-smock -g后，控制台告诉你已经安装完成。但是你想来用该包的时候，例如：smock -v，却发现总给你报这个错：

1
env: node\r: No such file or directory

一般你在网络上能找到的方案可能以下几种：

1
2
3
1. uninstall and reinstall Node.js
2. execute this command to create a link for node : sudo ln -s /usr/bin/nodejs /usr/local/bin/node
3. set my path with this command : export PATH=$PATH:/usr/local/bin/node

运气好的情况下，上面几种方案可以解决问题，运气不好的情况下，好几天你都搞不定。实际上引起此问题的根本原因在，创建npm包的时候，入口文件里加入了如下代码，并且该入口文件是在windows操作系统中创建的，所以会导致此问题。你可以联系该npm包的发布者，告诉他，让他在mac中创建此文件，然后发布一遍。此问题便能解决所有mac使用该包的报错问题。你自己的电脑只需要重新更新一下该作者新发布的包，就无需按照网络中的各种方案去尝试了。也不用靠运气去解决该问题了。

1
#!/usr/bin/env node

当你联系npm包发布者时，发布者也有可能回复没有mac，那这种情况就只有呵呵了……
所以作为npm包的发布者，如果你看到了此文章，你需要注意自己的入口文件是否是在mac中创建的，不然你可能坑了很多mac用户。

前后端协同开发利器-SMock

相信所有人在开发实践中都会去摸索怎么来提高前端开发效率，怎么提高前后端协同的默契度。本文会给大家介绍这一摸索过程及其中的一个小成果SMock，让大家在摸索过程中少走弯路。

开发背景

项目时间紧、业务复杂、任务重，大概所有人都会碰到这种项目，这种情况不会允许你有丝毫怠慢。所以前后端并行开发，在并行过程中有这样一种场景：后端数据服务还并未开发完成，我们却已经将所有页面重构及基本交互完成，此时我们不能就此等待后端的开发完成，这样是多么浪费生命。我们会根据后端的接口文档自己模拟数据来支撑我们做一些数据交互的开发，但是模拟数据这一步骤在针对一个有上百个接口的项目中是一个超级大的工程，并且枯燥无味无内涵。

当前解决方案

方案一： 乖乖的将所有模拟数据及模拟数据路径自己手动敲出来，我猜你肯定不会这么傻干的；

方案二： 采用网络中模拟数据平台如mocky，但在这样的平台上还是会有很大的复制粘贴的工作量，并且生成的模拟数据路径是随机生成的，你还得去生成两套数据请求路径；

方案三： 也有模拟数据平台可以解决随机生成的路径问题，如easy-mock，这种平台对于你的数据及请求路径做到了可持久化。但是这样的平台一般都会需要注册登录权限，甚至需要配置数据库，那么你的模拟数据及数据路径就将会放置于别人的服务中。这个操作过程本身就很复杂，同时你放心这么干吗？数据放置于他人服务里，安全吗？

“所以SMock来了”，为了减少这个模拟数据阶段的开发成本，提高开发效率，SMock的目标产生了。它需要解决的具体问题就是将模拟数据批量自动产生，并让这些模拟数据置于可访问的服务中，这样就解决了当前开发的一些症结，不需要手动书写模拟数据，不需要用他人的模拟数据平台服务。SMock将会消除掉上面几个方案的弊端，让你开心快乐放心的工作。

Swagger与SMock

前面提到后端将接口文档给到前端，他们是以Swagger的文档形式提供给前端的。有人要问，Swagger是什么？那么且听我先给大家介绍下Swagger。
Swagger是SMock的好伙伴，SMock需要依赖于它。官方表示：Swagger 是一个规范和完整的框架，用于生成、描述、调用和可视化 RESTful 风格的 Web 服务。总体目标是使客户端和文件系统作为服务器以同样的速度来更新。文件的方法，参数和模型紧密集成到服务器端的代码，允许API来始终保持同步。可以用于接口文档的在线自动生成，还可用于功能测试。在和我们合作的后端部门中，我们常常会推荐他们使用Swagger。主要是太好用了，比硬生生编写的WORD文档或者是PDF要好很多，我专门列了一下它的优势。

  • 可以随时同步后端人员的修改;
  • 接口格式统一；
  • 方便测试接口；
  • 参数及参数规则清晰；
  • 接口内容直观；

上个图给大家感受下：

Swagger可视化界面

有了后端人员的Swagger文档，SMock便可以发挥它的作用了：分析Swagger文档数据，生成mock数据，启动mock服务。服务置于本地，不用担心数据泄露。如此，项目便可以快速的进行数据交互开发了。

细述SMock

前面的描述是不是还是不太知道SMock到底是个什么鬼？先一句话概括下吧，SMock是基于Swagger的自动化mock数据平台。然后跟着我的自问自答了解下它具体是什么。

SMock能干什么？

  • 对Swagger文档进行数据抓取并转为mock数据

后端给到前端的是Swagger文档，我们要模拟数据的话，需要将Swagger文档里所给出的信息变成前端需要的数据。SMock可以自动化这个过程，对Swagger文档的数据进行抓取。下图是SMock将数据抓取后处理后的结果。

SMock能干什么

  • 启动本地服务器

在创建了mock数据的基础上，SMock同时启动了mock数据的服务，以便本地开发中可以访问。这个本地的服务就替代了前期的后台服务无法支撑我们进行数据交互层开发的等待期，而后期后台服务真正开发完成后，又能很快的衔接上，不需要修改接口路径。

  • 生成接口聚合文件

通常一个项目会涉及到几十甚至几百个接口，如果是手动去写入咱们的项目中是不是感觉也是个工作量不小的的事情？而SMock会帮我们自动生成所有接口路径的聚合文件，这个文件可以直接让我们运用于项目开发中，甚至还可以指定该文件的生成位置，连拷贝工作都可以帮我们省掉。下图中是生成的所有接口路径的部分截图，其中红框框起来的便是我们切换模拟数据接口和真实数据的开发，简单来说就是通过浏览器的访问路径中是否有“debug”字样来切换。

urlsReal.js

  • 接口数据校验

当我们在项目中使用SMock后，SMock还会帮我们对接口访问的正确性进行校验。具体校验的内容有：

  1. 验证路径及接口类型是否有误，如果有误便无法访问数据
  2. 验证入参的完整性。如果少一个必输参数，将返回错误的信息
  3. 验证入参内容格式正确性。参数类型如果不正确，将会返回错误的信息

SMock有什么优势？

  • 使用简单，配置一至两个参数即可使用
  • 随用随启动，控制方便，无权限限制
  • mock了数据的同时将服务也开启
  • 减少手动书写代码工作量
  • 可以让前端前期的数据环境更接近真实环境，让后期切换真实环境更方便
  • 一次聚合所有接口，方便项目接口路径统一管理
  • 小而美，专注解决定向问题，没有鸡肋功能在其中

SMock怎么用？

用以下三步便可开启SMock之旅。

第一步：将SMock模块安装至Node环境中

1
npm install jdcfe-smock -g

第二步：初始化SMock.json的参数，也就是访问Swagger文档的相关参数

1
smock init

第三步：生成mock数据，启动mock服务

1
smock run

第四步：项目中使用接口请求即可有返回数据

1
http://127.0.0.1:3000/api/xxxx

关于第二步更详细的参数配置，可移步官网[1]查看相关文档。

SMock的整体流程？

上面细碎的讲了很多，下面来跟着我一起看一下SMock的整体流程。

  1. 研发首先提供自动化的接口文档，推荐使用Swagger，Swagger可以跟随研发接口变化而同步，避免接口信息不同步的情况。
  2. SMock动态从Swagger文档网站抓取所有接口，包括URL，返回数据等。
  3. SMock将抓取到的接口返回数据全部自动创建成JSON文件，并且存储于自定义的目录下。
  4. SMock将所有的接口URL汇总到一个JS文件中，并且根据启动的服务器，动态生成isdebug开关。
  5. SMock根据接口文档中的URL创建接口，并且根据文档内容，返回对应的JSON文件，并且将生成的URL文件创建到对应项目的路径中。
    smock

SMock命名来由？

因为最初是基于Swagger来mock数据，同时我们想到了要让mock数据变得更简单（Simple）。所以我们取了Swagger和Simple的首字母“S”，然后和“mock”拼接在一起，这让人在用到Swagger的时候很容易就能想到这个工具，而我们也会一直保持着让开发变得更简单的初衷继续前行。

SMock的痛点

太依赖于Swagger。然而这个痛点实际上可以转化为一个项目效率提高的催化剂，为什么呢？因为将这个问题克服后可以帮助项目提高整体的开发进度，克服方案就是前端人员可以建议后端去尝试使用Swagger。前面也提到了很多Swagger的好处，这促使大家将传统文档形式的数据接口共享方式改为Swagger文档形式，这种结果会使后端使用起来比较省心，不用总是手动更新WORD文档，同时前端也希望有这种能实时更新并清晰直观统一的文档给到自己。 大家都受用，何乐而不为呢？
当然这个痛点也不会长期持续，后面我们可能还会计划新增支持多种文档格式，还有支持自定义数据等功能。期待我们后续的更新。

项目实战

SMock最初是使用在我们一个项目非常紧急的大型项目中试水。当然也是出自于那个项目，是那个紧急项目促使了SMock的产生。当时该项目工期紧张，前后端并行，并且采用前后端分离的方式。后端很快提供给了我们Swagger文档，大批量的模拟数据全部由SMock完成，并且很完美的在项目中被调用，到后期前后端数据接口联调时，切换开关无缝对接。后面组内的小伙伴们也纷纷开始使用于其他多个合适的项目中。可以说SMock在这些项目的开发效率上起到了很关键的作用，减少了很多mock的成本，提高了人效。

未来规划

SMock虽然是起源于我个人一个想走捷径的念头，但是它后期的稳定及健壮将由我们团队共同来支持，并且现在已经由团队在共同协作维护及完善，感谢这些为之付出的小伙伴们。后续我们还将会提供可用于Webpack配置的插件，让用户的高效方式变得更多元化，同时还提供云端构建能力，让用户无需本地安装。当然最重要的是不仅仅局限于基于Swagger文档，还可以自定义模拟数据、自定义接口等。同时还……不，不能再说了，不然透露的太多了。

广告硬植入

以上介绍有没有让你心动？快快跟着我的脚步去试用起来吧，SMock必将减少你的加班时长。

SMock相关详细使用手册可在官网查看，可使用NPM安装到本地，源码是开源的。如果小伙伴们在使用过程中遇到问题或是有更好的建议可以跟我们联系。

更多精彩内容请关注我们团队的公众账号“全栈探索”。

扩展阅读：

[1] https://smock.jd.com

[2] Github 地址：https://github.com/jdf2e/SMock

[3] NPM主页 https://www.npmjs.com/package/jdcfe-smock

CSS手动书写兼容性样式自动消失了

使用vue+webpack2的技术开发出来的项目，同样的package.json，只是在不同的机器上编译，编译出来的却不一样

看区别

  • 其中一台机器A编译后的css

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    .tab-nav a {
        height: .9rem;
        padding: .31rem 0;
        text-align: center;
        display: block;
        -ms-flex: 1;
        -webkit-box-flex: 1;
        flex: 1;
        color: #8d8c92;
        box-shadow: 0 2px 6px 0 rgba(0,0,0,.06);
    }

  • 另外一台机器B编译后的css

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    .tab-nav a {
        height: .9rem;
        padding: .31rem 0;
        text-align: center;
        display: block;
        -ms-flex: 1;
        flex: 1;
        color: #8d8c92;
        box-shadow: 0 2px 6px 0 rgba(0,0,0,.06);
    }

  • 源码是这样写的

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    .tab-nav a {
    	height: .9rem;
        padding: .31rem 0;
        text-align: center;
        display: block;
        -webkit-flex: 1;
        -ms-flex: 1;
        -webkit-box-flex: 1;
        flex: 1;
        color: #8D8C92;
        box-shadow: 0 2px 6px 0px rgba(0, 0, 0, 0.06);
    }

  • 从上面的编译结果验证，B机器编译出来的是兼容性较差的，所以在项目如果没有添加自动加前缀配置的情况下，我们需要注意编译环境的差异会导致编译结果不同。A机器的编译环境是webpack 2.4.1、node 6.10.1，B机器？？

怎样在h5中判断当前页面所在环境

我们在做h5开发的时候通常会有这样的需求，在APP里或者在微信中展示页面的时候不需要留下咱们页面中自己的HeaderBar，而在浏览器中访问则需要留下，本文介绍具体怎么添加判断所在环境

具体步骤

  • 如果你没有安装jnpm，首先得安装我们部署的私有 npm 库，安装命令如下，如果你已有jnpm，忽略此步骤
    1
    npm install @jd/jnpm -g --registry=http://registry.m.jd.com

  1. 安装工具包

    1
    jnpm install @jmfe/jm-common --save-dev

  2. 引入工具文件

    1
    var common = require('@jmfe/jm-common');

  3. 应用API

  • ①是否在京东

    1
    2
    3
    if (common.isApp('jd')) {
        //TODO
    }

  • ②是否在微信

    1
    2
    3
    if (common.isApp('wx')) {
        //TODO
    }

  • ③是否在qq

    1
    2
    3
    if (common.isApp('qq')) {
        //TODO
    }

  • ④是否在微博

    1
    2
    3
    if (common.isApp('weibo')) {
        //TODO
    }

  • ⑤是否在ios

    1
    2
    3
    if (common.isIOS()) {
        //TODO
    }

  • ⑥是否在android

    1
    2
    3
    if (common.isAndroid()) {
        //TODO
    }

给props属性设置多种数据类型

有时候我们设置props的属性的数据类型可能有多种，比如：数字number或者字符串string

  1. 在vue里，我们可以像如下设置

    1
    type: Number | String

  2. 在react中，我们需要像如下设置

    1
    2
    3
    4
    5
    6
    Input.propTypes = {
        defaultValue:PropTypes.oneOfType([
            PropTypes.string,
            PropTypes.number
        ])
    };