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

你可能感兴趣的:(redux,react.js,frontend,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：做与用户的交互行为文章目录前端学习路线
• pyecharts——绘制柱形图折线图 2224070247 信息可视化pythonjava数据可视化
  一、pyecharts概述自2013年6月百度EFE(ExcellentFrontEnd）数据可视化团队研发的ECharts1.0发布到GitHub网站以来，ECharts一直备受业界权威的关注并获得广泛好评，成为目前成熟且流行的数据可视化图表工具，被应用到诸多数据可视化的开发领域。Python作为数据分析领域最受欢迎的语言，也加入ECharts的使用行列，并研发出方便Python开发者使用的数据
• 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是
• html 周华华 html
  js 1，数组的排列 var arr=[1,4,234,43,52,]; for(var x=0;x<arr.length;x++){    for(var y=x-1;y<arr.length;y++){      if(arr[x]<arr[y]){     &
• 【Struts2 四】Struts2拦截器 bit1129 struts2拦截器
  Struts2框架是基于拦截器实现的，可以对某个Action进行拦截，然后某些逻辑处理，拦截器相当于AOP里面的环绕通知，即在Action方法的执行之前和之后根据需要添加相应的逻辑。事实上，即使struts.xml没有任何关于拦截器的配置，Struts2也会为我们添加一组默认的拦截器，最常见的是，请求参数自动绑定到Action对应的字段上。   Struts2中自定义拦截器的步骤是：
• make:cc 命令未找到解决方法 daizj linux命令未知make cc
  安装rz sz程序时，报下面错误：   [root@slave2 src]# make posix cc   -O -DPOSIX -DMD=2 rz.c -o rz make: cc：命令未找到 make: *** [posix] 错误 127   系统：centos 6.6 环境：虚拟机   错误原因：系统未安装gcc，这个是由于在安
• Oracle之Job应用 周凡杨 oracle job
  最近写服务，服务上线后，需要写一个定时执行的SQL脚本，清理并更新数据库表里的数据，应用到了Oracle 的 Job的相关知识。在此总结一下。   一：查看相关job信息    1、相关视图  dba_jobs  all_jobs  user_jobs  dba_jobs_running 包含正在运行
• 多线程机制 朱辉辉33 多线程
  转至http://blog.csdn.net/lj70024/archive/2010/04/06/5455790.aspx 程序、进程和线程： 程序是一段静态的代码，它是应用程序执行的蓝本。进程是程序的一次动态执行过程，它对应了从代码加载、执行至执行完毕的一个完整过程，这个过程也是进程本身从产生、发展至消亡的过程。线程是比进程更小的单位，一个进程执行过程中可以产生多个线程，每个线程有自身的
• web报表工具FineReport使用中遇到的常见报错及解决办法（一） 老A不折腾 web报表finereportjava报表报表工具
  FineReport使用中遇到的常见报错及解决办法（一） 这里写点抛砖引玉，希望大家能把自己整理的问题及解决方法晾出来，Mark一下，利人利己。   出现问题先搜一下文档上有没有，再看看度娘有没有，再看看论坛有没有。有报错要看日志。下面简单罗列下常见的问题，大多文档上都有提到的。   1、address pool is full： 含义：地址池满，连接数超过并发数上
• mysql rpm安装后没有my.cnf 林鹤霄 没有my.cnf
  Linux下用rpm包安装的MySQL是不会安装/etc/my.cnf文件的， 至于为什么没有这个文件而MySQL却也能正常启动和作用，在这儿有两个说法， 第一种说法，my.cnf只是MySQL启动时的一个参数文件，可以没有它，这时MySQL会用内置的默认参数启动， 第二种说法，MySQL在启动时自动使用/usr/share/mysql目录下的my-medium.cnf文件，这种说法仅限于r
• Kindle Fire HDX root并安装谷歌服务框架之后仍无法登陆谷歌账号的问题 aigo root
  原文：http://kindlefireforkid.com/how-to-setup-a-google-account-on-amazon-fire-tablet/   Step 4: Run ADB command from your PC   On the PC, you need install Amazon Fire ADB driver and instal
• javascript 中var提升的典型实例 alxw4616 JavaScript
  // 刚刚在书上看到的一个小问题,很有意思.大家一起思考下吧 myname = 'global'; var fn = function () { console.log(myname); // undefined var myname = 'local'; console.log(myname); // local }; fn() // 上述代码实际上等同于以下代码 m
• 定时器和获取时间的使用 百合不是茶 时间的转换定时器
  定时器:定时创建任务在游戏设计的时候用的比较多   Timer();定时器 TImerTask();Timer的子类  由 Timer 安排为一次执行或重复执行的任务。       定时器类Timer在java.util包中。使用时，先实例化，然后使用实例的schedule(TimerTask task, long delay)方法，设定
• JDK1.5 Queue bijian1013 javathreadjava多线程Queue
  JDK1.5 Queue LinkedList： LinkedList不是同步的。如果多个线程同时访问列表，而其中至少一个线程从结构上修改了该列表，则它必须 保持外部同步。（结构修改指添加或删除一个或多个元素的任何操作；仅设置元素的值不是结构修改。）这一般通过对自然封装该列表的对象进行同步操作来完成。如果不存在这样的对象，则应该使用 Collections.synchronizedList 方
• http认证原理和https bijian1013 httphttps
  一.基础介绍         在URL前加https://前缀表明是用SSL加密的。 你的电脑与服务器之间收发的信息传输将更加安全。         Web服务器启用SSL需要获得一个服务器证书并将该证书与要使用SSL的服务器绑定。 http和https使用的是完全不同的连接方式，用的端口也不一样,前者是80，后
• 【Java范型五】范型继承 bit1129 java
  定义如下一个抽象的范型类，其中定义了两个范型参数，T1，T2   package com.tom.lang.generics; public abstract class SuperGenerics<T1, T2> { private T1 t1; private T2 t2; public abstract void doIt(T
• 【Nginx六】nginx.conf常用指令(Directive) bit1129 Directive
  1. worker_processes    8; 表示Nginx将启动8个工作者进程，通过ps -ef|grep nginx,会发现有8个Nginx Worker Process在运行   nobody 53879 118449 0 Apr22 ? 00:26:15 nginx: worker process
• lua 遍历Header头部 ronin47 lua header 遍历　
  local headers = ngx.req.get_headers()   ngx.say("headers begin", "<br/>")   ngx.say("Host : ", he
• java-32.通过交换a,b中的元素，使[序列a元素的和]与[序列b元素的和]之间的差最小(两数组的差最小)。 bylijinnan java
  import java.util.Arrays; public class MinSumASumB { /** * Q32.有两个序列a,b，大小都为n,序列元素的值任意整数，无序. * * 要求：通过交换a,b中的元素，使[序列a元素的和]与[序列b元素的和]之间的差最小。 * 例如: * int[] a = {100,99,98,1,2,3
• redis 开窍的石头 redis
  在redis的redis.conf配置文件中找到# requirepass foobared 把它替换成requirepass 12356789 后边的12356789就是你的密码 打开redis客户端输入config get requirepass 返回 redis 127.0.0.1:6379> config get requirepass 1) "require
• [JAVA图像与图形]现有的GPU架构支持JAVA语言吗？ comsci java语言
        无论是opengl还是cuda，都是建立在C语言体系架构基础上的，在未来，图像图形处理业务快速发展，相关领域市场不断扩大的情况下，我们JAVA语言系统怎么从这么庞大，且还在不断扩大的市场上分到一块蛋糕，是值得每个JAVAER认真思考和行动的事情       
• 安装ubuntu14.04登录后花屏了怎么办 cuiyadll ubuntu
  这个情况，一般属于显卡驱动问题。 可以先尝试安装显卡的官方闭源驱动。 按键盘三个键：CTRL + ALT  +  F1 进入终端，输入用户名和密码登录终端： 安装amd的显卡驱动 sudo  apt-get  install  fglrx 安装nvidia显卡驱动 sudo  ap
• SSL 与 数字证书 的基本概念和工作原理 darrenzhu 加密ssl证书密钥签名
  SSL 与 数字证书 的基本概念和工作原理 http://www.linuxde.net/2012/03/8301.html SSL握手协议的目的是或最终结果是让客户端和服务器拥有一个共同的密钥，握手协议本身是基于非对称加密机制的，之后就使用共同的密钥基于对称加密机制进行信息交换。 http://www.ibm.com/developerworks/cn/webspher
• Ubuntu设置ip的步骤 dcj3sjt126com ubuntu
  在单位的一台机器完全装了Ubuntu Server，但回家只能在XP上VM一个，装的时候网卡是DHCP的，用ifconfig查了一下ip是192.168.92.128,可以ping通。 转载不是错： Ubuntu命令行修改网络配置方法 /etc/network/interfaces打开后里面可设置DHCP或手动设置静态ip。前面auto eth0，让网卡开机自动挂载. 1. 以D
• php包管理工具推荐 dcj3sjt126com PHPComposer
  http://www.phpcomposer.com/   Composer是 PHP 用来管理依赖（dependency）关系的工具。你可以在自己的项目中声明所依赖的外部工具库（libraries），Composer 会帮你安装这些依赖的库文件。 中文文档  入门指南  下载  安装包列表 Composer 中国镜像
• Gson使用四（TypeAdapter） eksliang jsongsonGson自定义转换器gsonTypeAdapter
  转载请出自出处：http://eksliang.iteye.com/blog/2175595 一.概述        Gson的TypeAapter可以理解成自定义序列化和返序列化 二、应用场景举例        例如我们通常去注册时（那些外国网站），会让我们输入firstName，lastName,但是转到我们都
• JQM控件之Navbar和Tabs gundumw100 htmlxmlcss
  在JQM中使用导航栏Navbar是简单的。 只需要将data-role="navbar"赋给div即可： <div data-role="navbar"> <ul> <li><a href="#" class="ui-btn-active&qu
• 利用归并排序算法对大文件进行排序 iwindyforest java归并排序大文件分治法Merge sort
    归并排序算法介绍，请参照Wikipeida zh.wikipedia.org/wiki/%E5%BD%92%E5%B9%B6%E6%8E%92%E5%BA%8F 基本思想： 大文件分割成行数相等的两个子文件，递归（归并排序）两个子文件，直到递归到分割成的子文件低于限制行数 低于限制行数的子文件直接排序 两个排序好的子文件归并到父文件 直到最后所有排序好的父文件归并到输入
• iOS UIWebView URL拦截 啸笑天 UIWebView
  本文译者：candeladiao，原文：URL filtering for UIWebView on the iPhone说明：译者在做app开发时，因为页面的javascript文件比较大导致加载速度很慢，所以想把javascript文件打包在app里，当UIWebView需要加载该脚本时就从app本地读取，但UIWebView并不支持加载本地资源。最后从下文中找到了解决方法，第一次翻译，难免有
• 索引的碎片整理SQL语句 macroli sql
  SET NOCOUNT ON DECLARE @tablename VARCHAR (128) DECLARE @execstr VARCHAR (255) DECLARE @objectid INT DECLARE @indexid INT DECLARE @frag DECIMAL DECLARE @maxfrag DECIMAL --设置最大允许的碎片数量,超过则对索引进行碎片
• Angularjs同步操作http请求with $promise qiaolevip 每天进步一点点学习永无止境AngularJS纵观千象
  // Define a factory app.factory('profilePromise', ['$q', 'AccountService', function($q, AccountService) { var deferred = $q.defer(); AccountService.getProfile().then(function(res) {
• hibernate联合查询问题 sxj19881213 sqlHibernateHQL联合查询
  最近在用hibernate做项目，遇到了联合查询的问题，以及联合查询中的N+1问题。 针对无外键关联的联合查询，我做了HQL和SQL的实验，希望能帮助到大家。（我使用的版本是hibernate3.3.2）   1 几个常识：  （1）hql中的几种join查询，只有在外键关联、并且作了相应配置时才能使用。  （2）hql的默认查询策略，在进行联合查询时，会产
• struts2.xml wuai struts
  <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.3//EN" "http://struts.apache

按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他

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

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