javascript设计模式--备忘录模式（Memento）

  1 <!doctype html>

  2 <html lang="en">

  3 <head>

  4   <meta charset="UTF-8">

  5   <title>Memento</title>

  6 </head>

  7 <body>

  8 

  9 <script>

 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  * 1.调用原发器获得备忘录对象后，备忘录对象放在那里，哪个对象就可以算是管理者对象。

 46  * 2.管理者对象并不是只能管理一个备忘录对象。

 47  * 3.狭义的管理者对象制管理同一类的备忘录对象，广义的是可以管理不同类型的备忘录对象。

 48  * 4.管理者对象基本功能主要是缓存的实现，或者是一个简单的对象实例池。

 49  * 5.管理者虽然能存取备忘录对象，但是不能访问备忘录对象内部的数据。

 50  *

 51  * 窄接口和宽接口

 52  * 窄接口：管理者只能看到备忘录的窄接口，窄接口的实现中通常没有任何的方法，只是一个类型标识。窄接口使得管理者只能将备忘录传递给其他对象。

 53  * 宽接口：原发器能够看到一个宽接口，允许它访问所需的所有数据，来返回到先前的状态。

 54  *

 55  * 使用备忘录的潜在代价

 56  * 标准的备忘录模式的实现机制是依靠缓存来实现的，因此，当需要备忘的数据量较大时，或者是存储的备忘录对象数据量不大但是数量很多的时候，或者是用户很频繁地创建备忘录对象的时候，这些都会导致非常大的开销。

 57  *

 58  * 增量存储

 59  * 如果需要频繁地创建备忘录对象，而且创建和应用备忘录对象来恢复状态的顺序是可控的，那么可以让备忘录进行增量存储，也就是备忘录可以仅仅存储原发器内部相对于上一次存储状态后的增量改变。

 60  *

 61  * 备忘录模式调用顺序

 62  * 创建备忘录对象的阶段：

 63  * 1.创建原发器对象，调用原发器的业务处理方法。

 64  * 2.调用createMemento方法

 65  * 3.创建备忘录对象。

 66  * 4.调用saveMemento方法吧备忘录对象存放在管理者对象那里。

 67  *

 68  * 使用备忘录对象来恢复原发器对象状态的阶段：

 69  * 1.调用retriveMemento方法来获取要恢复的备忘录对象。

 70  * 2.调用setMemento方法，传入备忘录对象，来让原发器恢复状态。

 71  * 3.调用方法来获取状态数据。

 72  *

 73  *

 74  * 离线存储

 75  * 从备忘录模式的功能和实现上，是可以把备忘录的数据实现成为离线存储。

 76  */

 77 

 78 (function () {

 79   // 示例代码

 80 

 81   // 原发器对象

 82   function Originator() {

 83     // 表示原发器的状态

 84     var state = '';

 85     // 创建保存原发器对象的状态的备忘录对象

 86     this.createMemento = function () {

 87       return new MementoImpl(state);

 88     };

 89     // 重新设置原发器对象的状态，让其回到备忘录对象记录的状态

 90     this.setMemento = function (memento) {

 91       this.state = memento.getState();

 92     };

 93     // 真正的备忘录对象，实现备忘录窄接口

 94     // 实现程私有的内部类，不让外部访问

 95     function MementoImpl(state) {

 96       // 表示需要保存的状态

 97       state = state || '';

 98       // 只提供getter

 99       this.getState = function () {

100         return state;

101       };

102     }

103   }

104 

105   // 负责保存备忘录的对象

106   function Caretaker() {

107     var memento = null;

108     // 保存备忘录对象

109     this.saveMemento = function (mementoObj) {

110       memento = mementoObj;

111     };

112     // 获取被保存的备忘录对象

113     this.retriveMemento = function () {

114       return memento;

115     };

116   }

117 

118 }());

119 

120 (function () {

121   // 示例1

122 

123   // 模拟运行流程A

124   function FlowAMock(flowName) {

125     // 流程名称，不需要外部存储的状态数据

126     var flowName = flowName || '';

127     // 代指某个中间结果，需要外部存储的状态数据

128     var tempResult = 0;

129     // 代指某个中间结果，需要外部存储的状态数据

130     var tempState = '';

131     // 运行流程的第一个阶段

132     this.runPhaseOne = function () {

133       // 在这个阶段，可能产生了中间结果，示意一下

134       tempResult = 3;

135       tempState = 'PhaseOne';

136     };

137     // 按照方案一来运行流程后半部分

138     this.schema1 = function () {

139       tempState += ', Schema1';

140       console.log(tempState + ': now run ' + tempResult);

141       tempResult += 11;

142     };

143     // 按照方案二来运行流程后半部分

144     this.schema2 = function () {

145       tempState += ', Schema2';

146       console.log(tempState + ': now run ' + tempResult);

147       tempResult += 22;

148     };

149     // 创建保存原发器对象状态的备忘录对象

150     this.createMemento = function () {

151       return new MementoImpl(tempResult, tempState);

152     };

153     // 重新设置原发器对象的状态，让其回到备忘录对象记录的状态

154     this.setMemento = function (memento) {

155       tempResult = memento.getTempResult();

156       tempState = memento.getTempState();

157     };

158     // 真正的备忘录对象，实现备忘录窄接口

159     function MementoImpl(tempResult, tempState) {

160       tempResult = tempResult || 0;

161       tempState = tempState || '';

162       this.getTempResult = function () {

163         return tempResult;

164       };

165       this.getTempState = function () {

166         return tempState;

167       };

168     }

169   }

170 

171   // 负责保存模拟运行流程A的对象的备忘录对象

172   function FlowAMementoCareTaker() {

173     var memento = null;

174     // 保存备忘录对象

175     this.saveMemento = function (mementoObj) {

176       memento = mementoObj;

177     };

178     // 获取被保存的备忘录对象

179     this.retriveMemento = function () {

180       return memento;

181     };

182   }

183 

184   // 创建模拟运行流程的对象

185   var mock = new FlowAMock('TestFlow');

186   // 运行流程第一个阶段

187   mock.runPhaseOne();

188   // 创建一个管理者

189   var careTaker = new FlowAMementoCareTaker();

190   // 创建此时对象的备忘录对象，并保存到管理者对象那里，后面要用

191   careTaker.saveMemento(mock.createMemento());

192 

193   // 按照方案一来运行流程的后半部分

194   mock.schema1();

195 

196   // 从管理者获取备忘录对象，然后设置回去

197   // 让模拟运行流程的对象自己恢复自己的内部状态

198   mock.setMemento(careTaker.retriveMemento());

199 

200   // 按照方案二来运行流程的后半部分

201   mock.schema2();

202 

203 }());

204 

205 (function () {

206   // 再次实现可撤销操作

207 

208   function AbstractCommand() {

209     this.operation = null;

210   }

211 

212   AbstractCommand.prototype = {

213     execute: function () {

214     },

215     undo: function (memento) {

216       this.operation.setMemento(memento);

217     },

218     redo: function (memento) {

219       this.operation.setMemento(memento);

220     },

221     createMemento: function () {

222       return this.operation.createMemento();

223     }

224   };

225 

226   function AddCommand(opeNum) {

227     AbstractCommand.call(this);

228     this.opeNum = opeNum;

229   }

230 

231   AddCommand.prototype = {

232     __proto__: AbstractCommand.prototype,

233 

234     execute: function () {

235       this.operation.add(this.opeNum);

236     }

237   };

238 

239   function SubstractCommand(opeNum) {

240     AbstractCommand.call(this);

241     this.opeNum = opeNum;

242   }

243 

244   SubstractCommand.prototype = {

245     __proto__: AbstractCommand.prototype,

246 

247     execute: function () {

248       this.operation.substract(this.opeNum);

249     }

250   };

251 

252   function Operation() {

253     var result = 0;

254     this.getResult = function () {

255       return result;

256     };

257     this.add = function (num) {

258       result += num;

259     };

260     this.substract = function (num) {

261       result -= num;

262     };

263     this.createMemento = function () {

264       return new MementoImpl(result);

265     };

266     this.setMemento = function (memento) {

267       result = memento.getResult();

268     };

269 

270     function MementoImpl(result) {

271       result = result || 0;

272       this.getResult = function () {

273         return result;

274       };

275     }

276   }

277 

278   function Calculator() {

279     this.undoCmds = [];

280     this.redoCmds = [];

281     this.undoMementos = [];

282     this.redoMementos = [];

283     this.addCmd = null;

284     this.substractCmd = null;

285   }

286 

287   Calculator.prototype = {

288     addPressed: function () {

289       var m1 = this.addCmd.createMemento();

290 

291       this.addCmd.execute();

292       this.undoCmds.push(this.addCmd);

293 

294       var m2 = this.addCmd.createMemento();

295       this.undoMementos.push([m1, m2]);

296     },

297     substractPressed: function () {

298       var m1 = this.substractCmd.createMemento();

299 

300       this.substractCmd.execute();

301       this.undoCmds.push(this.substractCmd);

302 

303       var m2 = this.substractCmd.createMemento();

304       this.undoMementos.push([m1, m2]);

305     },

306     // 撤销

307     undoPressed: function () {

308       if (this.undoCmds.length) {

309         var cmd = this.undoCmds.pop();

310         var ms = this.undoMementos.pop();

311 

312         cmd.undo(ms[0]);

313         this.redoCmds.push(cmd);

314         this.redoMementos.push(ms);

315       } else {

316         console.log('很抱歉，没有可撤销命令');

317       }

318     },

319     // 恢复

320     redoPressed: function () {

321       if (this.redoCmds.length) {

322         var cmd = this.redoCmds.pop();

323         var ms = this.redoMementos.pop();

324 

325         cmd.redo(ms[1]);

326 

327         this.undoCmds.push(cmd);

328         this.undoMementos.push(ms);

329       } else {

330         console.log('很抱歉，没有可撤销命令');

331       }

332     }

333   };

334 

335   var operation = new Operation();

336   var addCmd = new AddCommand(5);

337   var substractCmd = new SubstractCommand(3);

338 

339   addCmd.operation = operation;

340   substractCmd.operation = operation;

341 

342   var calculator = new Calculator();

343   calculator.addCmd = addCmd;

344   calculator.substractCmd = substractCmd;

345 

346   calculator.addPressed();

347   console.log('一次加法运算后的结果为：' + operation.getResult());

348 

349   calculator.substractPressed();

350   console.log('一次减法运算后的结果为：' + operation.getResult());

351 

352   calculator.undoPressed();

353   console.log('撤销一次后的结果为：' + operation.getResult());

354 

355   calculator.undoPressed();

356   console.log('再撤销一次后的结果为：' + operation.getResult());

357 

358   calculator.redoPressed();

359   console.log('恢复操作一次后的结果为：' + operation.getResult());

360 

361   calculator.redoPressed();

362   console.log('在恢复操作一次后的结果为：' + operation.getResult());

363 }());

364 

365 /**

366  * 备忘录模式的优点

367  * 1.更好的封装性。

368  * 备忘录模式通过使用备忘录对象，来封装原发器对象的内部状态，虽然这个对象是保存在原发器对象的外部，但是由于备忘录对象的窄接口并不提供任何方法。这样有效地保证了对原发器对象内部状态的封装，不把原发器对象的内部实现细节暴露给外面。

369  * 2.简化了原发器。

370  * 备忘录对象被保存到了原发器对象之外，让客户来管理他们请求的状态，从而让原发器对象得到简化。

371  * 3.窄接口和宽接口。

372  *

373  * 缺点

374  * 1.可能会导致高开销。

375  *

376  *

377  * 何时选用

378  * 1.如果必须保存一个对象在某一个时刻的全部或者部分状态，方便在以后需要的时候，可以把该对象恢复到先前的状态，可以使用备忘录模式。使用备忘录对象来封装和保存需要保存的内部状态，然后把备忘录对象保存到管理者对象中，在需要的时候，再从管理者对象中获取备忘录对象，来恢复对象的状态。

379  * 2.如果需要保存一个对象的内部状态，但是如果用接口来让其他对象直接得到这些需要保存的状态，将会暴露对象的实现细节并破坏对象的封装性，这时可以使用备忘录模式。把备忘录对象实现成为原发器对象的内部类，而且还是私有的，从而保证只有原发器对象才能访问该备忘录对象。这样既保存了需要保存的状态，又不会暴露原发器对象的内部实现细节。

380  *

381  *

382  * 相关模式

383  * 备忘录模式和命令模式

384  * 可以组合使用。

385  * 命令模式中，在实现命令的撤销和重做的时候，可以使用备忘录模式，在命令操作的时候记录下操作前后的状态，然后在命令撤销和重做的时候，直接使用相应的备忘录对象来恢复状态就可以了。

386  * 在这种撤销的执行顺序和重做的执行顺序可控的情况下，备忘录对象还可以采用增量式记录的方式，有效减少缓存的数据量。

387  *

388  * 备忘录模式和原型模式

389  * 可以组合使用。

390  * 在原发器对象创建备忘录对象的时候，如果原发器对象中全部或者大部分的状态都需要保存，一个简洁的方式就是直接克隆一个原发器对象。也就是说，这个时候备忘录对象里面存放的是一个原发器对象的实例。

391  */

392 

393 (function () {

394   // http://www.dofactory.com/javascript-memento-pattern.aspx

395   var Person = function (name, street, city, state) {

396     this.name = name;

397     this.street = street;

398     this.city = city;

399     this.state = state;

400   };

401 

402   Person.prototype = {

403     hydrate: function () {

404       var memento = JSON.stringify(this);

405       return memento;

406     },

407     dehydrate: function (memento) {

408       var m = JSON.parse(memento);

409 

410       this.name = m.name;

411       this.street = m.street;

412       this.city = m.city;

413       this.state = m.state;

414     }

415   };

416 

417   var CareTaker = function () {

418     var mementos = {};

419 

420     this.add = function (key, memento) {

421       mementos[key] = memento;

422     };

423     this.get = function (key) {

424       return mementos[key];

425     };

426   };

427 

428   new function run() {

429 

430     var mike = new Person("Mike Foley", "1112 Main", "Dallas", "TX");

431     var john = new Person("John Wang", "48th Street", "San Jose", "CA");

432 

433     var caretaker = new CareTaker();

434 

435     // save state

436 

437     caretaker.add(1, mike.hydrate());

438     caretaker.add(2, john.hydrate());

439 

440     // mess up their names

441 

442     mike.name = "King Kong";

443     john.name = "Superman";

444 

445     // restore original state

446 

447     mike.dehydrate(caretaker.get(1));

448     john.dehydrate(caretaker.get(2));

449 

450     console.log(mike.name);

451     console.log(john.name);

452   };

453 }());

454 </script>

455 </body>

456 </html>

 

你可能感兴趣的:(JavaScript)

  • Long类型前后端数据不一致 igotyback 前端
    响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
  • DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计 网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
    ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
  • 关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业javascripthtmlcss旅游风景
    ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
  • HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动 二挡起步 web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
    Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
  • node.js学习 小猿L node.jsnode.js学习vim
    node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
  • JavaScript 中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy） 跳房子的前端 前端面试javascript开发语言ecmascript
    在JavaScript中，深拷贝（DeepCopy）和浅拷贝（ShallowCopy）是用于复制对象或数组的两种不同方法。了解它们的区别和应用场景对于避免潜在的bugs和高效地处理数据非常重要。以下是对深拷贝和浅拷贝的详细解释，包括它们的概念、用途、优缺点以及实现方式。1.浅拷贝（ShallowCopy）概念定义：浅拷贝是指创建一个新的对象或数组，其中包含了原对象或数组的基本数据类型的值和对引用数
  • JavaScript `Map` 和 `WeakMap`详细解释 跳房子的前端 JavaScript原生方法javascript前端开发语言
    在JavaScript中，Map和WeakMap都是用于存储键值对的数据结构，但它们有一些关键的不同之处。MapMap是一种可以存储任意类型的键值对的集合。它保持了键值对的插入顺序，并且可以通过键快速查找对应的值。Map提供了一些非常有用的方法和属性来操作这些数据对：set(key,value):将一个键值对添加到Map中。如果键已经存在，则更新其对应的值。get(key):获取指定键的值。如果键
  • 切换淘宝最新npm镜像源是 hai40587 npm前端node.js
    切换淘宝最新npm镜像源是一个相对简单的过程，但首先需要明确当前淘宝npm镜像源的状态和最新的镜像地址。由于网络环境和服务更新，镜像源的具体地址可能会发生变化，因此，我将基于当前可获取的信息，提供一个通用的切换步骤，并附上最新的镜像地址（截至回答时）。一、了解npm镜像源npm（NodePackageManager）是JavaScript的包管理器，用于安装、更新和管理项目依赖。由于npm官方仓库
  • 高性能javascript--算法和流程控制 海淀萌狗
    -for,while和do-while性能相当-避免使用for-in循环，==除非遍历一个属性量未知的对象==es5:for-in遍历的对象便不局限于数组，还可以遍历对象。原因：for-in每次迭代操作会同时搜索实例或者原型属性，for-in循环的每次迭代都会产生更多开销，因此要比其他循环类型慢，一般速度为其他类型循环的1/7。因此，除非明确需要迭代一个属性数量未知的对象，否则应避免使用for-i
  • 360前端星计划-动画可以这么玩 马小蜗
    动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能
  • JavaScript中秋快乐！ Q_w7742 javascript开发语言ecmascript
    我们来实现一个简单的祝福网页~主要的难度在于使用canvas绘图当点击canvas时候，跳出“中秋节快乐”字样，需要注册鼠标单击事件和计时器。首先定义主要函数：初始化当点击canvas之后转到onCanvasClick函数，绘图生成灯笼。functiononCanvasClick(){//事件处理函数context.clearRect(0,0,canvas1.width,canvas1.heigh
  • Nginx从入门到实践(三) 听你讲故事啊
    动静分离动静分离是将网站静态资源（JavaScript，CSS，img等文件）与后台应用分开部署，提高用户访问静态代码的速度，降低对后台应用访问。动静分离的一种做法是将静态资源部署在nginx上，后台项目部署到应用服务器上，根据一定规则静态资源的请求全部请求nginx服务器，达到动静分离的目标。rewrite规则Rewrite规则常见正则表达式Rewrite主要的功能就是实现URL的重写，Ngin
  • Nginx的使用场景：构建高效、可扩展的Web架构 张某布响丸辣 nginx前端架构
    Nginx，作为当今最流行的Web服务器和反向代理软件之一，凭借其高性能、稳定性和灵活性，在众多Web项目中扮演着核心角色。无论是个人博客、中小型网站，还是大型企业级应用，Nginx都能提供强大的支持。本文将探讨Nginx的几个主要使用场景，帮助读者理解如何在实际项目中充分利用Nginx的优势。1.静态文件服务对于包含大量静态文件（如HTML、CSS、JavaScript、图片等）的网站，Ngin
  • 前端知识点 ZhangTao_zata 前端javascriptcss
    下面是一个最基本的html代码body{font-family:Arial,sans-serif;margin:20px;}//JavaScriptfunctionthatdisplaysanalertwhencalledfunctionshowMessage(){alert("Hello!Youclickedthebutton.");}MyFirstHTMLPageWelcometoMyPage
  • 【JS】前端文件读取FileReader操作总结 程序员-张师傅 前端前端javascript开发语言
    前端文件读取FileReader操作总结FileReader是JavaScript中的一个WebAPI，它允许web应用程序异步读取用户计算机上的文件（或原始数据缓冲区）的内容，例如读取文件以获取其内容，并在不将文件发送到服务器的情况下在客户端使用它。这对于处理图片、文本文件等非常有用，尤其是当你想要在用户界面中即时显示文件内容或进行文件预览时。创建FileReader对象首先，你需要创建一个Fi
  • webstorm报错TypeError: this.cliEngine is not a constructor Blue_Color
    点击Details在控制台会显示报错的位置TypeError:this.cliEngineisnotaconstructoratESLintPlugin.invokeESLint(/Applications/RubyMine.app/Contents/plugins/JavaScriptLanguage/languageService/eslint/bin/eslint-plugin.js:97:
  • 创建一个完整的购物商城系统是一个复杂的项目，涉及前端（用户界面）、后端（服务器逻辑）、数据库等多个部分。由于篇幅限制，我无法在这里提供一个完整的系统代码，但我可以分别给出一些关键部分的示例代码，涵盖几 uthRaman 前端ui服务器
    前端（HTML/CSS/JavaScript）grsyzp.cnHTML页面结构（index.html）html购物商城欢迎来到购物商城JavaScript（Ajax请求商品数据，app.js）javascriptdocument.addEventListener('DOMContentLoaded',function(){fetch('/api/products').then(response=
  • 了解 UNPKG：前端开发者的包管理利器 小于负无穷 前端javascripttypescriptcsshtml5node.js
    在现代前端开发中，JavaScript包管理和模块化是至关重要的，而npm则是最流行的JavaScript包管理器之一。不过，随着前端项目复杂性的增加，有时候我们希望快速引入外部依赖，而无需本地安装和构建。此时，CDN（内容分发网络）成为了一种方便快捷的解决方案，而UNPKG就是这种方式中的佼佼者。什么是UNPKG？UNPKG是一个基于npm的内容分发网络（CDN），它允许开发者直接通过URL从n
  • 2019-05-29 vue-router的两种模式的区别 Kason晨
    1、大家都知道vue是一种单页应用,单页应用就是仅在页面初始化的时候加载相应的html/css/js一单页面加载完成,不会因为用户的操作而进行页面的重新加载或者跳转,用javascript动态的变化html的内容优点:良好的交互体验,用户不需要刷新页面,页面显示流畅,良好的前后端工作分离模式,减轻服务器压力,缺点:不利于SEO,初次加载耗时比较多2、hash模式vue-router默认的是hash
  • electron多标签页模式更像客户端 diygwcom electronjavascript前端
    Electron多标签页模式是指在Electron框架中实现的类似Web浏览器的多标签页功能。Electron是一个使用Web技术（HTML、CSS和JavaScript）来创建跨平台桌面应用程序的框架。在Electron中实现多标签页模式，通常需要借助一些特定的库或组件，如BrowserView或electron-tabs，或者通过自定义实现。实现方式1.使用BrowserViewBrowser
  • 外卖霸王餐返利外卖会员卡小程序开发 闹小艾 good506070微信小程序小程序
    外卖霸王餐返利外卖会员卡小程序开发"社交电商赋能下的外卖返利小程序"是专为商家与用户双赢而设计的创新平台。以下是其开发方案的详细步骤：一、需求梳理：首先，我们需要明确小程序的核心功能和特色。包括设定活动类型、返利策略，以及用户体验友好的界面设计。二、技术决策：技术选型是关键。我们采用小程序的开发框架，利用JavaScript作为前端开发语言，并结合微信提供的API进行后端接口调用与数据处理。三、账
  • Axure设计之全屏与退出全屏交互实现 招风的黑耳 Axureaxure交互
    在AxureRP中，设计全屏与退出全屏的交互功能可以极大地提升用户体验，尤其是在展示产品原型或进行演示时。本文将详细介绍如何在AxureRP中通过结合JavaScript代码实现全屏与退出全屏的交互效果。Axure原型设计web端交互元件库：https://1zvcwx.axshare.com一、设计思路全屏与退出全屏的交互设计主要依赖于JavaScript代码来控制浏览器的全屏模式。在Axure
  • 全面指南：用户行为从前端数据采集到实时处理的最佳实践 数字沉思 营销流量运营系统架构前端内容运营大数据
    引言在当今的数据驱动世界，实时数据采集和处理已经成为企业做出及时决策的重要手段。本文将详细介绍如何通过前端JavaScript代码采集用户行为数据、利用API和Kafka进行数据传输、通过Flink实时处理数据的完整流程。无论你是想提升产品体验还是做用户行为分析，这篇文章都将为你提供全面的解决方案。设计一个通用的ClickHouse表来存储用户事件时，需要考虑多种因素，包括事件类型、时间戳、用户信
  • EcmaScript和JavaScript的区别 每天吃八顿 前端ecmascript
    ECMAScript和JavaScript是经常被混淆的两个术语，但实际上它们之间存在一些区别：ECMAScript：ECMAScript（通常缩写为ES，并且有版本号如ES5,ES6和ES7等）是由ECMA国际（EuropeanComputerManufacturersAssociation）制定的一种脚本语言的规范。这个规范定义了语法、命令、数据类型等基本元素。ECMAScript是一种规范，
  • javascript添加p元素，html添加文字，appendChild 游勇一 javascripthtml添加pappendChild
    javascript添加p元素，html添加文字，appendChild。网页添加p元素效果截图。个人签名：游志勇，预制板，南托岭预制场。文字展示#wordsadd{font-size:70px;word-break:break-all;}#wordsaddp{margin:002px0;padding:002px0;line-height:93%;}.btn_width{width:90px;}
  • CesiumJS+SuperMap3D.js混用实现可视域分析 S3M图层加载 裁剪区域绘制 SteveJi666 WebGLcesiumEarthSDKSuperMap3djavascript前端arcgis
    版本简介：cesium：1.99；Supermap3D：SuperMapiClientJavaScript11i(2023)；官方下载文档链家：SuperMap技术资源中心|为您提供全面的在线技术服务示例参考：support.supermap.com.cn:8090/webgl/Cesium/examples/webgl/examples.html#analysissupport.supermap
  • html打开本地excel文件夹,html使用excel表格数据库-html读取本地excel文件并展示 睿理
    html表格如何导入到excel中在vs里面用添加数据源就可以啊,再使用数据控件,就可以操作.添加数据源可以用odbc数据源,两种方式1,是在控制面板的管理工具里在ODBC里先设置好.2,是使用连接字符串.用vs的添加数据源向导做.html中有没有类似excel表格，可以填数的表格控件？首先html不能读取本地excel文件其次就算是javascript也是不允许的这是为了安全考虑如果前端脚本可以
  • 如何在 Python 中声明一个静态属性? 潮易 python开发语言
    在Python中，静态属性的定义和使用方式与JavaScript中的类似，主要是通过`@staticmethod`装饰器来实现。静态属性不需要实例化对象就可以访问，它们属于类本身。###如何声明一个静态属性：1.首先，需要在属性名前添加`@staticmethod`装饰器。2.接下来，定义一个普通方法，该方法的第一个参数通常为`cls`（用于表示类的引用）。###代码示例：```pythoncla
  • 数据格式：什么是JSON和XML isNotNullX jsonxml
    JSON和XML都是数据交换的一种格式，用于在不同的系统和应用程序之间传输和存储数据。本文将解释JSON和XML的基础内容，并探讨两者的不同。一·什么是JSON？1.JSON（JavaScriptObjectNotation）即JavaScript对象标记法：-JSON是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。-JSON基于JavaScript的一个子集，但JSON是
  • HighCharts图表自动化简介 知识的宝藏 Selenium高级篇Selenium图表自动化测试highcharts图表自动化Selenium图表自动化图表自动化测试highchartsSelenium
    什么是分析数据？在任何应用程序中捕获并以图形或图表形式显示的分析数据是任何产品或系统的关键部分，因为它提供了对实时数据的洞察。验证此类分析数据非常重要，因为不准确的数据可能会在报告中产生问题，并可能影响应用程序/系统的其他相关领域。什么是HighChart？Highcharts是一个用纯JavaScript编写的j基于SVG成图技术的图表库，提供了一种简单的方法来向您的网站或Web应用程序添加交互
  • Dom 周华华 JavaScripthtml
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&q
  • 【Spark九十六】RDD API之combineByKey bit1129 spark
    1. combineByKey函数的运行机制   RDD提供了很多针对元素类型为(K,V)的API，这些API封装在PairRDDFunctions类中，通过Scala隐式转换使用。这些API实现上是借助于combineByKey实现的。combineByKey函数本身也是RDD开放给Spark开发人员使用的API之一   首先看一下combineByKey的方法说明：
  • msyql设置密码报错：ERROR 1372 (HY000): 解决方法详解 daizj mysql设置密码
    MySql给用户设置权限同时指定访问密码时，会提示如下错误： ERROR 1372 (HY000): Password hash should be a 41-digit hexadecimal number；   问题原因：你输入的密码是明文。不允许这么输入。   解决办法：用select password('你想输入的密码');查询出你的密码对应的字符串， 然后
  • 路漫漫其修远兮 吾将上下而求索 周凡杨 学习 思索
    王国维在他的《人间词话》中曾经概括了为学的三种境界古今之成大事业、大学问者，罔不经过三种之境界。“昨夜西风凋碧树。独上高楼，望尽天涯路。”此第一境界也。“衣带渐宽终不悔，为伊消得人憔悴。”此第二境界也。“众里寻他千百度，蓦然回首，那人却在灯火阑珊处。”此第三境界也。学习技术，这也是你必须经历的三种境界。第一层境界是说，学习的路是漫漫的，你必须做好充分的思想准备，如果半途而废还不如不要开始。这里，注
  • Hadoop(二)对话单的操作 朱辉辉33 hadoop
    Debug： 1、 A = LOAD '/user/hue/task.txt' USING PigStorage(' ') AS (col1,col2,col3); DUMP A; //输出结果前几行示例： (>ggsnPDPRecord(21),,) (-->recordType(0),,) (-->networkInitiation(1),,)
  • web报表工具FineReport常用函数的用法总结（日期和时间函数） 老A不折腾 finereport报表工具web开发
    web报表工具FineReport常用函数的用法总结（日期和时间函数）   说明：凡函数中以日期作为参数因子的，其中日期的形式都必须是yy/mm/dd。而且必须用英文环境下双引号(" ")引用。   DATE DATE(year,month,day):返回一个表示某一特定日期的系列数。 Year:代表年，可为一到四位数。 Month:代表月份。
  • c++ 宏定义中的##操作符 墙头上一根草 C++
    #与##在宏定义中的--宏展开 #include <stdio.h> #define f(a,b) a##b #define g(a)   #a #define h(a) g(a) int main() {       &nbs
  • 分析Spring源代码之，DI的实现 aijuans springDI现源代码
    (转) 分析Spring源代码之，DI的实现 2012/1/3 by tony                 接着上次的讲，以下这个sample [java]  view plain copy print
  • for循环的进化 alxw4616 JavaScript
    // for循环的进化 // 菜鸟 for (var i = 0; i < Things.length ; i++) { // Things[i] } // 老鸟 for (var i = 0, len = Things.length; i < len; i++) { // Things[i] } // 大师 for (var i = Things.le
  • 网络编程Socket和ServerSocket简单的使用 百合不是茶 网络编程基础IP地址端口
      网络编程;TCP/IP协议   网络:实现计算机之间的信息共享,数据资源的交换   协议:数据交换需要遵守的一种协议,按照约定的数据格式等写出去   端口:用于计算机之间的通信      每运行一个程序，系统会分配一个编号给该程序，作为和外界交换数据的唯一标识 0~65535   查看被使用的
  • JDK1.5 生产消费者 bijian1013 javathread生产消费者java多线程
    ArrayBlockingQueue：        一个由数组支持的有界阻塞队列。此队列按 FIFO（先进先出）原则对元素进行排序。队列的头部 是在队列中存在时间最长的元素。队列的尾部 是在队列中存在时间最短的元素。新元素插入到队列的尾部，队列检索操作则是从队列头部开始获得元素。 ArrayBlockingQueue的常用方法：
  • JAVA版身份证获取性别、出生日期及年龄 bijian1013 java性别出生日期年龄
            工作中需要根据身份证获取性别、出生日期及年龄，且要还要支持15位长度的身份证号码，网上搜索了一下，经过测试好像多少存在点问题，干脆自已写一个。 CertificateNo.java package com.bijian.study; import java.util.Calendar; import
  • 【Java范型六】范型与枚举 bit1129 java
    首先，枚举类型的定义不能带有类型参数，所以，不能把枚举类型定义为范型枚举类，例如下面的枚举类定义是有编译错的   public enum EnumGenerics<T> { //编译错，提示枚举不能带有范型参数 OK, ERROR; public <T> T get(T type) { return null;
  • 【Nginx五】Nginx常用日志格式含义 bit1129 nginx
    1. log_format 1.1 log_format指令用于指定日志的格式，格式：   log_format name(格式名称) type(格式样式)   1.2 如下是一个常用的Nginx日志格式：   log_format main '[$time_local]|$request_time|$status|$body_bytes
  • Lua 语言 15 分钟快速入门 ronin47 lua 基础
    - - 单行注释 - - [[      [多行注释] - - ]]   - - - - - - - - - - - 1. 变量 & 控制流 - - - - - - - - - - num = 23 - - 数字都是双精度 str = 'aspythonstring'
  • java-35.求一个矩阵中最大的二维矩阵 ( 元素和最大 ) bylijinnan java
    the idea is from: http://blog.csdn.net/zhanxinhang/article/details/6731134 public class MaxSubMatrix { /**see http://blog.csdn.net/zhanxinhang/article/details/6731134 * Q35 求一个矩阵中最大的二维
  • mongoDB文档型数据库特点 开窍的石头 mongoDB文档型数据库特点
    MongoDD: 文档型数据库存储的是Bson文档-->json的二进制 特点：内部是执行引擎是js解释器，把文档转成Bson结构，在查询时转换成js对象。 mongoDB传统型数据库对比    传统类型数据库：结构化数据，定好了表结构后每一个内容符合表结构的。也就是说每一行每一列的数据都是一样的    文档型数据库：不用定好数据结构，
  • [毕业季节]欢迎广大毕业生加入JAVA程序员的行列 comsci java
        一年一度的毕业季来临了。。。。。。。。      正在投简历的学弟学妹们。。。如果觉得学校推荐的单位和公司不适合自己的兴趣和专业，可以考虑来我们软件行业，做一名职业程序员。。。      软件行业的开发工具中，对初学者最友好的就是JAVA语言了，网络上不仅仅有大量的
  • PHP操作Excel – PHPExcel 基本用法详解 cuiyadll PHPExcel
    导出excel属性设置//Include classrequire_once('Classes/PHPExcel.php');require_once('Classes/PHPExcel/Writer/Excel2007.php');$objPHPExcel = new PHPExcel();//Set properties 设置文件属性$objPHPExcel->getProperties
  • IBM Webshpere MQ Client User Issue (MCAUSER) darrenzhu IBMjmsuserMQMCAUSER
    IBM MQ JMS Client去连接远端MQ Server的时候，需要提供User和Password吗？ 答案是根据情况而定，取决于所定义的Channel里面的属性Message channel agent user identifier (MCAUSER)的设置。 http://stackoverflow.com/questions/20209429/how-mca-user-i
  • 网线的接法 dcj3sjt126com
    一、PC连HUB (直连线)A端：（标准568B）：白橙，橙，白绿，蓝，白蓝，绿，白棕，棕。 B端：（标准568B）：白橙，橙，白绿，蓝，白蓝，绿，白棕，棕。 二、PC连PC （交叉线）A端：(568A)： 白绿，绿，白橙，蓝，白蓝，橙，白棕，棕； B端：（标准568B）：白橙，橙，白绿，蓝，白蓝，绿，白棕，棕。 三、HUB连HUB&nb
  • Vimium插件让键盘党像操作Vim一样操作Chrome dcj3sjt126com chromevim
    什么是键盘党？ 键盘党是指尽可能将所有电脑操作用键盘来完成，而不去动鼠标的人。鼠标应该说是新手们的最爱，很直观，指哪点哪，很听话！不过常常使用电脑的人，如果一直使用鼠标的话，手会发酸，因为操作鼠标的时候，手臂不是在一个自然的状态，臂肌会处于绷紧状态。而使用键盘则双手是放松状态，只有手指在动。而且尽量少的从鼠标移动到键盘来回操作，也省不少事。 在chrome里安装 vimium 插件
  • MongoDB查询（2）——数组查询[六] eksliang mongodbMongoDB查询数组
    MongoDB查询数组 转载请出自出处：http://eksliang.iteye.com/blog/2177292 一、概述  MongoDB查询数组与查询标量值是一样的，例如，有一个水果列表，如下所示： > db.food.find() { "_id" : "001", "fruits" : [ "苹
  • cordova读写文件（1） gundumw100 JavaScriptCordova
    使用cordova可以很方便的在手机sdcard中读写文件。 首先需要安装cordova插件：file 命令为： cordova plugin add org.apache.cordova.file 然后就可以读写文件了，这里我先是写入一个文件，具体的JS代码为： var datas=null;//datas need write var directory=&
  • HTML5 FormData 进行文件jquery ajax 上传 到又拍云 ileson jqueryAjaxhtml5FormData
    html5 新东西：FormData  可以提交二进制数据。 页面test.html <!DOCTYPE> <html> <head> <title> formdata file jquery ajax upload</title> </head> <body> <
  • swift appearanceWhenContainedIn:(version1.2 xcode6.4) 啸笑天 version
      swift1.2中没有oc中对应的方法： + (instancetype)appearanceWhenContainedIn:(Class <UIAppearanceContainer>)ContainerClass, ... NS_REQUIRES_NIL_TERMINATION;  解决方法： 在swift项目中新建oc类如下： #import &
  • java实现SMTP邮件服务器 macroli java编程
    电子邮件传递可以由多种协议来实现。目前，在Internet 网上最流行的三种电子邮件协议是SMTP、POP3 和 IMAP，下面分别简单介绍。 　　◆ SMTP 协议 　　简单邮件传输协议(Simple Mail Transfer Protocol,SMTP)是一个运行在TCP/IP之上的协议，用它发送和接收电子邮件。SMTP 服务器在默认端口25上监听。SMTP客户使用一组简单的、基于文本的
  • mongodb group by having where 查询sql qiaolevip 每天进步一点点学习永无止境mongo纵观千象
    SELECT cust_id, SUM(price) as total FROM orders WHERE status = 'A' GROUP BY cust_id HAVING total > 250 db.orders.aggregate( [ { $match: { status: 'A' } }, { $group: {
  • Struts2 Pojo（六） Luob. POJOstrust2
    注意：附件中有完整案例 1.采用POJO对象的方法进行赋值和传值 2.web配置 <?xml version="1.0" encoding="UTF-8"?> <web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee&q
  • struts2步骤 wuai struts
    1、添加jar包 2、在web.xml中配置过滤器 <filter>        <filter-name>struts2</filter-name>        <filter-class>org.apache.st
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他