2. 程式人生 > 實用技巧 >php設計模式-單例模式

php設計模式-單例模式

阿新 • • 發佈：2020-07-19

1.什麼是元件化

人面對複雜問題的處理方式：

  1. 任何一個人處理資訊的邏輯能力都是有限的

  2. 所以，當面對一個非常複雜的問題時，我們不太可能一次性搞定一大堆的內容。

  3. 但是，我們人有一種天生的能力，就是將問題進行拆解。

  4. 如果將一個複雜的問題，拆分成很多個可以處理的小問題，再將其放在整體當中，你會發現大的問題也會迎刃而解。

元件化也是類似的思想：

如果我們將一個頁面中所有的處理邏輯全部放在一起，處理起來就會變得非常複雜，而且不利於後續的管理以及擴充套件。但如果，我們講一個頁面拆分成一個個小的功能塊，每個功能塊完成屬於自己這部分獨立的功能，那麼之後整個頁面的管理和維護就變得非常容易了。

2.vue元件化思想

元件化是Vue.js中的重要思想

  • 它提供了一種抽象，讓我們可以開發出一個個獨立可複用的小元件來構造我們的應用。

  • 任何的應用都會被抽象成一顆元件樹。

元件化思想的應用：

有了元件化的思想，我們在之後的開發中就要充分的利用它。儘可能的將頁面拆分成一個個小的、可複用的元件。這樣讓我們的程式碼更加方便組織和管理，並且擴充套件性也更強。

3.註冊元件

3.1案例引入

元件的使用分成三個步驟：

  • 建立元件構造器

  • 註冊元件

  • 使用元件

下面我們通過程式碼來看看如何註冊元件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- 使用元件-->
			<my-cpn></my-cpn>
		</div>
	</body>
	<script type="text/javascript">
		
		//1、建立元件構造器
		const myComponent = Vue.extend({
			template:`
				<div>
					<h2>元件標題</h2>
					<p>我是元件中的一個段落</p>
				</div
			`
		})
		
		//2、註冊元件，並定義元件標籤的名稱
		Vue.component('my-cpn',myComponent)
		
		let app=new Vue({
			el: '#app',
			data: {
				message: '你好呀'
			}
		})
	</script>
</html>

3.2註冊元件步驟解析

上面我們通過程式碼使用了元件，那麼這段程式碼表示什麼含義呢？

1.Vue.extend()：

呼叫Vue.extend()建立的是一個元件構造器。 通常在建立元件構造器時，傳入template代表我們自定義元件的模板。該模板就是在使用到元件的地方，要顯示的HTML程式碼。事實上，這種寫法在Vue2.x的文件中幾乎已經看不到了，它會直接使用下面我們會講到的語法糖，但是在很多資料還是會提到這種方式，而且這種方式是學習後面方式的基礎。

2.Vue.component()：

  • 呼叫Vue.component()是將剛才的元件構造器註冊為一個元件，並且給它起一個元件的標籤名稱。

  • 所以需要傳遞兩個引數：1、註冊元件的標籤名 2、元件構造器

3.元件必須掛載在某個Vue例項下，否則它不會生效。

4.全域性父子元件

4.1全域性元件和區域性元件

當我們通過Vue.component()註冊元件時，元件的註冊是全域性的，這意味著該元件可以在任意Vue例項下使用。

如果我們註冊的元件是掛載在某個例項中, 那麼就是一個區域性元件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<my-cpn></my-cpn>
		</div>

		<div id="app2">
			<my-cpn></my-cpn>
		</div>
	</body>
	<script type="text/javascript">
		//1、建立元件構造器
		const myComponent = Vue.extend({
			template: `
				<div>
					<h2>元件標題</h2>
					<p>我是元件中的一個段落</p>
				</div
			`
		})

		let app = new Vue({
			el: '#app',
			components: {
				'my-cpn': myComponent
			}
		})

		let app2 = new Vue({
			el: '#app2'
		})
	</script>
</html>

從頁面顯示結果我們可以看出app2中的元件沒有顯示出來，因為這段程式碼註冊的是區域性元件，只能在app中使用

4.2父子元件

在前面我們看到了元件樹，元件和元件之間存在層級關係，而其中一種非常重要的關係就是父子元件的關係。我們來看通過程式碼如何組成的這種層級關係：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- 使用元件-->
			<parent-cpn></parent-cpn>
		</div>
	</body>
	<script type="text/javascript">
		//1 建立一個子元件構造器  注意template的最外層必須用div包裹起來
		const childComponent = Vue.extend({
			template: `
				<div>我是子元件的內容，我是child哦</div>
			`
		})

		//2 建立一個父元件構造器  注意template的最外層必須用div包裹起來
		const parentComponet = Vue.extend({
			template: `
				<div>
					<p>我是父元件的內容，我是parent哦</p>
					<h2>我是父元件的標題</h2>
					<child-cpn></child-cpn>
				</div>
			`,
			components: {
				'child-cpn': childComponent
			}
		})

		let app = new Vue({
			el: '#app',
			components: {
				'parent-cpn': parentComponet
			}
		})
	</script>
</html>

注意：

這裡不能直接在Vue例項中使用，這樣使用瀏覽器不識別

因為當子元件註冊到父元件的components時，Vue會編譯好父元件的模組，該模板的內容已經決定了父元件將要渲染的HTML（相當於父元件中已經有了子元件中的內容了），是隻能在父元件中被識別的。類似這種用法，是會被瀏覽器忽略的。

註冊元件的語法糖

上面的註冊元件的方式有點繁瑣，Vue為了簡化註冊元件的過程，提供了註冊元件的語法糖

4.3模板的分離寫法

剛才，我們通過語法糖簡化了Vue元件的註冊過程，另外還有一個地方的寫法比較麻煩，就是template模組寫法。如果我們能將其中的HTML分離出來寫，然後掛載到對應的元件上，必然結構會變得非常清晰。Vue提供了兩種方案來定義HTML模組內容：

  • 使用

相關推薦

php設計模式-單例模式

<?php //簡單的單例 class Singleleton { private static $_instance = null; public static function getSingleleton()

設計模式 - 單例模式（詳解）看看和你理解的是否一樣？

一、概述 單例模式是設計模式中相對簡單且非常常見的一種設計模式，但是同時也是非常經典的高頻面試題，相信還是有很多人在面試時會掛在這裡。本篇文章主要針對單例模式做一個回顧，記錄單例模式的應用場景、常見寫法

Java設計模式單例模式(Singleton)用法解析

這篇文章主要介紹了Java設計模式單例模式(Singleton)用法詳解,文中通過示例程式碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下

javascript設計模式 – 單例模式原理與應用例項分析

本文例項講述了javascript設計模式 – 單例模式。分享給大家供大家參考，具體如下：

JavaScript設計模式---單例模式詳解【四種基本形式】

本文例項講述了JavaScript設計模式---單例模式.分享給大家供大家參考，具體如下：

Java設計模式——單例模式

類的單例設計模式：採取一定的方法保證在整個的軟體系統中，對某個類只能存在一個物件例項，並且該類只提供一個取得其物件例項的方法靜態方法 。

設計模式-單例模式

單例模式模式一般大家都會認為它比較簡單，其實並非你們所認為的那樣，很多情況下，單例模式會涉及到很多優化，下面給大家簡單介紹一下單例模式的幾種演變過程：

設計模式-單例模式的實現

單例模式 面試官所認為的單例模式 單例模式（詳解，面試問題） 單例模式的實現方式

設計模式 --單例模式

前言 單例模式應該是我們最熟悉的模式了，如果說要隨便抓一個程式設計師，讓他說一說最熟悉的集中設計模式，我想肯定有單例模式。

java設計模式-單例模式

package 單例模式; /* * 餓漢式 * 類載入到記憶體後 就例項化一個單例 JVM保證了執行緒安全

設計模式(單例模式)

一 、簡介 　　所謂類的單例設計模式，就是 採取一定的方法保證在整個的軟體系統中，對某個類只能存在一個物件例項，並且該類只提供一個取得其物件例項的方法(靜態方法)。 ​ 比如 Hibernate 的 SessionFactory，它

設計模式——單例模式

單例模式 通常我們可以讓一個全域性變數使得一個物件被訪問， 但它不能防止你例項化多個物件。

C#設計模式——單例模式

一、單例模式的介紹 什麼是單例模式，官方定義的是：確保一個類只有一個例項，並提供一個全域性訪問點。

設計模式 -- 單例模式

1在JAVA當中，如果我們需要建立一個物件，一般是通過該類new（）一個物件，但是如果在程式當中很多地方都

js設計模式——單例模式

什麼是單例模式 保證一個類僅有一個例項，並提供一個訪問它的全域性訪問點。

java之設計模式-單例模式

1.定義：指一個類只有一個例項，且該類能自行建立這個例項的一種模式。例如，Windows只能開啟一個工作管理員，這樣可以避免因開啟多個工作管理員視窗而造成記憶體資源的浪費，或出現各個視窗顯示內容不一致等錯誤。

設計模式--單例模式

模式定義；保證一個類只有一個例項，並且提供一個全域性訪問點。 應用場景：重量級的物件，不需要多個例項，如執行緒池，資料庫連線池。就是被複用的。。

設計模式 - 單例模式的8種寫法 ( Singleton )

. 阻止別人建立第二個例項 . 總共有8種寫法 . 第1種 餓漢式 不算完美, 但是比較實用, 所以比較推薦 一般程式設計師不太會去呼叫Class.forName(), 也就不會觸發new例項

設計模式---單例模式

一、模式設計（Design pattern） 單例模式（Singleton Pattern）是 Java 中最簡單的設計模式之一。這種型別的設計模式屬於建立型模式，它提供了一種建立物件的最佳方式。

常用設計模式-單例模式

單例模式（Singleton Pattern）是 Java 中最簡單的設計模式之一。這種型別的設計模式屬於建立型模式，它提供了一種建立物件的最佳方式。