1. 论坛系统升级为Xenforo,欢迎大家测试!
    排除公告

JavaScript框架选择指南(初级)

当我们开始为项目寻找框架的时候,会发现如今的框架遍地都是。本文能够指导大家如何在前端找到适合自己的前端框架。我们选择了一些框架并在下面会介绍每个框架的基本原理,语法,当然还有一些有用的学习资源。
By CH首席编辑, 2017-05-16 | |
  1. CH首席编辑
    当我们开始为项目寻找框架的时候,会发现如今的框架遍地都是。本文能够指导大家如何在前端找到适合自己的前端框架。我们选择了一些框架并在下面会介绍每个框架的基本原理,语法,当然还有一些有用的学习资源。

    什么是JavaScript框架?
    在前端的预研中,开发一个“框架”一般定义为开发了一个JavaScript库,包括展现,数据驱动,交互接口。当一些交互触发是,框架能够同时改变数据。所有这些框架都有明显的不同,但目的都是相同的;当产生交互时产生新的数据呈现。

    让我们深度学习下这些框架,从而帮助我们选择。

    JavaScript框架使用者
    这里有一些框架供大家选择,包括Vue, React,Angular和Ember。这里选的每一个框架都是有自己健康,成熟的社区,和GItHub的不断更新,经过了一些用户和项目的历练,同时也有很多大项目和公司专门采用这些框架。

    Vue

    t01f9d77efc2b03b9f7.jpg

    First Commit July 27, 2013 File Size: 27.5KB minified

    Vue 一直在上手速度,通用性,性能上不断的提升。所以你基本了解一些web的知识(HTML, CSS, JS),你就已经可以使用Vue了。

    “用户只需要关注页面的展现,使用vue对于别的框架的排斥性不高,对于整合到实际项目中,也比较容易。另一方面,Vue的工具)也是能够很好的的处理复杂单页模式的项目。” – VueJS Introduction Docs

    再来说下语法,首先看下最简单的“Hello World”demo;
    HTML:
    <div id="app">
      {{ message }}
    </div>
    
    var app = new Vue({
      el: '#app',
      data: {
       message: 'Hello Vue!'
      }
    })
    
    这个框架在使用属性值上可以变得更有表现力。下面是使用在属性上的另一个复杂语法。
    HTML:
    <div id="app-2">
      <span v-bind:title="message">
       悬浮鼠标数秒后可以看到动态变化的title!
      </span>
    </div>
    
    除了语法,Vue.js也允许处理用户的输入,创建组件模板,构建DOM元素并绑定数据,结合条件判断,循环,并通过直接的语法的“声明式呈现”方法,这种模式参照web组件开发规范

    学习资源:

    React

    t019bec28b2af82679e.png

    First Commit May 29, 2013 File Size: 7.3KB minified w/Add-ons: 11.3KB minified

    React 是一个根据动态数据处理界面的JavaScript框架,FaceBook创建,并将其放在GitHub的开放资源上。对于一个能在js里面写HTML的脚本,你可能会感觉奇怪,不过这就是react的工作方式)。

    让我直接看一段react的官方指导文档上的demo。我们可以在这个例子里看到,它创建了一个"组件类",这个不同于之前的组件或者是类。类似xml的html code语法直接写在了js里面:
    HTML:
    class ShoppingList extends React.Component {
      render() {
       return (
         <div className="shopping-list">
           <h1>Shopping List for {this.props.name}</h1>
           <ul>
             <li>Instagram</li>
             <li>WhatsApp</li>
             <li>Oculus</li>
           </ul>
         </div>
       );
      }
    }
    
    <ShoppingList name="Mark" />
    
    React开始变成了一种可复用的模块化插件。这个插件能够帮我们处理动画,变形,展现各种工具,测试等等。React文档中也建议开发人员在JavaScript使用React同时使用ES6和JSX的代码。这里提2个浏览器的插件,来帮开发人员检查我们的react组件:ChromeFirefox

    学习资源:

    Angular

    t01fc9ad35297680c3c.png

    First Commit September 18, 2014 (GitHub reported) Initial Release (According to Wikipedia) October 20, 2010 File Size: CLI Tool. No Longer a standalone JS file.

    Angular的开发团队是Google。HTML从创建开始就不是动态语言,而angular则将一些标记植入到HTML的属性中去。为了实现动态绑定数据和基于不同状态的页面展示,最终产生了这种"声明式绑定"事件。你可以基于Rxjs, Immutable.js 或者其他推送方式的数据模型创建你的页面。或者你还可以用你自己的组件继承模板语言,也可以使用组件库已有的组件。

    “用angularjs去创建你的应用,可以复用在web,手机web,native mobile和native desktop中。”

    angular的语法并没有什么新颖,只是运用了一些属性和占字符,比如用了一个命名空间的ng-,下面这个例子:
    HTML:
    <input type="text" ng-model="yourName" placeholder="Enter a name here">
    <h1>Hello {{yourName}}!</h1>
    
    Angular是结合着HTML模板和组件的一个类,主要是组件为主,用于控制页面的UI交互。
    HTML:
    // src/app/app.component.ts
    
    import { Component } from '@angular/core';
    
    @Component({
      selector: 'my-app',
      template: <h1>Hello {{name}}</h1>
    })
    export class AppComponent { name = 'Angular'; }
    
    <!-- index.html -->
    <my-app>Loading AppComponent content here ...</my-app>
    
    这上面有个扩展文件.ts是一个[TypeScript]的例子。TypeScript是一个和JavaScript的衍生语言。可以理解为语法增强的一种方式,或者说是语法糖。一些命令行工具能够帮助解析这种语言。

    学习资源:

    Ember

    t0168e322322ab6bc69.jpg

    First Commit Apr 30, 2011 File Size: ?

    Ember和之前的几种也比较像,但它集成了Handlebars。对Handlebars不熟悉的解释下,这是一种解析静态页面的模板语言,和Jekyll(将纯文本转化为静态网站和博客)比较像。开发人员也是可以根据交互需要,在模板中加入JavaScript代码实现需求。

    “Ember是一款JavaScript框架,比较适用于在MVC模式的单页,客户端web应用”

    Ember可以被Node创建,并用于nodejs的模块开发。同时Ember也是一个命令行工具(如果你想用,用npm安装),它有一套完整的插件开发体系。它也可以根据命令行创建服务和一些环境变量。

    Ember的语法没有不寻常的地方,通过对象去创建我们要的类,并根据Handlebars模板生成页面。
    HTML:
    import Ember from 'ember';
    
    export default Ember.Controller.extend({
      firstName: 'Trek',
      lastName: 'Glowacki'
    });
    
    Hello, <strong>{{firstName}} {{lastName}}</strong>
    
    上面是一个简单的Ember例子。例子里面的代码继承自Ember controller 根据对象的属性值进行编译并生成想要的效果。

    这里值得提一下的是Ember的路由Ember’s router capabilities ,它允许在网页中随时停止。就是如果你有地址,根据你创建的路由规则,你就可以跳转到你需要的路由。(这个和服务端实现路由的方式有点像)Ember.js是免费的,开源资源和更新状态都会在Ember的官网看到。

    学习资源:

    结论

    框架的选择常常和开发人员个人喜好和对项目的长期眼光去看。如果你想更深的去探讨哪个框架好来帮助你选择的话,Vue有篇文章更为系统的描述了这些框架的差别,还包括Knockout,Polymer 和Riot。你也可以在上面提出你的问题,帮助你进行选择。

    原始来源

    已获得 laogui 的点赞。

留言

要发表留言,请注册并成为会员!