前端学习
2018-11-01 本文已影响0人
鸣鸣是你爱吃鱼
常用工具
操作系统
我个人推荐使用mac，其次Ubuntu，再次windows，因人而异。
翻墙工具
项目中很多的第三方包下载、平时查询问题（google）、很多的技术文档大多都是国外的，想办法翻墙。
nodejs
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。
各个操作系统安装方式
- windows mac 直接官网下载安装包进行安装
- linux 通过命令安装，比如安装8.x版本：
curl —silent —location https://deb.nodesource.com/setup_8.x | sudo bash - - 通过nvm管理node：安装切换版本等
前端涉及到的node
如果单纯的进行前端业务开发，几乎不涉及
- 安装依赖npm、yarn等，基于node
- 构建工具webpack等，基于node
- 平时写点脚本、命令行工具
- 使用node进行后端开发
npm、yarn
npm，node安装成功之后，自动安装，yarn，通过sudo npm install yarn -g进行安装，或者其他安装方式
包管理器，下载管理前端工程中的第三方依赖，我们也可以上传自己的包，也可以搭建私服，用于管理部方便开源的代码
IDE
常用IDE有WebStorm(推荐)、Visual Studio、Sublime、Atom，我个人一直使用WebStorm
- 掌握常用设置
- 灵活运用快捷键
Git
版本控制软件，用于管理项目源码，公司使用GitLab(https://about.gitlab.com/)进行代码管理，开源项目一般使用GitHub。公司项目不要上传的GItHub上，公司有检测，会被发现。
常用命令
git add .git commit -m '注释'git push origin master
工具
规范
实际项目中会有一定的git分支管理规范，比较通用的是gitflow，我们有的项目会简化为：master、develop、features
笔记、博客
平常要养成做笔记的习惯，学习、项目中等一些总结要记录到笔记或者博客当中，一些总结的代码，公司无关的可以通过GitHub管理，公司相关的可以通过GitLab管理。笔记推荐有道云笔记，可以写Markdown。博客推荐Hexo
HTML基础
Hyper Text Markup Language
标记语法
标签、属性、属性值、注释
- 开始结束
- <开始/>
- 无论哪种结束方式，必须要结束
- 属性要使用双引号
文档结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords"
content="HTML, DHTML, CSS, XML, XHTML, JavaScript, VBScript">
<meta name="description" content="网站描述">
<meta name="author" content="作者">
<link rel="icon" href="/public/favicon.ico" type="image/x-icon">
<title>Tab Title</title>
<link rel="stylesheet" type="text/css" href="/path/to/xxx.css">
<style>
#root {
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div id="root">
</div>
<script src="/path/to/xxx.js"></script>
<script>
console.log(document.getElementById('root'));
</script>
</body>
</html>
常用标签
- div
- h1 ~ h6
- p
- span
- ul ol li
- form
- table
- a
- img
- canvas
URL
- URL：Uniform Resource Locator（统一资源定位器，俗称：路径）
- 绝对路径
- 相对路径
CSS基础
Cascading Style Sheets
引用方式
- 内联（style属性）
- 内嵌（style标签）
- 引用（css文件）
CSS 规则
规则 = 选择器 + 声明
声明 = 属性 + 属性值
.some-class {
color: red;
}
CSS 注释
/* 我是注释 */
.some-class {
color: red;
}
CSS 常用选择器
最常用的就是class选择器，不要写复杂的CSS选择器
css优先级，自己了解
- class
- id
- tag
- 直接子节点
- 后代
- :before :after
- :active
- :hover
- 属性选择器
CSS 常用属性 及书写顺序
先掌握项目中最长使用的，其他属性慢慢掌握，用到了去查。
┌── 布局定位
| ├── 元素定位
| | └── position...
| └── 元素浮动
| └── float...
|—— 盒子模型
| ├── 盒子类型
| | ├── display
| | ├── 弹性盒子
| | | └── flex...
| | ├── 网格系统
| | | └── grid...
| | ├── 表格模型
| | | └── table-layout...
| | ├── 列表盒子
| | | └── list-style...
| | └── 标注模型
| | └── ruby-align...
| ├── 盒子属性
| | ├── box-sizing
| | ├── 盒子尺寸
| | | ├── width...
| | | ├── height...
| | | ├── padding...
| | | ├── border...
| | | ├── outline...
| | | └── margin...
| | └── 盒子样式
| | ├── color
| | ├── background...
| | ├── background-blend-mode...
| | ├── clip-path
| | ├── mask...
| | ├── filter
| | ├── box-shadow
| | ├── opacity
| | └── visibility
| └── 盒子内容
| ├── 溢出处理
| | └── overflow...
| ├── 垂直对齐
| | └── vertical-align
| ├── 内容分列
| | └── columns...
| ├── 文本渲染
| | ├── 排版模式
| | | └── writing-mode...
| | ├── 文本样式
| | | ├── text-rendering
| | | ├── font-feature-settings...
| | | └── font...
| | ├── 文本控制
| | | ├── text-overflow
| | | ├── white-space
| | | ├── overflow-wrap...
| | | ├── word-break...
| | | ├── text-align...
| | | ├── font-synthesis
| | | ├── font-size-adjust
| | | ├── letter-spacing...
| | | └── text-transform...
| | └── 文本装饰
| | ├── quotes
| | ├── tab-size
| | ├── text-indent
| | ├── text-emphasis...
| | ├── text-decoration...
| | └── text-shadow
| └── 图片元素
| ├── image-rendering...
| └── shape-image-threshold...
|—— 盒子变形
| ├── transform-style...
| ├── perspective...
| └── backface-visibility
|—— 动态效果
| ├── 过渡动画
| | ├── transition...
| | └── animation...
| └── 滚动效果
| └── scroll-behavior...
└── 其他属性
├── 用户行为
| ├── resize
| ├── cursorresize...
| ├── touch-action
| ├── caret-color
| └── ime-mode
├── 元素属性
| └── object-fit
| ├── object-position
| ├── content
| ├── counter-reset...
| ├── will-change
| ├── pointer-events
| ├── z-index
| └── all
├── 定义变量
| └── --*
└── 页面打印
├── page-break-before...
└── widows
CSS 盒模型
content + padding + border + margin
常见布局
布局很多方式，个场景下，选择自己掌握的最佳解决方案。
网上这篇文章挺全
布局练习
- 写一个button
- 百度首页
- 公司导航页
JavaScript基础
数据类型
6种原始类型
- 字符串 String
- 数字 Number
- 布尔 Boolean
- Null
- Undefined
- 符号 Symbol (ECMAScript 6 新定义)
引用类型
Array Function 属于 Object？？？
- 数组 Array
- 对象 Object
- 函数 Function
变量
弱类型，引用！！！
- var 已经不推荐了
- let
- const
运算
- 算数运算 + - * /
- 逻辑运算
&&||!===!==><>==<==
- 位运算 （不常用，不讲）
语句
- if
- for
- while
- switch case
函数
vs 方法，类里面定义的叫方法
函数的各种写法，参数处理
function funcA (a, b) {
return a + b;
}
const funcB = function (a, b) {
return a + b;
}
const funcC = (a, b) => a + b;
onClick={() => {
....
}};
function funcD(a, ...args) {
return a + args[0];
}
function funcE(a, b, c = 3) {
return a + +b +c;
}
对象
注意是引用类型
- 定义
- 取值
- 赋值
- 常用操作
- 深拷贝、浅拷贝
const user = {
name: '张三',
age: 23,
};
const name = user.name;
user.job = '前端';
let attr = 'position';
user[attr] = '前端leader';
const {name, age, job, position} = user;
const user2 = {…user, name: '李四'};
Object.keys(user);
Reflect.defineProperty(user, 'name'); // 不推荐使用delete
数组
注意是引用类型
- 定义
- 取值
- 赋值
-
常用操作
- map、forEach、find、includes、filter
const arr = [1, 2, '前端'];
console.log(arr[0]);
arr[3] = 3;
arr.forEach(function () {
// return break continue 无效
})
