资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/全新单页JavaScript框架Amaple

全新单页JavaScript框架Amaple

sihai / 800人阅读

摘要：但目前来看，单页应用在技术实现和体验上还有更大的发展空间，而这就是所要推进的。模块化页面模块化单页应用的特点之一是将页面划分为多个模块，跳转时更新模块的内容。与其他单页库相比，它们的职责更清晰，也易于理解。


单页Web应用作为新一代Web模式，为用户提供了更流畅的体验满足感。早在Chrome5、IE8和Firefox3的年代就可以通过hash技术实现单页Web应用，而HTML5新history API的出现让单页Web应用从幕后迅速走向台前。 Amaple 作为一款体验优先的JavaScript单页框架，可以在不依赖其他工具的前提下快速开发单页Web应用，这也意味着那些只掌握了前端基础知识的开发者也能很容易上手开发。在开始具体聊Amaple单页框架前，我们先聊聊单页Web应用本身，从简介绍，单页Web应用通常由一个主页面及若干个模块构成，在页面跳转或表单提交期间不会刷新浏览器（人为刷新除外），使用起来它更像桌面应用，致使许多著名的互联网公司都在不断地转向它，如Google、Twitter、Facebook，国内的有百度搜索、百度翻译、阿里巴巴淘宝网的商品列表页、阿里妈妈控制台等。

单页Web应用与传统Web对比 # 体验

普通的Web应用跳转受限于浏览器，它将会丢弃整个页面并重新加载一个新的页面，此时会出现短暂的页面空白，而单页Web应用通常在跳转时只更新部分模块的内容，既不会出现空白现象，还能达到更快的页面渲染速度，从而提供更流畅的体验。

普通Web应用在加载时显示的动画只能固定为浏览器的加载图，但单页应用的跳转是无刷新的，因此可以像桌面应用和App一样自定义加载数据时的等待样式，你可以编写一个有趣的加载等待动画，或是进度条等，让你的Web应用更加多姿多彩。

# 架构

单页Web应用通常不需要与服务器端代码混合，它们使用数据API进行通信，完全实现了前后端的分离，甚至前后端代码可以不在同一台服务器中，这也更加接近桌面应用和App的机制，这意味着你不用为Web应用多带带开发一套服务端代码，而且为将前端代码放在CDN上提供了可能，这些在后端渲染的普通Web应用上是做不到的。

# 性能

不得不承认，单页Web应用在性能上也有它的瓶颈，相比于普通Web应用，因为它的模块视图通常是js动态创建的，并且视图和数据的请求也相互独立，所以单页Web应用在加载时往往需要更多的http请求次数，而且动态创建与数据请求是串行执行的，这其实也是单页Web应用不利于SEO的原因所在。但另一方面，正因为单页Web独有的代码级页面缓存，可以实现更快的页面渲染表现，而SEO也可以使用现有技术来消除。

谈谈单页Web应用的未来 # Web的天生优势

跨平台、响应式、免安装与易编写等，这些都是Web的天生优势，这些优势能让它快速蔓延并在任何场景下使用。微信为了利用这些优势，将它们与Native App进行结合推出了功能较全体验较好的小程序，Facebook为了统一Android、IOS与Web的编写方法创造了React Native，选择以HTML、JavaScript和CSS来生成两大移动端App的代码。

# 单页Web应用的机会

Google为了推进Web的发展也推出了PWA和AMP，让Web应用的体验更加接近Native App，可见，Native App与Web的发展趋势就像艺术一样相互融合，相互吸收，目的是为了不断提高应用的体验效果，和寻求一种更加开放统一的生产方式。单页Web应用也刚好符合这些趋势，这种技术完全有Web本身的优势，并且在提供了更好体验的同时，也在不断推进服务端API的统一。在未来，可能产生更多类型的终端，如VR、AR等，这意味着Web跨平台和自适应的优势会更加明显，而不仅限于PC和手机端。但目前来看，单页Web应用在技术实现和体验上还有更大的发展空间，而这就是 Amaple 所要推进的。

在 Amaple 上快速构建单页应用

日益强大的Web体系催生了 Amaple，它的定位是让单页Web应用体验更流畅，构建更简单，即使初级前端开发也能顺利掌握和使用，根据这些， Amaple 的设计有以下特点：

# 遵循Web的原生设计原则

降低学习成本的一个特点是沿用原生Web开发的标准，这样可以最大化符合具有一定基础的开发者的认知范围，这也是 Amaple 的设计原则之一。在 Amaple 单页应用中，依旧使用href属性跳转页面，使用

设置action属性提交表单，只是它们是浏览器无刷新的跳转，甚至可以创建像ShadowDOM那样的组件，在组件内使用特定子元素，看起来就像