前端每周学习分享--第2期
1. 项目工具相关
1.1. ESLint代码检测工具
ESLint属于一种QA工具，是一个ECMAScript/JavaScript语法规则和代码风格的检查工具，可以用来保证写出语法正确、风格统一的代码。
ESLint旨在完全可配置，它的目标是提供一个插件化的javascript代码检测工具。
1.2. nginx
Nginx 是俄罗斯人编写的十分轻量级的 HTTP 服务器,Nginx，它的发音为“engine X”，是一个高性能的HTTP和反向代理服务器，同时也是一个 IMAP/POP3/SMTP 代理服务器。
Nginx 以事件驱动的方式编写，所以有非常好的性能，同时也是一个非常高效的反向代理、负载平衡。其拥有匹配 Lighttpd 的性能，同时还没有 Lighttpd 的内存泄漏问题。
1.3.docker
Docker 是一个开源的应用容器引擎，实现了应用程序的带环境安装。Docker 将应用程序与该程序的依赖，打包在一个文件里面，属于 Linux 容器的一种封装。
1.4. Mock.js
生成随机数据，拦截Ajax 请求。 使前后端分离， 让前端攻城师独立于后端进行开发。 增加单元测试的真实性. 通过随机数据，模拟各种场景。
1.5. Fly.js
一个支持所有JavaScript运行环境的基于Promise的、支持请求转发、强大的http请求库。可以让您在多个端上尽可能大限度的实现代码复用。
引入之后，可以对fly实例进行全局配置、添加拦截器、发起网络请求。
1.6.webpack
2.阅读列表
2.1.从开发环境到vue框架
之前学习使用vue的时候，看视频和文档，大都是用简单的单文件demo练习，实际开发环境中总是会使用到npm、脚手架、eslint、babel等，开发中也会用到一些东西，比如vue-router、mock、字体文件、CSS预处理器、组件库。
npm是jacascript包管理工具，作用就和python的pip差不多，可以下载、上传包，自动解决依赖。
安装好npm之后，就可以方便的下载其他东西。
脚手架工具用于搭建一个项目的基本环境，如：目录结构、本地调试、代码部署、单元测试、热加载（文件改动后，以最小的代价改变页面相应的区域）。
脚手架工具有webpack、vue-cli、create-react-app、yoman，网上也有很多自建脚手架的教程。npm init的时候可以指定脚手架工具，或者使用npm install安装相应的脚手架后使用脚手架的命令。
脚手架工具搭建好的项目中，一般会安装有eslint、babel。eslint用于检测js代码，常用于统一代码风格（风格不符合配置的规则就会报错提示）。babel可以将ES6代码转换成ES5代码使其能在不支持ES6的浏览器上工作，这样就可以放心的使用ES6开发了。
2.2.commitlint+husky规范commit 日志
在团队协作开发时，定义一个commit信息的规范，在commit时自动检查是否符合规范，并提示修改。
2.3.在小程序、mpvue中使用flyio发起网络请求
Fly.js 一个基于Promise的、强大的、支持多种JavaScript运行时的http请求库。它使得我们可以使用一份http请求代码在浏览器、微信小程序、Weex、Node、React Native、快应用中都能正常运行。
3.代码
3.1. [{},{},...]复制数组并在{}中增、删、改字段
增、改b = c.map((item,index)=>({...item,html1:"4444"}))
3.2. 自定义组件与插槽（小程序）
父组件通过 Prop 向子组件传递数据，通过插槽向子组件传递内容。
插槽：用于父组件向子组件传递node节点，在子组件中开一个槽<slot></slot>，父组件可以向这个槽中插入东西（元素、组件）。
使用name在子组件中声明一个具名插槽：
<slot name="up"></slot>
在父组件中使用slot属性讲元素插入相应的插槽。
<div class="tmpl" slot="up">
<span>菜单1</span>
<span>菜单2</span>
<span>菜单3</span>
<span>菜单4</span>
<span>菜单5</span>
<span>菜单6</span>
</div>
作用域插槽： 用于子组件向父组件传递数据
（下述例子是匿名插槽）
在子组件中为插槽绑定了数据:
<slot v-bind="slotData"/>
在父组件中使用数据：
<Child>
<h1 slot-scope="abc">{{ abc.msg }}</h1>
</Child>
3.3. 遍历
-
while 、 for
-
for...of 对可迭代对象，迭代属性值
-
for...in 以任意顺序 迭代属性名称
下面是数组特有的一些遍历方法
- forEach()
- map() 会返回处理后的新数组
- reduce()
- filter() 返回符合条件的数组
- every()
- some()
3.4. 微信小程序自定义组件
3.5. 给子组件传参，并用参数设置样式
设置样式的properties（一般取String），父组件传入后，子组件设置到相应元素的style属性中去。
