凉衫薄

人生哪能多如意,万事只求半称心。
最新文章
一、安装node 步骤省略 二、安装全局依赖 npm install webpack webpack-dev-server webpack-cli -g 三、初始化项目 mkdir react-demo cd react-demo npm init -y 四、安装react相关依赖 npm install react react-dom --save 五、安装babel相关依赖 npm install babel-core babel-loader babel-preset-env babel-preset-react --save 六、安装css、less、url相关loader npm install css-loader style-loader less-loader less url-loader --save 七、项目结构 react-demo   |——dist (项目打包输出路径)     |——index.html     |——bundle.js (webpack打包后生成)   |——src (源码文件夹)     |——index.jsx (入口文件)     |——component (组件文件夹)       |——HelloWorld.jsx   |——package.json (npm init生成文件)   |——webpack.config.js (webpack配置文件)   |——.babelrc (babel配置文件) 按照该结构生成对应文件和文件夹 mkdir dist mkdir -p src/component touch ./dist/index.html ./src/component/HelloWorld.jsx ./src/index.jsx webpack.config.js .babelrc 八、完善代码及配置 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>App</title> </head> <body> <div id="root"></div> <script src="bundle.js"></script> </body> </html> HelloWorld.jsx import React, {Component} from "react"; class HelloWorld extends Component{ render(){ return ( <div>hello world</div> ) } } export default HelloWorld; index.jsx import React from "react"; import ReactDOM from "react-dom"; import HelloWorld from "./component/HelloWorld.jsx"; ReactDOM.render(<HelloWorld/>, document.getElementById("root")); webpack.config.js const path = require('path'); module.exports = { entry: path.resolve(__dirname, './src/index.jsx'), output: { path: path.resolve(__dirname, './dist'), filename: 'bundle.js' }, module: { rules: [ { test: /\.(js|jsx)$/, loader: 'babel-loader', exclude: /node_modules/ }, { test: /\.(le|c)ss$/, use: ['style-loader', 'css-loader', 'less-loader'] }, { test: /\.(png|jpg|jpeg|gif)$/, loader: 'url-loader', options: { limit: 10000 } } ] }, devServer: { contentBase: path.resolve(__dirname, './dist/'), host: 'localhost', port: '3000', inline: true, open: true, }, } .babelrc { "presets": [ "env", "react" ] } 九、修改package.json "scripts": { "start": "webpack-dev-server --mode development", "build": "webpack --mode production" } 十、运行 npm run start
一、概念 工厂模式属于创建型模式,他又分为三种工厂模式,分别是简单工厂模式,工厂方法模式,抽象工厂模式。下面分别介绍这三种工厂模式。 二、三种工厂模式 2.1. 简单工厂模式 2.1.1. 简介 简单工厂模式又叫又称为静态工厂方法模式,简单工厂模式通过不同的参数返回不同的实例,这些实例通常有共同的父类。 2.1.2. 例子 假如一个厂商生产三种不同型号的电脑,分别为A,B,C。 先定义他们共同的基类 public interface IComputer{ void showInfo(){ } } A型号电脑 public class AComputer implements IComputer{ @Override public void showInfo(){ System.out.println("this is a computer"); } } B型号电脑 public class BComputer implements IComputer{ @Override public void showInfo(){ System.out.println("this is b computer"); } } C型号电脑 public class CComputer implements IComputer{ @Override public void showInfo(){ System.out.println("this is c computer"); } } 定义工厂生产三种不同型号的电脑 public class ComputerFactory{ private static final Integer TYPE_A = 1; private static final Integer TYPE_B = 2; private static final Integer TYPE_C = 3; public static IComputer makeComputer(Integer type){ switch(type){ case TYPE_A: return new AComputer(); case TYPE_B: return new BComputer(); case TYPE_C: return new CComputer(); default: return null; } } } 客户端 public class Client{ public static void main(String[] args){ IComputer computer = ComputerFactory.makeComputer(ComputerFactory.TYPE_A); computer.showInfo(); computer = ComputerFactory.makeComputer(ComputerFactory.TYPE_B); computer.showInfo(); computer = ComputerFactory.makeComputer(ComputerFactory.TYPE_C); computer.showInfo(); } } 2.2. 工厂方法模式 2.2.1. 简介 工厂方法模式中父类负责定义创建对象的公共接口,而子类则负责生成具体的对象。工厂方法使一个类的实例化延迟到其子类。 2.2.2. 例子 定义工厂接口 public interface IComputerFactory{ IComputer makeComputer() } 定义生产A型号电脑工厂 public class ACompuerFactory implements IComputerFactory{ @Override public IComputer makeComputer(){ return new AComputer(); } } 定义生产B型号的电脑工厂 public class BCompuerFactory implements IComputerFactory{ @Override public IComputer makeComputer(){ return new BComputer(); } } 定义生产C型号的电脑工厂 public class CCompuerFactory implements IComputerFactory{ @Override public IComputer makeComputer(){ return new CComputer(); } } 客户端 public class Client{ public static void main(String[] args){ IFactory factory = new AComputerFactory(); IComputer computer = factory.makeComputer(); computer.showInfo(); factory = new BComputerFactory(); computer = factory.makeComputer(); computer.showInfo(); factory = new CComputerFactory(); computer = factory.makeComputer(); computer.showInfo(); } } 2.3. 抽象工厂模式 2.3.1. 简介 抽象工厂模式用来创建一组相关或者相互依赖的对象,他与工厂方法模式的区别:工厂方法模式针对的是一类产品;而抽象工厂模式针对的是相关联的的多类产品。 2.3.2. 例子 假设电脑厂商不仅生产电脑,还生产鼠标 定义鼠标基类 public interface IMouse{ void showInfo(); } 与A类型电脑适配的A类型鼠标 public class AMouse implements IMouse{ @Override public void showInfo(){ System.out.println("this is a mouse"); } } 与B类型电脑适配的B类型鼠标 public class BMouse implements IMouse{ @Override public void showInfo(){ System.out.println("this is b mouse"); } } 与C类型电脑适配的C类型鼠标 public class CMouse implements IMouse{ @Override public void showInfo(){ System.out.println("this is c mouse"); } } 重新定义工厂接口 public interface IFactory{ IMouse makeMouse(); IComputer makeComputer(); } 生产A类型电脑和鼠标的工厂类 public class AFactory implements IFactory{ @Override public IMouse makeMouse(){ return new AMouse(); } @Override public IComputer makeComputer(){ return new AComputer(); } } 生产B类型电脑和鼠标的工厂类 public class BFactory implements IFactory{ @Override public IMouse makeMouse(){ return new BMouse(); } @Override public IComputer makeComputer(){ return new BComputer(); } } 生产C类型电脑和鼠标的工厂类 public class CFactory implements IFactory{ @Override public IMouse makeMouse(){ return new CMouse(); } @Override public IComputer makeComputer(){ return new CComputer(); } } 工厂建造类 public class FactoryBuilder{ public static IFactory build(String type){ switch(type){ case 'a': return new AFactory(); case 'b': return new BFactory(); case 'c': return new CFactory(); default: return null; } } } 客户端 public class Client{ public static void main(String[] args){ IFactory factory = FactoryBuilder.build('a'); factory.makeMouse().showInfo(); factory.makeComputer().showInfo(); factory = FactoryBuilder.build('b'); factory.makeMouse().showInfo(); factory.makeComputer().showInfo(); factory = FactoryBuilder.build('c'); factory.makeMouse().showInfo(); factory.makeComputer().showInfo(); } }
一. 概念 单例模式属于创建型模式, 他保证每个单例类只有一个实例对象, 这个对象由单例类自己创建, 并提供了唯一访问和获取该对象的方式. 二. 优点 1.减少了内存的开销 2.避免了频繁创建销毁对象 3.避免对资源的多重占用 4.当创建一个对象需要较多的资源时,可以减少系统性能的开销 三. 单例模式实现 3.1. 饿汉式(线程安全) 类加载就初始化, 非lazy加载, 线程安全 public class Singleton { private static Singleton instance = new Singleton(); private Singleton (){} public static Singleton getInstance() { return instance; } } 3.2. 懒汉式(线程不安全) lazy加载, 线程不安全, 在多线程环境下不可用 public class Singleton { private static Singleton singleton; private Singleton() {} public static Singleton getInstance() { if (singleton == null) { singleton = new Singleton(); } return singleton; } } 3.3. 懒汉式(线程安全) lazy加载, 线程安全, 效率太低, 多个线程每次执行getInstance都要进行同步, 而我们真正需要同步的操作只是判断语句中的内容 public class Singleton { private static Singleton instance; private Singleton (){} public static synchronized Singleton getInstance() { if (instance == null) { instance = new Singleton(); } return instance; } } 3.4. 双重检查(线程安全) lazy加载, 线程安全, 双重锁, 解决上种方法效率低的问题 public class Singleton { private static volatile Singleton singleton; private Singleton() {} public static Singleton getInstance() { if (singleton == null) { synchronized (Singleton.class) { if (singleton == null) { singleton = new Singleton(); } } } return singleton; } } 3.5. 内部静态类(线程安全) lazy加载, 线程安全, 与饿汉式类似, 不同的是, 饿汉式是在类加载时实例化, 而内部静态类是在调用getInstance时, 才加载内部静态类, 从而实例化Singleton, 达到lazy加载的效果, 内部静态类在初始化时, 别的线程无法进入, 从而JVM为我们保证了线程安全 public class Singleton { private Singleton() {} private static class SingletonInstance { private static final Singleton INSTANCE = new Singleton(); } public static Singleton getInstance() { return SingletonInstance.INSTANCE; } } 3.6. 枚举(线程安全) 非lazy加载, 线程安全, 支持序列化机制, 防止反序列化重新创建新的对象 public enum Singleton { INSTANCE; public void method() { } }