[译] 前端攻略-从路人甲到英雄无敌二：JavaScript 与不断演化的框架

本文翻译自FreeCodeCamp的from-zero-to-front-end-hero-part。

继续译者的废话，这篇文章是前端攻略-从路人甲到英雄无敌的下半部分，在上半篇中介绍了HTML与CSS的基础知识，在这里就主要介绍JavaScript与各种各样的前端框架。再安利一波笔者的我的前端之路

笔者一直觉得不断变革的前端永远充满活力与激情，但是，哪有那么多激情燃烧的岁月，很多时候会有一种深深的无力感。B狗的才学会某个东西发现又被抛弃了，就好像笔者才决定大规模使用React+Redux+Webpack，就看到了这个from-a-react-point-of-vue-comparing...。实际上，就包括React本身已经OverWhelming，对于初学者很不友好。并且各种各样的最佳实践、Boilerplate在某些意义上会反而提高学习门槛与曲线，对于这方面的讨论笔者推荐几个瞅瞅，当然，笔者本身也在思考，打腹稿中：

• javascript-fatigue

• state-of-the-union-js

我做到我已知的最好的，让最佳实践留给未来的我吧

以下是正文部分。

JavaScript Basics

作为目前最流行的跨平台语言之一，JavaScript几乎出现在了所有的地方，但是千里之行始于足下，我们还是要先来理解JavaScript的一些基础知识。

Language

在学习怎么将JavaScript应用到Web开发之前，我们还是要看下JavaScript的基本语法。推荐阅读Mozilla Developer Network的 Language basics crash course。本教程会导引学习譬如基本的变量、流程控制与函数等等语言基础部分。

读完了这个，你就可以读MDN的 JavaScript guide中的剩余部分：

• 语法与类型

• 流程控制与异常处理

• 循环与迭代

• 函数

JavaScript Introduction,可以参考里面的Reference部分，有很多推荐的阅读参考

同样的，不要死记硬背，你可以在你记不住的时候多看看，当然，最好的是能形成你自己的阅读笔记或者知识体系框架，譬如这个。你应当专注于理解变量初始化、循环以及函数等等关键的知识点，譬如for-in、forEach、for-of的区别，this的N种绑定方法等。如果你实在觉得这货太单调了，那也能直接跳过，以后发现啥东西不理解的时候再滚回来瞅一眼。在实践中学习可能能让你理解地更好。

读书读累了，那可以看看视频换个脑子，这个Codecademy提供的 JavaScript系列教程 不错，可以随手看也很有意思。另一个，如果你还有时间，可以看看 Eloquent JavaScript 中的相关章节来加深你的记忆。 Eloquent JavaScript 是个非常优秀的在线的免费的JavaScript学习工具书。

Interactivity

到这一步你应该已经对JavaScript这门语言本身的基础知识有了了解，那么下一步就是学会如何应用到Web项目开发中。你首先需要来瞅几眼文档对象模型 (DOM)来理解JavaScript是如何完成与网页的交互的。文档对象模型 (DOM) 是HTML和XML文档的编程接口。它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。DOM 将文档解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合。简言之，它会将web页面和脚本或程序语言连接起来。如果要做进一步了解的话推荐阅读CSSTricks出品的What is the DOM，它也提供了简单而直接的对于DOM的介绍。

好像刚才那段对DOM的介绍有点照本宣科，CSS Tricks里是这么说的，关于DOM与HTML的区别。可能你在HTML代码中写了个

元素，但是忘了写，没关系，浏览器会自动帮你插入到DOM中，你可以利用JavaScript来控制该节点并且赋予样式，尽管它从未出现在你的HTML中。

这里提供了一个简单的例子，通过JavaScript是如何改变某个DOM元素里的内容来展示基本的JavaScript与DOM树的交互，首先需要选择到对应DOM节点

var container = document.getElementById(“container”); 

然后使用该DOM节点的属性来改变其内容

container.innerHTML = 'New Content!';

这只是一个简单的例子，你还可以用JavaScript DOM API干更多的事情，你可以阅读以下的MDN的教程来进行了解, The Document Object Model.

• Events

• 使用DOM进行Web与XML开发示例

• 怎么创建一个DOM树

• DOM介绍

• 利用选择器来定位DOM节点

老生常谈了，不能舍本逐末，还是要专注于理解概念而不是简单地表达式使用，要在心中默问自己几个问题：

• DOM是什么鬼?

• 怎么查询元素?

• 怎么进行事件监听?

• 怎么改变DOM节点的属性?

对于常见的JavaScript与DOM之间的交互, 可以参考PlainJS出品的 JavaScript Functions and Helpers 。这个站点会给你提供很多的例子，譬如 如何操作DOM元素样式 或者 怎么添加键盘事件响应等等。如果你希望再深入一点，同样推荐Eloquent JavaScript中的DOM介绍的章节。

Inspector

在浏览器中，我们可以用开发者工具来调试客户端运行的JavaScript代码，譬如Firefox的Firebug和Chrome的开发者工具，可以帮你审视网页源代码，追踪JavaScript的执行过程和结果，打印出调试语句，还能瞅瞅譬如网络请求、Cookie等等资源。这个 tutorial 是关于如何使用Chrome的开发者工具，如果你是火狐的话，瞅瞅这个 tutorial。

Practicing the basics

上面聊完了基础的语法和交互操作，但是对于不知道有多少个坑的JS而言不过沧海一粟，不过我把一些新的东西放到了最后一节介绍，这边先放松放松，做点小实验玩玩。

Experiment 1

实验1里让我们把目光投向 AirBnB, 打开你浏览器的 page inspector, 然后点击 console tab。这样你就可以在页面上执行一些JavaScript脚本了，你可以尝试着控制一些界面元素，改个字体样式啥的。

我选用airbnb的网站作为介绍是因为它的CSS类命名比较直接，并且没有被编译器混淆过，当然，你也可以看看百度啊之类的调试。

• 选择一个拥有唯一类名的header标签，改变其文字内容

• 移除页面上的随机一个元素

• 改变任意元素的CSS属性

• 将一块区域的高度减小250px

• 改变一个组件，譬如panel的可见性

• 定义一个叫做 doSomething 的函数，让它弹出“Hello world”，并且执行它

• 为某个文本块添加一个点击响应事件

如果你在那边卡住了，别忘了去看看JavaScript Functions and Helpers 指南，我在这边也给一个小小的例子：

var header = document.querySelector(‘.text-branding’)
header.innerText = ‘Boop'

这个实验的主要目的就是回顾下你学到的JavaScript的基本语法以及一些DOM操作的知识。

Experiment 2

第二个实验使用 CodePen-JonathanZWhite编写一个较大较复杂的JavaScript交互项目，会用到一些programmatic logic 。这个实验的关注点会综合你在前端攻略-从路人甲到英雄无敌中学到的关于HTML与CSS的知识，这边有几个参考项目：

• Periodic Table

• Mood Color Generator

• Calculator

• JavaScript Quiz

• Playable Canvas Asteroids

More JavaScript

看过了基础知识，动手做了几个小实验，下面我们会进入一些更有难度的概念的学习。这边的列举的概念可能之间并么有什么必然的练习，不过我还是把它们放在了一起是因为它们能有助于你通往专家的道路，并且也能有助于你理解下面关于框架部分的讲解。

Language

实际上JavaScript并不是一门浅薄的语言，虽然它只用了短短一周时间就创建出来了，它包含了很多高级的概念与用法（并且因为历史版本问题存在着大量的Polyfill）。这里是列举出了常见的概念，同样地 Eloquent JavaScript也攘括了这些点：

• 原型与继承

• 作用域

• 闭包

• 回环

• 事件冒泡

• Apply, call, and bind

• Callbacks and promises

• 变量与提升

• Currying

Imperative vs. Declarative（命令式VS声明式）

就如同常见的两种编程方式，JavaScript与DOM交互的方式也分为命令式与声明式。一般来说，声明式编程关注于发生了啥，而命令式则同时关注与咋发生的。

var hero = document.querySelector('.hero')

hero.addEventListener(‘click’, function() {
  var newChild = document.createElement(‘p’)

  newChild.appendChild(document.createTextNode(‘Hello world!’))
    newChild.setAttribute(‘class’, ‘text’)
    newChild.setAttribute(‘data-info’, ‘header’)
    hero.appendChild(newChild)
 })
}

上面这个小例子就是典型的命令式编程，我们手动地查找到某个元素，然后将UI状态存储在DOM中，换言之，就是关注于如何达成某个目标。命令式编程的优势在于很直观，不过缺点也很明显，整个程序的健壮性很差，也不易于扩展。譬如如果某人把那个元素的类名从hero变成了villain，那么事件监听器就永远不会被调用了。

声明式编程可以较好地解决这个问题，刚才提到的比较麻烦的元素选择这个动作可以交托给框架或者库区处理，这样就能让开发者专注于发生了啥，这里推荐一波 The State Of JavaScript — A Shift From Imperative To Declarative 与 Three D’s of Web Development #1: Declarative vs. Imperative。本指南并没有一上来先给你看Angular或者React的HelloWord，而是告诉你命令式的做法和声明式的区别在哪，这样你就能更好地理解为啥我们会需要框架。

响应式与声明式也可以看看笔者在我的前端之路里面提到的从以DOM操作为核心到数据流驱动的页面，关注发生了啥本质上就是关注状态与数据，而不是额外的操作。

Ajax

虽然已经有了很多关于Ajax的教程指南，还是建议你阅读下官方的Ajax 介绍。Ajax即是一个允许Web页面通过JavaScript与服务端完成交互的技术，Ajax也是前后端分离的一个基石。

譬如，如果你要去提交一个表单，那么就要先收集下输入的内容然后通过HTTP请求发送到服务端。你在发Twitter的时候，就是Twitter客户端发送HTTP请求到Twitter的服务器，然后根据服务端响应来修正页面状态。推荐阅读下 What is Ajax来深入理解Ajax，如果还是觉得有些疑惑，那可以看看 Explain it like i’m 5, what is Ajax，要是还不够，那就回到eloquentjavascript chapter 关于HTTP的章节吧。

早期，笔者是习惯用jQuery的$.ajax来进行Ajax操作，不过现在已经慢慢统一到了标准的 Fetch，你可以看看由 Dan Walsh写的文章来多了解下Fetch，它涵盖了Fetch的工作原理与基本的用法。因为Fetch在部分低版本浏览器上还不能使用，因此我们会选择一些Fetch polyfill ，文档是 这里。

jQuery

• 一些jQuery使用技巧

• 也需要你压根用不到jQuery

到这里，咱们一直是用单纯的JavaScript来进行节点操作，怪麻烦的说，而且在不同的浏览器里还有写不同的Polyfill。实际上，已经有了大量的DOM节点的操作库来帮我们简化常用代码，其中最著名的就是jQuery，一个当年前端程序猿的标配。要记住，jQuery是一个典型的命令式的操作库，它编写与前端井喷之前，在那个年代有着无可比拟的先进行。虽然今天，我们应该用像Angular、React这样的声明式编程的框架来进行复杂UI界面的编写，但是仍然是推荐学习下jQuery，毕竟还有大量的项目仍然是基于jQuery的。

jQuery官方提供了一个Learning Center，是不错的基础学习的教程，它会一步一步带你学习重要的概念，譬如animations 与 event handling。如果你想要更多的学习资源，那么可以参考Codecademy的 jQuery course。

不过一定要记住，jQuery并不是唯一的进行DOM操作的库， PlainJS 和 You Might Not Need jQuery 也提供了基于原本的JavaScript代码怎么实现常见的jQuery中的操作。

ES5 vs. ES6

在现代的前端开发中，另一个绕不过去的概念就是 ECMAScript。现在主要有两个常用的JavaScript版本，分布是ES5和ES6，它们呢都是JavaScript使用的ECMAScript标准。你可以把它们看做不同版本的JavaScript，ES5是在2009年定稿，然后使用至今。而ES6, 也叫作ES2015，是一个新的标准，它提供了很多譬如常量, 类, 以及 模板字符串等等特性。ES6是兼容ES5的，不像Python3和Python2，并且很多ES6带来的语法特性都是在ES5的封装的基础上，譬如ES6中的类是基于JavaScript prototypal inheritance的syntactical sugar。

这里推荐一个不错的ES6的教程ES5, ES6, ES2016, ES.Next: What’s going on with JavaScript versioning 以及Dan Wahlin的Getting Started with ES6 — The Next Version of JavaScript.。看完了这些，你也可以看看ES5和ES6特性的详细列表： ES6 Features以及 Github repository 。

More Practice

恭喜你，成功到达存档点，你已经学了不少关于JavaScript的知识了，下面让我们来温习一波。

Experiment 3

Experiment 3 着重于如何利用jQuery进行常见的DOM节点操作，本实验中，我们会以一种更加结构化的方式。我是选择了Flipboard的主页作为范本，你可以参考下Codecademy的Flipboard’s home page and add interactivity with JavaScript 教程。

Experiment 4

按照惯例，实验4呢又把你学过的HTML和CSS的知识跟JavaScript的知识混杂到了一起进行锻炼，这是一个关于钟的实验，各种各样的钟。在动手之前推荐你看看 Decoupling Your HTML, CSS, and JavaScript来了解下JavaScript混入的情况下基本的CSS类名命名规范。同样的，我也准备了一系列的CodePen来当做你的教材：

• Flat Clock

• jQuery Wall Clock

• Fancy Clock

• Retro Clock

• Simple JavaScript Clock

如果你要更多的例子，请在CodePen上搜索 clock 。你可以选择先写基本的HTML与CSS样式然后再加上JavaScript逻辑，也可以先写JavaScript逻辑代码然后再放入到样式中。你可以选择用jQuery，不过尽量还是用纯粹的JavaScript代码吧。

JavaScript Frameworks

小怪清完了，下面开始刷BOSS了，拿起你的剑吧勇士，美丽的公主就在前方。我们在这一章节会开始介绍常用的JavaScript框架。我们不提倡重复造轮子，但是一定要理解轮子并且能给它上上油或者换换螺丝钉，这些JavaScript框架可以帮你更好地组织你的代码。它们为前端开发者提供了可复用的解决方案，就好像所谓的设计模式一样，它可以用来解决状态管理、路由以及性能优化等等，正是因为有了这些框架，我们才能更好地构建web apps。

贪多嚼不烂，我不打算介绍所有的JavaScript框架，不过还是列个目录下来，这些框架包括但不限于 Angular, React + Flux, Ember, Aurelia,Vue, 以及 Meteor。你并不需要学习所有的框架，选择一个然后深入，最合适自己的才是最好的。

便如译者在文首所说，我们并不能盲目地追赶框架，而是要理解框架背后的思想与原则。另一个在译者自己的实践中，会尽可能的基于ES6进行抽象，这样保证了即使换框架也能有很好地兼容于复用。

Architectural Patterns

在学习框架之前，首先要了解下常用的架构模式：

• model-view-controller

• model-view-viewmodel

• model–view–presenter

这些模式可以用来创建清晰的多层应用关注分离 。关注分离是一个设计原则，即是讲一个巨石型应用切分到不同的领域专注层，譬如前面我们都是在HTML中保留应用状态，而你可以使用一个JavaScript对象，或者说是Model层来存储应用状态。如果你想要了解地更多，可以先看下Chrome Developers里对于MVC的讲解，然后阅读Understanding MVC And MVP (For JavaScript And Backbone Developers)。阅读这篇文章的时候不要在意有没有学过Backbone，只要关注MVC与MVP比较的部分。 Addy Osman也写了另一篇关于MVVM的文章Understanding MVVM — A Guide For JavaScript Developers。如果你想了解MVC的源起，可以参考Martin Fowler的 GUI Architectures。最后，阅读这篇JavaScript MV* Patterns， Learning JavaScript Design Patterns也是个很不错的在线免费电子书。

Design Patterns

JavaScript的框架也并没有重复造轮子，很多还是基于已有的设计模式，你可以认为设计模式是在软件开发中用于解决通用问题的可复用的方法。尽管理解设计模式并不是学习一个框架的前提，不过我还是建议你可以先了解一些：

• Decorator

• Factory

• Singleton

• Revealing module

• Facade

• Observer

理解这些设计模式不仅会让你变成一个更好地设计师，也能有助于你更好地理解这些框架。

AngularJS

AngularJS 是一个 JavaScript MVC框架，不过有时候也是一个 MVVM框架。它由在2010年由Google进行维护并且迅速在社区刮起了一波浪潮。

Angular是一个典型的声明式框架，这里推荐一个阅读，可以帮你理解命令式编程到声明式编程的转变： How is AngularJS different from jQuery。如果你希望了解更多关于Angular的知识，可以参考Angulardocumentation。还有一个叫做 Angular Cat 的渐进教程。 angular2-education 是一个由 Tim Jacobi.整理的完整的关于angular2的教程，另外，还有John Papa编写的 最佳实践指南 。

React + Flux

Angular帮助开发者解决了很多前端系统构建中遇到的问题，不过Angular 1存在着极大的性能问题。今年才出的Angular 2也是组件化思维，不过太过庞大。另一个常用的小而美的工具就是 React，专注于用户交互的构建。React可以认为是MVC层中的View层，React只是一个Library，通常与 Flux或者Redux一起结合起来使用。

Facebook最早设计React与Flux是为了解决MVC中的一些缺陷与扩展问题，可以参考著名的Hacker Way: Rethinking Web App Development at Facebook演讲，这里介绍了Flux的起源。首先，我们来学习React，推荐是直接看React 官方文档，然后看看React.js Introduction For People Who Know Just Enough jQuery To Get By 来帮你从jQuery思维转移到React思维。

可以参照译者的React Introduction来获取更多关于React参考资料的东东

在你对React有了基本的了解之后，下面就可以开始学习Flux了，同样的首先推荐官方Flux文档。然后你可以看看Awesome React, 这里包含了很多你可以慢慢咀嚼的内容。

Practicing with Frameworks

又到了实践环节了，现在你已经对于JavaScript框架与架构模式有了基本的了解，是时候带一波节奏了。在这两个实验中，注意体会架构设计的理念，首先要保证 DRY, 然后有一个 清晰的分层概念, 最后要注意 单一职责原则.

Experiment 5

实验5是不用框架重构著名的TodoMVC，换言之，就是用最基础的JavaScript代码来实现一个TodoMVC。本实验的目的就是为了向你展示在没有框架介入的情况下怎么构建一个完整的MVC应用

你可以参考 TodoMVC，第一步就是创建一个新的本地项目然后建立三个基本的组件，你可以参考Github repository这里的完整代码。如果你觉得现在的自己能力还不足以Hold住整个项目，表担心，先把它们下载下来，然后慢慢实践。

Experiment 6

Experiment 6 就是跟着Scotch.io的教程来实现一个下面这样的站点：

Build an Etsy Clone with Angular and Stamplay 会教你怎么基于Angular来构建一个网站，提供APIs并且在一个大型的项目中进行架构组织。学完了这些之后，你要能理解以下这些问题：

• 啥是web app?

• 怎么用Angular实践 MVC/MVVM?

• API是啥，肿么用?

• 怎么组织与管理一个大型的CodeBase?

• 将一个UI切分为声明式组件的好处在哪?

如果这个教程还不够，那还可以看看Build a Real-Time Status Update App with AngularJS & Firebase。

Experiment 7

第7个实验是将React与Flux综合使用，即利用React来构建一个TODOMVC。你可以参考Facebook’s Flux documentation site这个教程，它会教你一步一步地从零开始构建界面然后将Flux应用到整个Web项目中。通过了第一关，就可以移步到 怎么利用React、Redux与Immutable.js构建一个TodoMVC 以及 利用Flux与React构建一个微博客。

Stay current

就像前端一样，JavaScript也永远不会停下前进的步伐。

下面列举了一系列博客，多读读，能够随时了解最新的发展与消息：

• Smashing Magazine

• JavaScript Weekly

• Ng Weekly

• Reddit JavaScript

• JavaScript Jabber

Learn by example

Styleguides

• AirBnB JavaScript Styleguide

• Principles of Writing Consistent, Idiomatic JavaScript

• Node Styleguide

• MDN Coding Style

Codebases

• Lodash

• Underscore

• Babel

• Ghost

• NodeBB

• KeystoneJS

Further Reading

• web-frontend-practice-handbook

你可能感兴趣的:(前端,javascript,测试)

• 力扣hot100：15.轮转数组 star-yp 力扣hot100leetcode算法java日常记录
  题目描述第一次：纯暴力复杂度太高：O(N^2)，未通过测试classSolution{publicvoidrotate(int[]arr,intk){for(inti=0;i0;j--){arr[j]=arr[j-1];}arr[0]=flag;}}}第二次：反转三次复杂度降低：O(N)，通过测试classSolution{publicvoidrotate(int[]arr,intk){if(ar
• Ubuntu使用Docker部署Nginx并结合内网穿透实现公网远程访问 鸭鸭渗透 eureka云原生
  目录1.安装Docker2.使用Docker拉取Nginx镜像3.创建并启动Nginx容器4.本地连接测试5.公网远程访问本地Nginx5.1内网穿透工具安装5.2创建远程连接公网地址5.3使用固定公网地址远程访问在开发人员的工作中，公网远程访问内网是其必备的技术需求之一。对于运维人员和开发者来说，能够通过公网远程访问内部的服务和应用，能够极大地提升工作效率和便利性。本文将介绍如何利用Ubuntu
• 开源瑰宝：全方位深度揭秘“随机数据生成器” 虞亚竹Luna
  开源瑰宝：全方位深度揭秘“随机数据生成器”common-random简单易用的随机数据生成器。生成各种比较真实的假数据。一般用于开发和测试阶段的数据填充模拟。支持各类中国特色本地化的数据格式。Aneasy-touserandomdatagenerator.Generallyusedfordatafilling,simulation,demonstrationandotherscenariosint
• 一篇文章带你了解-selenium工作原理详解 程序员笑笑 软件测试selenium测试工具软件测试自动化测试功能测试程序人生职场和发展
  前言Selenium是一个用于Web应用程序自动化测试工具。Selenium测试直接运行在浏览器中，就像真正的用户在操作一样。支持的浏览器包括IE（7,8,9,10,11），MozillaFirefox，Safari，GoogleChrome，Opera等。主要功能包括：测试与浏览器的兼容性——测试你的应用程序看是否能够很好得工作在不同浏览器和操作系统之上。测试系统功能——创建回归测试检验软件功能
• Selenium工作原理详解 天才测试猿 selenium测试工具自动化测试软件测试测试用例python职场和发展
  Selenium是一个用于Web应用程序自动化测试工具。Selenium测试直接运行在浏览器中，就像真正的用户在操作一样。支持的浏览器包括IE（7,8,9,10,11），MozillaFirefox，Safari，GoogleChrome，Opera等。主要功能包括：测试与浏览器的兼容性——测试你的应用程序看是否能够很好得工作在不同浏览器和操作系统之上。测试系统功能——创建回归测试检验软件功能和用
• .gitlab-ci.yml 配置文件详解 程序媛夏天 Gitgitlabci/cd.gitlab-ci.yml
  个人主页：不爱吃糖的程序媛‍♂️作者简介：前端领域新星创作者、CSDN内容合伙人，专注于前端各领域技术，成长的路上共同学习共同进步，一起加油呀！✨系列专栏：前端面试宝典、JavaScript进阶、vue实战资料领取：前端进阶资料以及文中源码可以在公众号“不爱吃糖的程序媛”领取git工具文档说明：https://docs.gitlab.com/ee/ci/yaml/gitlab_ci_yaml.ht
• 如何使用YOLOv8在AI-TOD数据集上进行遥感目标检测，从安装依赖项、准备数据集、配置YOLOv8、训练和评估模型以及构建GUI应用程序展示检测 计算机C9硕士_算法工程师 人工智能YOLO目标检测遥感
  如何使用YOLOv8在AI-TOD数据集上进行遥感目标检测，从安装依赖项、准备数据集、配置YOLOv8、训练和评估模型以及构建GUI应用程序展示检测文章目录1.安装依赖2.数据准备3.配置YOLOv83.1加载预训练模型或自定义模型4.训练模型5.评估模型6.构建GUI应用程序（可选）以下文字及代码仅供参考。遥感目标检测，AI-TOD数据集aitod，训练集11214张，测试集集14018，验证集
• 渗透测试-越权测试、sql注入 夜晚打字声 笔记
  越权访问简介（BrokenAccessControl，简称BAC）：web应用程序中常见漏洞，存在范围广、危害大，被OWASP列为web应用十大安全隐患第二名。该漏洞是指应用在检查授权时存在纰漏，使得攻击者在获得低权限用户账户后，利用一些方式绕过权限检查，访问或者操作其他用户或者更高权限。越权漏洞的成因主要是因为开发人员在对数据进行增、删、改、查询时对客户端请求的数据过分相信而遗漏了权限的判定越权
• 华为OD机试 - 相对开音节 - 正则表达式（Python/JS/C/C++ 2024 E卷 100分） 哪 吒 华为od正则表达式python
  华为OD机试2024E卷题库疯狂收录中，刷题点这里专栏导读本专栏收录于《华为OD机试真题（Python/JS/C/C++）》。刷的越多，抽中的概率越大，私信哪吒，备注华为OD，加入华为OD刷题交流群，每一题都有详细的答题思路、详细的代码注释、3个测试用例、为什么这道题采用XX算法、XX算法的适用场景，发现新题目，随时更新。一、题目描述相对开音节构成的结构为辅音+元音（aeiou）+辅音(r除外)+
• 华为OD机试 - 数列描述 - 动态规划（Python/JS/C/C++ 2024 B卷 100分） 哪 吒 华为od动态规划python
  华为OD机试2024E卷题库疯狂收录中，刷题点这里专栏导读本专栏收录于《华为OD机试真题（Python/JS/C/C++）》。刷的越多，抽中的概率越大，私信哪吒，备注华为OD，加入华为OD刷题交流群，每一题都有详细的答题思路、详细的代码注释、3个测试用例、为什么这道题采用XX算法、XX算法的适用场景，发现新题目，随时更新。一、题目描述有一个数列a[N](N=60)，从a[0]开始，每一项都是一个数
• 华为OD机试 - 输出单向链表中倒数第k个结点 - 双指针（Python/JS/C/C++ 2024 B卷 100分） 哪 吒 华为od链表python
  华为OD机试2024E卷题库疯狂收录中，刷题点这里专栏导读本专栏收录于《华为OD机试真题（Python/JS/C/C++）》。刷的越多，抽中的概率越大，私信哪吒，备注华为OD，加入华为OD刷题交流群，每一题都有详细的答题思路、详细的代码注释、3个测试用例、为什么这道题采用XX算法、XX算法的适用场景，发现新题目，随时更新。一、题目描述输入一个单向链表，输出该链表中倒数第k个结点，链表的倒数第1个结
• 华为OD机试 - 图片整理（Python/JS/C/C++ 2024 B卷 100分） 哪 吒 华为odpythonjavascript
  华为OD机试2024E卷题库疯狂收录中，刷题点这里专栏导读本专栏收录于《华为OD机试真题（Python/JS/C/C++）》。刷的越多，抽中的概率越大，私信哪吒，备注华为OD，加入华为OD刷题交流群，每一题都有详细的答题思路、详细的代码注释、3个测试用例、为什么这道题采用XX算法、XX算法的适用场景，发现新题目，随时更新。一、题目描述Lily上课时使用字母数字图片教小朋友们学习英语单词，每次都需要
• 华为OD机试 - 宜居星球改造计划 - 图的多源BFS（Python/JS/C/C++ 2023 B卷 100分） 哪 吒 华为od宽度优先python
  华为OD机试2024E卷题库疯狂收录中，刷题点这里专栏导读本专栏收录于《华为OD机试真题（Python/JS/C/C++）》。刷的越多，抽中的概率越大，私信哪吒，备注华为OD，加入华为OD刷题交流群，每一题都有详细的答题思路、详细的代码注释、3个测试用例、为什么这道题采用XX算法、XX算法的适用场景，发现新题目，随时更新。一、题目描述2XXX年，人类通过对火星的大气进行宜居改造分析，使得火星已在理
• 华为OD机试 - 红黑图（Python/JS/C/C++ 2023 B卷100分） 哪 吒 华为odpythonjavascript
  华为OD机试2024E卷题库疯狂收录中，刷题点这里专栏导读本专栏收录于《华为OD机试真题（Python/JS/C/C++）》。刷的越多，抽中的概率越大，私信哪吒，备注华为OD，加入华为OD刷题交流群，每一题都有详细的答题思路、详细的代码注释、3个测试用例、为什么这道题采用XX算法、XX算法的适用场景，发现新题目，随时更新。一、题目描述众所周知红黑树是一种平衡树，它最突出的特性就是不能有两个相邻的红
• 华为OD机试 - DNA序列（Python/JS/C/C++ 2023 B卷 100分） 哪 吒 华为odpythonjavascript
  华为OD机试2024E卷题库疯狂收录中，刷题点这里专栏导读本专栏收录于《华为OD机试真题（Python/JS/C/C++）》。刷的越多，抽中的概率越大，私信哪吒，备注华为OD，加入华为OD刷题交流群，每一题都有详细的答题思路、详细的代码注释、3个测试用例、为什么这道题采用XX算法、XX算法的适用场景，发现新题目，随时更新。一、题目描述一个DNA序列由A/C/G/T四个字母的排列组合组成。G和C的比
• 华为OD机试 - 书籍叠放 - 逻辑分析（Python/JS/C/C++ 2024 B卷 200分） 哪 吒 华为odpythonjavascript
  华为OD机试2024E卷题库疯狂收录中，刷题点这里专栏导读本专栏收录于《华为OD机试真题（Python/JS/C/C++）》。刷的越多，抽中的概率越大，私信哪吒，备注华为OD，加入华为OD刷题交流群，每一题都有详细的答题思路、详细的代码注释、3个测试用例、为什么这道题采用XX算法、XX算法的适用场景，发现新题目，随时更新。一、题目描述书籍的长、宽都是整数对应(l,w)。如果书A的长宽度都比B长宽大
• 华为OD机试 - 购买水果最便宜的方案 - 数组（Python/JS/C/C++ 2024 C卷 100分） 哪 吒 华为odpythonjavascript
  华为OD机试2024E卷题库疯狂收录中，刷题点这里专栏导读本专栏收录于《华为OD机试真题（Python/JS/C/C++）》。刷的越多，抽中的概率越大，私信哪吒，备注华为OD，加入华为OD刷题交流群，每一题都有详细的答题思路、详细的代码注释、3个测试用例、为什么这道题采用XX算法、XX算法的适用场景，发现新题目，随时更新。一、题目描述有m个水果超市在1-n个小时的不同时间段提供不同价格的打折水果，
• 华为OD机试 - 目录删除 - 深度优先搜索dfs算法（Python/JS/C/C++ 2024 B卷 200分） 哪 吒 算法华为od深度优先
  华为OD机试2024E卷题库疯狂收录中，刷题点这里专栏导读本专栏收录于《华为OD机试真题（Python/JS/C/C++）》。刷的越多，抽中的概率越大，私信哪吒，备注华为OD，加入华为OD刷题交流群，每一题都有详细的答题思路、详细的代码注释、3个测试用例、为什么这道题采用XX算法、XX算法的适用场景，发现新题目，随时更新。一、题目描述某文件系统中有N个目录，每个目录都有一个独一无二的ID。每个目录
• 华为OD机试 - 寻找最富裕的小家庭（Python/JS/C/C++ 2024 D卷 100分） 哪 吒 华为odpythonjavascript
  华为OD机试2024E卷题库疯狂收录中，刷题点这里专栏导读本专栏收录于《华为OD机试真题（Python/JS/C/C++）》。刷的越多，抽中的概率越大，私信哪吒，备注华为OD，加入华为OD刷题交流群，每一题都有详细的答题思路、详细的代码注释、3个测试用例、为什么这道题采用XX算法、XX算法的适用场景，发现新题目，随时更新。一、题目描述在一棵树中，每个节点代表一个家庭成员，节点的数字表示其个人的财富
• 学习111 麋鹿叔叔 学习
  项目名称项目简介主要功能技术原理GitHub地址browser-use智能浏览器工具，让AI像人类一样操作浏览器，实现网页自动化网页浏览与操作、多标签页管理、视觉识别与内容提取、操作记录与重复执行、自定义动作支持、主流LLM模型支持为大语言模型服务的创新Python工具库GitHubEkoFellouAI推出的生产就绪型JavaScript框架，基于自然语言驱动创建智能代理支持所有平台，提供统一便
• 前端如何实现一个五星评价，鼠标滑动，前边星星颜色的变黄，后边的不变； 修心光 前端
  直接上代码.star-rating{display:flex;padding:10px0;}.star{position:relative;width:40px;height:40px;}.half{position:absolute;top:0;width:20px;height:40px;overflow:hidden;font-size:40px;color:#e0e0e0;cursor:p
• DeepSeek-R1 API评测深度解析：揭秘7大常见误区 耶耶Norsea 网络杂烩服务器网络运维
  摘要随着SiliconCloud等平台推出DeepSeek-R1服务，市场涌现出大量关于API评测的内容。然而，这些评测中存在7个常见误区，如测试方法缺陷和内容质量参差不齐等问题，影响了用户对DeepSeek-R1的准确理解。本文旨在揭示这些问题，帮助用户更全面地了解该服务。关键词DeepSeek-R1,API评测,常见误区,SiliconCloud,内容质量一、一级目录11.1DeepSeek-
• 前端如何实现鼠标移上这个元素，另外一个元素变色 =^_^=银爪 css前端javascript
  1、使用CSS选择器和伪类来实现这个效果具体步骤如下：获取要修改样式的元素使用CSS选择器选中要操作的元素，并使用伪类“:hover”来指定当鼠标悬停在该元素上时应用的样式指定要应用的样式例如，如果您有一个元素ID为“target”，需要将其颜色更改为红色，当鼠标移到ID为“trigger”的元素上时，可以使用以下代码：#trigger:hover#target{color:red;}这段代码指定
• Maven简介 z迦在线 mavenjava
  Maven简介Maven是Apache软件基金会的一个开源项目,是一个优秀的项目构建工具,它用来帮助开发者管理项目中的jar,以及jar之间的依赖关系、完成项目的编译（.java--->.class）、测试、打包（源代码--->.jar文件）和发布等工作。Maven是如何管理项目中的jar文件的？Maven简化了Java项目中的JAR文件管理，主要通过以下几个关键点：POM文件：Maven使用po
• 个人学习编程(3-21) leetcode刷题 Rsecret2 编程笔记学习leetcode算法
  链接列表的中间值：测试用例1：创建链表[1,2,3,4,5]，调用middleNode，预期返回值是3。测试用例2：创建链表[1,2,3,4,5,6]，调用middleNode，预期返回值是3。判断长度，然后length/2structListNode*middleNode(structListNode*head){intlength=0;for(structListNode*curr=head;
• [每周一更]-(第137期)：Go + Gin 实战：Docker Compose + Apache 反向代理全流程 ifanatic 每周一更容器Gogolanggindocker
  文章目录**1.Go代码示例（`main.go`）****2.`Dockerfile`多段构建**3.构建Docker镜像**4.`docker-compose.yml`直接拉取镜像****5.运行容器****6.测试API**7、配置域名访问**DNS解析：将域名转换为IP地址****DNS寻址示例**8.错误记录访问路径ip+端口：端口可以了，但是小程序中不支持该格式，还需要配置nginx代理
• 推荐开源项目：FastAPI Best Architecture — 极致的后端架构设计 蓬玮剑
  推荐开源项目：FastAPIBestArchitecture—极致的后端架构设计项目地址:https://gitcode.com/gh_mirrors/fa/fastapi_best_architecture项目简介在寻找一款基于FastAPI构建的强大且灵活的后端解决方案吗？那么，你已经找到了——FastAPIBestArchitecture。这是一个遵循前端与后端分离原则的中间件层解决方案，采
• HarmonyOS Next～HarmonyOS应用开发工具之AppGallery Connect Bruce_xiaowei 总结经验编程笔记harmonyos华为
  HarmonyOS应用开发工具之AppGalleryConnect一、AppGalleryConnect概述1.1定位与核心价值AppGalleryConnect（AGC）是华为面向HarmonyOS开发者打造的全生命周期服务平台，作为HarmonyOS应用开发的核心工具链，提供从开发、测试、上架到运营的全流程支持。其核心价值体现在：服务集成化：聚合40+云端服务能力开发效率提升：平均缩短30%开
• 在 Spring Boot 结合 MyBatis 的项目中，实现字段脱敏（如手机号、身份证号、银行卡号等敏感信息的部分隐藏）可以通过以下方案实现 冷冷清清中的风风火火 笔记springbootspringbootmybatis后端
  在SpringBoot结合MyBatis的项目中，实现字段脱敏（如手机号、身份证号、银行卡号等敏感信息的部分隐藏）可以通过以下方案实现。以下是分步说明和完整代码示例：一、实现方案选择1.方案一：自定义注解+Jackson序列化脱敏适用场景：数据返回给前端时动态脱敏，数据库存储原始数据。优点：无侵入性，通过注解灵活控制脱敏字段，与业务逻辑解耦。核心实现：利用Jackson的JsonSerialize
• 如何使用DeepSeek编写测试用例？ 海姐软件测试 deepseek大数据测试工具
  一、DeepSeek在测试用例设计中的定位DeepSeek作为AI工具，并非直接替代测试设计，而是通过以下方式提升效率：快速生成基础用例框架（等价类、边界值等）智能补充易遗漏场景（如特殊字符、异常流）自动化脚本片段生成（Python/pytest/JUnit等）测试数据构造建议（符合业务规则的Mock数据）二、四步法实战：AI协作编写测试用例Step1：明确需求输入输入质量决定输出质量，需向Dee
• 312个免费高速HTTP代理IP（能隐藏自己真实IP地址） yangshangchuan 高速免费superwordHTTP代理
      124.88.67.20:843 190.36.223.93:8080 117.147.221.38:8123 122.228.92.103:3128 183.247.211.159:8123 124.88.67.35:81 112.18.51.167:8123 218.28.96.39:3128 49.94.160.198:3128 183.20
• pull解析和json编码 百合不是茶 androidpull解析json
  n.json文件: [{name:java,lan:c++,age:17},{name:android,lan:java,age:8}]   pull.xml文件 <?xml version="1.0" encoding="utf-8"?> <stu>     <name>java
• [能源与矿产]石油与地球生态系统 comsci 能源
        按照苏联的科学界的说法,石油并非是远古的生物残骸的演变产物,而是一种可以由某些特殊地质结构和物理条件生产出来的东西,也就是说,石油是可以自增长的....       那么我们做一个猜想: 石油好像是地球的体液,我们地球具有自动产生石油的某种机制,只要我们不过量开采石油,并保护好
• 类与对象浅谈 沐刃青蛟 java基础
         类，字面理解，便是同一种事物的总称，比如人类，是对世界上所有人的一个总称。而对象，便是类的具体化，实例化，是一个具体事物，比如张飞这个人，就是人类的一个对象。但要注意的是：张飞这个人是对象，而不是张飞，张飞只是他这个人的名字，是他的属性而已。而一个类中包含了属性和方法这两兄弟，他们分别用来描述对象的行为和性质（感觉应该是
• 新站开始被收录后，我们应该做什么？ IT独行者 PHPseo
  新站开始被收录后，我们应该做什么？         百度终于开始收录自己的网站了，作为站长，你是不是觉得那一刻很有成就感呢，同时，你是不是又很茫然，不知道下一步该做什么了？至少我当初就是这样，在这里和大家一份分享一下新站收录后，我们要做哪些工作。       至于如何让百度快速收录自己的网站，可以参考我之前的帖子《新站让百
• oracle 连接碰到的问题 文强chu oracle
  Unable to find a java Virtual Machine－－安装64位版Oracle11gR2后无法启动SQLDeveloper的解决方案 作者：草根IT网 来源：未知 人气：813标签： 导读：安装64位版Oracle11gR2后发现启动SQLDeveloper时弹出配置java.exe的路径，找到Oracle自带java.exe后产生的路径“C:\app\用户名\prod
• Swing中按ctrl键同时移动鼠标拖动组件（类中多借口共享同一数据） 小桔子 java继承swing接口监听
          都知道java中类只能单继承，但可以实现多个接口，但我发现实现多个接口之后，多个接口却不能共享同一个数据，应用开发中想实现：当用户按着ctrl键时，可以用鼠标点击拖动组件，比如说文本框。 编写一个监听实现KeyListener,NouseListener,MouseMotionListener三个接口，重写方法。定义一个全局变量boolea
• linux常用的命令 aichenglong linux常用命令
  1 startx切换到图形化界面 2 man命令:查看帮助信息 man 需要查看的命令,man命令提供了大量的帮助信息,一般可以分成4个部分 name:对命令的简单说明 synopsis:命令的使用格式说明 description:命令的详细说明信息 options:命令的各项说明 3 date:显示时间 语法：date [OPTION]... [+FORMAT]
• eclipse内存优化 AILIKES javaeclipsejvmjdk
  一 基本说明      在JVM中，总体上分2块内存区,默认空余堆内存小于 40%时，JVM就会增大堆直到-Xmx的最大限制；空余堆内存大于70%时，JVM会减少堆直到-Xms的最小限制。     1)堆内存(Heap memory):堆是运行时数据区域，所有类实例和数组的内存均从此处分配,是Java代码可及的内存，是留给开发人
• 关键字的使用探讨 百合不是茶 关键字
  //关键字的使用探讨/*访问关键词private 只能在本类中访问public 只能在本工程中访问protected 只能在包中和子类中访问默认的 只能在包中访问*//*final   类 方法 变量 final 类 不能被继承 final 方法 不能被子类覆盖，但可以继承 final 变量 只能有一次赋值，赋值后不能改变 final 不能用来修饰构造方法*///this()
• JS中定义对象的几种方式 bijian1013 js
      1. 基于已有对象扩充其对象和方法(只适合于临时的生成一个对象)： <html> <head> <title>基于已有对象扩充其对象和方法(只适合于临时的生成一个对象)</title> </head> <script> var obj = new Object();
• 表驱动法实例 bijian1013 java表驱动法TDD
  获得月的天数是典型的直接访问驱动表方式的实例，下面我们来展示一下： MonthDaysTest.java package com.study.test; import org.junit.Assert; import org.junit.Test; import com.study.MonthDays; public class MonthDaysTest { @T
• LInux启停重启常用服务器的脚本 bit1129 linux
  启动，停止和重启常用服务器的Bash脚本，对于每个服务器，需要根据实际的安装路径做相应的修改   #! /bin/bash Servers=(Apache2, Nginx, Resin, Tomcat, Couchbase, SVN, ActiveMQ, Mongo); Ops=(Start, Stop, Restart); currentDir=$(pwd); echo
• 【HBase六】REST操作HBase bit1129 hbase
  HBase提供了REST风格的服务方便查看HBase集群的信息，以及执行增删改查操作   1. 启动和停止HBase REST 服务 1.1 启动REST服务 前台启动（默认端口号8080） [hadoop@hadoop bin]$ ./hbase rest start   后台启动 hbase-daemon.sh start rest   启动时指定
• 大话zabbix 3.0设计假设 ronin47
  What’s new in Zabbix 2.0? 去年开始使用Zabbix的时候，是1.8.X的版本，今年Zabbix已经跨入了2.0的时代。看了2.0的release notes，和performance相关的有下面几个：          :: Performance improvements::Trigger related da
• http错误码大全 byalias http协议javaweb
  响应码由三位十进制数字组成，它们出现在由HTTP服务器发送的响应的第一行。 响应码分五种类型，由它们的第一位数字表示： 1）1xx：信息，请求收到，继续处理 2）2xx：成功，行为被成功地接受、理解和采纳 3）3xx：重定向，为了完成请求，必须进一步执行的动作 4）4xx：客户端错误，请求包含语法错误或者请求无法实现 5）5xx：服务器错误，服务器不能实现一种明显无效的请求
• J2EE设计模式-Intercepting Filter bylijinnan java设计模式数据结构
  Intercepting Filter类似于职责链模式 有两种实现 其中一种是Filter之间没有联系，全部Filter都存放在FilterChain中，由FilterChain来有序或无序地把把所有Filter调用一遍。没有用到链表这种数据结构。示例如下： package com.ljn.filter.custom; import java.util.ArrayList;
• 修改jboss端口 chicony jboss
  修改jboss端口   %JBOSS_HOME%\server\{服务实例名}\conf\bindingservice.beans\META-INF\bindings-jboss-beans.xml   中找到 <!-- The ports-default bindings are obtained by taking the base bindin
• c++ 用类模版实现数组类 CrazyMizzz C++
  最近c++学到数组类，写了代码将他实现，基本具有vector类的功能 #include<iostream> #include<string> #include<cassert> using namespace std; template<class T> class Array { public: //构造函数
• hadoop dfs.datanode.du.reserved 预留空间配置方法 daizj hadoop预留空间
  对于datanode配置预留空间的方法 为：在hdfs-site.xml添加如下配置  <property>     <name>dfs.datanode.du.reserved</name>     <value>10737418240</value>    
• mysql远程访问的设置 dcj3sjt126com mysql防火墙
  第一步: 激活网络设置 你需要编辑mysql配置文件my.cnf. 通常状况，my.cnf放置于在以下目录： /etc/mysql/my.cnf (Debian linux) /etc/my.cnf （Red Hat Linux/Fedora Linux) /var/db/mysql/my.cnf (FreeBSD) 然后用vi编辑my.cnf，修改内容从以下行： [mysqld] 你所需要: 1
• ios 使用特定的popToViewController返回到相应的Controller dcj3sjt126com controller
  1、取navigationCtroller中的Controllers NSArray * ctrlArray = self.navigationController.viewControllers; 2、取出后，执行， [self.navigationController popToViewController:[ctrlArray objectAtIndex:0] animated:YES
• Linux正则表达式和通配符的区别 eksliang 正则表达式通配符和正则表达式的区别通配符
  转载请出自出处：http://eksliang.iteye.com/blog/1976579 首先得明白二者是截然不同的 通配符只能用在shell命令中,用来处理字符串的的匹配。 判断一个命令是否为bash shell(linux 默认的shell)的内置命令 type -t commad 返回结果含义 file  表示为外部命令 alias  表示该
• Ubuntu Mysql Install and CONF gengzg Install
  http://www.navicat.com.cn/download/navicat-for-mysql Step1: 下载Navicat ，网址：http://www.navicat.com/en/download/download.html Step2：进入下载目录，解压压缩包：tar -zxvf navicat11_mysql_en.tar.gz
• 批处理，删除文件bat huqiji windowsdos
  @echo off ::演示：删除指定路径下指定天数之前（以文件名中包含的日期字符串为准）的文件。 ::如果演示结果无误，把del前面的echo去掉，即可实现真正删除。 ::本例假设文件名中包含的日期字符串（比如：bak-2009-12-25.log） rem 指定待删除文件的存放路径 set SrcDir=C:/Test/BatHome rem 指定天数 set DaysAgo=1
• 跨浏览器兼容的HTML5视频音频播放器 天梯梦 html5
  HTML5的video和audio标签是用来在网页中加入视频和音频的标签，在支持html5的浏览器中不需要预先加载Adobe Flash浏览器插件就能轻松快速的播放视频和音频文件。而html5media.js可以在不支持html5的浏览器上使video和audio标签生效。   How to enable <video> and <audio> tags in
• Bundle自定义数据传递 hm4123660 androidSerializable自定义数据传递BundleParcelable
        我们都知道Bundle可能过put****()方法添加各种基本类型的数据，Intent也可以通过putExtras(Bundle)将数据添加进去，然后通过startActivity()跳到下一下Activity的时候就把数据也传到下一个Activity了。如传递一个字符串到下一个Activity   把数据放到Intent
• C＃：异步编程和线程的使用（.NET 4.5 ） powertoolsteam .net线程C#异步编程
  异步编程和线程处理是并发或并行编程非常重要的功能特征。为了实现异步编程，可使用线程也可以不用。将异步与线程同时讲，将有助于我们更好的理解它们的特征。 本文中涉及关键知识点 1. 异步编程 2. 线程的使用 3. 基于任务的异步模式 4. 并行编程 5. 总结 异步编程 什么是异步操作？异步操作是指某些操作能够独立运行，不依赖主流程或主其他处理流程。通常情况下，C＃程序
• spark 查看 job history 日志 Stark_Summer 日志sparkhistoryjob
  SPARK_HOME/conf 下: spark-defaults.conf 增加如下内容 spark.eventLog.enabled true spark.eventLog.dir hdfs://master:8020/var/log/spark spark.eventLog.compress true spark-env.sh 增加如下内容 export SP
• SSH框架搭建 wangxiukai2015eye springHibernatestruts
  MyEclipse搭建SSH框架 Struts Spring Hibernate 1、new一个web project。 2、右键项目，为项目添加Struts支持。    选择Struts2 Core Libraries -<MyEclipes-Library>      点击Finish。src目录下多了struts

按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他

首页 - 关于我们 - 站内搜索 - Sitemap - 侵权投诉

版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.