Maison interface Web js tutoriel Comment implémenter la méthode de modèle singleton en JavaScript

Comment implémenter la méthode de modèle singleton en JavaScript

Oct 18, 2017 am 10:56 AM
javascript js 方法

Cet article présente principalement les informations pertinentes sur la méthode d'implémentation de la méthode modèle singleton en javascript. J'espère que cet article pourra aider tout le monde. Les amis dans le besoin peuvent se référer à

Exemple de méthode modèle singleton en javascript. méthode d'implémentation

Méthode modèle singleton

Définition de la méthode modèle : définir un ensemble de squelettes d'algorithmes d'opération dans la classe parent et étendre certaines étapes d'implémentation à In la sous-classe, la sous-classe peut redéfinir certaines étapes de mise en œuvre dans l'algorithme sans modifier la structure de l'algorithme de la classe parent.

Bloc de code

partie html, par exemple :


1

<p id="content"></p>

Copier après la connexion

partie js, par exemple :


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

//格式化字符串方法

function fromateString(str, data) {

 return str.replace(/\{#(\w+)#\}/g, function(match, key){

  return typeof data[key] === undefined ? '' : data[key]

 });

}

//基础导航

var Nav = function (data) {

 //基础导航样式模板

 this.item = '<a href="{#href#}" rel="external nofollow" title="{#title#}">{#name#}</a>';

 //创建字符串

 this.html='';

 for (var i = 0; i < data.length; i++) {

  this.html += fromateString(this.item, data[i]);

 }

 return this.html;

}

//带有信息提示信息导航

var NumNav = function (data) {

 //消息提醒小心组件模板

 var tpl = '<p>{#num#}</p>';

 for (var i = data.length -1; i >= 0; i--) {

  data[i].name += data[i].name + fromateString(tpl, data[i]);

 }

 return Nav.call(this, data);

}

//带有链接地址的导航

var LinkNav = function (data) {

 //消息提醒小心组件模板

 var tpl = '<span>{#link#}</span>';

 for (var i = data.length -1; i >= 0; i--) {

  data[i].name += data[i].name + fromateString(tpl, data[i]);

 }

 return Nav.call(this, data);

}

 

//测试带有信息提示的导航

var nav = document.getElementById('content');

nav.innerHTML = NumNav([

 {

  href : 'www.baidu.com',

  title : '百度一下你就知道',

  name : '百度',   

  num : 10,

  link : 'www.baidu.com'

 },

 {

  href : 'www.taobao.com',

  title : '淘宝商城',

  name : '淘宝',   

  num : 2,

  link : 'www.taobao.com'

 },

 {

  href : 'www.qq.com',

  title : '腾讯首页',

  name : '腾讯',   

  num : 3,

  link : 'www.qq.com'

 }

]);

Copier après la connexion

En fait, le modèle de méthode modèle n'est pas seulement utilisé lorsque nous normalisons des composants, mais est également très couramment utilisé lors de la création de pages. Le code ci-dessus peut dériver l'encapsulation de pages statiques et l'encapsulation interactive de la logique métier.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD

Tags d'article chaud

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Comment écrire un roman dans l'application Tomato Free Novel Partagez le tutoriel sur la façon d'écrire un roman dans l'application Tomato Novel Comment écrire un roman dans l'application Tomato Free Novel Partagez le tutoriel sur la façon d'écrire un roman dans l'application Tomato Novel Mar 28, 2024 pm 12:50 PM

Comment écrire un roman dans l'application Tomato Free Novel Partagez le tutoriel sur la façon d'écrire un roman dans l'application Tomato Novel

Comment entrer dans le bios sur la carte mère Colorful ? Apprenez-vous deux méthodes Comment entrer dans le bios sur la carte mère Colorful ? Apprenez-vous deux méthodes Mar 13, 2024 pm 06:01 PM

Comment entrer dans le bios sur la carte mère Colorful ? Apprenez-vous deux méthodes

Comment récupérer des contacts supprimés sur WeChat (un tutoriel simple vous explique comment récupérer des contacts supprimés) Comment récupérer des contacts supprimés sur WeChat (un tutoriel simple vous explique comment récupérer des contacts supprimés) May 01, 2024 pm 12:01 PM

Comment récupérer des contacts supprimés sur WeChat (un tutoriel simple vous explique comment récupérer des contacts supprimés)

Résumé des méthodes pour obtenir les droits d'administrateur dans Win11 Résumé des méthodes pour obtenir les droits d'administrateur dans Win11 Mar 09, 2024 am 08:45 AM

Résumé des méthodes pour obtenir les droits d'administrateur dans Win11

Maîtrisez rapidement : comment ouvrir deux comptes WeChat sur les téléphones mobiles Huawei révélé ! Maîtrisez rapidement : comment ouvrir deux comptes WeChat sur les téléphones mobiles Huawei révélé ! Mar 23, 2024 am 10:42 AM

Maîtrisez rapidement : comment ouvrir deux comptes WeChat sur les téléphones mobiles Huawei révélé !

Le secret de l'éclosion des œufs de dragon mobiles est révélé (étape par étape pour vous apprendre à réussir l'éclosion des œufs de dragon mobiles) Le secret de l'éclosion des œufs de dragon mobiles est révélé (étape par étape pour vous apprendre à réussir l'éclosion des œufs de dragon mobiles) May 04, 2024 pm 06:01 PM

Le secret de l'éclosion des œufs de dragon mobiles est révélé (étape par étape pour vous apprendre à réussir l'éclosion des œufs de dragon mobiles)

Explication détaillée de la méthode de requête de version Oracle Explication détaillée de la méthode de requête de version Oracle Mar 07, 2024 pm 09:21 PM

Explication détaillée de la méthode de requête de version Oracle

Comment définir la taille de la police sur le téléphone mobile (ajustez facilement la taille de la police sur le téléphone mobile) Comment définir la taille de la police sur le téléphone mobile (ajustez facilement la taille de la police sur le téléphone mobile) May 07, 2024 pm 03:34 PM

Comment définir la taille de la police sur le téléphone mobile (ajustez facilement la taille de la police sur le téléphone mobile)

See all articles