Web前端新手应该知道的JavaScript开发技巧有哪些?

JavaScript017

Web前端新手应该知道的JavaScript开发技巧有哪些?,第1张

今天小编要跟大家分享的文章是关于Web前端新手应该知道的JavaScript开发技巧有哪些?熟悉Web前端的小伙伴都知道,Javascript

的很多扩展的特性是的它变得更加的犀利,同时也给予程序员机会创建更漂亮并且更让用户喜欢的网站。

尽管很多的开发人员都乐于颂扬javascript,但是仍旧有人看到它的阴暗面。

使用很多javascript代码的Web页面会加载很慢,过多的使用javascript使得网页丑陋和拖沓。很快如何有效地使用

javascript成为一个非常火热的话题。

今天小编就为Web前端新手准备了这篇JavaScript开发技巧,希望能够对你有所帮助,下面我们一起来看一看吧!

1、尽可能的保持代码简洁

可能大家都听到过了N遍这个代码简洁问题了。作为一个开发人员你可能在你的代码开发过程中使用了很多次,但千万不要在js开发中忘记这点。

§尽量在开发模式中添加注释和空格,这样保持代码的可读性

§在发布到产品环境前请将空格和注释都删除,并且尽量缩写变量和方法名

§使用第三方工具帮助你实现压缩javascript。

2、思考后再修改prototypes

添加新的属性到对象prototype中是导致脚本出错的常见原因。

yourObject.prototype.anotherFunction='Hello'

yourObject.prototype.anotherMethod=function(){...}

在上面代码中,所有的变量都会被影响,因为他们都继承于yourObject。这样的使用会导致意想不到的行为。所以建议在使用完后删除类似的修改。

yourObject.prototype.anotherFunction='Hello'

yourObject.prototype.anotherMethod=function(){}

test.anotherMethod()

deleteyourObject.prototype.anotherFunction='Hello'

deleteyourObject.prototype.anotherMethod=function(){}

3、DebugJavascript代码

即使最好的开发人员都会犯错。为了最大化的减少类似错误,请在你的debugger中运行你的代码,确认你没有遇到任何细微的错误。

4、避免Eval

你的JS在没有eval方法的时候也可以很好的工作。eval允许访问javascript编译器。如果一个字符串作为参数传递到

eval,那么它的结果可以被执行。

这会很大的降低代码的性能。尽量避免在产品环境中使用eval。

5、最小化DOM访问

DOM是最复杂的API,会使得代码执行过程变慢。有时候Web页面可能没有加载或者加载不完整。最好避免DOM。

6、在使用javascript类库之前先学习javascript

互联网充斥着很多的javascript类库,很多程序员都往往使用js类库而不理解负面影响。强烈建议你在使用第三方类库之前学习基本的JS

代码,否则,你就准备着倒霉吧。

7、不要用“SetTimeOut”和“Setinterval”方法来作为“Eval”的备选

setTimeOut("document.getID('value')",3000)

在以上代码中document.getID(‘value’)在setTimeOut方法中被作为字符串来处理。这类似于eval

方法,在每个代码执行中来执行一个字符串,因此会降低性能,因此,建议在这些方法中传递一个方法。

setTimeOut(yourFunction,3000)

8、[]比newArray()更好

一个常犯的错误在于使用当需要数组的时候使用一个对象或者该使用对象的时候使用一个数组。但是使用原则很简单:

“当属性名称是小的连续整数,你应该使用数组。否则,使用一个对象”_DouglasCrockford,JavaScript:Good

Parts的作者.

建议:

vara=['1A','2B']

避免:

vara=newArray()

a[0]="1A"

a[1]="2B"

9、尽量不要多次使用var

在初始每一个变量的时候,程序员都习惯使用var关键字。相反,建议你使用逗号来避免多余的关键字,并且减少代码体积。如下:

varvariableOne='string1',

variableTwo='string2',

variableThree='string3'

10、不要忽略分号“”

这往往是大家花费数个小时进行debug的原因之一。

我很确信你肯定也在其它的文章中阅读过以上相关的内容,但是大家可能往往都忽略了很多基本的规则。你是不是也曾经忽略过分号。是不是也遇到过eval

关键字问题导致性能问题?

以上就是小编今天为大家分享的关于Web前端新手应该知道的JavaScript

开发技巧有哪些?的文章,希望本篇文章能够对刚刚接触Web前端行业的新手们有所帮助。想要了解更多Web前端知识记得关注北大青鸟Web前端培训官网!

*声明:内容与图片均来源于网络(部分内容有修改),版权归原作者所有,如来源信息有误或侵犯权益,请联系我们删除或授权事宜。

JS,全称为JavaScript,是一种客户端脚本语言,是前端开发学习内容当中的一个重要部分。

JavaScript可运行在所有主要平台的所有主流浏览器上,也可运行在每一个主流操作系统的服务器端上。现如今我们在为网站写任何一个主要功能的时候都需要有懂能够用JavaScript写前端的开发人员。我有web前端开发课程的全套视频资料,可以发给你自学。

要学的内容主要有:

①计算机基础以及PS基础

②前端开发基础(HTML5开发、JavaScript基础到高级、jQuery网页特效、Bootstrap框架)

③移动开发

④前端高级开发(ECMAScript6、Veu.js框架开发、webpack、前端页面优化、React框架开发、AngularJS 2.0框架开发等)

⑤小程序开发

⑥全栈开发(MySQL数据库、Python编程语言、Django框架等)

⑦就业拓展(网站SEO与前端安全技术)

互联网行业目前还是最热门的行业之一,学习IT技能之后足够优秀是有机会进入腾讯、阿里、网易等互联网大厂高薪就业的,发展前景非常好,普通人也可以学习。

想要系统学习,你可以考察对比一下开设有相关专业的热门学校,好的学校拥有根据当下企业需求自主研发课程的能力,能够在校期间取得大专或本科学历,中博软件学院、南京课工场、南京北大青鸟等开设相关专业的学校都是不错的,建议实地考察对比一下。

祝你学有所成,望采纳。

由于其事件驱动和异步特性,Node.js 已经飞速发展。但是,在现代网络中,仅仅快速是不够的。如果您计划使用 Node.js 开发您的下一个 Web 应用程序,您必须采取一切可能的步骤来确保您的应用程序比平时更快。本文介绍了 10 个技巧,这些技巧可以极大地加快基于 Node 的 Web 应用程序的速度。所以,让我们一一看看。

在构建 Web 应用程序时,有时您需要进行多个内部 API 调用来获取各种数据。例如,考虑一个用户仪表板。在渲染仪表板时,您可以执行以下假设调用:

为了检索这些详细信息,您可以为每个函数创建一个单独的中间件并附加到仪表板路由。但是这种方法的问题是一个函数必须等待前一个函数完成。另一种选择是并行执行这些调用。

众所周知,由于 Node.js 的异步特性,它在并行运行多个函数方面非常高效。我们应该利用这一点。由于我上面提到的功能不相互依赖,我们可以并行运行它们。这将减少中间件的数量并大大提高速度。

为了使事情并行化,我们可以使用 async.js,这是一个有助于驯服异步 JavaScript 的 Node 模块。这是一个片段,展示了如何使用 async.js 并行运行不同的函数:

如果您想了解有关 async.js 的更多信息,请务必查看该项目的GitHub页面。

按照设计,Node.js 是单线程的。由于这个事实,同步代码可能会锁定整个应用程序。例如,大多数文件系统 API 都有其同步对应物。以下代码段显示了如何同步和异步完成文件读取操作:

但是如果您执行长时间运行和阻塞操作,您的主线程将被阻塞,直到操作完成。这会大大降低您的应用程序的性能。因此,请确保您始终在代码中使用异步 API,至少在性能关键部分。在选择第三方模块时也要小心。即使您采取一切预防措施来避免同步代码,外部库也可能会进行同步调用,从而影响您的应用程序的性能。

如果您正在获取一些不经常更改的数据,您可以将其缓存以提高性能。例如,使用以下代码片段获取最新帖子以显示在视图上:

如果你发博文不是太频繁,可以缓存posts数组,间隔后清空缓存。例如,我们可以使用redis模块来实现这一点。为此,您需要在服务器上安装 Redis。然后您可以使用调用的客户端node_redis来存储键/值对。以下片段显示了我们如何缓存帖子:

因此,首先我们检查帖子是否存在于 Redis 缓存中。如果是这样,我们从缓存中传递posts数组。否则,我们从数据库中检索内容,然后将其缓存。此外,在一段时间后,我们可以清除 Redis 缓存,以便获取新内容。

开启 gzip 压缩会极大地影响 webapp 的性能。当与 gzip 兼容的浏览器请求某些资源时,服务器可以在将响应发送到浏览器之前对其进行压缩。如果您不使用 gzip 压缩静态资源,浏览器可能需要更长时间才能获取它。

在 Express 应用程序中,您可以使用内置的express.static()中间件来提供静态内容。此外,您可以使用compression中间件来压缩和提供静态内容。这是一个显示如何执行此操作的片段:

随着 AngularJS、Ember、Meteor 等许多强大的客户端 MVC/MVVM 框架的出现,创建单页应用程序变得非常容易。基本上,您只需公开向客户端发送 JSON 响应的 API,而不是在服务器端呈现。在客户端,您可以使用框架来使用 JSON 并在 UI 上显示。从服务器发送 JSON 可以节省带宽,从而提高速度,因为您不会在每个请求中发送布局标记。相反,您只需发送纯 JSON,然后在客户端呈现。

看看我的这个教程,它描述了如何使用 Express 4 公开 RESTful API。我还写了另一个教程,展示了如何使用 AngularJS 与这些 API 交互。

在典型的 Express Web 应用程序中,会话数据默认存储在内存中。当您在会话中存储太多数据时,会增加服务器的大量开销。因此,您可以切换到其他类型的存储来保留会话数据,或者尝试最小化会话中存储的数据量。

例如,当用户登录到您的应用程序时,您可以只将他们存储id在会话中,而不是存储整个对象。随后,对于每个请求,您都可以从id. 您可能还想使用 MongoDB 或 Redis 来存储会话数据。

假设您有一个博客应用程序,它在主页上显示最新帖子。你可能会写这样的东西来使用 Mongoose 获取数据:

但问题是find()Mongoose 中的函数会获取对象的所有字段,并且对象中可能有几个字段在Post主页上不需要。例如,comments是一个这样的字段,它包含特定帖子的一组评论。由于我们没有显示评论,我们可能会在获取时将其排除。这肯定会提高速度。我们可以这样优化上面的查询:

并非所有浏览器都支持对集合进行不同的操作,例如map、reduce和。forEach为了克服浏览器兼容性问题,我们一直在前端使用一些客户端库。但是使用 Node.js,您可以确切地知道 Google 的 V8 JavaScript 引擎支持哪些操作。因此,您可以直接使用这些内置函数在服务器端操作集合。

Nginx是一个小巧轻便的 Web 服务器,可用于减少 Node.js 服务器上的负载。您可以配置 nginx 以提供静态内容,而不是从 Node 提供静态文件。您还可以设置 nginx 以使用 gzip 压缩响应,以便整体响应大小较小。因此,如果您正在运行生产应用程序,您可能希望使用 nginx 来提高速度。

最后,通过将多个 JS 文件压缩并合并为一个,可以极大地提高您的 Web 应用程序速度。当浏览器遇到一个