🔒 前端学习记录

发表于 | 分类于

-

9.HTML 续

http-server的安装

视频iframe和a这一节有介绍

10.入门css

知识点

  1. 如何做横向布局（float + clearfix）
  • 继承样式inherit
  • 四种引入 CSS 的方式：行间样式、内部样式、外部样式、@import

作业

完成简历的logo和top-navbar

11.CSS 布局与定位

知识点

  1. 尽量不要设置width和height，通过调节padding来自适应.
  • 用max-width代替width，这样当屏幕小于这个width时会自适应缩放
  • 高度是由什么决定的
  • 什么是文档流【文档内元素流动的方向】
  • 内联元素 与 块级元素
  • line-box 是啥
  • box 是啥（盒模型）
  • 宽度是有什么决定的
  • position 的 5 个取值
  • 脱离文档流
  • background-size:cover
  • z-index

作业

  1. 大背景图
  • 大名片card

12.CSS 布局与定位续

知识点

  1. 太极图
    1
    2
    线性渐变background: linear-gradient(to bottom, white 0%,white 50%,black 50%,black 100%);
    :before,:after伪元素

作业

  1. 制作下载按钮
  • 技能百分比条
  • 非线性布局
    1
    2
    3
    4
    设置dib后，一定要加上vat
    display: inline-block;
    vertical-align: top;

13.命令行 HTTP Node.js HTML CSS 小结

命令行复习

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
pwd   progress working dir
cd    change dir
mkdir make dir
touch 
echo "hi" > 1.txt
echo "hi" >> 1.txt
echo "hi" >! 1.txt
cp -r
rm -rf
mv
tree 
git init
git add
git commit -m "hi"
git pull
git push
git clone
curl -L http://baidu.com
curl -s -v -- http://baidu.com
ping qq.com
hexo init
hexo g
hexo server
hexo deploy

HTTP请求与响应复习

  1. 请求包括 GET(获取) POST(上传) PUT(整体更新) PATCH(局部更新) DELETE(删除) HEAD OPTIONS等
  • 能够手写http请求，能够手写http响应
  • Content-Type: application/x-www-form-urlencoded : 应用数据/还没有写入规范的格式-万维网-表单-用urlencode形式压缩
  • 知道状态码的含义

TCP/IP协议 Node.jsServer

14.算法初级

排序算法js代码

https://www.cnblogs.com/Unknw/p/6346681.html

15.数据结构

哈希、队列、栈(stack)、链表、数(tree)

  • 计数排序(有多少个数就有多少个桶)与桶排序(自定义一个范围桶)与基数排序(始终10个桶)
  • 队列：先进先出，arr.shift()
  • 栈：先进后出，arr.pop()

  • 链表，可以用来删除数组中间的某个数

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    var a = {
    value:0,
     next:{
      value:2,
      next:{
       value:1,
       next:undefined
      }
     }
    }

  • 树
    堆排序:https://www.cs.usfca.edu/~galles/visualization/HeapSort.html

16.JavaScript 初体验

做一个键盘导航
代码和预览：https://github.com/FrankFang/nav-demo

text-transform: uppercase

将字母变成大写

sublime正则替换的用法

for循环创建div

store.js的使用

记得判断是否存在容器

1
2
website = store.get('容器1') || website;
//从容器1中取出website,如果存在就覆盖原始的website，如果不存在就使用原始的website

create元素和append元素

prompt的使用

如果点击取消，则promote返回null，所以要做判断是否点击确定还是取消

键盘事件要加在document身上

这个事件加在document身上

1
document.onkeypress = fn1;

ev

1
2
3
xxx.onclick= function (ev) {
			console.log(ev); //可以看到许多和ev有关的内容
		}

ev.target

ev.key和ev.keyCode

ev.key直接获取按下哪个键
ev.keyCode获取键值

open和location.href

1
2
3
4
5
open('http://www.qq.com'); //默认新窗口打开
open('http://www.qq.com', '_blank');//同上
open('http://www.qq.com', '_self');//在当前窗口打开
location.href = 'http://www.baidu.com'//同上

17.第一个 JS 作品

完善上一节课的键盘导航

键盘参考：http://mcdlr.com/key-sheet/
代码参考：https://github.com/FrankFang/nav-demo/

知识点

渐变色

1
background: linear-gradient(to bottom,#292929,#111);

利用box-shadow实现多层边框(立体感)

1
2
box-shadow: 向左 向下 模糊程度 一个不模糊的边框 内阴影inset;
box-shadow: 0 0 0 1px #1a1b1c, 0 0 0 2px #1f2020, 0 3px 0 1px #080808;

100vh使元素的高度占满可视区高度

1
2
body{height: 100vh}
再利用flex就可以使元素内的item相对于可视区居中

ico图标

1
2
3
将favicon.ico放在根目录下
如果要获取其他网站的icon，可以通过 //该网站根目录/favicon.ico
比如 //www.qq.com/favicon.ico  就可以获得qq的icon

oImg.onerror

1
2
3
oImg.onerror = function (ev) {
	ev.target.src = '//i.loli.net/2017/11/10/5a051fbc5e183.png';//如果网络图标下载出错就改用默认图标
}

函数封装

1
2
3
4
5
6
function tag(tagName, attr){ //tag('div', {id:'div1', className:'test'})
	var ele = document.creatElement(tagName);
	for (var key in attr) { //遍历attr里的所有键值对
		ele[key] = attr[key]; //div.id=div1, div.className=test
	}
	return ele;

return多个时要用一个对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function init() {
	var keys = [
		['q','w','e','r','t','y','u','i','o','p'],
		['a','s','d','f','g','h','j','k','l']
	];
	var website = {
		'q': 'qq.com',
		'w': 'weibo.com'
	};
	
	return {
		'keys': keys,
		'website': website
	}
}
var keys = init().keys; //或写成init()['keys']
var website = init().website; //或写成init()['website']

18.Canvas画板

知识点

鼠标事件

1
2
3
document.onmousemove = fn1;
document.onmousedown = fn1;
document.onmouseup = fn1;

canvas

  • canvas设置宽高时，由于它是inline元素，所以先要设置display:block或者vertical-align: top;；然后修改它的属性宽高，而不是css的宽高

19.手机端画板

添加viewport

方法:meta:vp + tab

touch方法

  • 手机端没有鼠标，所以不能用onmouse方法，而应该用ontouch方法

    1
    2
    3
    元素.ontouchstart = fn;
    元素.ontouchmove = fn;
    元素.ontouchend = fn;

  • 判断是否支持touch方法(特性检测)

    1
    2
    3
    4
    5
    6
    7
    if (document.body.ontouchstart !== undefined) {
    	//是触屏设备
    } else {
    	//是非触屏设备
    }

判断浏览器是否支持标签的某个属性

1
2
3
判断浏览器是否支持a标签的download属性
"download" in document.createElement('a');//true or false

判断是否是移动设备

1
2
3
4
5
6
7
8
9
10
11
在w3school上看到可以这样来判断平台：
function checkStation(){
	var info = navigator.userAgent;
	if(info.indexOf("iPod")!=-1 || info.indexOf("iPad")!=-1 || info.indexOf("iPhone")!=-1 || info.indexOf("Android")!=-1){
		alert("平板");
		return true;
	}else{
		alert("电脑");
		return false;
	}
}
  • 获取触摸坐标
    1
    2
    3
    var ev = ev.touches[0];//获取第一个触摸点
    var x = ev.clientX;
    由于触摸屏支持多点触控，有好几个touches,所以不能通过ev.clientX获取坐标

移动端必须在ontouchstart时，ev.preventDefault();阻止屏幕的滚动

iconfont的使用

  • 批量去色
    有些icon有默认色，为了icon颜色统一，建议批量去色
    选择完icon并添加至项目后，选择批量操作里的批量去色

局域网调试

利用http-server进行局域网调试

20.JS里的7种数据

  • number
  • string
  • boolean
  • symbol
  • undefined
  • null
  • object

21.类型转换

btoa将字符串转为base64

类型转换

5个falsy值

内存图

面试题-对象的引用

面试题-垃圾回收

面试题-深拷贝vs浅拷贝

22.JS里的对象

全局函数

1.Number
var n = new Number(1) 创建一个 Number 对象
1 与 new Number(1) 的区别是什么？看内存图
2.String
var s = new String(‘hello’) 创建一个 String 对象
‘hello’ 与 new String(‘hello’) 的区别是什么？看内存图
3.Boolean
var b = new Boolean(true) 创建一个 Boolean 对象
true 与 new Boolean(true) 的区别是什么？看内存图
4.Object
var o1 = {}
var o2 = new Object()
o1 和 o2 没区别

原型prototype

var 对象 = new 全局函数() //函数包括Number(123)/String(‘123’)等全局函数
对象.proto === 全局函数.prototype

23.给简历加 JS

  • loading 动画
  • 会变的navbar ， sticky navbar 鼠标滚动后导航栏黏着
  • 会动的二级菜单menu
  • 点击导航栏自己滚动到对应那一块 auto scroll smoothy

chrome控制动画速度

选中动画元素Elements → 点击三个点(更多) → More tools → Animations里控制动画的速度

scrollY

var y = scrollY;//window.scrollY,window可省略

字体颜色inherit

ev.target 和 ev.currentTarget

xxx.tagName.toLowerCase()

if (xxx.tagNamea.toLowerCase() == ‘ul’)

a.href 和 a.getAttribute(‘href’)

1
2
3
4
a.onclick = function ()  {
	console.log(a.href);//自动补充完整http协议
  console.log(a.getAttribute('href'));// #about
}

ele.offsetTop() 和 window.scrollTo(x,y)

1
2
var posY = ele.offsetTop;
window.scrollTo(0,posY);

24.给简历加 JS（续）

平滑滚动smooth scroll

tween.js

滚动监听scrollspy

检测元素出现在可视区

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
<script>
	var viewport = document.documentElement.clientHeight;
	var eles = document.querySelectorAll('div');
	window.onscroll = function () {
		for (var i = 0; i < eles.length; i++) {
			var eleCurrentTop = eles[i].getBoundingClientRect().top;//必须放在for循环里！
			if(eleCurrentTop < viewport-100){
			//alert('出现在可视区');
				eles[i].classList.add('active');
			}
		}
		
	}
</script>

技能条加载动画

25.JS 数组Array

数据类型new不new的区别

伪数组

数组的操作(api)

26.函数Function

函数的声明方法

eval()

函数的调用

call、this、arguments面试题

call stack调用栈

作用域面试题

闭包

27.DOM API

文档对象模型

DOM各种api的操作

28.jQuery 不过如此

三等号

===三等号

NaN永远不等于NaN
对象永远不等于对象，因为他们在stack区的Address地址不一样

封装自己的js库

jquery原理

29.用 jQuery 做个轮播吧

DOM作业讲解

在使用querySelector方法时，遇到DOM树增加或删除,需要重新获取

jquery作业讲解

jquery实现轮播图

  1. index()，eq()的相互结合
  • 取模的运用
  • trigger()的用法

30.无缝轮播

  1. 过渡结束事件transitionend的用法
  • 放慢速度查看动画效果：chrome -> 更多选项(三个点) -> more tools -> animations
  • 切换到另一个页面时，为了防止定时器错乱，需要监听visibilitychange
  • addEventListener()
  • DOM事件，捕获和冒泡

31.期中考试

32.DOM事件

  • 点击其他地方关闭浮层
  • 节省内存的写法.one()
  • 可左右切换的无缝轮播图

33.JSONP 是什么鬼

  • git reset 后悔药id --hard
  • 动态创建scrip标签用来发送请求
  • script标签创建后自动执行，执行完后ev.currentTarget.remove()将其删除
  • jsonp

34.AJAX 是什么鬼

  • 背出XMLHttpRequest的写法
  • console.time();要执行的代码;console.timeEnd(); 可以得到代码执行时长
  • json里面的字符串必须用双引号
  • 从后端获取的数据是字符串类型，需要通过JSON.parse(字符串)转成JS对象
  • chrome开发者工具 → Network → Network → 点击preserve log(页面刷新时不清楚日志)

35.自己实现 AJAX

  • ajax设置http请求headers的4部分
  • ajax获取http响应headers的4部分
  • 浏览器从输入网址回车到呈现页面的过程
  • 封装jQuery.ajax
  • ES6解构赋值的用法
  • Promise的用法

36.把 MVC 的 VC 加到简历里

  • 简历中引入swiper的使用
  • 模块化 -> 立即执行函数，变量互不影响
  • 立即执行函数,闭包
  • MVC的VC

37.给简历加个数据库

  • 免费服务器leancloud
  • Date对象的toLocaleString()方法
  • MVC的M

38.js高级基础知识考试

39.来，面向对象编程吧！

  • 命名空间
  • 理解var app = app || {}
  • Class 类
  • 复习this
  • new一个构造函数时到底做了些什么

41.会动的简历

完整代码：https://github.com/FrankFang/animating-resume
预览：https://frankfang.github.io/animating-resume/
vue.js 版本：https://jirengu-inc.github.io/animating-resume/public/
vue.js 版本源码：https://github.com/jirengu-inc/animating-resume

  • <pre>标签，保留多个空格和回车换行,<pre>显示多行代码，<code>显示一行代码，<pre>可以替代<code>
  • 代码高亮插件(关键词js syntax lib):prism.js或者hightlight.js
  • 初识异步(先写的代码排在后面才执行)
  • 初识回调
  • promise
  • window.scrollTo(0,document.body.scrollHeight),使得滚动条始终拉到最底下
  • 插件marked.js的用法

42.画一只皮卡丘

  • 手机端的宽度最好控制在320px以内
  • 扇形的制作
  • npm(yarn)的使用，以及忽略node_modules，防止里面的所有插件都提交到git
  • node_modules里的jquery不忽略的方法
  • 自定义属性data-的用法
  • 因为循环定时器的speed一旦设定就无法改变，所以要用setTimeout+延时递归实现setInterval
  • 用命令行将第三方插件从node_modules拷贝到vendor文件夹下
  • chrome的disable-cache的使用

43.Cookie与登录注册

  • 复习浏览器请求与响应
  • 做一个登入注册
  • 用curl向后端发请求
  • cookie的设置和获取

44.Session、LocalStorage、Cache-Control

  • 服务器通过cookie发送给浏览器sessionID(随机数)
  • sessionStorage
  • localStorage
  • web性能优化：HTTP缓存
  • 用curl -L https://cdn.bootcss.com/xxx.js >> main.js将其写入本地的main.js文件
  • cache-control
  • Expires
  • Etag
  • Last-Modified

45.初识 webpack

  • 前端工程化
  • sass的使用，用命令行将sass自动转成css
  • 用Bable将es6自动转成es5
  • 命令行CLI

46.从 MVC 到 MVVM

  • axios的使用，请求数据，伪造数据
  • es6的解构赋值
  • 通过jq的事件委托，使得DOM结构被更改时原来的按钮仍然能被触发
  • 从jquery到mvc再到mvvm
  • 用vue做显示helloworld、轮播、tab切换

47.2018年前端面试押题

48.简历

  • 简历的制作及投递，分析HR的心态
  • LeanCloud获取最新的10条留言
  • 一些amazing的库

49.毕设：网易云音乐

  • 需求分析
  • LeanCloud的使用
  • git bash的使用(gitignore忽略)
  • 七牛环境搭建

50.网易云音乐2

  • flex布局
  • MVC
  • 发布订阅模式
  • object.assign()的用法
  • 保存数据到服务器save
    深拷贝：let newObj = JSON.Parse(JSON.stringify(obj))

51.网易云音乐3

  • 获取数据find
  • 深拷贝：let newObj = JSON.Parse(JSON.stringify(obj))

52.网易云音乐4

  • 通过查询参数获取歌曲
  • arr.filter(v=>v) 将数组中的falsy值过滤
  • css模糊blur不要直接给元素模糊，不然文字也会模糊，给伪元素模糊，并z-index:-1
  • jq用each代替for循环
  • jq的第i个要用$().eq(i)，如果写成$()[i]就会变成dom对象

53.网易云音乐5

  • 歌词滚动的方法

53.网易云音乐6

  • 手机端调试大法
  • window.onerror=function(msg,file,line){alert(msg)}
  • tencent/vconsole

54.毕设：Vue简历编辑器1

  • WebStorm的用法
  • dl>dt>dd的用法，dl标签定义一个描述列表。用于描述，比如姓名:xxx,年龄:xxx;ul标签用于展示项目
  • 监听contenteditable的事件

55.Vue简历编辑器2

  • 组件component的使用
  • WebStorm的用法
  • chrome的debugger用法(在获取currentUser那一课)
  • 文档->深入响应式原理 -> 如何跟踪变化

56.Vue简历编辑器3

  • 用console.dir()查看对象的层级
  • resume.info[0].name是个字符串，怎样变成数组？用正则替换成resume.info.0.name！正则中的小括号用来提取想要的内容
  • css要注意权重的问题，比如add按钮前面要添加别的选择器加重权重，不然没有居中
  • 用arr.splice(index,1)删除数组中的某一个值
  • box-shadow: 0 0 0 10000px rgba(0,0,0,.5)，通过扩展半径，实现半透明遮罩

57.Vue简历编辑器4

  • 打印功能：window.print();
  • 用正则编辑换肤css
  • 组件化，父子通信
  • 爷孙通信 孙子 -> 父亲 -> 爷爷
  • 反点号里面还有反点号时，里面的反点号用`转译

58.Vue简历编辑器5

  • 自定义标签默认样式与span一样
1
2
3
4
<a href="/js/1.txt" id="x"></a>
console.log(x.href) // http://js.jirengu.com/js/1.txt
console.log(x.getAttribute('href')) // /js/1.txt

59.一些重要但前面没讲的内容

  • 继承的ES5、ES6写法
  • 性能优化，chrome的network用法
-------------本文结束感谢您的阅读-------------