前端基础开发
2024-02-21 18:03:05 0 举报AI智能生成
前端 web前端 VUE vuex
作者其他创作
大纲/内容
大前端
输入、输出设备
数据存储及其单位
硬盘→运行内存→CPU
硬
系统、应用
软
软硬件
概念
二进制
机器
汇编
解释器
高级
编程
语言
区别标记语言
基础编程
计算机
运行在客户端，减少请求服务器次数
无需编译，由浏览器内置的js引擎（如chrome的V8，相当于解释器）读取JS代码，逐行解释为二进制，然后由计算机执行，而非浏览器
预解析
代码执行
js引擎
脚本编程
作用
JS语法（含ES）
对页面元素
DOM文档对象模型
对页面窗口
BOM浏览器对象模型
JavaSctript网景公司
Jscript微软公司
ECMA欧洲计算机制造协会
组成工业标准
行内、内嵌、外部src
引入代码
单行与多行alt+ctrl+/
注释
1-输入prompt(' ')
3-输出alart(' ')
用户表单
声明变量var
2-程序内部处理
程序员内部测试console.log( )
浏览器控制台输出F12
alart('num.length')；对变量操作前要加小点
语句
初识JS
是内存的一个存储数据的容器
包含整数和浮点小数
八0
十六0x
进制开头
不是一个数字Not A Number
NaN
Number数字
外单引，内双引
+ 号：数字相加，字符相连
引入变量，引引加加
n换行newline
t缩进tab
b空格blank
转义符\\
Srting字符串
true当1，false当0
Boolean布尔值
加数字=NaN
Underfined声明无值
空对象
Null空值
操作系统自动分配释放
简单--栈空间
object
程序员分配释放，否则垃圾回收
复杂--堆空间
数据类型
console.log(typeof str)
蓝色数字；黑色字符串；浅灰underfined/null
console颜色辨认
console字面量
获取类型简单typeof/复杂instanceof
parseInt（str）取整数，去单位
parseFloat（str）取浮点小数，去单位
Number（str）
隐式转换：str -*/ 变量
转数字
隐式转换：num + ' '
（String（num））
num.toString()
转字符
空、否定值（Boolean（' '））、（Boolean（0））、（Boolean（null））、（Boolean（underfied））、（Boolean（NaN））
转false
布尔
数据转换
向内存申请空间
声明变量并赋值（变量的初始化）
变量的语句使用
标识符
关键字
保留字
变量命名规范
diagram画图实现逻辑思路
文档中文注释步骤
构建临时空变量temp
编写代码
交换变量
变量
变量 % 数字 = 0 整除
% 取余取模
布尔值的取反符
! 非
（） + - * /
浮点运算有出入
返回值=表达式（数字、运算符、变量）
一元算数
单独一行，前后置一致
先变量自加1，后参与表达式运算，返回值【先己后人】
前置
先返回原值，后参与表达式运算，再返回值，后变量自加1【先人后己】
后置
复合运算差异
递增/减
赋值 =
判断值，有隐式转换
判等 ==
判断值和数据类型
全等 ===
等
不等 != !==
比较运算
前真，返回最后
前假，返回最前
二真即真
与 &&
前真，返回最前
前假，返回最后
一真即真
或 ||
多个表达式，左边表达式为真，不再执行运算右表达式
逻辑中断短路
逻辑运算
直接等于 =
1 ++
2以上 +=2
每自 加 减 乘 除 余 等于
赋值运算
运算符
直流
for
} else { 否则执行的代码 }
} else if (条件2) { 条件成立2执行语句 }
if (条件表达式为真) { 条件成立执行的代码 }
变量值与case值 全等
break中断执行并输出结果，default以上没有匹配执行的代码语句
continue跳过本次继续执行剩余代码
swtich (表达式为true) { case 特定值 : 执行语句；break； default : }
倒计时
条件表达式 ? 表达式1 : 表达式2
三元表达式，又称条件运算符
分支
区别
可嵌入分支语句
for ( var i = 1 ; i <= 100 ; i++ ) { }
单for
九九乘法表
外层循环一次，内层循环全部次
双for
var 变量初始化 ; while (条件表达式为真) { 执行循环语句 ; 变量递增/减 }
var 变量初始化 ; do { 循环执行语句; } while (条件表达式为真)
do while
while
循环
断点调试
流程控制
是内存的变量集合存储的一个容器
var arr = [ ]
var arr = new Array( )
创建
console.log( arr[ 0 ] )
索引号下标从0开始
没有索引号进行赋值会丢失原数据
获取
从头到尾访问一次数组元素 arr[ i ]
最大值
累加和
检测长度 for (var i = 0; i < arr.length; i++)
用循环for ()
遍历
刚开始/末尾追加arr [arr.length]=
修改length
冒泡排序
追加与替换
修改索引号
新增
数组
封装
封装可重复被调用执行的一段代码块
function 函数名( ) { }
命名函数（又称自定义函数）
var 变量名 = function ( ) { }
匿名函数 ，又称函数表达式
声明
命名 函数名( )
匿名 变量名( )
相互调用
调用
形参默认underfined
用单变量来接收函数的返回单值、字符串、数组输出
return退出循环中断执行，且返回函数形参
不确定量形参，可传递实参是函数内置的一个对象
伪数组，具有长度、索引号特征
arguments
任意个数最大值
参数
函数
全局作用域
局部作用域（又称函数作用域）
变量在某范围起作用
作用域
全局变量（包括函数内无声明变量）
局部变量（包括函数形参）
变量的作用域
内存区别
内部函数访问外部函数变量，遵循就近原则查找输出
作用域链
不赋值则underfined
把var提升到当前作用域最上面
变量提升
不调用则报错
把function提升到当前作用域最上面
函数提升
for循环里的变量结束遍历在外部仍可传递
JavaScript没有块级作用域
具体的一个事物
名词（键：值对），属性间用逗号隔开
属性
动词（值为匿名函数）
方法
var obj = { }
追加属性obj.age = 18
追加方法obj.sing = function ( ) { }
var obj =new Object ( )
调用函数new Obj(实参)
function Obj(形参) { this.属性 = 形参1; }
构造函数
.可理解为“的”
对象名.属性名
对象名[ '属性名' ]
对象名.方法名（）
调用
for...in...循环
遍历对象
自定义对象
功能
返回值
demo测试
查阅文档MDN/w3c
自己封装数学对象的方法
Math.max()
Math.abs()
Math.floor()
Math.cell()
Math.round()
求一个两数中随机整数
Math.randomI()
Math静态对象
Date.prototype
date.getFullYear()
返回值小1个月
date.getMonth()
date.getDate()
数组索引字符"星期"
周日返回的是0
date.getDay()
时分秒+‘0’（三元表达式）
date.getHours()
时间戳（用于独一无二的时间，邮件加密）
var 变量名 =+ new Date()
date构造函数
运算符instanceof
H5新增Array.isarray()
检测
末push/pop
始unshift/shift
执行完毕：输出长度/元素
加/删
indexOf只返回第一个
lastIndexOf返回最后一个
索引
翻转与冒泡
join转字符串
concat连接两数组
slice数组截取
splice数组删除
Array
数组去重/缺席
基本包装类型
拼接改，后原地址还在占内存
不可变性
为对象属性赋值str[index]=1
字符位置返回索引charAt(index)（H5新增str[index]）、返回ASCII码charCodeAt、
截取字符串substr（索引号，截几个）
转数组要一致分隔符split
字符串
内置对象
浏览器对象
对象
JavaScript
运算符优先级
Chrome
Safari
IE
Firefox
Opera
浏览器Browser
webkit
moz
o
ms
结构HTML身体
表现CSS着装
行为JavaScript动作
标准WEB
认识WEB
LOGO
搜索引擎优化SEO
HTTP
Dreamweaver
SublimeText
WebStorm
HBuilder
VScode
集成开发环境，即开发工具
Emmet语法
IDE
1.0→2.0→3.2→4.0→4.01→5.0
HTML
1.0→1.1
XHTML
简史History
标准规范持续增量（版本不再更新统称HTML），浏览器向后兼容性backwards compatibility
文档类型（!doctype html）
页面语言lang
字符编码charset
标签页标题title
<head>
元素=<开始标签>+内容+<结束标签>
<body>
语法
div、p、h1~h6、li、ul、ol塌陷
块级元素block
三个表区别
span、a、em、strong、del、ins、quote
title、style、script、table、form
行内标签inline
value与placeholder区别
双标签tags
.jpg
.png
.gif
img尺寸显示
input、td、br、hr
行内块标签inline-block
格式、插与背景、底侧空白
name：keywords、description
http-equiv：content-type
meta
media引入资源
link
伪元素
单/void标签
<!-- 注释语句 --> 快捷键： ctrl + /
单独占一行（状态描述、属性描述）
注释标签
title、alt
url、src、href
px
rem
em
%
height、line-height、width
预定义
rgb255
#十六进制
color
static
relative
absolute
fixed
sticky
position
post
get
method
font、background、margin
display、visibility
opacity
overflow
cursor
outline
resize
target
spacing
key键值对格式=“值value”
颜色编码运算
文字和盒子居中区别
四种尺寸区别
三种溯源区别
两种打包表单区别
缩写形式
二者区别
二者不显示的区别
用户界面设置
checked、required、disabled、multiple、controls、aotoplay、loop、muted
布尔属性Boolean
动画
首选候选通用
格式
字体
层叠书写
主流框架界限
媒体查询
声明属性 @keyframes
CSS 特定属性 -moz-transform
属性Attributes
>> <<
特殊字符
常用元素Element
观念【兼容、化繁为简】
画布canvas、iframe
mp4主流浏览器都支持
webm
ogg
三种解析码
视音svg、audio、video
属性autofocus、autocomplete
表单控件date、number、tel、search
语义化header、footer、nav、main、section、引文aside、article、time、数据figure、过程progress
新标签
local与sessionStorage
WebSocket
HTML5新特性
初识
外联样式表<link rel="stylesheet" href="">
内部样式表<style></style>
行内元素表<style="color:red;"
三性质
p { }
语法及规范写法
通配符/全局 *
元素 p、a
属性 [ ]
类 .class
id #
单一
后代div a｛｝
子代ol>li｛｝
代弟input~label { }
相邻兄弟h1+p｛｝
并集div，a｛｝
常见
结构伪类：
伪元素：：
伪类：hover ｛｝
复合
注释符号
选择器
div网格
改变了display属性
清除clear
浮动float
静态static
相对relative
绝对absolute
固定fixed
粘性sticky
定位position
堆叠z-index
flex、grid
基础
竖列
圣杯
双飞翼
设计
常用布局
认识
安装
less嵌套
less运算
引入
编译
less
scss
sass
stylus
处理兼容，浏览器公共前缀
postcss
预处理器
盒子以边框算起，真正占位是设定好的宽高width
w3c（C3怪异标准）即border-box
盒子以设定宽高的内容向外算起，真正占位是（content width + 2padding + 2border ） ，改变参数p、b会撑大原设定宽高的盒子
IE标准（传统标准）即content-box
盒模型box-sizing
圆角border-radius
转换中心点 transform-origin
位移translate
旋转rotate
缩放scale
2D
给body透视 perspective
3D呈现transform-style
SketchUp + 左手准则
3D
转换transform
帧动画、GPU加速
动画animation
过渡transition
渐变gradients
阴影shadow
增加属性
CSS3新特性
min.css
CSS
与.CSS区别
倍图@2 @3
PS
二倍
FW精灵图
Cutterman
兼容主流内核 -webkit-
浏览器
碎片化严重
尺寸使用px
屏幕
调试
基础认识
分类
meta视口标签
视口
物理像素（分辨率）与物理像素比
Retina（视网膜屏幕）
多倍图（实际开发公司需求）
单位
backgroundsize
二倍图
京东m.jd.com
流式百分比布局
携程m.ctrip.com
flex弹性伸缩布局
苏宁m.suning.com
rem+less+媒体查询布局
淘宝m.taobao.com
rem+flexble.js（推荐）
单独制作（主流）
比较
rem适配方案
框架使用
grid栅格系统
媒体查询+bootstarp布局
三星samsung.com
响应式兼容（其次）
开发方案及布局技术选型
初始化normalize.css
-webkit-tap-highlight-color: transparent;
点击链接背景高亮清除
-webkit-appearance: none;
ios按钮和输入框清除
禁止长按页面弹出菜单
特殊样式
技术解决
代码步骤
Moblie移动端
混合开发（一种为主，其他为辅）
0 条评论
下一页
