前端有感
2024-12-30 10:11:30 # Web #学习 #有感

做战队的官网时学习前端有感，并且在此记录学习过程。
参考文章：
前端框架
前端开发趋势
菜鸟教程

前端三剑客

HTML，CSS，JavaScript这三者分别对应：骨架，衣服，大脑。
HTML提供了页面的基本框架和内容的布局，负责结构和内容；CSS设置字体颜色边距布局等等；JavaScript处理用户操作（按钮，表单）、动态修改页面、与服务器通信等。
简单来说，HTML提供内容，CSS美化内容，JS让内容动起来。
 
拿小学生都熟悉的例子————word文档，来对照前端三剑客的话：
HTML组织了一篇文档的标题，正文，表格等等；
CSS就是负责文档样式的调整，像标题居中，字体颜色大小，页眉页脚页边距等等；
JS的话，就是加一些按钮啥的，好像这个word里面没有，但ppt里有。

关于前端开发

当前，前端的开发方式已经不是简单的HTML+CSS+JS了，流行的是一种叫开发框架的东西。
这得从前端发展开始讲起：

前端小史

90年代（静态页面时代）的前端开发就是以三剑客的基础技术为主的，页面静态且交互性低。
后来动态页面技术萌芽，ASP和PHP兴起，AJAX（页面不刷新但动态更新）技术初探等等
Web2.0时代来临，AJAX技术普及，前端框架和库大量出现（最初的jQuery，到后来的React等），然后到移动端设计、发展响应式设计，这些都推动前端开发方式的改变。
 
框架的出现，推动前端技术发展，标准化的库和接口简化开发工作，所以现在的学习和开发，当然是要基于框架了。
我这次接触的是NextJs，基于React框架（用户量大，易学）。当然还有Vue.Js也不错。
现在的开发虽然离不开这三剑客，但是开发时这三者边界模糊，一个项目的.js文件基本上是这三剑客的结合体。

如何学习前端

至于学习前端，最好是三剑客一起学，看菜鸟教程来初步了解；
然后选择一个框架，在搭个人博客的时候边做边学，
重点学习三者统一后的使用，了解每个主题的底层实现。

关于HTML

学习HTML，元素这个概念是核心，一个html文件就是元素堆叠，嵌套构成的，就是那些小括号们<>。
写html文档，就是把内容换成元素，堆起来就行。

元素(Element)

HTML由元素组成，由开始标签、结束标签及两者之间的内容构成，像这个：
<p>这里是段落内容。</p>
一个HTML文件就是通过元素的嵌套写成的。
快速学习HTML就可以从了解不同的标签（元素）下手。比如常用的标题、段落，链接、图标、布局、文本格式化等等。
一个比较重要的元素是<div>，容器元素。

属性

属性是描述元素的工具。
属性用于给标签提供额外信息或者定义行为。如：
<a href="https://example.com">跳转到示例页面</a>提供了信息和行为；
<button onclick="alert('你点击了按钮！')">点我</button>提供了行为；
这个结合后面讲的JS来看，会更明了。比如自定义数据可以用JS访问，定义行为：

1
2
3
4
5
<div data-user-id="123" data-role="admin">管理员</div>
<script>
  const user = document.querySelector('[data-user-id]');
  console.log(user.dataset.userId); // 输出 "123"
</script>

 
有全局属性（全部元素适用）和事件属性（与浏览器行为有关，JS负责此部分）
比如：
<style type="text/css"> </style>
里面的type就是style元素的属性了。

事件（属性的一种）

就是上面说的事件属性，结合JS，通过script实现，然后作为元素的属性作用在元素上面。
有许多事件，像窗口事件，键盘鼠标事件，表单事件，多媒体事件等等。

关于CSS

Cascading Style Sheet，层叠样式表，本质上就是样式（style）和表（sheet）的层叠，所以其核心就是一个个的“格式刷”————选择器。

选择器

写CSS就是写选择器和声明。
h1 {color:blue;font-size:12px;}中h1就是选择器；大括号里的是两条声明，分号结尾；声明分为属性color和值blue，这个跟HTML里的属性是一样的。
 
理解CSS就是理解选择器如何作用到HTML里各个元素身上的。
而选择器的通俗理解，就是通过class等属性和一些特征，去匹配一些元素，然后把大括号里的要求作用于此元素，也就是把什么属性搞成什么样式的。
 
重要的语法有class选择器，组合选择符，伪类和伪元素，属性选择器、分组和嵌套等也可以了解下。

伪类

这里提一个很有意思的比喻来理解这个概念，即C++中的继承与虚函数。
有a:hover {color: blue;}：
a可理解为是HTML标签父类的对象；
hover好比一个可重写的虚函数，鼠标悬停时触发；
{color: blue;}是虚函数里被重写的内容；
this指针：color指向a这个对象，可以理解为有一个this指针（this->color = “blue”）。

盒子模型（Box Model）

盒子模型是CSS的一个重要概念，在设计和布局时使用。
所有的HTML元素都可以看做盒子，只要是一个盒子，就有边距（margin）、边框（boarder）、填充（padding）、内容（content）这些要素。
 
当上面的概念了解的差不多，可以试试导航栏，下拉菜单等，熟悉熟悉。

关于JS

JS是关于对事件的反应，然后改变HTML内容和样式的脚本（script）。常有的是，查找元素的属性（比如id），检测元素的事件（如onlick检测是否按下），然后改变目标内容（如样式中的颜色，或是HTML内容）。这就和之前讲的HTML和CSS都联系在一起了。
还有，JS和java没有鸟关系。

速学路径

和前面的HTML和CSS不一样，JS是一个挺正经的编程语言，跟C、python这些一样，所以学习时思路和以前差不多，要掌握基本语法，函数，对象等；鉴于JS的独特性，还需要了解DOM，模块化，异步编程等特性。
正儿八经学的话，可以在Chrome浏览器运行。
理解JS，重点在理解对象。

基本语法

只说一些不一样的。

变量

变量关键字：const，let，var。后两者在作用域上有区别，推荐使用let，var是老东西了。
注意下，不要不加变量关键字，这样会变成全局属性，污染了全局。

数据类型

分为基本类型和对象类型，有值得注意的。
对象是JS中非常重要的概念，对象是键值对的容器，其中的键值对就是属性（同时也是变量）。方法在里面作为属性来存储，加上()就可以作为函数调用。

对象类型和类

一个数据可以是对象类型，如array字符串，意味着它可以拥有属性和方法，就像上面提到的。
类别C++，var x = "John";中：x可以看做是array这个父类的对象，所以它拥有内置属性，如length；也有方法，如charAt()用来返回字符索引。
类与对象在JS里面并非C++的类与对象。在JS里所有元素和变量都是对象；而类也有一些JS的特性。
需分清楚对象，引用，变量的关系。

函数和作用域

window对象值得注意，它是一个全局对象。
函数的定义、参数、调用也值得关注。
闭包是一个JS的特色概念，值得自己理解。
闭包就是能够读取其他函数内部变量的函数。

DOM

DOM是Doucument Object Model，如：
var x=document.getElementById("intro");就使用了DOM，查了一个元素给x。

其他

字符串模板

正则表达式

this关键字

关键区分this指向规则。

异步编程和AJAX

JSON

1
2
3
4
5
{"sites":[
    {"name":"Runoob", "url":"www.runoob.com"}, 
    {"name":"Google", "url":"www.google.com"},
    {"name":"Taobao", "url":"www.taobao.com"}
]}

JSON本质为储存键值对的对象组合。

  • 数据为 键/值 对。
  • 数据由逗号分隔。
  • 大括号保存对象。
  • 方括号保存数组。
    上面的代码即：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    顶层对象
    └── sites (数组)
        ├── 对象 1
        │   ├── name: "Runoob"
        │   └── url: "www.runoob.com"
        ├── 对象 2
        │   ├── name: "Google"
        │   └── url: "www.google.com"
        └── 对象 3
            ├── name: "Taobao"
            └── url: "www.taobao.com"

React和Tailwind CSS

大致了解完三剑客，就可以去学习React和Tailwind CSS，ES6是前置，边React边看ES6的细节，如结解构赋值，新的函数特性等等。

Tailwind CSS

Tailwind CSS不用特意去学，有想实现的CSS样式，却不知道怎么实现，比如怎么排版区块等等，就去翻文档就行。Tailwind的最重要的概念，就是“实用类”这个概念了。

包（yarn）

关于如何学习

chatGPT，菜鸟，学习时机，方法等思考

上一页
2024-12-30 10:11:30 # Web #学习 #有感
下一页