目录
前端
前端是从网页制作进化而来的一种叫法。
早期是网页制作，现在叫大前端。
早期是开发网页，现在随着NodeJs的兴起，前端职责范围变大（大前端）
pc端开发（网页开发，app开发（电脑上的软件））
移动端开发（移动端网页开发，移动端APP开发）
移动端APP开发：1）原生app开发
2）webapp(h5开发)
3）混合app(qq,微信。。。)
3）微信小程序、抖音小程序、支付宝小程序、百度小程序等等
HTML
input 标签的使用
input::placeholder 的使用
<input type="file" name="myFile" id="inputBox">
input 标签有一个files属性 它的值是一个 FileList 对象（当 input 标签的type属性不为 file 时，该值 为 null ）
如果希望上传多个文件，可以为input设置
multiple即<input type="file" multiple name="myFile" id="inputBox">
File 文件对象详情 …
FileReader 文件阅读器对象详情
实现 图片上传操作
布局代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>获取图片的base64编码</title>
</head>
<body>
<input type="file" multiple name="myFile" id="inputBox">
</body>
</html>
js 逻辑代码如下：
addEventListener(eventName, callback, { once: true }) 第三个参数：once 表示执行一次后是否移除事件
var inputBox = document.getElementById("inputBox")
inputBox.addEventListener("change", function() {
// this ---> 指向当前的 input 标签
// this.files 是一个 FileList 对象（当 input 标签的type属性不为file时，该值为null）
var key,
files = this.files,
reader
for (key in files) {
if (Object.hasOwnProperty.call(files, key)) {
/*
FileList 对象, 个人理解 ---> File 对象集合 有 item 方法, 可以根据下标获取指定的 File 文件对象
File 对象 ---> 原型为 Blob 对象 ---> 原型为 Object 对象
FileList.item(index) ---> File 文件对象
FileReader.readAsDataURL(blob)
/\.(jpe?g|png|gif)$/.test("demo.gif") ----> 返回 Boolean 值
*/
reader = new FileReader()
reader.readAsDataURL(files[key])
reader.onloadend = function() {
generateImage(this.result)
}
}
}
})
function generateImage(src) {
var image = new Image()
image.height = 100
image.title = "图片"
image.src = src
document.body.appendChild(image)
}
效果图展示：
css
鼠标事件监听开关
HTMLElementTag {
pointerEvents: none; // 鼠标事件监听开关
}
SCSS 中 & 用在嵌套代码里，来引用父元素 设置样式
classList 的使用
使用classList 对元素进行样式类名操作 （增删）
xxx元素.classList.add(类名) 可以一次添加多个类名（移除类名同理）
xxx元素.classList.contains(类名) 判断元素是否有此类名
js
浏览器
| 浏览器 | 内核 |
|---|---|
| IE | Trident |
| FireFox | Gecko |
| Chrome | WebKit |
| Safari | WebKit |
| Opera | Presto |
| Edge | Chakra |
判断设备是否是手机设备
let userAgent = navigator.userAgent
if (/AppleWebKit.*Mobile.*/.test(userAgent)) {
console.log('你的设备是手机');
} else {
console.log('你的设备可能是电脑');
}
github使用
了解git和github
github是全球最大的社交编程及代码托管网站（https：//github.com/）
版本控制工具
git是一款源代码管理工具
例如：svn, vss, vcs…
版本控制系统
版本控制是一种记录一个或若干个文件内容变化，以便将来查阅特定版本修订情况的系统
系统具体功能
记录文件的所有历史变化
随时可恢复到任何一个历史状态
多人协作开发或修改、合并
多人协同、文件传输
错误恢复
-
版本控制分类
集中式（SVN）、分布式(Git)
SVN
SVN全称Apache subversion，是一个开放源代码的集中式版本管理系统。2000年由CollabNet开发，现已发展成为Apache软件基金会 的一个开源项目。
github
-
仓库Repository
即你的项目，一个项目对应一个Repository
-
收藏Star
仓库主页star按钮，–收藏项目的人数
-
复制克隆项目Fork
-
发起请求Pull Request
简称PR,基于Fork的----
-
关注Watch
–
-
事务卡片Issue
—问题（提问题）
-
github主页
-
仓库主页
-
个人主页
github和git
github：github.com
git是一个免费，开源的版本控制软件
学习github
学习github目的：
借助github托管项目代码
使用github
Sign in----登录
Sign up—注册
git安装和使用
git：通过git管理github托管项目代码
git官网下载：https://www.git-scm.com/download/win
-
安装
1.双击安装
2.选择安装路径
3.选择组件
git Bash Here—命令行模式
git GUI Here—图形界面
默认下一步
4.默认下一步
5.选择use git from git bash only,下一步
6.接着连续三个选择默认下一步
7.安装检验是否安装成功？
鼠标右键显示有git。。。
git基本工作流程
-
git工作区域
工作区=》暂存区=》git仓库
-
git Repository
git仓库
最终确定文件保存到仓库，成为一个新的版本，并且对他人可见
-
暂存区
暂存已经修改的文件最后统一提交到git仓库中
modified ： readme.md
-
工作区
working Directory
添加、编辑、修改文件等动作
-
-
git常用命令
-
git status
–查看git状况
-
git add hello.php
–添加文件到暂存区
git add当前路径/文件
-
git commit -m “提交描述”
添加文件到git仓库
git commit --all -m “描述”（一次性提交到暂存区）
-
查看日志
git log
git log --oneline -------简洁版日志
git reflog
-
版本回退
git reset --hard Head~0【0–上一次，1–上上次】
或
git reset --hard ca3cc90(版本号) -
分支
master–主分支
-
创建分支
git branch 分支名称
-
查看分支
git branch
-
切换分支
git checkout 分支名称
-
合并分支
git merge 分支名
-
删除分支
git branch -d 分支名称
-
-
git push
将本地仓库提交到远程服务器github
git push 远程服务器github仓库地址（https）远程服务器分支名称（master）
git remote add 变量名 仓库地址（给仓库地址提供变量替代）
-u master
-
git pull —从服务器github拿数据
git pull 远程服务器仓库地址 master
-
q—退出
-
ssh方式上传代码
git push 远程服务器仓库ssh地址 master
-
公钥
-
私钥
-
生成公钥和私钥
ssh-keygen -t rsa -C “邮箱”
-
-
发生冲突–先pull,解决然后push
-
mkdir test
创建文件夹test
-
touch test.txt
创建一个文件test.txt
-
删除文件rm test.php
-
从git中删除文件git rm test.php
-
vi .git/config
-
git初始化及仓库创建和操作
-
基本信息设置
1.设置用户名：yk-ddm
git config --global user.name ‘yk-ddm’2.设置用户名邮箱********@qq.com
git config --global user.email ‘值’3.查看设置
git config --listq—退出
-
初始化
git config --global user.name ‘git名称’
-
配置
新建一个文件夹，进入鼠标右键选择git bash 。。
ls—查看当前文件
pwd–查看当前工作目录
clear–清空
vi—或vim
wq—保存
cat a1.php—查看文件
rm -rf a.php—删除文件
Ctrl+d–退出
git rm -r 文件夹—删除文件夹 -
初始化一个新的git仓库
-
创建文件夹
-
初始化git
变成一个Git仓库
cd test----进入test文件夹
git init----初始化—产生一个.git文件夹（如果没看到，打开电脑的查看，勾选隐藏的项目） -
向文件内写入内容
1.调用 vi 文件（或vim 文件）
2.按下键盘insert，可以写入数据
3.Ctrl+c返回
4.:wq–保存 -
.gitignore
写入需要忽视的文件
node_modules
.idea
.vscode
.git
-
git管理远程仓库
上传文件代码步骤：
1.第一步：在github克隆https
2.打开git bash 命令行工具
3.git clone https地址内容
容器就会复制的pc端的硬盘相应位置
4.将需要上传的文件放入该容器
5.调用命令git add。。
-
定义
目的：
备份，实现代码共享集中化管理git remote—列出所有远程主机
-
克隆
复制地址:https://github.com/yk-ddm/test.git
https://用户名：密码@github.com/用户名/仓库名.git
-
下载
git clone 仓库地址
仓库地址：https://github.com/yk-ddm/test.git
github Pages 搭建网站
-
个人站点
访问：https://用户名.github.io
yk-ddm
*******@qq.com -
步骤
1.创建个人站点=》仓库名【yk-ddm.github.io】
2.新建index.html -
Project Pages项目站点
访问：https://用户名.github.io/git库名
原理
gh-pages分支用于构建和发布
搭建步骤
1.setting
2.Launch automatic page generator自动生成主题
3.信息设置
4.选择主题
5.生成网页
jQuery
认识jQuery
获取元素
$符号
选择器
jQuery对象和js对象以及转换
jQuery对象转换成DOM对象----jQuery对象.get(0)得到
框架
react、react-router、JSX、redux、mobx、react native(RN)、 uni-app、vue、 vue-router、vuex、vue-cli、elementUI、vue3.0、webpack
面试
页面布局
css盒模型
DOM事件
HTTP协议
ES6
面向对象
通信
安全
算法
渲染机制
异步线程
页面性能
错误监控
mvvm
model view viewModel
工作原理
工作流
业务能力
团队协作
前端架构
性能优化
职业规划
之前整理的！
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
