前端每周学习分享——第1期

1. 项目工具相关

1.1. npm包管理器

npm是Node.js的包管理工具，用于管理javascript包。
npm由三个部分组成：网站、注册表、命令行工具。
npm太慢，还可以使用淘宝镜像cnpm。
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install 切换到项目目录后下载所有依赖

npm 指令：
npm version
npm install npm@latest -g 给npm项目添加依赖模块
npm [install/i] [package_name]
npm uninstall
npm init webpack my-project
npm list 根据 package.json 查询模块状态
npm run [npm脚本名]

npm与vue:

npm安装vue-cli：npm install -g @vue/cli
使用vue创建一个项目：vue create my-project

package.json 是 npm仓库的描述文件, 其中包括项目依赖, 脚本执行, 版本号，依赖环境等说明.

npm 允许在package.json文件里面，使用scripts字段定义脚本命令。
详见阮一峰npm scripts 使用指南

1.2. git基本操作

git init 初始化仓库
git remote add [-t <branch>] [-m <master>] <name> <url> 从url地址添加远程仓库并命名为name。
git push/pull 远程仓库名 本地分支名:远程分支名 推送、拉取
（如果config配置文件中只有一个远程仓库一个分支，则可以省略指定名字）

git add .添加文件到暂存区(stage)
git commit -m "describ" 将暂存区内容提交到分支
git status
git diff
git log查看提交历史（历史版本）
git log --graph查看分支合并图
git reset --hard HEAD^

git checkout -- benchmarks.rb取消对指定文件的修改
git reset HEAD benchmarks.rb取消已暂存的文件
$ git checkout -b dev 创建并切换到dev分支
git branch 查看当前本地分支
git branch -r 查看远程分支
git branch dev创建dev分支
git branch -d dev删除dev分支
git merge dev合并dev分支到当前分支

git rebase
git stash将工作储藏到栈上，储藏后工作目录是干净的
git stash list 查看储藏列表
git stash apply <储藏名>将储藏恢复到工作区

1.3. git多仓库、多身份

要管理多仓库、多身份，首先就要认识git的配置。
使用git config 配置git,它会修改相应的配置文件。

$ git config --global user.name "John Doe"  
$ git config --global user.email johndoe@example.com
文件位置 git config 选项 生效范围
/etc/gitconfig --system 对系统上所有用户及他们所拥有的仓库都生效
~/.gitconfig --global 对当前用户生效
.git/config --local 对当前仓库有效
使用git config --help 查看所有的可配置项。

一个配置文件的大致格式如下：
gitConfig
给[remote "origin"]设置多个url就可以使用"origin"仓库名同时提交/拉取多个仓库。
如果管理的仓库很多，一个个手动配置比较麻烦，可以利用初始模板+钩子函数+本地配置来做一个git自动化小工具来自动生成配置文件。详见：文章 和 github地址。

1.4. SASS基本使用

Sass css预处理器 文件后缀名.sass

  • 插值 #{}
  • 变量$
    变量需嵌入字符串时，要放在#{}中，如#{$side}
    支持6种数据类型：数字、字符串、颜色、布尔值、空值、值列表
  • 计算
    如：right: $var * 10%;
    颜色运算时分段运算，rgba运算必须alpha相同。
  • 嵌套
    支持选择器嵌套和属性嵌套(-前加冒号)
    如属性border-color可写成：
        sass
    border: {
      color: red;
    }
  • 引用父元素&
  • @extend样式继承
    例如：
    .error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}
  • @mixin混入指令
    混入指令可以定义一个代码段的名称、参数。
    @mixin 名称 （arguments）
    @mixin sexy-border($color, $width) {
  border: {
    color: $color;
        width: $width;
    style: dashed;
  }
}
  • @include 引用混合样式
    p { @include sexy-border(blue, 1in); }

1.5. BEM

BEM是CSS的书写规范。BEM Tencent github wiki
组件之间的完全解耦，不会造成命名空间的污染。
BEM 命名会使得 Class 类名变长，但经过 gzip 压缩后这个带宽开销可以忽略不计。
BEM代表 “块（block）,元素（element）,修饰符（modifier）”。

  • 块
    块的CSS类名会加一些前缀（ ui-），这些前缀在CSS中有类似命名空间 的作用。
    一个块的命名规则如下：
    CSS中只能使用类名（不能是ID）。
    每一个块名应该有一个命名空间（前缀）
    每一条CSS规则必须属于一个块。
  • 元素
    一个块中元素的类名必须用父级块的名称作为前缀。
  • 修饰符
    使用单下划线来连接一个修饰符。

在选择器中，由以下三种符号来表示扩展的关系：

-   中划线 ：仅作为连字符使用，表示某个块或者某个子元素的多单词之间的连接记号。
__  双下划线：双下划线用来连接块和块的子元素
_   单下划线：单下划线用来描述一个块或者块的子元素的一种状态
type-block__element_modifier

1.6. 其他工具

  • cmder
    在windows中使用的Linux终端，开发 必 备。
  • 图床工具
    自动把本地图片转换成网络链接的一类工具，云服务器+一键上传工具。
    使用了图床工具PicGo， 算得上一款比较优秀的图床工具。它是一款用 Electron-vue 开发的软件，可以支持微博，七牛云，腾讯云COS，又拍云，GitHub，阿里云OSS，SM.MS，imgur 等8种常用图床，功能强大，简单易用。
  • markdown编辑器:Typora
    界面清爽，功能齐全，支持图片拖拽。
  • google浏览器插件：Momentum
    Replace new tab page with a personal dashboard featuring to-do, weather, and inspiration

2.阅读列表

3.代码相关

3.1. flex弹性布局

使用display:flex|inline-flex将元素申明为弹性容器，flex是块级，inline-flex是行内。
flex container
属性的global values 有 inherit initial unset，下表近列出Default value

属性 值 意义
flex-direction row column row-reverse column-reverse 决定主轴方向
flex-wrap nowrap wrap wrap-reverse(向上换行) 决定主轴上的换行方式
flex-flow || ; 简写，默认为row nowrap
justify-content start center end space-between space-around strench 主轴上的对齐方式
align-items start center end strench baseline 侧轴上的对齐方式
align-content start center end space-between space-around strench 多主轴间的对齐方式

flex item

属性 值 意义
order 定义项目的排列顺序
align-self auto start center end strench baseline 覆盖容器的align-items属性，决定当前项目的侧轴对齐方式
flex-grow 项目的放大比例，默认0（不放大）
flex-shrink 项目的缩小比例，默认1
flex-basis | auto ; 项目在主轴上的初始大小（基准）
flex flex-grow, flex-shrink 和 flex-basis的简写

3.2. 固定与自适应

需要定长定宽的组件，要考虑内容溢出。
自适应的组件，要考虑子元素变化时组件高宽变化的影响,比如当某些子元素加载后更改了宽高，就会使组件闪烁。
比如常用的单行文本:

    .title{

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

    }

3.3. 去除小程序button组件的边框

因为源码里button的边框不是直接用border实现的。
使用 button::after{ border: none; }
组件边框的实现方法有多种，如border、outline、box-shadow、底层遮罩

3.4.CSS变量

css变量使css更加灵活，能更方便的做响应式布局。

变量表示，sass用$，less用@，官方css用--。
变量的声明：

body {
  --fontColor:gray;
  --bar: "hello ";
}

读取变量，使用var()函数：
变量值只能用作属性值，不能用作属性名

.text{
	color:var(--fontColor,black);
	content:var(--bar)'world'
}
  • 如果变量值是一个字符串，可以与其他字符串拼接。
  • 如果变量值是数值，不能与数值单位直接连用,可用calc()函数来连接。
  • 变量带有单位值，不能写成字符串。
    变量的作用域就是它所在选择器的有效范围，变量多次声明读取时的优先级与css的层叠规则一致。
    js操作css变量
// 设置变量
document.body.style.setProperty('--primary', '#7F583F');

// 读取变量
document.body.style.getPropertyValue('--primary').trim();
// '#7F583F'

// 删除变量
document.body.style.removeProperty('--primary');
posted @ 2019-05-22 16:29  鱼桑燕子梁  阅读(416)  评论(0)  编辑  收藏  举报