前端每周学习分享--第2期

Posted 2022-01-08 mthz

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

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属性中去。