用js开发web应用（js网页开发）

本文目录一览：

1、为什么 Web 前端开发不抛弃 HTML 和 CSS，用纯 JavaScript 开发
2、让你的 Node.js Web 应用程序更快的 10 个技巧
3、直接用js jsp进行web开发是怎么实现的
4、如何利用React.js开发出强大Web应用
5、如何利用AngularJS打造一款简单Web应用
6、用nodejs开发web应用，用哪个框架好？express？还是其他什么

为什么 Web 前端开发不抛弃 HTML 和 CSS，用纯 JavaScript 开发

首先要确定，即使抛开游戏不论，一般的Web应用或者网站，完全用JavaScript开发也是可行的。比如ExtJS、webOS的Enyo等。但是主流Web开发很少采用全JS的方案。原因大体有以下几点：

1. 注重考虑那些无法运行JS的用户代理。

用

户使用不支持JS的浏览器（比如较老的手机浏览器），或者禁用脚本。当然你可以选择忽略这一小撮用户，尤其是现在绝大多数网站和应用也是如此选择的，但是

至少我们应该对坚持考虑无JS情况的开发者予以基本的尊重。此外，如 Mobile

Transcoder或某些手机浏览器的“极速模式”是基于服务器端对网页的解析和重组，是否能支持JS很够呛。

更重要的因素是SEO friendly。如果是全JS生成的网页，搜索引擎无法索引内容。这一点对于许多网站是性命攸关的。

注意，有人提到screen reader。但绝大多数读屏软件是根据DOM来的，因此全部由JS生成DOM也不会有问题。然而这前提是JS所生成的DOM是符合accessibility要求的。

2. 注重HTML/CSS本身的优点。

诚然JS本身也可以通过精心设计的框架和库来实现分离等所有HTML/CSS模型的优点。但是存在许多不确定因素：

1) 有足够好的框架和库吗？

要

考虑是否能满足你的业务需求，还可能要考虑性能、可扩展性、之前提到的accessibility、学习曲线、工具链，乃至此框架和库的长久的生存（有人

维护，修bug、加新功能比如对HTML5新API的支持之类的）。关键是，理论上说JavaScript具有更高的弹性，但是更大的自由度未必能得到更

好的

2) 框架和库给出的抽象模型和HTML/CSS模型的阻抗是否匹配？

假如该框架或库本质上仍然使用HTML/CSS模型，只是改变了语法（比如从markup改为json），那么其提供的好处在哪里？仅仅是语法统一？

如

果该框架或库有自己独立的抽象层，比如widget/component等，那么它是建筑在HTML/CSS之上的额外抽象层（即最终映射到HTML

/CSS），还是仅仅以HTML/CSS为纯粹实现工具？对于前者，实际上最终会回归HTML/CSS模型。而后者，可以参考的经验教训就是 WebForm和JSF。

3) 框架和库所设定的约束能否在开发中一以贯之的执行？

无

论是理论或者现实，HTML/CSS模型都算不上完美。但是至少是清晰和较容易被一致的执行的。但是单一语言即使提供分层机制，也容易被绕过——尤其是框

架和库本身不够好的情况下，可能由于不能满足需求、有bug等情况而倾向于hack之，更不要说deadline紧迫时。

3. 注重性能。

须

知，最终Web应用、页面是在浏览器中执行，而浏览器完全是按照HTML/CSS所设计。抛开Canvas不论，纯JS的实现最终还是要生成DOM。从性

能的角度看，纯JS生成DOM自然赶不上直接的markup。同样的道理，就算用CSS预处理器也都会在部署时预先编译——尽管在运行时可以做出更牛逼的

特性（然而实际上目前我不知道有任何CSS预处理器干了这样的事情——因为它们都是按照预编译的场景设计的），再如HTML/CSS是按照渐进显示优化的

（页面不用全下载完就可以看部分），而纯JS的架构没有精心设计是很难做到的（比如json数据全部下载完你才能parse，数据才可用，DOM才能生

成）。

［补充：尽管LESS是可以在运行时执行的，但是从性能的角度出发是不合适的，因为CSS通常必须在页面rendering之前就全部就位。而运行时产生CSS，

就要求在页面rending之前至少要先下载执行LESS的脚本，然后解析编译你的.less源代码。这个性能开销至少目前还不容忽视。］

［补

充：性能优化的另一点是基于HTML/CSS的声明性特点，即只表明high-level的目标，浏览器才能获得更大的优化自由度。比如CSS

transition/animation，与JavaScript通过修改style达到效果比，前者性能表现要好得多。］

4. 注重Web开发的独特特点。

1) HTML/CSS 都是声明式的，也就是其本身并不希望是程序员来编程。当然，一个编程语言能干所有的事情，但是即使考虑编程本身，为什么在通用编程语言之外还要有SQL、还有以各种语法写的配置文件？

2) HTML/CSS是基于标准的。这与 WebForm、JSF、Flash/Flex等私有技术或一个语言和平台下的标准有天壤之别。具体就不展开了。

Web开发和一般应用开发有个重大区别是，Web应用、网页的最终表现和行为，或者说Web的用户体验，并不是完全由开发者决定的，而是开发者和用户共同

决定的。用户选择不同的设备、不同的浏览器、不同的浏览器设置、不同的浏览器扩展等，都能影响结果。这是缺点，也是优点。看你如何体会了。这里具体不展

开。只是一点，纯JavaScript开发通常表示你想更多的控制用户体验，但这并非简单的多写代码就能做到。

让你的 Node.js Web 应用程序更快的 10 个技巧

由于其事件驱动和异步特性，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 应用程序速度。当浏览器遇到一个

直接用js jsp进行web开发是怎么实现的

jsp是服务端编译执行的。js是页面浏览器解释执行的，二者执行的时机不同的。

1 JAVA是和C/C++一个等级的强类型编程语言,是纯面向对象的，比起JSP和JAVASCRIPT要复杂的多，一般学好JAVA就能很容易转向其他两门语言。

2 JSP是JAVA SERVER PAGE的首字母缩写，顾名思义，是JAVA的服务端页面，其动态语法部分完全是JAVA规范。JSP是和ASP,PHP一样的服务器端语言,主要用来制作网站后台的技术（但现在一般不使用了，2014年起基本都开始使用模板引擎技术如velocity 等）。

3 JAVASCRIPT从其名称含义是JAVA脚本，是在浏览器中运行的脚本语言，由于其大部分语法规范取自于JAVA语法规范，所以取名为JAVASCRIPT（其实和JAVA没多大关系，是由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript）。JAVASCRIPT是一门基于对象的弱类型脚本编程语言,主要用来制作网页前台的技术.并且是现在比较热门的AJAX技术的核心.

总的来说Java是用于后台的编程语言，JSP和JavaScript是用于前台页面编程

如何利用React.js开发出强大Web应用

。以下列代码作为范例：

script src=""/script script src=""/script /head body script type="text/jsx" /** @jsx React.DOM */ /script /body /html

组件结构

React.js当中的应用程序必须通过已经在层级结构当中布置完成的组件加以构成。如果大家希望在开发工作当中轻松使用应用程序的每个组成部分，那么必须首先拿出时间弄清楚其在层级结构中的具体作用并以此为基础勾勒应用原型。这意味着，每个组件都负责解决一项特定任务。而在某些复杂组件当中，我们还需要将其拆分成数个简单组件，从而确保一次只解决一个问题。这也是我们充分发挥React.js强大能力的必要前提。

属性与状态

React.js当中的数据主要分为两种类型：

·属性：这类数据会在不同组件之间往来传递

·状态：这类数据会始终被保存在某组件当中

组件的属性（即往来于不同组件间的信息）不可修改与变更，但组件的状态却能够随时加以调整（即组件内部的信息）。这代表着React.js中的一切都具备与之对应的真实源。

因此，当我们利用React.js创建一款应用程序时，必须要在Web应用开发中做出一项决策——各组件拥有怎样的数据，这些数据的主来源又是什么。一旦解决了这个问题，大家就能够轻松完成应用创建的其它工作。

在这种情况下，我们只需要考量三种数据类型：

网络数据

用户输入数据

预测数据

具体来参考以下示意图：

其中网络数据将由网络及线路组件所获取。其通常代表着大量数据，而且为了不影响应用的运行速度，大家需要在外部对其加以处理，而后再把结果交付至我们创建的应用。

组件通信机制

在这里，数据被设计为自上而下贯穿整个组件结构，但大家有时候也需要以自下而上的方式逆向交付数据以实现应用程序交互性。在这种情况下，我们就需要利用特定的技术手段实现这种“数据逆流”。下面来看几种实现此类目标的方式：

·大家可以选择使用回调属性的方式，这是最理想也最简单的解决方案，因为此时组件只需要同其直接上游对象进行数据共享。React.js能够自动对每个实例者组件方法绑定，因此维护工作不会占用我们大量精力。下面来看具体示例：

return ; } }); var Child = React.createClass({ render: function() { return Click me; } });

·如果大家希望实现的是其它抵达通知机制，那么可以利用单一系统实现发布/订阅。这种方式非常灵活而且同样易于维护。只需使用PubSubJS这类库，大家就能够随意对某一组件的生命周期方法进行绑定与解绑。

如何利用AngularJS打造一款简单Web应用

利用AngularJS打造一款简单Web应用：

!DOCTYPE html

html lang="en" ng-app="myApp"

head

meta http-equiv="Content-Type" content="text/html; charset=UTF-8"

titleAngularJS Firebase Web App/title

link href="justified-nav.css" rel="stylesheet"

/head

body

div class="container"

div class="jumbotron" style="padding-bottom:0px;"

h2AngularJS Firebase App!/h2

/div

form class="form-signin" role="form"

input type="email" class="form-control" placeholder="Email address" required="" autofocus=""

input type="password" class="form-control" placeholder="Password" required=""

label class="checkbox"

a href="#" Sign Up/

/label

button class="btn btn-lg btn-primary btn-block" type="submit"Sign in/button

/form

/div

/body/html

use strict';

angular.module('myApp.home', ['ngRoute'])

// Declared route

.config(['$routeProvider', function($routeProvider) {

$routeProvider.when('/home', {

templateUrl: 'home/home.html',

controller: 'HomeCtrl'

});

}])

// Home controller

.controller('HomeCtrl', [function() {

}]);

'use strict';

angular.module('myApp', [

'ngRoute',

'myApp.home' // Newly added home module

]).

config(['$routeProvider', function($routeProvider) {

// Set defualt view of our app to home

$routeProvider.otherwise({

redirectTo: '/home'

});

}]);

script src="home/home.js"/script

用nodejs开发web应用，用哪个框架好？express？还是其他什么

刚开始学的时候建议用原生的http，稍微高级点用connect中间件，如果注重效率的话，就用框架级别的express，自己再选个模板jade，ejs什么的，上手还是比较容易的。