概念整理

网络正在处于一个日新月异的发展时代。服务器端开发人员在选择语言的时候非常困惑,有长期占主导地位的语言,例如C、Java和Perl,也有专注于web开发的语言,例如Ruby、Clojure和Go。只要你的项目运行良好,你的选择就显得没有那么重要了。

目录

javaScript简介

JavaScript:

JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。

它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,

最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。

JS组成:

1.ECMAScript,描述语法和基本对象。

2.文档对象模型(DOM),描述处理网页内容的方法和接口。

3.浏览器对象模型(BOM),描述与浏览器进行交互的方法和接口。

澳门新浦京电子游戏,特点:

JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。

 

通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。

是一种解释性脚本语言(代码不进行预编译)。
主要用来向HTML(标准通用标记语言下的一个应用)页面添加交互行为。
可以直接嵌入HTML页面,但写成单独的js文件有利于结构和行为的分离。
跨平台特性,在绝大多数浏览器的支持下,可以在多种平台下运行(如Windows、Linux、Mac、Android、iOS等)。
Javascript脚本语言同其他语言一样,有它自身的基本数据类型,表达式和算术运算符及程序的基本程序框架。

Javascript提供了四种基本的数据类型和两种特殊数据类型
用来处理数据和文字。

而变量提供存放信息的地方,表达式则可以完成较复杂的信息处理。

 

JavaScript脚本语言具有以下特点:

(1)脚本语言。JavaScript是一种解释型的脚本语言,C、C++等语言先编译后执行,而JavaScript是在程序的运行过程中逐行进行解释。
(2)基于对象。JavaScript是一种基于对象的脚本语言,它不仅可以创建对象,也能使用现有的对象。
(3)简单。JavaScript语言中采用的是弱类型的变量类型,对使用的数据类型未做出严格的要求,是基于Java基本语句和控制的脚本语言,其设计简单紧凑。
(4)动态性。JavaScript是一种采用事件驱动的脚本语言,它不需要经过Web服务器就可以对用户的输入做出响应。在访问一个网页时,鼠标在网页中进行鼠标点击或上下移、窗口移动等操作JavaScript都可直接对这些事件给出相应的响应。
(5)跨平台性。JavaScript脚本语言不依赖于操作系统,仅需要浏览器的支持。因此一个JavaScript脚本在编写后可以带到任意机器上使用,前提上机器上的浏览器支
持JavaScript脚本语言,目前JavaScript已被大多数的浏览器所支持。
不同于服务器端脚本语言,例如PHP与ASP,JavaScript主要被作为客户端脚本语言在用户的浏览器上运行,不需要服务器的支持。所以在早期程序员比较青睐于JavaScript以减少对服务器的负担,而与此同时也带来另一个问题:安全性。
而随着服务器的强壮,虽然程序员更喜欢运行于服务端的脚本以保证安全,但JavaScript仍然以其跨平台、容易上手等优势大行其道。同时,有些特殊功能(如AJAX)必须依赖Javascript在客户端进行支持。随着引擎如V8和框架如Node.js的发展,及其事件驱动及异步IO等特性,JavaScript逐渐被用来编写服务器端程序。

应用:

1.嵌入动态文本于HTML页面。
2.对浏览器事件做出响应。
3.读写HTML元素。
4.在数据被提交到服务器之前验证数据。
5.检测访客的浏览器信息。
6.控制cookies,包括创建和修改等。
7.基于Node.js技术进行服务器端编程。

 

 

 

JavaScript:
JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。
它的解释器被称为Jav…

澳门新浦京电子游戏 1

***1.Hybrid App

但是如何让这些新的web开发人员做出一个正确的选择呢?


我不希望展开一场PHP、NodeJs两大阵营之间的战争,我将会对比这两种语言所在领域的发展状况:

2.PhoneGap

  • PHP
    Rasmus
    Lerdorf在1994年创造出了PHP。它是由安装在web服务器(Apache、Ngix)上的组件运行的。PHP代码可以和HTML混合到一块。
    对于初学者就能很快写出很有价值的代码,这并不需要太多的练习。 这让PHP变得越来越流行,
    现在全球百分之八十的服务器上都在运行着PHP。全球四分之一的网站都在用的一个内容管理系统–WordPress,就是用PHP写的。
  • Node.js
    Ryan Dahl在2009年创造了Node.js。它是基于Google的V8
    JavaScript解释引擎(在Chrome浏览器里它负责执行客户端的JavaScript代码)。与其它语言不同的是Node.js内置了处理网络请求和响应的函数库,所以你不需要单独的服务器(Apache、Ngix)或者其他依赖。Node.js虽然很新但是很快就获得了极大的追捧。在很多的大公司都有在使用,例如:Microsoft,Yahoo,LinkedIn和PayPal。

3.Cordova

我们所钟爱的C#、Java、Ruby、Python、Perl、Erlang、C++、Go、Dart、Scala、Haskell等等,它们呢?

如果文章里边比较了如上所有语言的各种参数,文章将会非常长,你还会读它么?你期望一个程序员了解所有的程序开发语言吗?这显然是不可能的。我主要对PHP和Node.js做了比较,主要原因如下:

  1. 首先它们之间值得比较。两者都是开放源码,都是致力于web开发,并且都可用于相似的项目。
  2. PHP已经发布了很久了,但是Node.js才刚刚兴起,并受到越来越多的关注。难道PHP的程序员应该相信Node.js的宣传?应该考虑转换语言?
  3. 我了解,热爱编程语言,自从20世纪90年代之后我就一直使用PHP和JavaScript,并且也有几年的Node.js的经验。除此之外我也涉猎了其他的技术,但是在这里我还不能对他们作出客观评价。

另外,对多少语言做比较不重要,因为总会有某些地方的某些人抱怨我没有提到他们语言。

4.SPA (单页应用程序)

SitePoint上的角逐

程序员会花费很多时间来提升他们自己的编程能力。一些人有编程语言之间的延伸能力,但是这些达到更高层次的人根据很多的因素来做出他们自己的选择。从主观方面来说,你将会推进并且捍卫你的技术决策。

SitePoint
Smackdowns并没有采取“选择适合你自己的,朋友”这样的观点。我将会根据个人的经验、要求和喜好提出建议。你可能不会同意所有的我所说的所有观点,这并不重要,重要的是你的意见将会给其他人做出更加明智的选择。

5.AngularJS

评估方法

下面将会对 PHP 和 Node.js
进行十个轮次的比较。每个回合都会考量可以应用到任意 web
技术的常见的开发挑战。我们不会太深入讨论细节;很少有人会关心随机数生成器或数组排序的价值。

赢得最多回合的将会是优胜者。准备好了吗?开始较量吧。。。。。。

6.Node.js

第一轮:起步

创建一个“Hello
World”
web 页面有多快呢?在 PHP 中:

<?php
    echo 'Hello World!';
?>

这段代码可以放置在可以被 PHP 引擎解析的任意文件中–通常,是以 .php
为后缀的文件。在浏览器中输入 URL 跳转到文件即可。

不可否认,这不是全部。这段代码只能运行于安装了 PHP 的 web 服务器(PHP
有一个内置的服务器,尽管如此,最好还是使用一个更健壮的服务器)。大多数操作系统提供了服务器软件,如 windows
上的 IIS,Mac 和 Linux 上的
Apache,尽管它们需要启动和配置。通常使用提前构建的安装程序,如 XAMPP
或虚拟机镜像(如 Vagrant)。一种更简单的方式:上传你的文件到任意的 web
主机。

对比而言,安装 Node.js
轻而易举。你可以 下载安装程序 或者 使用包管理器。
接下来让我们在 hello.js 中创建 web 页面:

var http = require('http');
http.createServer(function (req, res) {
    res.writeHead(200, {'Content-Type': 'text/plain'});
    res.end('Hello World!');
}).listen(3000, '127.0.0.1');

在浏览器中访问   之前,你需要在终端输入 node
hello.js 来启动应用程序 。通过上面的五行代码,我们已经创建了一个小型的
web 服务器,尽管这很令人吃惊,但是即便拥有很强客户端 JavaScript
经验的人也很难理解。

PHP 在概念上更简单所以赢得本轮。稍微懂得一些 PHP
声明的人就可以开发一些有用的东西。PHP 有更多的软件依赖,但是 PHP
的概念对于新手来说不那么繁琐。

懂一些 JavaScript 和开发 Node.js 应用是两回事儿,Node.js
开发方法和大多数服务端技术不同,你需要先弄明白一些相当复杂的概念,比如关闭和回调函数。

7.npm

第二轮:帮助和支持

没有官方文档和资源(课程,论坛,堆栈溢出)的帮助你必将举步维艰。 PHP
在本轮轻易胜出,她有大量的指南和二十年的
Q&A。无论你想做什么,总会有人在你之前已经面对过同样的问题。

Node.js 拥有很好的文档,但是更加年轻,能提供的帮助较 PHP
也少。JavaScript 在市面上的时间和 PHP
一样久,但是主要的帮助都是针对浏览器开发的,那基本没啥帮助。

8.gulp

第三回合: 语言语法

声明与结构是不是符合逻辑而且简单好用?

不像一些语言跟框架,PHP
不会限制你按特定的方式编写,具体怎么搞随你。你可以从几行的程序开始,然后添加些方法,进而写一些简单的
PHP4 模式的对象,最后编写优雅的面向对象的 MVC 模式 PHP5+
的应用。你的代码开始可能比较混乱,但也能工作,而且会随着理解的深入越写越好。

PHP
的语法在版本间可能略有调整,但是向后兼容一般都做得很好。但不幸的是,这也导致了一个问题:PHP
很混乱。例如,怎么统计一个字符串中字符的个数?是 count?str_len? 还是
strlen?亦或 mb_strlen?PHP
有数以百记的函数,而且命名规则也也不完全一致。可以试试不查文档写几行代码。

JavaScript
相对就简单些,只有几十个核心声明。不过语法就经常被开发者喷了,因为它的原型化对象模型看起来平易近人,实际上却不是。而且各种数学错误(0.1+0.2
!= 0.3)以及类型转换的混乱(’4′ + 2 == ’42′ 和 ’4′ – 2 ==
2)也招致不少抱怨,但这些情况世界很少导致什么问题,多数语言都有这种借口。

PHP 有他的优点,但是这回合我判 Node.js 胜。理由如下:

  1. JavaScript 是世界上最难理解的语言 —
    但是,当哪天你顿悟以后,概念一通,就会发现其他语言都太过笨拙了。
  2. JavaScript 代码比 PHP 简洁。例如,你再不需要跟 JSON 转来转去—— UTF-8
    也不用
  3. 全栈工程师可以同时在客户端与服务端使用
    JavaScript 。大脑不需要来回切换。
  4. 深入理解 JavaScript 会让你更想用它,但是 PHP 不是这样。

9.bower

第四轮:开发工具

两种技术都有一些很好的编辑器,集成开发环境,调试器,验证器和其他工具。我认为这是平局,但是这里有一些工具给
Node.js 些许优势:NPM-包管理器。 NPM
允许你安装和管理依赖,设置配置变量,定义脚本和其他。

PHP 的 Composer 项目受 NPM 激发,在有些方面更强。但是,PHP
在默认情况想不提供,活动库较小,在社区的影响更小。

Grunt 和 Gulp 之类革新了开发方法的构建工具的壮大,NPM
也有一部分功劳。有时候 PHP 开发者也许想要/需要安装 node.js,这不是倒退。

10.serve

第五轮:环境

技术可以在哪使用和部署?支持哪些平台和生态系统?网页开发者经常需要开发一些并不完全针对网页的应用,比如构建工具,迁移工具,数据库转换脚本等。

PHP 有办法开发桌面应用和命令行工具,但是你不会使用他们。本质上,PHP
是一个服务端技术,他很擅长该领域,但是很少延伸到这之外。

若干年前,JavaScript
被认为限制很多,有一些边缘技术,但是他的主战场还是浏览器。Node.js
已经改变了这一感觉并井喷出了很多 JavaScript 项目,你可以在任何地方使用
JavaScript:浏览器,服务器,终端,桌面甚至嵌入式系统,这使得 JavaScript
无处不在。

11.Vue.js

第六轮:集成

开发技术很受限制,除非他们能与数据库和驱动集成。PHP 在这方面很强,PHP
面世已经很多年,他的扩展使他能和拥有主流或冷门的 API 的服务器直接通讯。

Node.js
正在迎头直追,但是你也许会为某些老旧,冷门的技术寻找成熟集成组件而头疼。

1.Hybrid App

第七轮:托管和部署

部署你绚丽新应用到在线网页服务器有多容易?这是 PHP
的另一次完胜。随机联系某个网页托管公司你可以找到对主要的 PHP
支持,也许还免费附送 MySQL。对于沙盒,PHP
被认为更简单,有风险的扩展可以被禁用。

Node.js
是个不同的野兽,服务端的应用永远运行。你需要一台物理/虚拟/云或定制的服务器环境,最好有
root
权限,这对有些服务器来说遥不可及,特别是那些共享的服务器,你有可能让整台服务器宕机。

Node.js 托管将会变得简单,但是我认为他永远没法像 FTP 上传一些 PHP
文件那么方便。

Hybrid
App(混合模式移动应用)是指介于web-app、native-app这两者之间的app,兼具“Native
App良好用户交互体验的优势”和“Web
App跨平台开发的优势”。鉴于移动终端的局限性,移动终端上的APP由本地化应用(Native
App),到基于WEB的应用Web App,再到混合型应用(Hybrid
APP),这一连串的变化都源于技术的更新和市场的需要。

第八轮:性能

PHP 很勤快,有很多项目跟选项可以使它跑得更快。即使那些对性能要求很严苛的
PHP 开发者也几乎不会担心速度问题, 但是 Node.js 性能通常更好一些。
当然,性能很大程度上决定于开发团队的经验以及是否上心, 但是 Node.js
还是有如下几条优势的:

更少的依赖

所有对 PHP 应用的请求都必须经过一个 WEB 服务器的路由,来启动 PHP
的解释器运行 PHP 代码。Node.js 不需要这些依赖,
而且你基本一定会使用一个带服务器的框架,像 Express,他很轻量,很好的扮演你应用的一部分。

更小更快的解释器

Node.js 的解释器比 PHP 的更小更灵活。
他并不受旧版语言遗留兼容问题的拖累,而且 Google 在 V8
引擎性能改善上出了大力。

应用永久在线

PHP 遵循标准客户端-服务端模型。 每个页面请求都会初始化应用;
你读取配置参数、连接数据库、读取信息、渲染 HTML。Node.js
应用持久运行,只需要启动一次。例如,你可以创建一个单独数据连接对象,然后所求请求一起复用。公认的,PHP
也有一些途径来实现,比如使用 Memcached ,但是这已经不是语言的标准特性了。

Hybrid
App是指介于web-app、native-app这两者之间的app,它虽然看上去是一个Native
App,但只有一个UI WebView,里面访问的是一个Web
App,比如街旁网最开始的应用就是包了个客户端的壳,其实里面是HTML5的网页。

事件驱动,无阻塞 I/O

PHP 跟其他多数服务端语言采用阻塞执行的模型。
当你执行一个命令,比如从数据库取数据,那么必须等这个指令执行完成后,才会执行下面的内容。 Node.js
通常不会等的。 取而代之的是,
你需要提供一个回调函数,这个函数当指令执行完后会被调用一次。例如:

// fetch records from a NoSQL database
DB.collection('test').find({}).toArray(process);
console.log('finished');

// process database information
function process(err, recs) {
    if (!err) {
        console.log(recs.length + ' records returned');
    }
}

这个例子中, 控制台会先输出‘finished’,然后输出‘N records
returned’,因为 process 函数是所有数据返回的时候才被调用的。 换句话说,当解释器在其它进程处理的时候可以干些别的事情。

注意情况比较复杂,还有几个警告:

  • Node.js/JavaScript 只能在单线程上运行,但是大多数 web
    服务器都是多线程,而且并发的处理请求。
  • 一个用户长时间运行的 JavaScript
    处理会阻止其它用户的代码执行,除非拆分任务或者使用Web
    Workers。
  • 基准测试是主观的和有缺陷的;可以找到一些例子 Node.js
    比较好,而一些相对的例子 PHP 比较好
    。程序员只是在尝试证明他们的信仰!
  • 书写异步的事件驱动的代码非常复杂,非常有挑战性。

我只能从我的经验来讲: 我的 Node.js 应用要明显比 PHP
的同等应用要快。你的可能不是,但是不试是永远不会知道的。

Hybrid
App同时使用网页语言与程序语言开发,通过应用商店区分移动操作系统分发,用户需要安装使用的移动应用。总体特性更接近Native
App但是和Web
App区别较大。只是因为同时使用了网页语言编码,所以开发成本和难度比Native
App要小很多。因此说,Hybrid App兼具了Native App的所有优势,也兼具了Web
App使用HTML5跨平台开发低成本的优势。

第九轮:开发者激情

这会超出”常见网页开发挑战“这样的目标,但是这很重要。如果你恐惧每天写代码,那你无所谓哪门语言更好。

很难为此做出比较但是一些 PHP 开发者对 PHP
这门语言很有激情。你最近一次读到让你走心的 PHP
文章或幻灯片是什么时候?也许已无需再说?可能是更低的曝光度?或者我没找对地方?PHP7
有一些新的功能,但是该技术已经原地踏步很多年了,虽说如此,很少有开发人员对PHP发牢骚。

JavaScript
分离了社区,有人爱也有人恨,一些程序员在中间犹豫不决,经管如此,对
Node.js
的反馈大多积极,她正处于风口浪尖,一部分原因是因为她很新,赞誉不一定持续。目前,Node.js
赢得本轮。

Hybrid
App按网页语言与程序语言的混合,通常分为三种类型:多View混合型,单View混合型,Web主体型。

第十轮:前景

您选择采用哪种服务端语言并不重要;即使她不再被更新也会照样继续工作(yay
ColdFusion!)尽管使用量上趋于稳定但是很多人依然使用
PHP,我打包票她还能再坚挺二十年。

Node.js
崛起得很迅速,她提供了一种现代的开发方式,使用和客户端开发一样的语法同时支持
HTML5
变革式的特征,比如网络套接字和服务端发送事件。尽管大家对该语言的分叉函数有些争议,但是Node.js的使用量还是呈指数级增长。

Node.js 势必会蚕食 PHP
的市场份额,但是我不认为她能完全取而代之。两种技术都有光辉的未来。我宣布本轮平手。

多View混合型:即Native View和Web
View独立展示,交替出现。2012年常见的Hybrid App是Native
View与WebView交替的场景出现。这种应用混合逻辑相对简单。即在需要的时候,将WebView当成一个独立的View(Activity)运行起来,在WebView内完成相关的展示操作。这种移动应用主体通常是Native
App,Web技术只是起到补充作用。开发难度和Native App基本相当。

最终赢家

最终分数:Node.js 赢得5轮,PHP
赢得4轮,一轮平手。原以为会倒向其中一方,结果比我预想的更中庸一些。

Node.js
有一定的学习曲线,对新手来说不够理想但是她赢得了本次对决。而且,如果你是位喜欢该语言的靠谱的
JavaScript 程序员,Node.js
不会让你失望。她更新潮而且提供自己网页开发的体验,你不会思念 PHP。

但是不要贬低 PHP,PHP 依然有活力,你不该因为 Node.js
快一些,新一些或新潮一些就去紧跟 Node.js 潮流。PHP
易学而且依然支持专业的编程技巧,帮助无处不在而且开发简单。甚至死忠的
Node.js 开发者也不得不在简单网站和应用时考虑使用 PHP。

我的建议是:评估选项,根据你的需求来选择一门语言,这比本文这样的”对比“文章靠谱得多。

单View混合型:即在同一个View内,同时包括Native View和Web
View。互相之间是覆盖(层叠)的关系。这种Hybrid
App的开发成本较高,开发难度较大,但是体验较好。如百度搜索为代表的单View混合型移动应用,既可以实现充分的灵活性,又能实现较好的用户体验。

Web主体型:即移动应用的主体是Web
View,主要以网页语言编写,穿插Native功能的Hybrid
App开发类型。这种类型开发的移动应用体验相对而言存在缺陷,但整体开发难度大幅降低,并且基本可以实现跨平台。Web主体型的移动应用用户体验的好坏,主要取决于底层中间件的交互与跨平台的能力。国外的appMobi、PhoneGap和国内的WeX5、AppCan和Rexsee都属于Web主体型移动应用中间件。其中Rexsee不支持跨平台开发。appMobi和PhoneGap除基础的底层能力更多是通过插件(Plugins)扩展的机制实现Hybrid。AppCan除了插件机制,还提供了大量的单View混合型的接口来完善和弥补Web主体型Hybrid
App体验差的问题,接近Native
App的体验。而WeX5则在揉合PhoneGap和Bootstrap等主流技术的基础上,对性能进一步做了深度优化,不但完全具备Native
App对本地资源的调用能力,性能体验也不输原生;WeX5所开发出来的app具备完全的跨端运行能力,可以无需任何修改直接运行在各种前端环境上。

从分析可见,Hybrid
App中的Web主体型只要能够解决用户体验差的问题,就可以变成最佳Hybrid
App解决方案类型。

多主体共存型(灵活型):这是一种新型的开发模式,即支持Web主体型的应用,又支持以Native主体的应用,也支持两者混合的开发模式。比如kerkee框架[2] 
,它具有跨平台、用户体验好、性能高、扩展性好、灵活性强、易维护、规范化、具有Debug环境、彻底解决跨域问题等特点。用户体验与Native
App媲美。功能方面,开发者可随意扩展接口。

2.PhoneGap

PhoneGap是一个采用HTML,CSS和JavaScript的技术,创建移动跨平台移动应用程序的快速开发平台。它使开发者能够在网页中调用IOS,Android,Palm,Symbian,WP7,WP8,Bada和Blackberry等智能手机的核心功能——包括地理定位,加速器,联系人,声音和振动等,此外PhoneGap拥有丰富的插件,可以调用。

3.Cordova

Cordova是PhoneGap贡献给Apache后的开源项目,是从PhoneGap中抽离出的核心代码,是驱动PhoneGap的核心引擎。有点类似Webkit和Google
Chrome的关系。PhoneGap是Apache Cordova的一个分支。你可以这样想,Apache
Cordova是一台发动机,运行在PhoneGap上,就像WebKit这个浏览器引擎运行在Chrome浏览器和Safari浏览器上。随着时间的推移,PhoneGap可能会加入其它的Adobe的服务,而这些服务不
适合发布到Apache的项目上。例如,PhoneGap和Adobe
Shadow就有一大堆的战略方针。不过不用担心,PhoneGap会持续地保持免费开源而且在Apache
Cordova上也是免费的。

渊源就是:早在2011年10月,Adobe收购了Nitobi
Software和它的PhoneGap产品,然后宣布这个移动Web开发框架将会继续开源,并把它提交到Apache
Incubator,以便完全接受ASF的管治。当然,由于Adobe拥有了PhoneGap商标,所以开源组织的这个PhoneGap
v2.0版产品就更名为Apache Cordova。(目前Adobe PhoneGap <===>Apache
Cordova,似乎只是包名不一样而已,未来会有多大变化与改变,拭目以待吧!!)cordova是nodejs的一个框架。

由于Cordova是利用Node.js进行管理,所以需要先下载Node.js。Node.js
是构建在Chrome javascript
runtime之上的平台,能够很容易的构建快速的,可伸缩性的网络应用程序。Node.js使用事件驱动,非阻塞I/O
模式,这使它能够更轻量,高效且完美的适用于运行在分布式设备之间的数据密集型实时应用程序。

参考:

nodejs之cordova
跨平台开发:http://blog.csdn.net/bubuxindong/article/details/53787392

4.SPA 

(单页应用程序)单页Web应用(single page web
application,SPA),就是只有一张Web页面的应用,是加载单个HTML
页面并在用户与应用程序交互时动态更新该页面的Web应用程序。浏览器一开始会加载必需的HTML、CSS和JavaScript,所有的操作都在这张页面上完成,都由JavaScript来控制。因此,对单页应用来说模块化的开发和设计显得相当重要。

不知你有没有发现,像Github、百度、微博等这些大站,已经不再使用普通的a标签做跳转了。他们大多使用Ajax请求替代了a标签的默认跳转,然后使用HTML5的新API修改了Url,你可以在F12的Network面板里发现这个秘密。

这项技术并没有特别标准的学名,大家都称呼为Pjax,意为PushState +
Ajax。这并不完全准确,因为还有Hash +
Ajax等方法,但为了方便,我们下文还是统称为Pjax。

为什么要这么做?

Pjax是一个优秀的解决方案,你有足够多的理由来使用它:

可以在页面切换间平滑过渡,增加Loading动画。

可以在各个页面间传递数据,不依赖URL。

可以选择性的保留状态,如音乐网站,切换页面时不会停止播放歌曲。所有的标签都可以用来跳转,不仅仅是a标签。避免了公共JS的反复执行,如无需在各个页面打开时都判断是否登录过等等。减少了请求体积,节省流量,加快页面响应速度。平滑降级到低版本浏览器上,对SEO也不会有影响。

原理呢?Pjax的原理十分简单。

  1. 拦截a标签的默认跳转动作。

  2. 使用Ajax请求新页面。

  3. 将返回的Html替换到页面中。

  4. 使用HTML5的History API或者Url的Hash修改Url。

参考:

前端:将网站打造成单页面应用SPA(一):

5.AngularJS 

AngularJS诞生于2009年,由Misko Hevery
等人创建,后为Google所收购。是一款优秀的前端JS框架,已经被用于Google的多款产品当中。

AngularJS有着诸多特性,最为核心的是:MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。

AngularJS 是一个 JavaScript 框架。它是一个以 JavaScript
编写的库。它可通过标签添加到 HTML 页面。AngularJS 通过 指令 扩展了
HTML,且通过 表达式 绑定数据到 HTML。AngularJS 是以一个 JavaScript
文件形式发布的,可通过 script 标签添加到网页中。

AngularJS是为了克服HTML在构建应用上的不足而设计的。HTML是一门很好的为静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了。所以我做了一些工作(你也可以觉得是小花招)来让浏览器做我想要的事。通常,我们是通过以下技术来解决静态网页技术在构建动态应用上的不足:类库

类库是一些函数的集合,它能帮助你写WEB应用。起主导作用的是你的代码,由你来决定何时使用类库。类库有:jQuery等框架

框架是一种特殊的、已经实现了的WEB应用,你只需要对它填充具体的业务逻辑。这里框架是起主导作用的,由它来根据具体的应用逻辑来调用你的代码。框架有:knockout、sproutcore等。

AngularJS使用了不同的方法,它尝试去补足HTML本身在构建应用方面的缺陷。AngularJS通过使用我们称为指令(directives)的结构,让浏览器能够识别新的语法。例如:使用双大括号{{}}语法进行数据绑定;使用DOM控制结构来实现迭代或者隐藏DOM片段;支持表单和表单的验证;能将逻辑代码关联到相关的DOM元素上;能将HTML分组成可重用的组件。

AngularJS通过为开发者呈现一个更高层次的抽象来简化应用的开发。如同其他的抽象技术一样,这也会损失一部分灵活性。换句话说,并不是所有的应用都适合用AngularJS来做。AngularJS主要考虑的是构建CRUD应用。幸运的是,至少90%的WEB应用都是CRUD应用。但是要了解什么适合用AngularJS构建[2] 
,就得了解什么不适合用AngularJS构建。如游戏,图形界面编辑器,这种DOM操作很频繁也很复杂的应用,和CRUD应用就有很大的不同,它们不适合用AngularJS来构建。像这种情况用一些更轻量、简单的技术如jQuery可能会更好。

AngularJS 表达式

AngularJS 表达式写在双大括号内:{{ expression }}。[3] AngularJS
表达式把数据绑定到 HTML,这与ng-bind指令有异曲同工之妙。AngularJS
将在表达式书写的位置”输出”数据。

AngularJS 表达式很像JavaScript
表达式:它们可以包含文字、运算符和变量。实例 {{ 5 + 5 }} 或 {{ firstName

  • ” ” + lastName }}

6.Node.js

 Node.js是一个Javascript运行环境(runtime),发布于2009年5月,由Ryan
Dahl开发,实质是对Chrome
V8引擎进行了封装。Node.js对一些特殊用例进行优化,提供替代的API,使得V8在非浏览器环境下运行得更好。它要解决的问题,它如何工作,如何运行一个简单应用程序,最后,Node
在什么情况下是一个好的解决方案。

Node 旨在解决什么问题?

Node 公开宣称的目标是
“旨在提供一种简单的构建可伸缩网络程序的方法”。当前的服务器程序有什么问题?我们来做个数学题。在
Java™ 和 PHP 这类语言中,每个连接都会生成一个新线程,每个新线程可能需要
2 MB 的配套内存。在一个拥有 8 GB RAM
的系统上,理论上最大的并发连接数量是 4,000
个用户。随着您的客户群的增长,如果希望您的 Web
应用程序支持更多用户,那么,您必须添加更多服务器。整个 Web
应用程序架构(包括流量、处理器速度和内存速度)中的瓶颈是:服务器能够处理的并发连接的最大数量。

Node 解决这个问题的方法是:更改连接到服务器的方式。每个连接发射一个在
Node 引擎的进程中运行的事件,而不是为每个连接生成一个新的 OS
线程(并为其分配一些配套内存)。Node
声称它绝不会死锁,因为它根本不允许使用锁,它不会直接阻塞 I/O 调用。Node
还宣称,运行它的服务器能支持数万个并发连接。

Node 肯定不是什么?

没错,Node 是一个服务器程序。但是,基础 Node 产品肯定不 像 Apache 或
Tomcat。

Node 如何工作?

Node 本身运行 V8 JavaScript。等等,服务器上的
JavaScript?没错,您没有看错。对于只在客户机上使用 JavaScript
的程序员而言,服务器端 JavaScript
可能是一个新概念,但这个概念本身并非遥不可及,因此为何不能在服务器上使用客户机上使用的编程语言?

什么是 V8?

V8 JavaScript 引擎是 Google 用于其 Chrome 浏览器的底层 JavaScript
引擎。很少有人考虑 JavaScript
在客户机上实际做了些什么?实际上,JavaScript
引擎负责解释并执行代码。Google 使用 V8 创建了一个用 C++
编写的超快解释器,该解释器拥有另一个独特特征;您可以下载该引擎并将其嵌入任何
应用程序。V8 JavaScript 引擎并不仅限于在一个浏览器中运行。因此,Node
实际上会使用 Google 编写的 V8 JavaScript
引擎,并将其重建为可在服务器上使用。太完美了!

既然已经有一个不错的解决方案可用,为何还要创建一种新语言呢?事件驱动编程许多程序员接受的教育使他们认为,面向对象编程是完美的编程设计,这使得他们对其他编程方法不屑一顾。Node
使用了一个所谓的事件驱动编程模型。实际上,服务器端和客户端没有任何区别。没错,这没有按钮点击操作,也没有向文本字段键入的操作,但在一个更高的层面上,事件正在
发生。一个连接被建立,这是一个事件!数据通过连接进行接收,这也是一个事件!数据通过连接停止,这还是一个事件!

参考:

Node.js 究竟是什么?

7.npm

NPM的全称是Node Package Manager 
,是一个NodeJS包管理和分发工具,已经成为了非官方的发布Node模块(包)的标准。和NodeJS一起安装。如果你熟悉ruby的gem,Python的pypi、setuptools,PHP的pear,那么你就知道NPM的作用是什么了。Nodejs自身提供了基本的模块,但是开发实际应用过程中仅仅依靠这些基本模块则还需要较多的工作。幸运的是,Nodejs库和框架为我们提供了帮助,让我们减少工作量。但是成百上千的库或者框架管理起来又很麻烦,有了NPM,可以很快的找到特定服务要使用的包,进行下载、安装以及管理已经安装的包。

安装cordova和Ionic:

npm install -g cordova ionic

安装gulp:

npm install -g gulp

8.gulp

官网:

gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器;她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成;使用她,我们不仅可以很愉快的编写代码,而且大大提高我们的工作效率。

gulp是基于Nodejs的自动任务运行器, 她能自动化地完成 javascript/ coffee/
sass/ less/ html/ image/ css
等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成,并监听文件在改动后重复指定的这些步骤。在实现上,她借鉴了Unix操作系统的管道(pipe)思想,前一级的输出,直接变成后一级的输入,使得在操作上非常简单。

运行gulp文件:

gulp build && gulp server 

参考:

官网入门指南:

利用gulp
启动webServer服务:

9.bower

Bower:A package manager for the web.Web sites are made of lots of
things — frameworks, libraries, assets, and utilities. Bower manages all
these things for you.Keeping track of all these packages and making sure
they are up to date (or set to the specific versions you need) is
tricky. Bower to the rescue!Bower can manage components that contain
HTML, CSS, JavaScript, fonts or even image files. Bower doesn’t
concatenate or minify code or do anything else – it just installs the
right versions of the packages you need and their dependencies.

Bower是一个客户端技术的软件包管理器,它可用于搜索、安装和卸载如JavaScript、HTML、CSS之类的网络资源。有一些建立在Bower基础之上的开发工具,如YeoMan和Grunt。

为什么我会在意Bower?节省时间。为什么要学习Bower的第一个原因,就是它会为你节省寻找客户端的依赖关系的时间。每次我需要安装jQuery的时候,我都需要去jQuery网站下载包或使用CDN版本。但是有了Bower,你只需要输入一个命令,jquery就会安装在本地计算机上,你不需要去记版本号之类的东西,你也可以通过Bower的info命令去查看任意库的信息。脱机工作。Bower会在用户主目录下创建一个.bower的文件夹,这个文件夹会下载所有的资源、并安装一个软件包使它们可以离线使用。如果你熟悉Java,Bower即是一个类似于现在流行的Maven构建系统的.m2仓库。每次你下载任何资源库都将被安装在两个文件夹中
——
一个在的应用程序文件夹,另一个在用户主目录下的.bower文件夹。因此,下一次你需要这个仓库时,就会用那个用户主目录下.bower中的版本。可以很容易地展现客户端的依赖关系。你可以创建一个名为bower.json的文件,在这个文件里你可以指定所有客户端的依赖关系,任何时候你需要弄清楚你正在使用哪些库,你可以参考这个文件。让升级变得简单。假设某个库的新版本发布了一个重要的安全修补程序,为了安装新版本,你只需要运行一个命令,bower会自动更新所有有关新版本的依赖关系。

为了安装bower,你首先需要安装如下文件:

Node:下载最新版本的node.js

NPM:NPM是node程序包管理器。它是捆绑在nodejs的安装程序上的,所以一旦你已经安装了node,NPM也就安装好了。

Git:你需要从git仓库获取一些代码包。

安装:

npm install -g bower

这行命令是Bower的全局安装,-g 操作表示全局。

使用:

bower help

bower install jQuery

bower search bootstrap

参考:

官网:

10.serve

Ever wanted to share a project on your network by running just a
command? Then this module is exactly what you’re looking for: It
provides a neat interface for listing the directory’s contents and
switching into sub folders.In addition, it’s also awesome when it comes
to serving static sites!

Install it (needs at least Node LTS):

npm install -g serve

And run this command in your terminal:

serve [options] <path>

11.Vue.js

Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web
界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API
实现响应的数据绑定和组合的视图组件。与其他重量级框架不同的是,Vue
采用自底向上增量开发的设计。Vue
的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与单文件组件和
Vue 生态系统支持的库结合使用时,Vue
也完全能够为复杂的单页应用程序提供驱动。

参考:

官网:

Vue.js——60分钟快速入门:

Vue.js 快速入门:

——2015-11-09

Vue.js
快速入门:【更新】

——2016-09-14

发表评论

电子邮件地址不会被公开。 必填项已用*标注