javascript设计模式--状态模式（State）

  1 <!doctype html>

  2 <html lang="en">

  3 <head>

  4     <meta charset="UTF-8">

  5     <title>State Pattern</title>

  6 </head>

  7 <body>

  8 

  9 <script>

 10 /**

 11  * 状态模式

 12  *

 13  * 定义：

 14  * 允许一个对象在其内部状态改变时改变它的行为，对象看起来似乎修改了它的类。

 15  *

 16  * 本质：

 17  * 根据状态来分离和选择行为

 18  *

 19  * 1.状态和行为

 20  * 所谓对象的状态，通常指的就是对象实例的属性的值；而行为指的就是对象的功能，再具体点，行为大多可以对应到方法上。

 21  * 状态模式的功能就是分离状态和行为，通过维护状态的变化，来调用不同状态的的不同功能。

 22  * 也就是说，状态和行为是相关联的，它们的关系可以描述为：状态决定行为。

 23  *

 24  * 2.行为的平行性

 25  * 平行性指的是各个状态的行为所处的层次是一样的，相互是独立的，没有关联的，是根据不同的状态来决定到底走平行线哪一条。行为是不用的，当然对应的实现也是不同的，相互之间是不可替换的。

 26  * 平等性强调的是可替换性，大家是同一行为的不同描述或实现，因此在同一个行为发生的时候，可以根据条件挑选任意的一个实现来进行相应的处理。

 27  * 状态模式和策略模式的结构完全一样。状态模式的行为是平行性的，不可相互替换的；而策略模式的行为是平等性的，可相互替换的。

 28  *

 29  * 3.上下文和状态处理对象呢

 30  * 在状态模式中，上下文是持有状态的对象，但是上下文自身并不处理跟状态相关的行为，而是把处理状态的功能委托给了状态对应的状态处理类来处理。

 31  * 在具体的状态处理类中经常需要获取上下文自身的数据，甚至在必要的时候会回调上下文的方法，因此，通常将上下文自身当作一个参数传递给具体的状态处理类。

 32  * 客户端一般只和上下文交互。客户端可以用状态对象来配置一个上下文，一旦配置完毕，就不需要再和状态对象打交道了。

 33  *

 34  * 4.不完美的OCP体验

 35  * 由于状态的维护和转换在状态模式结构里面，不管你是扩展了状态实现类，还是新添加了状态实现类，都需要修改状态维护和转换的地方。

 36  *

 37  * 5.创建和销毁状态对象

 38  * 究竟何时创建和销毁状态对象？

 39  * 1）当需要使用状态对象的时候创建，使用完后销毁它们

 40  * 2）提前创建它们并始终不销毁。

 41  * 3）采用延迟加载和缓存合用的方式，就是当第一次需要使用状态对象的时候创建，使用完后并不销毁对象，而是把这个对象缓存起来，等待下一次使用，而且在合适的时候，会有缓存框剪销毁状态对象。

 42  * 如果状态在运行时是不可知的，而且上下文比较稳定，建议选择1.

 43  * 如果状态改变很频繁，而且状态对象还存储着大量的数据信息，建议选择2.

 44  * 如果无法确定状态改变是否频繁，而且有些状态对象的状态数据量大，有些较小，建议选择3.

 45  *

 46  * 6.状态模式的调用顺序

 47  * 在Context中进行状态的维护和转换：

 48  * 1）调用上下文的方法来处理业务请求。

 49  * 2）判断并维护状态。

 50  * 3）根据状态来调用相应的状态处理对象的方法。

 51  *

 52  * 采用让状态对象来维护和转换状态的调用顺序

 53  * 1）调用上下文的方法来处理业务请求。

 54  * 2）获取State对象。

 55  * 3）委托让相应的状态对象去处理。

 56  * 4）调用构造方法得到下一个状态对象的实例。

 57  * 5）设置下一个状态处理对象。

 58  * 6）再到6），直到结束。

 59  *

 60  * 状态的维护和转换控制

 61  * 所谓状态的维护，指的是维护状态的数据，给状态设置不用的状态值；而状态的转换，指的是根据状态的变化来选择不用的状态处理对象。在状态模式中，通常有两个地方可以进行状态的维护和转换控制。

 62  * 一个就是在上下文中。因为状态本身通常被实现为上下文对象的状态，因此可以在上下文中进行状态维护，当然也就可以控制状态的转换了。

 63  * 另外一个地方就是在状态的处理类中。当每个状态处理对象处理完自身状态所对应的功能后，可以根据需要指定后继状态，以便让应用能正确处理后继的请求。

 64  *

 65  * 如何选择这两种方式？

 66  * 1.如果状态转换的规则是一定的，一般不需要进行什么扩展规则，那么就适合在上下文中统一进行状态的维护。

 67  * 2.如果状态的转换取决于前一个状态动态处理的结果，或者是依赖于外部数据，为了增强灵活性，这种情况下，一般是在状态处理类中进行状态的维护。

 68  *

 69  * 还可以使用数据库来维护状态

 70  *

 71  */

 72 

 73 (function () {

 74     // 示例代码

 75 

 76     // 实现一个与Context的一个特定状态相关的行为

 77     function ConcreteStateA() {}

 78 

 79     ConcreteStateA.prototype.handle = function () {};

 80 

 81     function ConcreteStateB() {}

 82 

 83     ConcreteStateB.prototype.handle = function () {};

 84 

 85     // 定义客户感兴趣的接口，通常会维护一个State的对象实例

 86     function Context(state) {

 87         this.state = state;

 88     }

 89 

 90     Context.prototype = {

 91         request: function (param) {

 92             this.state.handle(param);

 93         }

 94     };

 95 }());

 96 

 97 (function () {

 98     // 示例

 99 

100     function NormalVoteState() {}

101 

102     NormalVoteState.prototype.vote = function (user, voteItem, voteManager) {

103         voteManager.mapVote[user] = voteItem;

104     };

105 

106     function RepeatVoteState() {}

107 

108     RepeatVoteState.prototype.vote = function (user, voteItem, voteManager) {

109         console.log('请不要重复投票');

110     };

111 

112     function SpliteVoteState() {}

113 

114     SpliteVoteState.prototype.vote = function (user, coteItem, voteManager) {

115         var s = voteManager.mapVote[user];

116         if (s) {

117             delete voteManager.mapVote[user];

118         }

119 

120         console.log('你有恶意刷票行为，取消投票资格');

121     };

122 

123     function BlackVoteState() {}

124 

125     BlackVoteState.prototype.vote = function (user, voteItem, voteManager) {

126         console.log('进入黑名单，将禁止登录和使用本系统');

127     };

128 

129     function VoteManager() {

130         this.state = null;

131         this.mapVote = {};

132         this.mapVoteCount = {};

133     }

134 

135     VoteManager.prototype = {

136         vote: function (user, voteItem) {

137             var oldVoteCount = this.mapVoteCount[user] || 0;

138 

139             this.mapVoteCount[user] = ++oldVoteCount;

140 

141             if (oldVoteCount == 1) {

142                 this.state = new NormalVoteState();

143             } else if (oldVoteCount > 1 && oldVoteCount < 5) {

144                 this.state = new RepeatVoteState();

145             } else if (oldVoteCount >= 5 && oldVoteCount < 8) {

146                 this.state = new SpliteVoteState();

147             } else if (oldVoteCount >= 8) {

148                 this.state = new BlackVoteState();

149             }

150 

151             this.state.vote(user, voteItem, this);

152         }

153     };

154 

155     var vm = new VoteManager();

156     for (var i = 0; i < 8; i++) {

157         vm.vote('u1', 'A');

158     }

159 

160 

161     // another

162     var States = {

163         normal: function (user, voteItem, voteManager) {

164             voteManager.mapVote[user] = voteItem;

165         },

166         repeat: function (user, voteItem, voteManager) {

167             console.log('请不要重复投票');

168         },

169         splite: function (user, coteItem, voteManager) {

170             var s = voteManager.mapVote[user];

171             if (s != null) {

172                 delete voteManager.mapVote[user];

173             }

174 

175             console.log('你有恶意刷票行为，取消投票资格');

176         },

177         black: function (user, voteItem, voteManager) {

178             console.log('进入黑名单，将禁止登录和使用本系统');

179         }

180     };

181 

182     function VoteManager2() {

183         this.state = null;

184         this.mapVote = {};

185         this.mapVoteCount = {};

186     }

187 

188     VoteManager2.prototype = {

189         vote: function (user, voteItem) {

190             var oldVoteCount = this.mapVoteCount[user] || 0;

191 

192             this.mapVoteCount[user] = ++oldVoteCount;

193 

194             var state;

195             if (oldVoteCount == 1) {

196                 state = 'normal';

197             } else if (oldVoteCount > 1 && oldVoteCount < 5) {

198                 state = 'repeat';

199             } else if (oldVoteCount >= 5 && oldVoteCount < 8) {

200                 state = 'splite';

201             } else if (oldVoteCount >= 8) {

202                 state = 'black';

203             }

204 

205             this.state = States[state];

206 

207             this.state(user, voteItem, this);

208         }

209     };

210 

211     var vm = new VoteManager2();

212     for (var i = 0; i < 8; i++) {

213         vm.vote('u1', 'A');

214     }

215 }());

216 

217 (function () {

218     // 在状态处理类中进行后继状态的维护和转换

219 

220     function NormalVoteState() {

221         this.vote = function (user, voteItem, voteManager) {

222             voteManager.mapVote[user] = voteItem;

223             console.log('恭喜你投票成功');

224             // 正常投票完毕，维护下一个状态，同一个人再投票就重复了

225             voteManager.mapState[user] = new RepeatVoteState();

226         };

227     }

228 

229     function RepeatVoteState() {

230         this.vote = function (user, voteItem, voteManager) {

231             console.log('请不要重复投票');

232             if (voteManager.mapVoteCount[user] >= 4) {

233                 voteManager.mapState[user] = new SpliteVoteState();

234             }

235         };

236     }

237 

238     function SpliteVoteState() {

239         this.vote = function (user, voteItem, voteManager) {

240             var s = voteManager.mapVote[user];

241 

242             if (s != null) {

243                 delete voteManager.mapVote[user];

244             }

245 

246             console.log('你有恶意刷票行为，取消投票资格');

247 

248             if (voteManager.mapVoteCount[user] >= 7) {

249                 voteManager.mapState[user] = new BlackVoteState();

250             }

251         };

252     }

253 

254     function BlackVoteState() {

255         this.vote = function (user, voteItem, voteManager) {

256             console.log('进入黑名单，将禁止登录和使用本系统');

257         };

258     }

259 

260     function VoteManager() {

261         this.mapState = {};

262         this.mapVote = {};

263         this.mapVoteCount = {};

264 

265         this.vote = function (user, voteItem) {

266             var oldVoteCount = this.mapVoteCount[user];

267 

268             if (oldVoteCount == null) {

269                 oldVoteCount = 0;

270             }

271             this.mapVoteCount[user] = ++oldVoteCount;

272 

273             var state = this.mapState[user];

274             if (state == null) {

275                 state = new NormalVoteState();

276             }

277 

278             state.vote(user, voteItem, this);

279         };

280     }

281 

282 

283     var vm = new VoteManager();

284     for (var i = 0; i < 8; i++) {

285         vm.vote('u1', 'A');

286     }

287 

288     // another way

289 

290     function VoteManager2() {

291         var mapState = {};

292         var mapVote = {};

293         var mapVoteCount = {};

294 

295         this.vote = function (user, voteItem) {

296             var oldVoteCount = mapVoteCount[user];

297 

298             if (oldVoteCount == null) {

299                 oldVoteCount = 0;

300             }

301             mapVoteCount[user] = ++oldVoteCount;

302 

303             var state = mapState[user];

304             if (state == null) {

305                 state = voteNormal;

306             }

307 

308             state(user, voteItem);

309         };

310 

311         function voteNormal(user, voteItem) {

312             mapVote[user] = voteItem;

313             console.log('恭喜你投票成功');

314             // 正常投票完毕，维护下一个状态，同一个人再投票就重复了

315             return mapState[user] = voteRepeat;

316         }

317 

318         function voteRepeat(user, voteItem) {

319             console.log('请不要重复投票');

320             if (mapVoteCount[user] >= 4) {

321                 return mapState[user] = voteSplite;

322             }

323         }

324 

325         function voteSplite(user, voteItem) {

326             var s = mapVote[user];

327 

328             if (s != null) {

329                 delete mapVote[user];

330             }

331 

332             console.log('你有恶意刷票行为，取消投票资格');

333 

334             if (mapVoteCount[user] >= 7) {

335                 return mapState[user] = voteBlack;

336             }

337         }

338 

339         function voteBlack(user, voteItem) {

340             console.log('进入黑名单，将禁止登录和使用本系统');

341         }

342     }

343 

344     var vm = new VoteManager2();

345     for (var i = 0; i < 8; i++) {

346         vm.vote('u1', 'A');

347     }

348 }());

349 

350 (function () {

351     // 模拟工作流

352     /*

353     请假流程，需项目经理和部门经理审批

354      */

355 

356     // 公共状态处理机

357     function LeaveRequestContext() {

358         // 持有一个状态对象

359         this.state = null;

360         // 包含流程处理需要的业务数据对象

361         this.businessVO = null;

362     }

363 

364     LeaveRequestContext.prototype = {

365         // 执行工作

366         doWork: function () {

367             this.state.doWork(this);

368         }

369     };

370 

371     // 定义请假单的业务数据模型

372     function LeaveRequestModel() {

373         // 请假人

374         this.user = '';

375         // 请假开始时间

376         this.beginDate = '';

377         // 请假天数

378         this.leaveDays = '';

379         // 审核结果

380         this.result = '';

381     }

382 

383     function ProjectManagerState() {

384         this.doWork = function (request) {

385             var leaveRequestModel = request.businessVO;

386 

387             console.log('项目经理审核中，请稍候。。');

388             console.log(leaveRequestModel.user + '申请从'

389                 + leaveRequestModel.beginDate + '开始请假'

390                 + leaveRequestModel.leaveDays + '天，请项目经理审核（1为同意，2为不同意）');

391 

392             var answer = window.prompt('1为同意，2为不同意');

393             var result = answer == 1 ? '同意' : '不同意';

394             leaveRequestModel.result = '项目经理审核结果：' + result;

395 

396             if (answer == 1) {

397                 if (leaveRequestModel.leaveDays > 3) {

398                     request.state = new DepManagerState();

399                 } else {

400                     request.state = new AuditOverState();

401                 }

402             } else {

403                 request.state = new AuditOverState();

404             }

405 

406             request.doWork();

407         };

408     }

409 

410     function DepManagerState() {

411         this.doWork = function (request) {

412             var leaveRequestModel = request.businessVO;

413 

414             console.log('部门经理审核中，请稍候。。');

415             console.log(leaveRequestModel.user + '申请从'

416                 + leaveRequestModel.beginDate + '开始请假'

417                 + leaveRequestModel.leaveDays + '天，请项目经理审核（1为同意，2为不同意）');

418 

419             var answer = window.prompt('1为同意，2为不同意');

420             var result = answer == 1 ? '同意' : '不同意';

421             leaveRequestModel.result = '部门经理审核结果：' + result;

422 

423             request.state = new AuditOverState();

424 

425             request.doWork();

426         };

427     }

428 

429     function AuditOverState() {

430         this.doWork = function (request) {

431             var leaveRequestModel = request.businessVO;

432             // do sth

433             console.log(leaveRequestModel.user + '，你的请假申请已经审核结束，结果是：' + leaveRequestModel.result);

434         };

435     }

436 

437     var lrm = new LeaveRequestModel();

438     lrm.user = '小林';

439     lrm.beginDate = '2014-4-2';

440     lrm.leaveDays = 5;

441 

442     var request = new LeaveRequestContext();

443     request.businessVO = lrm;

444     request.state = new ProjectManagerState();

445 

446     request.doWork();

447 

448 

449     // another

450 

451     function LeaveRequestContext2() {

452         this.state = null;

453         // 包含流程处理需要的业务数据对象

454         this.businessVO = null;

455         this.doWork = function () {

456             if (typeof this.state == 'function') {

457                 this.state = this.state(this);

458                 this.doWork();

459             }

460         };

461     }

462 

463     function projectManagerState(request) {

464         var leaveRequestModel = request.businessVO;

465 

466         console.log('项目经理审核中，请稍候。。');

467         console.log(leaveRequestModel.user + '申请从'

468             + leaveRequestModel.beginDate + '开始请假'

469             + leaveRequestModel.leaveDays + '天，请项目经理审核（1为同意，2为不同意）');

470 

471         var answer = window.prompt('1为同意，2为不同意');

472         var result = answer == 1 ? '同意' : '不同意';

473         leaveRequestModel.result = '项目经理审核结果：' + result;

474 

475         var state;

476         if (answer == 1) {

477             if (leaveRequestModel.leaveDays > 3) {

478                 state = depManagerState;

479             } else {

480                 state = auditOverState;

481             }

482         } else {

483             state = auditOverState;

484         }

485 

486         return state;

487     }

488 

489     function depManagerState(request) {

490         var leaveRequestModel = request.businessVO;

491 

492         console.log('部门经理审核中，请稍候。。');

493         console.log(leaveRequestModel.user + '申请从'

494             + leaveRequestModel.beginDate + '开始请假'

495             + leaveRequestModel.leaveDays + '天，请项目经理审核（1为同意，2为不同意）');

496 

497         var answer = window.prompt('1为同意，2为不同意');

498         var result = answer == 1 ? '同意' : '不同意';

499         leaveRequestModel.result = '部门经理审核结果：' + result;

500 

501         return auditOverState;

502     }

503 

504     function auditOverState(request) {

505         var leaveRequestModel = request.businessVO;

506         // do sth

507         console.log(leaveRequestModel.user + '，你的请假申请已经审核结束，结果是：' + leaveRequestModel.result);

508     }

509 

510     var lrm = new LeaveRequestModel();

511     lrm.user = '小林';

512     lrm.beginDate = '2014-4-2';

513     lrm.leaveDays = 5;

514 

515     var request = new LeaveRequestContext2();

516     request.businessVO = lrm;

517     request.state = projectManagerState;

518 

519     request.doWork();

520 

521 }());

522 

523 /*

524 何时选用状态模式

525 1.如果一个对象的行为取决于它的状态，而且它必须在运行时刻根据状态来改变它的行为，可以使用状态模式把状态和行为分离。

526 2.如果一个操作中含有庞大的多分支语句，而且这些分支依赖于该对象的状态，可以使用状态模式，把各个分支的处理分散包装到单独的对象处理类中。

527 

528 

529 相关模式

530 

531 状态模式和策略模式

532 两个结构相同。状态模式的行为是平行性的，不可相互替换的；而策略模式的行为是平等性的，可相互替换的。

533 

534 状态模式和观察者模式

535 相似但又有区别，可以组合使用。

536 这两个模式都是在状态发生改变的时候触发行为，只不过观察者模式的行为是固定的，那就是通知所有观察者；而状态模式是根据状态来选择不同的处理。

537 从表面来看，两个模式相似，观察者模式中的被观察对象就好比状态模式中的上下文，观察者模式中当被观察对象的状态发生改变的时候，触发的通知所有观察者的方法就好比状态模式中，根据状态的变化选择对应的状态处理。

538 但实际这两个模式是不同的，观察者模式的目的是在被观察者的状态发生改变的时候，触发观察联动，具体如何处理观察者模式不管；而状态模式的主要目的在于根据状态来分离和选择行为，当状态发生改变的时候，动态地改变行为。

539 这两个模式可以组合使用，比如在观察者模式的观察者部分，当被观察对象的状态发生改变，触发通知了所有的观察者后，使用状态模式根据通知过来的状态选择相应的处理。

540 

541 状态模式和单例模式

542 可以组合使用

543 把状态模式中的状态处理类实现成单例。

544 

545 状态模式和享元模式

546 可以组合使用

547 由于状态模式把状态对应的行为分散到多个状态对象中，会造成很多细粒度的状态对象，可以把这些状态处理对象通过享元模式来共享，从而节省资源。

548  */

549 

550 (function () {

551     // http://www.dofactory.com/javascript-state-pattern.aspx

552     var TrafficLight = function () {

553 

554         var count = 0;

555         var currentState = new Red(this);

556 

557         this.change = function (state) {

558             // limits number of changes

559             if (count++ >= 10) return;

560 

561             currentState = state;

562             currentState.go();

563         };

564 

565         this.start = function () {

566             currentState.go();

567         };

568     }

569 

570     var Red = function (light) {

571         this.light = light;

572 

573         this.go = function () {

574             log.add("Red --> for 1 minute");

575             light.change(new Green(light));

576         }

577     };

578 

579     var Yellow = function (light) {

580         this.light = light;

581 

582         this.go = function () {

583             log.add("Yellow --> for 10 seconds");

584             light.change(new Red(light));

585         }

586     };

587 

588     var Green = function (light) {

589         this.light = light;

590 

591         this.go = function () {

592             log.add("Green --> for 1 minute");

593             light.change(new Yellow(light));

594         }

595     };

596 

597     // log helper

598 

599     var log = (function () {

600         var log = "";

601         return {

602             add: function (msg) { log += msg + "\n"; },

603             show: function () {

604                 alert(log);

605                 log = "";

606             }

607         }

608     })();

609 

610     function run() {

611 

612         var light = new TrafficLight();

613         light.start();

614 

615         log.show();

616     }

617 }());

618 </script>

619 </body>

620 </html>

 

你可能感兴趣的:(JavaScript)

  • 移动端城市区县二级联动选择功能实现包 good2know
    本文还有配套的精品资源，点击获取简介：本项目是一套为移动端设计的jQuery实现方案，用于简化用户在选择城市和区县时的流程。它包括所有必需文件：HTML、JavaScript、CSS及图片资源。通过动态更新下拉菜单选项，实现城市到区县的联动效果，支持数据异步加载。开发者可以轻松集成此功能到移动网站或应用，并可基于需求进行扩展和优化。1.jQuery移动端解决方案概述jQuery技术简介jQuery
  • 用代码生成艺术字：设计个性化海报的秘密
    本文围绕“用代码生成艺术字：设计个性化海报的秘密”展开，先概述代码生成艺术字在海报设计中的独特价值，接着介绍常用的代码工具（如HTML、CSS、JavaScript等），详细阐述从构思到实现的完整流程，包括字体样式设计、动态效果添加等，还分享了提升艺术字质感的技巧及实际案例。最后总结代码生成艺术字的优势，为设计师提供打造个性化海报的实用指南，助力提升海报设计的独特性与吸引力，符合搜索引擎SEO标准
  • 为什么学习Web前端一定要掌握JavaScript？ web前端学习指南
    为什么学习Web前端一定要掌握JavaScript？在前端的世界里，没有什么是JavaScript实现不了的，关于JS有一句话：凡是可以用JavaScript来写的应用，最终都会用JavaScript，JavaScript可运行在所有主要平台的所有主流浏览器上，也可运行在每一个主流操作系统的服务器端上。现如今我们在为网站写任何一个主要功能的时候都需要有懂能够用JavaScript写前端的开发人员。
  • Vue CSR 到 Nuxt 3 SSR 迁移：技术实现与问题解决实录 二倍速播放 前端vue.js
    1.迁移动机与技术选型1.1CSR架构的局限性基于Vue3和Vite构建的客户端渲染(CSR)单页应用(SPA)提供了良好的开发体验和用户交互流畅性。但是其核心局限在于：搜索引擎优化(SEO)：初始HTML响应仅包含一个根div元素，实际内容由JavaScript在浏览器端动态生成。虽然主流搜索引擎（如Google）能够执行部分JavaScript，但其抓取效率和稳定性不如直接获取完整HTML。非
  • 12. 什么是事件委托 yqcoder 前端面试-CSScss面试
    总结事件委托（EventDelegation）是JavaScript中一种重要的事件处理机制，它利用了事件冒泡的特性，将事件的处理程序绑定到父元素或祖先元素上，而不是直接绑定到具体的子元素上。什么是事件委托？事件冒泡：在DOM中，事件通常会从触发元素开始，然后逐级向上冒泡到其父元素、祖先元素，直到window对象。核心思想：事件委托的核心思想是利用事件冒泡机制，在父元素上监听事件，而不是在每个子元
  • 关于前端的性能优化
    性能优化主要涵盖了以下四个方面：(tip:仅代表个人总结，如有不当，还希望看到的大佬多多指示)减少网络请求：合并文件、使用CDN、启用缓存。优化资源加载：代码分割、懒加载、图片压缩。提升渲染性能：减少重绘回流、防抖节流、使用WebWorker。监控和迭代：定期使用工具检测性能，持续优化。一、网络层面优化减少HTTP请求合并文件：将多个CSS或JavaScript文件合并成一个，减少请求次数。使用C
  • 时间组件库Day.js那些事 前端小白花 javascript开发语言ecmascript
    一、简介1.什么是Day.jsDay.js是一个轻量级，易于使用的JavaScript日期库，提供了强大的日期和时间处理功能，与Moment.js的API设计相似，但具有更高的性能和更小的体积。Day.js官网https://day.js.org/docs/zh-CN/installation/installation2.优势a.特点轻量级：Dayjs的压缩后大小只有2KB左右，远小于Moment
  • JavaScript正则表达式去除括号但保留内容与去除括号与内容 Selicens javascript正则表达式
    项目上碰到一个需求，是取多个递增文件的文件名，类似于test(1).txt、test(2).txt，但是不需要括号，只要test1、test2这种格式，最开始想到的办法就是js里的replace替换，先上一个比较笨但是也能实现效果的例子letname="test(1).txt"letdata=name.split('.')[0].replace('(','').replace(')','')con
  • 网络安全第14集 不灭锦鲤 web安全安全
    前言：小迪安全14集，这集重点内容：0、什么是js渗透测试？在javascript中也存在变量和函数，存在可控变量和函数就有可能存在在漏洞，js开发的web应用和php、java开发的区别是，js能看得到的源代码，php看不到，但是风险就是未授权访问、配置信息泄露（加密算法、key秘钥等），源代码看得到，存在更多的url泄露，从而可能会出现未授权访问，从url，前提：web应用可以采用前端语言或后
  • 25年不倒的“犀牛书“：为什么《JavaScript权威指南第7版》仍是程序员的案头圣经？ 阿蒙Armon javascript开发语言ecmascript
    25年不倒的"犀牛书"：为什么《JavaScript权威指南第7版》仍是程序员的案头圣经？当一本技术书能连续畅销25年，历经7次迭代仍稳坐领域第一梯队，它必然藏着超越时代的硬实力。《JavaScript权威指南（原书第7版）》就是这样一部传奇——豆瓣9.4分的封神之作，程序员口中的"犀牛书"，从网景时代到ES2020，它始终是JavaScript开发者的终极参考书。如果你还在为原型链、闭包、异步编
  • 什么是JSON，如何与Java对象转化 doublez234 javajsonspringspringboot
    JSON概念JSON(JavaScriptObjectNotation)是一种轻量级的数据交换格式。它易于人阅读和编写，同时也易于机器解析和生成。JSON基于JavaScript（ECMAScript（欧洲计算机协会制定的js规范））编程语言的一个子集，但它是一种独立于语言的数据格式，被广泛应用于各种编程语言和平台之间的数据交换。JSON的主要特点：轻量级：JSON格式非常简洁，只包含必要的数据信
  • APP开发入门：了解主流的编程语言 agi大模型 Python职业与职场程序员开发语言数据分析编程语言
    前言在过去的几年里，有许多程序员开始学习和使用编程语言。这其中包括C、C++、Java和Python。尽管有许多语言可供选择，但大多数程序员都会选择最容易学习的编程语言。如今，有很多编程语言供选择。程序员们在学习这些语言时可以自由地选择他们喜欢的方式，因为他们的目标是构建任何软件，而不仅仅是创建一个应用程序。你可以在Linux上学习C/C++、Java、Python、C#或JavaScript，你
  • 探秘CommonJS：Node.js模块化核心解析
    CommonJS是JavaScript的模块化规范，主要应用于服务器端环境（尤其是Node.js），其核心目标是解决代码组织、依赖管理和作用域隔离问题。以下是其核心要点：一、核心特性同步加载模块通过require()同步加载并执行，后续代码需等待模块加载完成后执行，适用于I/O快速的服务器环境（如本地文件读取）。作用域隔离每个文件视为独立模块，模块内定义的变量、函数默认私有（不污染全局作用域），仅
  • 壹脉销客AI电子名片源码核心架构
    为什么选择源码部署AI电子名片？在数字化转型浪潮中，越来越多的企业意识到拥有自主可控的电子名片系统的重要性。源码部署相比SaaS服务具有三大核心优势：数据完全自主-客户信息存储在企业自有服务器深度定制自由-可根据业务需求二次开发长期成本优化-一次部署永久使用壹脉销客AI电子名片源码核心架构壹脉销客提供的企业级电子名片解决方案采用前后端分离架构：前端技术栈（小程序端）javascript//小程序a
  • vue 进入一个页面，然后离开这个页面他就重新加载 Java&Develop vuevue
    vue进入一个页面，然后离开这个页面他就重新加载这个代码导致的注释即可window.location.reload();window.location.reload()是JavaScript中的一个方法，用于强制刷新当前页面（重新加载页面内容）。其作用类似于用户手动点击浏览器的刷新按钮，但可以通过代码精确触发。核心作用：刷新页面重新加载当前显示的文档（即重新请求当前URL的资源）。可选参数控制缓存
  • [python][flask]flask静态资源
    在Flask中，静态资源（如图片、CSS文件、JavaScript文件等）通常存储在项目的static文件夹中。Flask会自动为静态资源提供服务，使得你可以通过URL访问这些文件。以下是关于Flask中静态资源的使用方法和一些高级配置。1.默认静态文件夹Flask默认会将项目根目录下的static文件夹作为静态资源目录。例如，如果你的项目结构如下：my_flask_app/│├──app.py├
  • JavaScript对象与Math对象完全指南 hui函数 Javascriptjavascript前端开发语言
    JavaScript对象与Math对象完全指南对象基础概念与操作对象是什么？数据集合：包含相关数据和功能的容器结构组成：属性：描述对象特征的变量（名词性）方法：对象可执行的操作（动词性，本质是函数）对象创建与访问//创建对象letperson={ //属性 name:"张三", age:28, profession:"软件工程师",  //方法 introduce(){  return`大家好，我
  • 深入理解JavaScript作用域与编译过程 君子心理 作用域编译JavaScript变量提升闭包
    背景简介在编程领域，作用域和编译过程是理解语言机制的关键概念。JavaScript作为一种广泛使用的语言，其作用域规则和编译机制尤其值得我们深入探讨。本文将基于《你不懂JS》系列书籍中的相关内容，解析JavaScript的作用域系统、函数闭包以及编译过程，帮助读者获得更深层次的理解。作用域是什么？在JavaScript中，作用域定义了变量和函数的可访问范围。编写程序时，我们会频繁使用变量来存储和操
  • 掌握JavaScript对象与函数：深入理解原型与作用域 土城三富 JavaScript对象原型链函数作用域
    掌握JavaScript对象与函数：深入理解原型与作用域背景简介在探索JavaScript的世界时，我们经常遇到对象和函数这两个核心概念。对象是JavaScript中最为基本的结构之一，而函数则是实现代码复用、封装和模块化的主要工具。本文将基于给定的书籍章节内容，深入探讨对象的更新机制、原型继承以及函数的多样性及其调用模式，同时分享对全局变量使用的思考。更新对象在JavaScript中，对象的属性
  • JavaScript函数使用模式与作用域的深入解析
    JavaScript函数使用模式与作用域的深入解析JavaScript作为一门灵活且功能强大的编程语言，其函数的使用和作用域的特性是学习和开发中的关键点。本篇博客将深入解析JavaScript函数的几种使用模式，以及作用域的重要概念。构造器模式在JavaScript中，函数可以作为构造器（constructor）使用，当用new关键字调用时，函数会返回一个新对象。为了区分构造器函数和其他普通函数，
  • 掌握JavaScript函数和作用域：提高代码复用性 捕风捉你 javascript开发语言ecmascript
    在JavaScript编程中，函数是一个核心概念，它不仅能帮助我们将代码组织得更加清晰，还能提高代码的复用性。理解函数的定义与调用、掌握作用域的概念，对于编写高效和可维护的代码至关重要。本文将通过创建一个计时器应用的案例，帮助你全面掌握JavaScript中的函数和作用域知识。任务目标通过本教程，你将学习并掌握：函数的声明与调用函数表达式的使用作用域的概念及其在函数中的应用闭包的原理及实践学习内容
  • JavaScript 函数与作用域 前端人类学 JavaScript-行为javascript函数作用域闭包递归作用域链
    Hi，我是布兰妮甜！JavaScript是一种动态类型语言，它支持面向对象编程和函数式编程。函数是JavaScript的核心组成部分之一，而作用域则决定了变量的可见性和生命周期。本文将详细介绍JavaScript中的函数定义、调用、参数传递、闭包、递归以及作用域链的概念。文章目录一、函数基础二、作用域基础三、闭包四、递归五、作用域链六、总结一、函数基础1.定义函数函数声明函数可以通过函数声明的方式
  • 深入理解作用域【JavaScript】 陆仟 Web前端开发javascript
    一、作用域的内部原理JavaScript的作用域机制是理解变量如何被访问和存储的重要概念。下面详细介绍作用域的内部原理，包括编译、执行、查询、嵌套和异常处理这五个步骤。1.编译在JavaScript的执行过程中，首要的步骤是编译。尽管JavaScript是解释性语言，但现代JavaScript引擎（如V8）在执行代码前会先进行编译。编译阶段主要完成以下几项工作：词法分析：将源代码分解成语法单元（t
  • 即便你已经在浏览器中启用了 JavaScript有时网页依然可能出现功能失效、内容加载不完整或按钮点击无反应等问题。这些问题通常由 JavaScript 冲突
    即便你已经在浏览器中启用了JavaScript有时网页依然可能出现功能失效、内容加载不完整或按钮点击无反应等问题。这些问题通常由JavaScript冲突、浏览器设置不当或插件干扰等原因引起。作为HostEase的技术人员我将为你提供一系列简单有效的JavaScript故障排除方法帮助你快速定位并解决这些问题。禁用可能干扰JavaScript的浏览器扩展,广告拦截器,安全插件或某些脚本管理器可能会干
  • 技术文章大纲：Anaconda插件开发挑战赛引言介绍Anaconda在数据科学和PythonUH开发中的重要性 aadwje eclipseide
    即便你已经在浏览器中启用了JavaScript有时网页依然可能出现功能失效、内容加载不完整或按钮点击无反应等问题。这些问题通常由JavaScript冲突、浏览器设置不当或插件干扰等原因引起。作为HostEase的技术人员我将为你提供一系列简单有效的JavaScript故障排除方法帮助你快速定位并解决这些问题。禁用可能干扰JavaScript的浏览器扩展,广告拦截器,安全插件或某些脚本管理器可能会干
  • 深入分析 Node.js 的 V8 引擎如何在内部处理 JavaScript 代码，包括内存管理和垃圾回收机制。 海派程序猿 node.jsjavascript开发语言
    各位观众老爷们，晚上好！今天咱们就来聊聊Node.js的大心脏——V8引擎，看看它到底是怎么把咱们写的JavaScript代码给“消化”掉的。别害怕，今天咱不搞那些生涩难懂的学院派理论，尽量用大白话，外加一些“栗子”，保证让你听得津津有味。V8引擎：JavaScript的超级翻译官首先，简单介绍一下V8。V8是Google开发的高性能JavaScript和WebAssembly引擎，用C++写的。
  • Tailwind CSS 响应式设计实战指南 qcidyu 用户体验代码优化移动优先网站布局前端开发TailwindCSS响应式设计
    title:TailwindCSS响应式设计实战指南date:2024/6/13updated:2024/6/13author:cmdragonexcerpt:这篇文章介绍了如何运用TailwindCSS框架创建响应式网页设计，涵盖博客、电商网站及企业官网的布局实例，包括头部导航、内容区域、侧边栏、页脚及轮播图等组件的响应式实现。同时，探讨了与JavaScript框架集成、CSS预处理器配合、设计
  • JavaScript核心概念全解析
    目录1.作用域(1)局部作用域(2)全局作用域2.垃圾回收(1)引用计数法(2)标记清除法3.闭包(1)作用(2)风险4.变量提升(1)var(2)let和const(3)const5.函数提升(1)函数声明(2)函数表达式6.函数参数(1)动态参数(2)剩余参数(3)展开运算符7.必须加分号的两种情况(1)立即执行函数(2)使用数组的时候8.箭头函数(1)特点9.Symbol10.生成器函数11
  • IntelliJ IDEA 高效开发指南：从基础操作到高级技巧 zqmgx13291 intellij-ideajavaide
    一、IDEA概述与环境配置1.1IDEA的核心优势智能代码辅助：基于上下文的代码补全（Ctrl+Space）、方法参数提示、错误实时检测全栈开发支持：内置Java/Python/JavaScript等20+语言支持，框架集成（SpringBoot/Vue/React）工具链集成：版本控制（Git/SVN）、数据库（MySQL/PostgreSQL）、容器（Docker/K8s）一站式开发性能优化：
  • 【前端】JavaScript 的事件循环 (Event Loop) 不懂可否 前端前端javascript开发语言
    JavaScript的事件循环(EventLoop)是其实现异步编程的核心机制，即使JS是单线程语言，它也能高效处理I/O、网络请求、计时器等非阻塞操作。以下是其工作原理的精要解析：核心概念单线程执行JS引擎（如V8）只能顺序执行一个任务。异步行为需要靠宿主环境（浏览器/Node.js）提供的事件循环调度。任务队列(TaskQueue)所有异步操作完成后对应的回调函数会进入队列等待执行。队列类型包
  • Enum用法 不懂事的小屁孩 enum
    以前的时候知道enum，但是真心不怎么用，在实际开发中，经常会用到以下代码: protected final static String XJ = "XJ"; protected final static String YHK = "YHK"; protected final static String PQ = "PQ";
  • 【Spark九十七】RDD API之aggregateByKey bit1129 spark
    1. aggregateByKey的运行机制   /** * Aggregate the values of each key, using given combine functions and a neutral "zero value". * This function can return a different result type
  • hive创建表是报错： Specified key was too long; max key length is 767 bytes daizj hive
    今天在hive客户端创建表时报错，具体操作如下   hive> create table test2(id string); FAILED: Execution Error, return code 1 from org.apache.hadoop.hive.ql.exec.DDLTask. MetaException(message:javax.jdo.JDODataSto
  • Map 与 JavaBean之间的转换 周凡杨 java自省转换反射
    最近项目里需要一个工具类，它的功能是传入一个Map后可以返回一个JavaBean对象。很喜欢写这样的Java服务，首先我想到的是要通过Java 的反射去实现匿名类的方法调用，这样才可以把Map里的值set 到JavaBean里。其实这里用Java的自省会更方便，下面两个方法就是一个通过反射，一个通过自省来实现本功能。 1：JavaBean类 1 &nb
  • java连接ftp下载 g21121 java
    有的时候需要用到java连接ftp服务器下载，上传一些操作，下面写了一个小例子。 /** ftp服务器地址 */ private String ftpHost; /** ftp服务器用户名 */ private String ftpName; /** ftp服务器密码 */ private String ftpPass; /** ftp根目录 */ private String f
  • web报表工具FineReport使用中遇到的常见报错及解决办法（二） 老A不折腾 finereportweb报表java报表总结
      抛砖引玉，希望大家能把自己整理的问题及解决方法晾出来，Mark一下，利人利己。   出现问题先搜一下文档上有没有，再看看度娘有没有，再看看论坛有没有。有报错要看日志。下面简单罗列下常见的问题，大多文档上都有提到的。   1、没有返回数据集： 在存储过程中的操作语句之前加上set nocount on 或者在数据集exec调用存储过程的前面加上这句。当S
  • linux 系统cpu 内存等信息查看 墙头上一根草 cpu内存liunx
    1 查看CPU 　　1.1 查看CPU个数 　　# cat /proc/cpuinfo | grep "physical id" | uniq | wc -l 　　2 　　**uniq命令：删除重复行;wc –l命令：统计行数** 　　1.2 查看CPU核数 　　# cat /proc/cpuinfo | grep "cpu cores" | u
  • Spring中的AOP aijuans springAOP
      Spring中的AOP Written by Tony Jiang @ 2012-1-18 （转）何为AOP AOP，面向切面编程。 在不改动代码的前提下，灵活的在现有代码的执行顺序前后，添加进新规机能。 来一个简单的Sample: 目标类： [java]  view plain copy print ? package&nb
  • placeholder(HTML 5) IE 兼容插件 alxw4616 JavaScriptjquery jQuery插件
    placeholder 这个属性被越来越频繁的使用. 但为做HTML 5 特性IE没能实现这东西. 以下的jQuery插件就是用来在IE上实现该属性的. /** * [placeholder(HTML 5) IE 实现.IE9以下通过测试.] * v 1.0 by oTwo 2014年7月31日 11:45:29 */ $.fn.placeholder = function
  • Object类,值域,泛型等总结(适合有基础的人看) 百合不是茶 泛型的继承和通配符变量的值域Object类转换
    java的作用域在编程的时候经常会遇到,而我经常会搞不清楚这个 问题,所以在家的这几天回忆一下过去不知道的每个小知识点   变量的值域;   package 基础; /** * 作用域的范围 * * @author Administrator * */ public class zuoyongyu { public static vo
  • JDK1.5 Condition接口 bijian1013 javathreadConditionjava多线程
    Condition 将 Object 监视器方法（wait、notify和 notifyAll）分解成截然不同的对象，以便通过将这些对象与任意 Lock 实现组合使用，为每个对象提供多个等待 set （wait-set）。其中，Lock 替代了 synchronized 方法和语句的使用，Condition 替代了 Object 监视器方法的使用。 条件（也称为条件队列或条件变量）为线程提供了一
  • 开源中国OSC源创会记录 bijian1013 hadoopsparkMemSQL
    一.Strata+Hadoop World（SHW）大会         是全世界最大的大数据大会之一。SHW大会为各种技术提供了深度交流的机会，还会看到最领先的大数据技术、最广泛的应用场景、最有趣的用例教学以及最全面的大数据行业和趋势探讨。          二.Hadoop   &nbs
  • 【Java范型七】范型消除 bit1129 java
    范型是Java1.5引入的语言特性，它是编译时的一个语法现象，也就是说，对于一个类，不管是范型类还是非范型类，编译得到的字节码是一样的，差别仅在于通过范型这种语法来进行编译时的类型检查，在运行时是没有范型或者类型参数这个说法的。 范型跟反射刚好相反，反射是一种运行时行为，所以编译时不能访问的变量或者方法(比如private)，在运行时通过反射是可以访问的，也就是说，可见性也是一种编译时的行为，在
  • 【Spark九十四】spark-sql工具的使用 bit1129 spark
    spark-sql是Spark bin目录下的一个可执行脚本，它的目的是通过这个脚本执行Hive的命令，即原来通过 hive>输入的指令可以通过spark-sql>输入的指令来完成。 spark-sql可以使用内置的Hive metadata-store，也可以使用已经独立安装的Hive的metadata store   关于Hive build into Spark
  • js做的各种倒计时 ronin47 js 倒计时
    第一种：精确到秒的javascript倒计时代码      HTML代码:   <form name="form1">   <div align="center" align="middle"
  • java-37.有n 个长为m+1 的字符串，如果某个字符串的最后m 个字符与某个字符串的前m 个字符匹配，则两个字符串可以联接 bylijinnan java
    public class MaxCatenate { /* * Q.37 有n 个长为m+1 的字符串，如果某个字符串的最后m 个字符与某个字符串的前m 个字符匹配，则两个字符串可以联接， * 问这n 个字符串最多可以连成一个多长的字符串，如果出现循环，则返回错误。 */ public static void main(String[] args){
  • mongoDB安装 开窍的石头 mongodb安装 基本操作
    mongoDB的安装          1:mongoDB下载   https://www.mongodb.org/downloads         2:下载mongoDB下载后解压     
  • [开源项目]引擎的关键意义 comsci 开源项目
         一个系统，最核心的东西就是引擎。。。。。       而要设计和制造出引擎，最关键的是要坚持。。。。。。       现在最先进的引擎技术，也是从莱特兄弟那里出现的，但是中间一直没有断过研发的    
  • 软件度量的一些方法 cuiyadll 方法
    软件度量的一些方法http://cuiyingfeng.blog.51cto.com/43841/6775/在前面我们已介绍了组成软件度量的几个方面。在这里我们将先给出关于这几个方面的一个纲要介绍。在后面我们还会作进一步具体的阐述。当我们不从高层次的概念级来看软件度量及其目标的时候，我们很容易把这些活动看成是不同而且毫不相干的。我们现在希望表明他们是怎样恰如其分地嵌入我们的框架的。也就是我们度量的
  • XSD中的targetNameSpace解释 darrenzhu xmlnamespacexsdtargetnamespace
    参考链接: http://blog.csdn.net/colin1014/article/details/357694 xsd文件中定义了一个targetNameSpace后，其内部定义的元素，属性，类型等都属于该targetNameSpace,其自身或外部xsd文件使用这些元素，属性等都必须从定义的targetNameSpace中找： 例如：以下xsd文件，就出现了该错误，即便是在一
  • 什么是RAID0、RAID1、RAID0+1、RAID5，等磁盘阵列模式? dcj3sjt126com raid
    RAID 1又称为Mirror或Mirroring，它的宗旨是最大限度的保证用户数据的可用性和可修复性。 RAID 1的操作方式是把用户写入硬盘的数据百分之百地自动复制到另外一个硬盘上。由于对存储的数据进行百分之百的备份，在所有RAID级别中，RAID 1提供最高的数据安全保障。同样，由于数据的百分之百备份，备份数据占了总存储空间的一半，因而，Mirror的磁盘空间利用率低，存储成本高。 Mir
  • yii2 restful web服务快速入门 dcj3sjt126com PHPyii2
    快速入门 Yii 提供了一整套用来简化实现 RESTful 风格的 Web Service 服务的 API。 特别是，Yii 支持以下关于 RESTful 风格的 API： 支持 Active Record 类的通用API的快速原型 涉及的响应格式（在默认情况下支持 JSON 和 XML) 支持可选输出字段的定制对象序列化 适当的格式的数据采集和验证错误
  • MongoDB查询(3)——内嵌文档查询（七） eksliang MongoDB查询内嵌文档MongoDB查询内嵌数组
    MongoDB查询内嵌文档 转载请出自出处：http://eksliang.iteye.com/blog/2177301 一、概述        有两种方法可以查询内嵌文档：查询整个文档；针对键值对进行查询。这两种方式是不同的，下面我通过例子进行分别说明。   二、查询整个文档 例如:有如下文档 db.emp.insert({ &qu
  • android4.4从系统图库无法加载图片的问题 gundumw100 android
    典型的使用场景就是要设置一个头像，头像需要从系统图库或者拍照获得，在android4.4之前，我用的代码没问题，但是今天使用android4.4的时候突然发现不灵了。baidu了一圈，终于解决了。 下面是解决方案： private String[] items = new String[] { "图库","拍照" }; /* 头像名称 */
  • 网页特效大全 jQuery等 ini JavaScriptjquerycsshtml5ini
    HTML5和CSS3知识和特效 asp.net ajax jquery实例 分享一个下雪的特效 jQuery倾斜的动画导航菜单 选美大赛示例 你会选谁 jQuery实现HTML5时钟 功能强大的滚动播放插件JQ-Slide 万圣节快乐！！！ 向上弹出菜单jQuery插件 htm5视差动画 jquery将列表倒转顺序 推荐一个jQuery分页插件 jquery animate
  • swift objc_setAssociatedObject block(version1.2 xcode6.4) 啸笑天 version
      import UIKit class LSObjectWrapper: NSObject { let value: ((barButton: UIButton?) -> Void)? init(value: (barButton: UIButton?) -> Void) { self.value = value
  • Aegis 默认的 Xfire 绑定方式，将 XML 映射为 POJO MagicMa_007 javaPOJOxmlAegisxfire
          Aegis 是一个默认的 Xfire 绑定方式，它将 XML 映射为 POJO, 支持代码先行的开发.你开发服 务类与 POJO,它为你生成 XML schema/wsdl XML 和 注解映射概览       默认情况下，你的 POJO 类被是基于他们的名字与命名空间被序列化。如果
  • js get max value in (json) Array qiaolevip 每天进步一点点学习永无止境max纵观千象
    // Max value in Array var arr = [1,2,3,5,3,2];Math.max.apply(null, arr); // 5 // Max value in Jaon Array var arr = [{"x":"8/11/2009","y":0.026572007},{"x"
  • XMLhttpRequest 请求 XML,JSON ,POJO 数据 Luob. POJOjsonAjaxxmlXMLhttpREquest
    在使用XMlhttpRequest对象发送请求和响应之前，必须首先使用javaScript对象创建一个XMLHttpRquest对象。 var xmlhttp； function getXMLHttpRequest(){ if(window.ActiveXObject){ xmlhttp:new ActiveXObject("Microsoft.XMLHTTP
  • jquery wuai jquery
    以下防止文档在完全加载之前运行Jquery代码，否则会出现试图隐藏一个不存在的元素、获得未完全加载的图像的大小 等等 $(document).ready(function(){ jquery代码; }); <script type="text/javascript" src="c:/scripts/jquery-1.4.2.min.js&quo
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他