前端语言二前端语言协作配合 css在html的应用 inline css（内联样式） internal css（内部样式

前端语言协作配合

css在html的应用

inline css（内联样式）

<p style="color:blue;"> a paragraph. </p>

internal css（内部样式）

<head>
    <style type=text/css>
     body{background-color:blue;}
	 p{color:yellow;}
	</style>
</head>

external css（外部样式）

<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

js在html的应用

行内式写法

<button onclick="getElementById{"time"}.innerHTML=Date()">
    Show Date
<button>

<p id="geeks" onclick="onclick_event()">
    Clcik Here
</p>

外部引入

编写js后缀的代码文件然后引入HTML文件中

html在js中的应用

动态渲染heml中的内容

css在js中的应用

React为了提高CSS样式管理的可维护性和局部性，引入CSS Modules和JSS等技术，分别使用不同的方法来解决组件样式的作用范围和动态化问题。

CSS Modules

CSS Modules 是一种将 CSS 样式与 React 组件关联的方法。通过使用模块化的 CSS 文件，可以确保每个组件的样式都是独立的，避免样式污染和命名冲突。

JSS（JavaScript Style Sheets）

JSS 是一种将 CSS 样式以 JavaScript 对象的形式编写和管理的技术。它允许我们在 JavaScript 代码中动态生成和修改样式。在 React 中，我们可以使用 @material-ui/styles 等库来使用 JSS。

前端架构设计

MVC 是 Model-View-Controller（模型-视图-控制器）的缩写。它是一种分层设计模式，通过将应用程序分为三个组件：模型（Model）、视图（View）和控制器（Controller），实现了应用程序逻辑和界面之间的分离。模型表示应用程序的数据和业务逻辑，视图表示用户界面，控制器负责协调模型和视图之间的通信。

MVP 是 Model-View-Presenter（模型-视图-表示器）的缩写。它是一种基于事件驱动的设计模式，通过将应用程序分为三个组件：模型（Model）、视图（View）和表示器（Presenter），实现了应用程序逻辑和界面之间的分离。模型表示应用程序的数据和业务逻辑，视图表示用户界面，表示器负责协调模型和视图之间的通信，并响应用户的事件

MVVM

MVVM 是 Model-View-ViewModel（模型-视图-视图模型）的缩写。它是一种基于数据绑定的设计模式，通过将应用程序分为三个组件：模型（Model）、视图（View）和视图模型（ViewModel），实现了数据的双向绑定。模型表示应用程序的数据和业务逻辑，视图表示用户界面，视图模型负责将模型数据绑定到视图上，并处理用户输入的数据。