front-end
back-end
dev-ops
git
basic terminal usage
data structure&algorithms
SOLID,KISS,YAGNI
Github
Licenses
Semantic Versioning
SSH
HTTP/HTTPS and APIs
Design Patterns设计模式
Character Encodings
2019 web dev
https://github.com/kamranahmedse/developer-roadmap
HTML
CSS
Basic of Java Script
Packets Managers
-npm
-yorn
framework
-React js
-Angular
-Vue js
……
web tech
网站史
wayback machine
response
Content-Type: 表示后面的文档属于什么MIME类型
Content-Length: 告知文件大小
caniuse.com:测试feature各浏览器是否可用
1.html5
框架
(弃置）
<frameset>
<frame>
<frame>
<frame>
</frameset>
target
| _blank | Load in a new window |
| _self | Load in the same frame as it was clicked |
| _parent | Load in the parent frameset |
| _top | Load in the full body of the window |
| framename | Load in a named frame |
<iframe src>
<iframe>
<iframe>
</iframe>
</iframe>
</iframe>
一点点科普
<strong>: 强调
<b>
都加粗，对浏览器而言含义有别，优先加载之类的
对某些残疾人应用：strong会被念出来
换行
<ul> ul无序
<ol> ol有序
css
list-style{}:list 序号样式
<table>里colspan/rowspan 调整布局
select<option> 下拉选项条
html5新加：
section
article
audio个人主页不推荐
videio
mar跑马灯标签，弃置-已被js替代
3.css
element selector body{}
id selector #menu{}
class selector .bookTitle{}
div >p
special
img[alt=jiangren]{ 一般不用
padding:10px;
}
伪选择器 psuedo selector
a:hover{
color:#fff;
}
a:link{ }
a:visited{}
a:hover{ transform: rotate(180deg)
scale:1.5} 鼠标移动上去的效果
a:active{}
常见属性值
px
em:基于基准字体上级字体大小的多少倍
pt:
元素优先级
- 内元素大于外元素
- selctor高于元素，univereal selector=attribute selector=pseudo class=0-1-0
！这儿有疑问
盒子模型
如果两个相邻元素都有margin会合并（以大的那个值为准）
<head>
<style tyle="text/css>
.box{
}
</style>
</head>
<div class=“box”>
</box>
<div class=“box”>
</box>
<div class=“box”>
</box>
boder：dashed(虚线） ；
boder-radius：;
常见css库：
bootstrap
tailwindcss
semantic-ui
ant.design 基于数据有交互
display各属性
block
inline
none
inline-block
visibility:hidden(隐藏但保留位置，但display不保留位置）
position?
relative：基于元素位置（普通元素）
absolute/:找最近一个非static元素作为基准定位
static/:没有定位，默认属性
fixed：绝对定位（广告），相对于浏览器窗口
sticky：滚动中
（z-index:优先级）
float浮动 目前不太使用，除非图片和文字环绕问题
float是飘到下一个元素上
right:让周围靠右
left:让周围靠左
clear
不让周边元素浮动
left
right
both
responsive
viewport设置
推荐bootstrap布局网站：
layoutit.com
bootswatch
media queries
@media screen and(max-width:600px){
}
@media screen and(min-width:600px){
}
#大于等于320像素且小于480像素的使用该样式
@media screen and (min-device-width:320px) and (max-device-width:480px){
}
对于不同大小设备设置一套样式
（通过bootstrap-layout-grid来了解一些这方面信息 .col, 12列布局）
/*iphone*/
@media only screen and (min-width:120px){
}
/*extra small devixe, phone*/
@media only screen and(min-width:480px){
}
/*small devices,tablets*/
@media only screen and (min-width:760px){
}
css preprocessor
推荐BEM CSS ，解决优先级嵌套混乱问题
具体：尽量不使用>,<这种嵌套的css写法； 使用class单独命名
命名之间可以有自己嵌套逻辑
block-element-modifier
每个页面以block开始
<div class=“block>
<span class=”block__elem“></span>
<div class=”block block--modifi“>
</div>
</div>
<div class="header">
<h1 class="header__log"></h1>
<input type="text" class="header__search>
</div>
Sass
sass编译
sass 1.scss>style.css
$lightblue: lightblue;
.header{
display:flex;
background:lighten($lightblue,20%);
&__logo{
font-size:18px
}
&__input{
border:solid 1px $lightblue;
margin-left:20px;
}
}
@for $i from 1 through 10{
.box-#{$i}{
color:lightenn(red,$i*5);
height:20px;
}
}
尾类
before/after
.box-0{
content:'y'
}
.box-0:after{
content:'z'
}
.box-0:after{
content:'x'
}
nth-child
div:nth-child(2n){
background:green;
}
div:nth-child(2n+1){
background:blue;
}
css动画
div{
background:green;
transition: all 1s;/*一个动画过度*/
}
div:hover{
background:blue;
}
transition几个属性
transition-property:
旋转
transform:rotate(180deg) scale(2);
动画 animation
@keyframes test{
from{
transform: scale(1);
}
to{
transform:scale(2);
}
}
@keyframes test{
0%{
transform: scale(1);
}
50%{
transform:scale(2);
}
}
动画相关属性
网站推荐 :cssmaker.com
box-shadow:0px 0px 20px 10px black;
左偏移，右偏移，模糊度，阴影宽度，阴影颜色
text-shadow:2px 2px 2px red;
background-size:contain/cover/;
background-image:liner-gradient(red,yellow);
cursor:pointer;
Less
PostCSS
load-awesome
codepen
4.JS
Javascript
fetch--promise--response
fetch("http://jiangren.com.au")
目前已经不用jquery，不益于维护
弃用：
document.getElementById()
现在用
document.querySelector("class名").innerText="hello"
https://developer.mozilla.org/zh-CN/docs/Web/API/Document/querySelector
常用
documnet.querySelector(class名).classList.add("hide")
documnet.querySelector(class名).classList.remove("hide")
/*返回是否隐藏*/
documnet.querySelector(class名).classList.toggle("hide")
常用debug提示
console.log()
console.error()
console.warn()
- js内部都是浮点数，类型是number（精度上有损失）
变量声明
let
const
- 变量提升
/不加变量声明默认global/
/'use strict'后不声明会报错/
/js即使后来声明变量也会自动提升到使用该变量之前/
命名规则Naming convention
1.uppercase:常数
2.普通命名：驼峰命名法
3.数字关键字避免
- 函数也可以作为变量
数据类型
1.number:整数和小数
2.string
3.boolean
4.undefined
5.null
6.object：不同（靠近字典）
7.array
符号
+：字符串和数字
==：仅仅判断值是否相等
===：判断值和类型是否相等
！=：仅仅判断值是否不想等
！==：判断值和类型是否不相等
特殊表达式结果
4+3+"3"
==>73
"4"+3+3
==>433
"4"*3+3
==>15
0.1+0.2
==>0.30000000000000004
1+null
==>1
1+undefined
==>NaN
(0.1+0.2)===0.3
==>false
(0.1+0.2).toFixed(1)===0.3
==>true
常见解决精度问题方法：转化为string来操作
/*array*/
let array=[1,2,"str",{},[],function(){console.log(123}]
array.shift()#弹出前面元素
array.pop()#弹出后面元素
array[5]()#打印123
/*array调用索引超过原先索引会扩充到你调用的索引*/
array.length
arr=[1,2,3]
arr.map(x=>x*2)#返回[2,4,6]
arr.filter()
- array like 元素
let nodes = document.querySeletorAll("p")
nodes[1]
nodes.length
函数
array.from(nodes).map(x=>x.innerHTML).join(',')
arr.map(x=>x*2)#返回[2,4,6]
arr.filter()
三元运算符
for loop
在js中 只有两种作用域（var,let作用域是正常的）
1.函数内
2.global
所有其他都是global作用域，包括for loop中定义的变量都属于全局变量函数中可以有函数
前面函数声明后面函数就可以使用后面函数
箭头函数
const fn = (x,y) =>(
return x+y)
iife
为了避免不同js文件相同变量名互相修改值
包裹每个变量为函数可以有效解决该问题
var x=100
(function(){
var x=10
console.log(x)
})()
(function(window){
var x=5
console.log(x)
})(window)
console.log(x)
array=[]
target=14
function(array,target){
for(let i=0;i<array.length;i++){
for(let j=i+1;i<array.length;i++){
if（array[i]+array[j] === target){
return [array[i],array[j]]
}
}
}
function toSum(array,target){
for(let i=0;i<array.length;i++){
const f = array.find(x,index)=>(tarfet.array[i])==x)
console.log(i=""+array
}
** 再看 **
function toSum(arr,target){
for(let i=0;i<arr.length;i++){
const diff = target - arr[i];
if(map[diff]!=undefined){
map[diff]<arr[i]？return [map[diff],arr[i]]：return [arr[i],map[diff]]
}
map[arr[i]]=i;
}
return []
}
- JSON.stringify(student) 会把key，value都变成string
- JSON.parse(student) 会把key变成单纯的key
事件
let node = document.querySelector(".jr-banner-img")
node.addEventListener('click',function(e){
e.target.classList.toggle('hidden')
})
document.querySelector("p").foreach(x=>x.addEventListener('click',hidden))
Template Literals(模版字符串）hello ${a}
let a="word"
`hello ${a}`
`hello ${a+a}`
Lexical Scope
let 是block级别作用域
var
const 常数操作
一般最好不用var
- setTimeout( ) 间隔指定时间运行一次
- setInterval( ) 间隔指定时间一直运行
setTimeout(()=>{console.log("hello word");},3000);
- clearTimeout(id):cancel timeout
for(var i=0;i<=10;i++){
(function(n){setTimeout(()=>{
console.log(n);
},i*1000})(i)
}
const content = document.querySelector("#content");
const updateTime = node=>{
const time = (new Date).toLocaleTimeString();
content.innerText = time;
}
setInterval(()=>updatetime(document.querySelector("#content")),1000);
单线程模型，有阻塞问题，时间不一定总是准确
Closure 闭包
函数内部变量不能被外部访问
IIFE-Immediately invoked function expression：module避免全局变量污染，依赖注入
(function(){
statements
})();
Arrow functions箭头函数
const fn1=function(name){console.log(name)}
const fn2=name=>console.log(name)
fn(1)(2)=3
const fn=a=>b=>b+a
Array methods 数组函数
- indexOf()
- lastIndexOf()
- includes()
- reducer(acculator,)
- sort()
arr=[1,2,3,4,5]
//arr.map(function(n){return n*2})
arr.map(n=>n*2)
arr=[1,2,3,4,5]
arr.map(n=>n*2).filter(n=>n>8).reducer((a,b)=>a+b)
Class
function generate(name){
this.name=name
}
let object2=new generate("LU");
=>
class Rectangle{
constructor(height,width){
this.height=height;
this.width=width;
}
calculateArea(){
return this.height*this.width;
}
}
## Getter and Setter
get f()
set f()
## this in arrow function
箭头函数中的this指的是当前环境中的this
函数中的this指的是函数中的this
const car={
model:'Cayenne',
manufacturer:'porsche',
getFullName:()=>${this.manufactor} ${this.model}
}
# DOM
浏览器Dom Tree
Element Node 元素节点
Attr 属性节点
Text Node 文本节点
Comment 注释节点
Document
Array.from(document.querySelectorAll(”section.card>h2>a“).filter(x=>x.innerText === ‘apply’)[0]
* Node.appendChild()
* Node.cloneNode()
* Node.contains(node)
* Node.removeChild(node)
node.classList.add（）
node.classList.toggle() call一下active，再call一下remove
<body>
<a href="#">Show time</a>
</body>
<script type="text/javascript">
function toggleTime(){
document.querySelector("#content").classList.toggle("hide")
}
d document.query.Selector("#toggle").addEvenListener("click",toggleTime)
const updateTime= node =>{
···
}
</script>
熟悉
transform
transition
* Node.attributes 属性节点
## BOM
window.navigator.uerAgent
可以通过https获取一些蓝牙设备，多媒体设备，gps定位等
confirm(”test“) 不常用，不好看
要求
* host到internet
* 有https证书
* window.location() 获取当前窗口地址
* window.history.back[-1] 有的时候会没有权限获取
* window.history.push 加一个新地址到你的浏览器记录
_重要_
* window.localStorage() 存变量信息, 经常用于浏览器储存token信息
window.localStorage.setItem("name","lu")
window.localStorage.getItem("name")
save.onClick()
let value= document.querySelector("#nameText").value
window.localStorage.setItem("name","value")
document.querySelector("#name").innerText=window.localStorage.getItem("name")
* window.sessionStorage()页面关闭会清除缓存
其他
alert
document.cookie
setTimeout
setInterval
网络安全
###
e.preventDefault()
取消点击浏览器默认表单发送
e.stopPropagation()
取消点击浏览器默认冒泡事件
<form action="" id="form>
<input type="text name="q" id="q">
<button type="submit"></button>
</form>
<script>
function onSubmit(e){
e.preventDefault();
} document.querySelector("#form").addEventListener("submit",onSubmit)
</script>
Class Person(weight,height，BIM){
Constructor(weight,height，BIM){
this.weight = weight;
this.height = height;
this.BIM = BIM;
try{
if(this.height <= 0 || this.height > 3) throw "height value is wrong"
if(this.weight <=0 || this.weight > 1000) throw "weight value is wrong"
}
catch(e){
alert(e);
}
}
calculateBMI(){
this.BIM=this.weight/height**2
return this.BIM
}
setWeight(){
this.weight=this.BIM(this.height*2)
return this.weight
}
}
