xml地图|网站地图|网站标签 [设为首页] [加入收藏]

正规赌博十大app排名

当前位置:网上十大正规赌博平台 > 正规赌博十大app排名 > 学习JavaScript设计模式之状态模式,切割字符串的

学习JavaScript设计模式之状态模式,切割字符串的

来源:http://www.nb-machinery.com 作者:网上十大正规赌博平台 时间:2019-07-14 03:12

对于字符串的切割截取平时所用可能不是特别多,而且分的比较细,所以自备自查。有备无患。

状态模式的关键是区分事物内部的状态,事物内部状态的改变往往会带来事物的行为改变。

Tocify是一个能够动态生成文章节点目录的jQuery插件。假如我们有一篇很长的文章,文章有多个节点,那么使用Tocify可以根据节点元素动态生成文章目录,点击目录可以平滑滚动到对应的节点,当然当滚动页面时,目录结构会根据当前监听到的节点进行切换到当前目录状态。

由于之前所有均在一个demo测试,若是哪里打错了,敬请谅解。一些其余属性找时间继续添加。

当电灯开着,此时按下开关,电灯会切换到关闭状态;再按一次开关,电灯又将被打开。同一个开关在不同的状态下,表现出来的行为是不一样的。

图片 1

1.函数:split()

一、有限状态机

效果展示         源码下载.rar)

功能:使用一个指定的分隔符把一个字符串分割存储到数组

  • 状态总数(state)是有限的。
  • 任一时刻,只处在一种状态之中。
  • 某种条件下,会从一种状态转变(transition)到另一种状态。**
    **

Tocify目前支持Twitter Bootstrap和jQueryUI Themeroller两种主题风格,我们可以根据实际项目任选其中一种风格,另外必要条件jQuery 1.7.2 和jQueryUI Widget Factory 1.8.21 。放心在IE7 即现代浏览器上使用。

例子: str=”jpg|bmp|gif|ico|png”; arr=str.split(”|”);
//arr是一个包含字符值”jpg”、”bmp”、”gif”、”ico”和”png”的数组

允许一个对象在其内部状态改变时改变它的行为,对象看起来似乎修改了它的类。
解释:
(1)将状态封装成独立的类,并将请求委托给当前的状态对象,当对象的内部状态发生改变时,会带来不同的行为变化。
(2)使用的对象,在不同的状态下具有截然不同的行为(委托效果)

引入CSS和Javascript文件

2.函数:join()

谈到封装,一般优先考虑封装对象的行为,而不是对象的状态。
但在状态模式中刚好相反,状态模式的关键是把事物的每种状态都封装成单独的类。

css文件

功能:使用您选择的分隔符将一个数组合并为一个字符串

二、示例

<link type="text/css" rel="stylesheet" href="jquery.tocify.css" /> 
<link type="text/css" rel="stylesheet" href="bootstrap.css" /> 

例子: var delimitedString=myArray.join(delimiter);
var myList=new Array(”jpg”,”bmp”,”gif”,”ico”,”png”);
var portableList=myList.join(”|”);
//结果是jpg|bmp|gif|ico|png

点灯程序 (弱光 –> 强光 –> 关灯)循环

JavaScript文件

3.函数:concat()

// 关灯
var OffLightState = function(light) {
  this.light = light;
};
// 弱光
var OffLightState = function(light) {
  this.light = light;
};
// 强光
var StrongLightState = function(light) {
  this.light = light;
};

var Light = function(){
  /* 开关状态 */
  this.offLight = new OffLightState(this);
  this.weakLight = new WeakLightState(this);
  this.strongLight = new StrongLightState(this);
  /* 快关按钮 */
  this.button = null;
};
Light.prototype.init = function() {
  var button = document.createElement("button"),
    self = this;
  this.button = document.body.appendChild(button);
  this.button.innerHTML = '开关';
  this.currentState = this.offLight;
  this.button.click = function() {
    self.currentState.buttonWasPressed();
  }
};
// 让抽象父类的抽象方法直接抛出一个异常(避免状态子类未实现buttonWasPressed方法)
Light.prototype.buttonWasPressed = function() {
  throw new Error("父类的buttonWasPressed方法必须被重写");
};
Light.prototype.setState = function(newState) {
  this.currentState = newState;
};

/* 关灯 */
OffLightState.prototype = new Light(); // 继承抽象类
OffLightState.prototype.buttonWasPressed = function() {
  console.log("关灯!");
  this.light.setState(this.light.weakLight);
}
/* 弱光 */
WeakLightState.prototype = new Light();
WeakLightState.prototype.buttonWasPressed = function() {
  console.log("弱光!");
  this.light.setState(this.light.strongLight);
};
/* 强光 */
StrongLightState.prototype = new Light();
StrongLightState.prototype.buttonWasPressed = function() {
  console.log("强光!");
  this.light.setState(this.light.offLight);
};
<script src="jquery-1.7.2.min.js"></script> 
<script src="jquery-ui-1.9.1.custom.min.js"></script> 
<script src="jquery.tocify.min.js""></script> 

功能:将两个数组连接在一起;

PS:说明补充
必须把OffLightState、WeakLightState、StrongLightState构造函数提前。

HTML结构

例子:arr1=[1,2,3,4]
  arr2=[5,6,7,8]
  alert(arr1.concat(arr2)) //结果为[1,2,3,4,5,6,7,8]

new A("a");
var A = function(a) {
  console.log(a)
}

new B("b");
function B(b) {
  console.log(b);
}

创建一个DIV标签,然后给这个标签添加一个ID或者Class,例如:toc

4.函数:charAt()

函数声明会被提升到普通变量之前。

<div id="toc"></div>

功能:返回指定位置的字符。字符串中第一个字符的下标是 0。如果参数 index 不在 0 与 string.length 之间,该方法将返回一个空字符串。

三、性能优化点

这个div#toc它默认是空的内容,它用来动态生成文章目录,那文章目录如何动态关联文章节点的呢?我们还需要把文章节点做一些规划,如:

例子:var str='a,g,i,d,o,v,w,d,k,p'
alert(str.charAt(2)) //结果为g

(1)如何管理状态对象的创建和销毁?
第一种仅当state对象被需要时才创建并随后销毁(state对象比较庞大,优先选择),
另一种是一开始就创建好所有的状态对象,并且始终不销毁它们(状态改变频繁)。
(2)利用享元模式共享一个state对象。

<div class="wrap"> 
<h1>Tocify</h1> 
<br /> 
<section> 
<h2>节点1</h2> 
<p>内容</p> 
</section> 
<br /> 
<section> 
<h2>节点2</h2> 
<p>内容</p> 
</section> 
... 
</div>

本文由网上十大正规赌博平台发布于正规赌博十大app排名,转载请注明出处:学习JavaScript设计模式之状态模式,切割字符串的

关键词: mg4355官网