网页设计代码教程-网页设计代码教程图片

1. 网页设计代码？
2. 想用Java写一套漂亮的代码，哪些设计模式比较常用？

网页设计代码？

从美工图到网页的呈现，是需要代码去实现的。HTML、CSS以及JavaScript是网页实现的基本组成部分，可以认为是三种语言。HTML管的是网页的基本结构（比如不同模块如何放置，这种布局操作），CSS处理网页中的样式（如文字的颜色、段落的首行缩进等等），J***aScript管的是网页中的行为，比如你点击了向左向右的按钮，图片发生了滚动等。HTML和CSS不属于网页设计，更确切的说是网页制作。如果结合J***aScript，会被称为前端开发。另外，HTML5和CSS3的发展，为网页添加了很多新特性新功能，涉及这方面的被称为HTML5开发

想用J***a写一套漂亮的代码，哪些设计模式比较常用？

总体来说设计模式可以分为三大类

创建型模式：工厂模式、抽象工厂模式、单例模式、建造者模式、原型模式

结构型模式：适配器模式、过滤器模式、装饰模式、享元模式、代理模式、外观模式、组合模式、桥接模式

行为型模式：责任链模式、命令模式、中介者模式、观察者模式、状态模式、策略模式、模板模式、空对象模式、备忘录模式、迭代器模式、解释器模式、访问者模式

其中常用的设计模式有：

单例模式

单例模式是设计模式中最简单的模式之一。通常，普通类的构造函数是公有的，外部类可以通过“new 构造函数()”来生成多个实例。但是，如果将类的构造函数设为私有的，外部类就无法调用该构造函数，也就无法生成多个实例。这时该类自身必须定义一个静态私有实例，并向外提供一个静态的公有函数用于创建或获取该静态私有实例。

单例模式的主要角色如下。

• 单例类：包含一个实例且能自行创建这个实例的类。
• 访问类：使用单例的类。

工厂方法模式

在《简单工厂模式》一节我们介绍了简单工厂模式，提到了简单工厂模式违背了开闭原则，而“工厂方法模式”是对简单工厂模式的进一步抽象化，其好处是可以使系统在不修改原来代码的情况下引进新的产品，即满足开闭原则。

工厂方法模式的主要角色如下。

1. 抽象工厂（Abstract Factory）：提供了创建产品的接口，调用者通过它访问具体工厂的工厂方法 newProduct() 来创建产品。
2. 具体工厂（ConcreteFactory）：主要是实现抽象工厂中的抽象方法，完成具体产品的创建。
3. 抽象产品（Product）：定义了产品的规范，描述了产品的主要特性和功能。
4. 具体产品（ConcreteProduct）：实现了抽象产品角色所定义的接口，由具体工厂来创建，它同具体工厂之间一一对应。

适配器模式

适配器模式（Adapter）的定义如下：将一个类的接口转换成客户希望的另外一个接口，使得原本由于接口不兼容而不能一起工作的那些类能一起工作。

适配器模式分为：

1. 类结构型模式
2. 对象结构型模式

前者类之间的耦合度比后者高，且要求程序员了解现有组件库中的相关组件的内部结构，所以应用相对较少些。

适配器模式（Adapter）包含以下主要角色。

1. 目标（Target）接口：当前系统业务所期待的接口，它可以是抽象类或接口。
2. 适配者（Adaptee）类：它是被访问和适配的现存组件库中的组件接口。
3. 适配器（Adapter）类：它是一个转换器，通过继承或引用适配者的对象，把适配者接口转换成目标接口，让客户按目标接口的格式访问适配者。

对象适配器模式的结构图

装饰模式

装饰器（Decorator）模式的定义：指在不改变现有对象结构的情况下，动态地给该对象增加一些职责（即增加其额外功能）的模式。

装饰器模式主要包含以下角色。

1. 抽象构件（Component）角色：定义一个抽象接口以规范准备接收附加责任的对象。
2. 具体构件（ConcreteComponent）角色：实现抽象构件，通过装饰角色为其添加一些职责。
3. 抽象装饰（Decorator）角色：继承抽象构件，并包含具体构件的实例，可以通过其子类扩展具体构件的功能。
4. 具体装饰（ConcreteDecorator）角色：实现抽象装饰的相关方法，并给具体构件对象添加附加的责任。

装饰器模式的结构图如图 1 所示。

策略模式

策略（Strategy）模式的定义：该模式定义了一系列算法，并将每个算法封装起来，使它们可以相互替换，且算法的变化不会影响使用算法的客户。

策略模式的主要角色如下。

1. 抽象策略（Strategy）类：定义了一个公共接口，各种不同的算法以不同的方式实现这个接口，环境角色使用这个接口调用不同的算法，一般使用接口或抽象类实现。
2. 具体策略（Concrete Strategy）类：实现了抽象策略定义的接口，提供具体的算法实现。
3. 环境（Context）类：持有一个策略类的引用，最终给客户端调用。

其结构图如图。

代理模式

代理模式的定义：由于某些原因需要给某对象提供一个代理以控制对该对象的访问。这时，访问对象不适合或者不能直接引用目标对象，代理对象作为访问对象和目标对象之间的中介。

代理模式的主要角色如下。

1. 抽象主题（Subject）类：通过接口或抽象类声明真实主题和代理对象实现的业务方法。
2. 真实主题（Real Subject）类：实现了抽象主题中的具体业务，是代理对象所代表的真实对象，是最终要引用的对象。
3. 代理（Proxy）类：提供了与真实主题相同的接口，其内部含有对真实主题的引用，它可以访问、控制或扩展真实主题的功能。

其结构图如图

技术在高速的发展，不断的变更，掌握了设计模式则可以应对这些变化，因为技术的变化离不开设计模式，可以说设计模式是走向高级工程师的捷径。23种设计模式都有它的意义，主要用的有单例，工厂方法，观察者，建造者，代理，责任链等等，其实不能说哪些常用，哪些不常用，掌握了23种，每一种都有意义和精华在里面，需要不断的琢磨研究。学习设计模式可以到我的博客：

一般来说，只要熟练了以下这三种设计模式就已经可以应付很多情况。设计模式要经常看才行，建议先收藏后有时间自己手写一遍或者无聊时翻出来看看，最重要是自己能够设计出该设计思想的UML图并应用。

单例模式

J***a中最简单的设计模式之一，主要解决一个全局使用的类频繁被创建和销毁。

重点：

• 在内存里只有一个实例，减少了内存的开销；
  

• 避免对***的多重占用。
  

使用例子：

Windows 是多进程多线程的，在操作一个文件的时候，就不可避免地出现多个进程或线程同时操作一个文件的现象，所以所有文件的处理必须通过唯一的实例来进行。

单例模式UML图如上，SingleObject类提供了一个静态方法，供外界获取它的静态实例，所以SingletonPatternDemo类只能调用SingleObject类下的showMessage()。

工厂模式

工厂模式的好处在于客户端可以请求一个对象，而无需知道这个对象来自哪里；也就是，使用哪个类来生成这个对象。工厂背后的思想是简化对象的创建。通过将创建对象的代码和使用对象的代码解耦，工厂能够降低应用维护的复杂度。

重点：

• 工厂方法集中在一个地方创建对象，使得对象跟踪起来容易。
  

• 若需要将对象的创建和使用解耦，工厂方法能派上用场。
  

使用例子：

制造塑料玩具的压塑粉都是一样的，但使用不同的塑料模具就能产出不同的外形。比如，有一个工厂方法，输入是目标外形（鸭子或小车）的名称，输出则是要求的塑料外形，正如同一份三文鱼，大佬和菜鸟做出来肯定不一样的。

工厂模式的UML图如上，通过创建一个Shape接口和实现Shape接口的实体类。然后定义工厂类ShapeFactory。我们使用ShapeFactory来获取Shape对象。它将向 ShapeFactory传递信息（CIRCLE / RECTANGLE / SQUARE），以便获取它所需对象的类型。

观察者模式

主要解决一个对象状态改变给其他对象通知的问题，使程序变得易用和低耦合，保证高度协作。

重点：

• 观察者和被观察者是抽象耦合的；
  

• 建立一套触发机制。
  

使用例子：

拍卖时，拍卖师观察最高标价，然后通知给其他竞价者竞价，拍卖师就是观察者，观察拍卖品的价格。

观察者模式的UML图如上，可以这样简单理解，Subject是一个抽象被观察类，把所有观察者对象保存在***里，然后Subject提供一个接口，可以增加删除观察者对象。

在ConcreteSubject（具体被观察者）内部发生改变时，通过抽象被观察者向观察者发送通知。然后Observer是抽象观察者，它定义了一个更新接口，得到通知后更新自己。最终ConcrereObserver是具体观察者，实现Observer定义的更新接口，以便在更改通知时更新自身的状态。

如果你对学习人工智能和科技新闻感兴趣，可以订阅我的头条号，我会在这里发布所有与算法、机器学习以及深度学习有关的有趣文章。偶尔也回答有趣的问题，有问题可随时在评论区回复和讨论，看到即回。

（码字不易，若文章对你帮助可点赞支持~）