[译] 前端攻略-从路人甲到英雄无敌二：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,测试)

移动端城市区县二级联动选择功能实现包 good2know
本文还有配套的精品资源，点击获取简介：本项目是一套为移动端设计的jQuery实现方案，用于简化用户在选择城市和区县时的流程。它包括所有必需文件：HTML、JavaScript、CSS及图片资源。通过动态更新下拉菜单选项，实现城市到区县的联动效果，支持数据异步加载。开发者可以轻松集成此功能到移动网站或应用，并可基于需求进行扩展和优化。1.jQuery移动端解决方案概述jQuery技术简介jQuery

day15｜前端框架学习和算法 universe_01 前端算法笔记
T22括号生成先把所有情况都画出来，然后（在满足什么情况下）把不符合条件的删除。T78子集要画树状图，把思路清晰。可以用暴力法、回溯法和DFS做这个题DFS深度搜索：每个边都走完，再回溯应用：二叉树搜索，图搜索回溯算法=DFS+剪枝T200岛屿数量（非常经典BFS宽度把树状转化成队列形式，lambda匿名函数“一次性的小函数，没有名字”setup语法糖：让代码更简洁好写的语法ref创建：基本类型的

现在发挥你的优势爱生活的佑嘉
来和我做咨询的一些朋友，涉及到定位的，都会说，我不知道我的优势是什么，你能不能帮我看看？还有一些朋友，喜欢做各种测试来了解自己，测试过后，然并卵。今天，我想来聊聊优势，如何能了解自己的优势是什么。首先，我们要知道，如果要成为“不一般”的人，我们所做的事情，就要基于自身的优势。我做管理者十多年，看到每个员工都有不同的特长，有的擅长数字，有的擅长人际，有的擅长写作。这些知道自己优势并且在这方面刻意练习

最新阿里四面面试真题46道：面试技巧+核心问题+面试心得风平浪静如码
前言做技术的有一种资历，叫做通过了阿里的面试。这些阿里Java相关问题，都是之前通过不断优秀人才的铺垫总结的，先自己弄懂了再去阿里面试，不然就是去丢脸，被虐。希望对大家帮助，祝面试成功，有个更好的职业规划。一，阿里常见技术面1、微信红包怎么实现。2、海量数据分析。3、测试职位问的线程安全和非线程安全。4、HTTP2.0、thrift。5、面试电话沟通可能先让自我介绍。6、分布式事务一致性。7、ni

漫步，跳出藩篱张巧金沙
最近的教学，倍感不爽。一为这国庆之假，把这课上得支离破碎的。放假前，上了四天课，但我却只上了三天，9月30日，我工作室在搞活动，全天的活动，课当然未能上。10月8日学生回校，上了两天课，学生又放回家了。就觉得学生刚有点状态，又回去逍遥去了。感觉吧，教学内容也不敢大胆甩开膀子去教学，所以呀，这教学内容还真上不走，而且学生学下来效果特差。这不，国庆放假前的一个周，测试了两次，均为第一单元，是自考试以来

AI模型训练中过拟合和欠拟合的区别是什么？ workflower 人工智能算法人工智能数据分析
在AI模型训练中，过拟合和欠拟合是两种常见的模型性能问题，核心区别在于模型对数据的学习程度和泛化能力：欠拟合（Underfitting）-定义：模型未能充分学习到数据中的规律，对训练数据的拟合程度较差，在训练集和测试集上的表现都不好（如准确率低、损失值高）。-原因：-模型结构过于简单（如用线性模型解决非线性问题）；-训练数据量不足或特征信息不充分；-训练时间太短，模型尚未学到有效模式。-表现：训练

Pktgen-DPDK：开源网络测试工具的深度解析与应用艾古力斯
本文还有配套的精品资源，点击获取简介：Pktgen-DPDK是基于DPDK的高性能流量生成工具，适用于网络性能测试、硬件验证及协议栈开发。它支持多种网络协议，能够模拟高吞吐量的数据包发送。本项目通过利用DPDK的高速数据包处理能力，允许用户自定义数据包内容，并实现高效的数据包管理与传输。文章将指导如何安装DPDK、编译Pktgen、配置工具以及使用方法，最终帮助开发者和网络管理员深入理解并优化网络

语文教学反思 ——一单元测试一抹_绿茶香
我喜欢上语文课，现在最开心的时刻也就是课上那45分钟了。它可以让我和孩子们骑上骏马驰骋在知识的草原上，可以让我们乘着巨轮在书籍的海洋里任意航行……周三举行了一单元测试，今晚一单元的所有内容暂时告一段落。对于这单元我有如下思考：本单元的主题词是“读书”，几篇课文都是围绕着读书来编排的。里面有讲读书乐趣的，讲读书方法的，还有孩子们第一次接触的访谈录等。微笑班级从一年级下学期就开始阅读“闲书”，所以教学

selenium特殊场景处理 Monica_ll Selenium selenium chrome python
文章目录前言一、多窗口处理二、浏览器弹窗处理包含alert、confirm、prompt三、鼠标和键盘事件处理前言在使用selenium操作浏览器的过程中可能需要借助键盘和鼠标功能完成一些操作，或者操作弹窗处理，本文主要是整理自己工作过程中使用过的一些方法一、多窗口处理在实际测试过程中经常会有通过点击或者连接打开新的窗口，这种情况下就需要切换webDriver到对应浏览器对象才能操作新窗口的元素。

机器学习必备数学与编程指南：从入门到精通 a小胡哦机器学习基础机器学习人工智能
一、机器学习核心数学基础1.线性代数（神经网络的基础）必须掌握：矩阵运算（乘法、转置、逆）向量空间与线性变换特征值分解与奇异值分解(SVD)为什么重要：神经网络本质就是矩阵运算学习技巧：用NumPy实际操作矩阵运算2.概率与统计（模型评估的关键）核心概念：条件概率与贝叶斯定理概率分布（正态、泊松、伯努利）假设检验与p值应用场景：朴素贝叶斯、A/B测试3.微积分（优化算法的基础）重点掌握：导数与偏导

程序员必备：10 个提升代码质量的工具大力出奇迹985 宠物
在软件开发过程中，代码质量对项目的成功起着决定性作用。高质量的代码不仅易于维护和扩展，还能有效降低成本并提升可靠性。本文精心挑选了10个程序员必备工具，助力提升代码质量。这些工具涵盖代码格式化、静态分析、代码审查、测试、性能优化、安全扫描、版本控制、依赖管理、代码生成以及文档生成等多个关键领域。通过使用它们，开发者能够高效地发现并解决代码中的潜在问题，遵循最佳实践，提升代码的可读性、可维护性与安全

用代码生成艺术字：设计个性化海报的秘密
本文围绕“用代码生成艺术字：设计个性化海报的秘密”展开，先概述代码生成艺术字在海报设计中的独特价值，接着介绍常用的代码工具（如HTML、CSS、JavaScript等），详细阐述从构思到实现的完整流程，包括字体样式设计、动态效果添加等，还分享了提升艺术字质感的技巧及实际案例。最后总结代码生成艺术字的优势，为设计师提供打造个性化海报的实用指南，助力提升海报设计的独特性与吸引力，符合搜索引擎SEO标准

java实习生40多天有感别拿爱情当饭吃
从5月15日开始，我开始第一步步入社会，我今年大三，在一家上市互联网公司做一名实习生，主要做java后端开发。开始的时候，觉得公司的环境挺不错的，不过因为公司在CBD，所以隔壁的午饭和晚饭都要20+RMB，而且还吃不饱，这让我感觉挺郁闷的。一到下午，我就会犯困（因为饿）。因此，我又不得不买一些干粮在公司屯着。关于技术，有一个比较大的项目在需求调研当中，我们做实习生，就是辅助项目经理，测试功能，并且

vue element 封装表单影子信息 vue vue.js javascript 前端
背景：在前端系统开发中，系统页面涉及到的表单组件比较多，所以进行了简单的封装。封装的包括一些Form表单组件，如下：input输入框、select下拉框、等实现效果：理论知识：表单组件官方链接：点击跳转封装组件：封装组件的思路：不封装element组件，每一个input组件绑定一个form对象，例如官网。简单封装element组件，利用for循环生成form表单的每一项el-form-item。进

前端面试每日 3+1 —— 第39天浪子神剑
今天的面试题(2019.05.25)——第39天[html]title与h1、b与strong、i与em的区别分别是什么？[css]写出你知道的CSS水平和垂直居中的方法[js]说说你对模块化的理解[软技能]公钥加密和私钥加密是什么？《论语》，曾子曰：“吾日三省吾身”（我每天多次反省自己）。前端面试每日3+1题，以面试题来驱动学习，每天进步一点！让努力成为一种习惯，让奋斗成为一种享受！欢迎在Iss

《天才在左，疯子在右——心理疾病漫谈》|你焦虑了嘛？霞姝儿
《天才在左，疯子在右——心理疾病漫谈》这本书的作者是宁安宁，2015年12月在哈尔冰出版社出版。ISBN：9787548423676.我花了5个小时40分钟看完的。这本书中很多关于行为和心理活动情况的分析与案例解析都很透彻。书中针对每个心理障碍都会有是非题供你来测试，有解析心理障碍出现的原因，有问题的症状表现形式的阐述，有类似问题的案例解析，还有解决方案的描写。看完之后，你可以对自己心理上及行为上

前端数据库：IndexedDB从基础到高级使用指南
文章目录前端数据库：IndexedDB从基础到高级使用指南引言一、IndexedDB概述1.1什么是IndexedDB1.2与其他存储方案的比较二、基础使用2.1打开/创建数据库2.2基本CRUD操作添加数据读取数据更新数据删除数据三、高级特性3.1复杂查询与游标3.2事务高级用法3.3性能优化技巧四、实战案例：构建离线优先的待办事项应用4.1数据库设计4.2同步策略实现五、常见问题与解决方案5.

【Java Web实战】从零到一打造企业级网上购书网站系统 | 完整开发实录（三）笙囧同学 java 前端状态模式
核心功能设计用户管理系统用户管理是整个系统的基础，我设计了完整的用户生命周期管理：用户注册流程验证失败验证通过验证失败验证通过用户名已存在用户名可用失败成功用户访问注册页面填写注册信息前端表单验证显示错误提示提交到后端后端数据验证返回错误信息用户名唯一性检查提示用户名重复密码加密处理保存用户信息保存成功?显示系统错误注册成功跳转登录页面登录认证机制深度解析我实现了一套企业级的多层次安全认证机制：认

从零到一：打造基于GigaChat AI的艺术创作平台 | 笙囧同学的全栈开发实战
作者简介：笙囧同学，中科院计算机大模型方向硕士，全栈开发爱好者联系方式：[email protected]各大平台账号：笙囧同学座右铭：偷懒是人生进步的阶梯前言在AI技术飞速发展的今天，如何将前沿的大模型技术与实际应用相结合，一直是我们开发者关注的焦点。今天，笙囧同学将带大家从零开始，构建一个基于GigaChatAI的艺术创作平台，实现React前端+Django后端的完整全栈解决方案。这不仅仅是

14.tornado操作之应用Websocket协议实现聊天室功能孤寒者 Tornado框架从入门到实战 websocket tornado 聊天室功能实现 python
目录：每篇前言：1.什么是WebSocket（1）定义（2）优点（3）和HTTP对比（4）适用场景2.WebSocket关键方法3.本tornado项目中使用WebSocket（1）准备一个聊天室的页面：第一步：编写视图：第二步：编写接口：（app.py中加入以下接口！）第三步：编写前端页面：测试接口——响应OK！（2）使用WebSocket：（3）聊天室的聊天功能的最终实现：第一步：战前准备第二

网络如何赚钱？用手机怎么赚钱？氧惠_飞智666999
网络赚钱不是你以为的那样，不是你想赚就能赚的，你需要一个很好的思路，让自己赚钱起来。今天我就给大家分享下这个方法，教咱们如何用手机操作互联网赚钱，这个非常简单。首先教你们怎样玩手机赚钱。第一步：打开淘宝或者拍拍、拼多多搜索赚钱项目。第二步：在网上搜一个项目或者产品，下载下来进行安装好之后去测试这个软件是否可以进行操作。第三步：进入测试后就点击第一个按钮进行提交就行了。第四步：提交后等待审核就行了。

【数据分析】抓包工具的定义常见类型分类使用场景及注意事项
抓包工具的定义常见类型分类使用场景及注意事项-CSDN直播抓包工具的定义常见类型分类使用场景及注意事项抓包工具的定义常见类型分类使用场景及注意事项抓包工具概述抓包工具顾名思义是一种用于捕获并分析网络数据包的软件或硬件工具它能够在数据传输过程中截取并记录网络流量让用户能够深入理解并排查网络问题这类工具的用途广泛从网络安全测试到应用程序调试都离不开抓包工具的帮助在众多的抓包工具中WiresharkFi

常见的接⼝测试⾯试题 lifewange 接口测试-功能+自动化单元测试
根据⽹络资料，总结了以下⼀些常见的接⼝测试⾯试题：1.为什么要做接⼝测试？在讨论为什么要做接⼝测试之前，我们先稍微了解下接⼝是什么？接⼝可以很不准确的理解成是与资源打交道，这个资源可能是本系统的，也可能是其他系统的。举个例⼦，假如我们在开发1个bug管理系统，该系统需要拿到公司的所有开发和测试⼈员的信息，这样开发和测试⼈员不⽤注册都可以登录进去了，这应该很好理解。那么这些⼈员的信息储存在哪⾥呢？⼀

零基础学习性能测试第八章：高并发-redis缓存架构介绍试着性能测试缓存学习 redis 性能测试零基础
目录一、Redis在高并发中的核心价值二、Redis核心架构模式▶1.缓存穿透防御架构▶2.热点数据多级缓存三、Redis集群高可用方案▶1.RedisCluster分片架构▶2.读写分离方案四、Redis性能压测实战▶1.基准测试工具▶2.关键性能指标五、典型瓶颈分析与优化案例1：缓存雪崩案例2：热Key阻塞六、电商秒杀实战架构七、必须掌握的进阶技巧八、学习路径与工具推荐以下是为零基础学习者设计

为什么学习Web前端一定要掌握JavaScript？ web前端学习指南
为什么学习Web前端一定要掌握JavaScript？在前端的世界里，没有什么是JavaScript实现不了的，关于JS有一句话：凡是可以用JavaScript来写的应用，最终都会用JavaScript，JavaScript可运行在所有主要平台的所有主流浏览器上，也可运行在每一个主流操作系统的服务器端上。现如今我们在为网站写任何一个主要功能的时候都需要有懂能够用JavaScript写前端的开发人员。

小架构step系列25：错误码秋千码途架构 java
1概述一个系统中，可能产生各种各样的错误，对这些错误进行编码。当错误发生时，通过这个错误码就有可能快速判断是什么错误，不一定需要查看代码就可以进行处理，提高问题处理效率。有了统一的错误码，还可以标准化错误信息，方便把错误信息纳入文档管理和对错误信息进行国际化等。没有错误码的管理，开发人员就会按自己的理解处理这些错误。有些直接把堆栈直接反馈到前端页面上，使用看不懂这些信息体验很差，也暴露了堆栈信息有

【测试用例】银行借款业务
一、功能测试：借款申请流程：验证用户能够按照正常流程完成借款申请，包括填写借款金额、选择借款期限、提交必要的申请材料等步骤。验证系统能够正确处理用户提交的借款申请，包括申请信息的完整性和准确性检查。借款额度与期限：验证系统能够根据用户的信用评级和借款政策，正确计算并显示用户的可借款额度和期限范围。测试用户选择不同的借款额度和期限时，系统能否正确计算相关费用和还款计划。利率和费用计算：验证系统能够正

【测试用例】银行授信业务小邓在Working 测试用例测试用例功能测试性能测试安全测试交互测试一致性测试
一、功能测试：授信申请流程：验证客户能正常提交授信申请，并检查信息完整性和准确性。测试申请被拒绝或需要额外信息时的系统反馈。反欺诈与风控系统集成：验证系统能调用反欺诈接口并正确处理返回结果。测试系统调用风控接口获取授信建议和额度管理决策。用户信息校验与九要素验证：验证系统对客户提供的九要素信息进行准确性和一致性校验。测试校验失败时的错误提示和处理逻辑。重复授信检查与处理：验证系统能识别并处理重复授

【测试用例】银行冲正业务
一、冲正申请阶段冲正原因测试点验证冲正原因的选择是否符合预设的业务规则。验证冲正原因的输入是否支持自由文本，并检查文本长度限制。验证系统是否能够正确保存冲正原因，并在需要时正确显示。冲正金额测试点验证冲正金额的输入格式是否正确（如是否只接受数字、是否有金额上限等）。验证冲正金额与原交易金额的匹配性（如是否一致、是否小于原交易金额等）。验证系统是否能够正确处理冲正金额为0或负数的异常情况。冲正账户信

【测试用例】银行还款业务
一、功能测试：正常还款流程：选择还款账户、输入还款金额、确认还款信息。验证还款账户余额是否足够。验证还款成功后，账户余额、应还金额和还款状态是否更新。逾期还款：验证逾期罚息计算是否正确。验证逾期后的还款流程是否与正常还款有所不同。验证逾期还款后，账户状态和还款记录是否更新。不同还款账户：使用多个不同的还款账户进行还款。验证还款账户变更时，系统能否正确处理。余额不足还款：尝试还款金额大于账户余额的情

312个免费高速HTTP代理IP（能隐藏自己真实IP地址） yangshangchuan 高速免费 superword HTTP代理
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编码百合不是茶 android pull解析 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独行者 PHP seo
新站开始被收录后，我们应该做什么？百度终于开始收录自己的网站了，作为站长，你是不是觉得那一刻很有成就感呢，同时，你是不是又很茫然，不知道下一步该做什么了？至少我当初就是这样，在这里和大家一份分享一下新站收录后，我们要做哪些工作。至于如何让百度快速收录自己的网站，可以参考我之前的帖子《新站让百

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 java eclipse jvm jdk
一基本说明      在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 windows dos
@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 android Serializable 自定义数据传递 Bundle Parcelable
      我们都知道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 日志 spark history job
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 spring Hibernate struts
MyEclipse搭建SSH框架 Struts Spring Hibernate 1、new一个web project。 2、右键项目，为项目添加Struts支持。    选择Struts2 Core Libraries -<MyEclipes-Library>      点击Finish。src目录下多了struts

按字母分类： A B C D E F G H I J K L M N O P Q R S T U V W X Y Z 其他

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

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