前端的一些工具

1.Reactjs

React不是一个完整的MVC框架,最多可以认为是MVC中的V(View),甚至React并不非常认可MVC开发模式;

  React引入了虚拟DOM(Virtual DOM)的机制,在浏览器端用Javascript实现了一套DOM API。

  React带来了组件化的开发思想。

  React认为一个组件应该具有如下特征:

    (1)可组合(Composeable):一个组件易于和其它组件一起使用,或者嵌套在另一个组件内部。如果一个组件内部创建了另一个组件,那么说父组件拥有(own)它创建的子组件,通过这个特性,一个复杂的UI可以拆分成多个简单的UI组件

(2)可重用(Reusable):每个组件都是具有独立功能的,它可以被使用在多个UI场景

    (3)可维护(Maintainable):每个小的组件仅仅包含自身的逻辑,更容易被理解和维护

*React入门:http://www.cnblogs.com/yunfeifei/p/4486125.html。

2.angular

   首先angular是一个MVC框架,致力于MVC代码解耦,采用model,controller以及view的方式去组织代码

   端对端的解决方案

AngularJS试图成为WEB应用中的一种端对端的解决方案。这意味着它不只是你的WEB应用中的一个小部分,而是一个完整的端对端的解决方案。这会让AngularJS在构建一个CRUD(增加Create、查询Retrieve、更新Update、删除Delete)的应用时显得很“固执”(原文为 opinionated,意指没有太多的其他方式)。但是,尽管它很“固执”,它仍然能确保它的“固执”只是在你构建应用的起点,并且你仍能灵活变动。AngularJS的一些出众之处如下:

    构建一个CRUD应用可能用到的全部内容包括:数据绑定、基本模板标识符、表单验证、路由、深度链接、组件重用、依赖注入

  测试方面包括:单元测试、端对端测试、模拟和自动化测试框架。

  具有目录布局和测试脚本的种子应用作为起点

  

特点:

#1 良好的应用程序结构
  通常情况下,我们编写 JavaScript 没有明确的结构。虽然在编写小应用程序的时候没有问题,但这显然是不适合于大规模的应用程序。使用 AngularJS,您可以通过MVC(模型 - 视图 - 控制器)或MVVM (模型 - 视图 - 视图模型)模式来组织源代码。 AngularJS 是一个 MVW 框架,其中W代表可以用于任何项目。你可以组织你的代码模块,它可显著提高应用程序的可测试性和可维护性。

#2 双向数据绑定
  数据绑定肯定是 AngularJS 最佳功能之一。你可以声明绑定的模型到 HTML 元素。当模型发生变化时,视图会自动更新,反之亦然。这可以减少大量的传统样板代码,保持模型和视图同步。

#3 指令
  AngularJS 指令让你使用 HTML 新语法快速的构建应用程序。您可以创建可重用的自定义组件与指令的API。例如,如果你想自定义日期选择器小部件,你可以创建一个<data-picker/ >组件。如果你想要一个奇特的文件上传与进度指示器可以继续创建一个<file-upload/ >组件。很酷,不是吗?

#4 HTML 模板
  AngularJS 使用 HTML 模板,这使事情变得简单,并允许设计人员和开发人员同时工作。设计人员可以按照通常的方式创建用户界面,而开发人员可以使用声明性绑定语法很容易配合不同的UI组件的数据模型。

#5 可嵌入、注入和测试
  关于 AngularJS 的最好的事情是,它是一个很好的团队成员。它从来没有要求全面承诺。AngularJS 官方网站说,你可以根据你需要使用尽可能多或尽可能少的在项目中使用 AngularJS。如果你只需要双向数据绑定,您可以引入 Angular,只是使用此功能。

  AngularJS 支持依赖注入的开箱即用。如果你需要的东西,你只要调用 Angular 来注入。就这么简单。这巨大的提高可测试性,因为你可以很容易地在测试的模拟组件。

  AngularJS 在创建时候始终考虑着可测试性。这些模块和依赖注入系统,使得单元测试更容易。此外, AngularJS 提供了一个称为量角器工具,这使得终端到终端的测试变得轻而易举。所以,你开发的代码始终是可测试性和可维护性。

3.Highcharts

  功能强大、开源、美观、图表丰富、兼容绝大多数浏览器的纯js图表库

地址:http://www.hcharts.cn/

4.Nodejs

简单的说 Node.js 就是运行在服务端的 JavaScript.
Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台.
Node.js是一个事件驱动I/O服务端JavaScript环境,基于Google的V8引擎,V8引擎执行Javascript的速度非常快,性能非常好

网站:http://nodejs.cn/

   http://www.runoob.com/nodejs/nodejs-tutorial.html

5.GRUNT

  Javascript的构建工具,神器

地址:http://www.gruntjs.net/getting-started

---恢复内容结束---

时间: 2024-10-13 04:19:37

前端的一些工具的相关文章

细说前端自动化打包工具--webpack

背景 记得2004年的时候,互联网开发就是做网页,那时也没有前端和后端的区分,有时一个网站就是一些纯静态的html,通过链接组织在一起.做网页就和用world编辑一个文档一样,只不过那个工具叫Dreamweaver.一个html页面,夹杂着css,javascript是再常见不过的事了. 随着前端的不断发展,特别是单页应用的兴起,这种所见即所得的IDE工具,就渐渐地退出了前端的主流.一个应用,通常只有一个静态页面(index.html),甚至这个页面的body只有一个或少数几个div组成.这时有

web 环境搭建00前端自动化构建工具(gulp)

web 环境搭建----前端自动化构建工具(gulp): 1----先下载安装node.js 2----然后在node.js命令行安装:npm install gulp -g (全局下载安装gulp插件) 3----然后进入到项目文件夹(命令cd 文件夹名),在项目文件夹中安装依赖文件:npm install gulp --save-dev (根据依赖文件下载gulp插件) 4----在项目文件夹目录下初始化:npm init (初始化文件) {初始化文件后项目中会出现packgae.json文

ExtJs是当今最主流的前端界面开发工具之一

摘要:ExtJs是当今最主流的前端界面开发工具之一,功能强大,外观绚丽.虽然网上的开发文档很多,但是在实际应用中仍然会遇到很多问题,本文结合企业信息化.SAP ERP等实际项目开发经验,对使用ExtJs开发做了一个梳理和总结,特别对开发中遇到的重点问题进行了详细阐述,希望能够为大家提供一些帮助.    关键词:ExtJs  IMS  RIA 作用域 id冲突 风格统一1 引言    随着互联网技术的不断发展,网站的互动性越来越强,软件从C/S到B/S,又到了B/S结构的C/S界面体验,伴随着大量

前端自动化构建工具——gulp

gulp是基于流的前端自动化构建工具. 一.环境配置 gulp是基于nodejs的,所以没有 nodejs 环境的要先去安装好 然后给系统配上gulp环境 npm install -g gulp 再到某一工程目录下 跟grunt一般,也是需要package.json包依赖文件和一个入口文件 gulpfile.js(其他名字识别不了) 然后就类似的先装上gulp npm install gulp --save-dev 最基本的使用方式是这样:(使用jshint插件校验js代码) var jshin

转 WEB前端性能分析--工具篇

在线网站类: WebPageTest 说明: 在线的站点性能评测网站,地址http://www.webpagetest.org/ 补充: 其实这网站也是个开源项目,所以支持自己搭建一个内部的测试站点 ShowSlow 说明: showslow是yslow的数据收集与展示平台http://www.showslow.com/,它是一个开源的php项目,可以用来与firefox的yslow插件.page speed插件或者dynatrace通信,收集插件或程序所发送过来的信息并集中展示.只需要在dyn

前端工程师开发工具 &amp; 订阅网站

工具 ? Sublime Text ? Eclipse ? WebStorm ? NPM 调试工具:Firebug.HttpWatch.fiddler.IETester.CSS Lint.Chrome 订阅与关注: 前端周刊 码农周刊 前端乱炖 前端观察 前端开发 奇舞周刊 CNode社区 AngularJS社区 InfoQ w3cplus Startup News Hacker News Node Weekly HTML5 Weekly Stack Overflow JavaScript We

Brackets前端开发IDE工具

Brackets是一个开源的前端开发IDE工具,网页设计师和前端开发人员必备的前端开发IDE工具. 它能够使你在开发WEB网站实时预览你的网页,目前版本只适用于Chrome浏览器可以实时预览效果 支持中文,下载下来之后是英文,只需要在Debug中设置语言就可以使用熟悉的原生中文语言. 官网下载地址 http://brackets.io/

前端自动化构建工具Webpack开发模式入门指南

Webpack Webpack是时下最流行的模块打包器 它的主要任务就是将各种格式的JavaScript代码,甚至是静态文件 进行分析.压缩.合并.打包,最后生成浏览器支持的代码 特点: 代码拆分方案:webpack可以将应用代码拆分成多个块,每个块包含一个或多个模块,块可以按需异步加载,极大提升大规模单页应用的初始加载速度 智能的静态分析:webpack的智能解析器几乎可以处理任何第三方库 Loader加载器:webpack只能处理原生js模块,但是loader可以将各种资源转换为js模块 p

Web前端开发必备工具推荐

http://gaohaixian.blog.163.com/blog/static/12326010520114265223489/不管你做前端开发还是网页重构,前端工具都起着非常重要的作用,这里向大家推荐一些优秀,且被广为用之的前端开发工具.下面主要为大家 推荐的是辅助开发工具和网页调试工具. 1.前端开发必备工具之辅助开发工具篇 在这里推荐一些前端开发中可以是你提高开发效率的小工具,既小巧又方便: 一.截图,取色,量尺寸,屏幕录制工具 FastStone Capture 主要用途:截图,取

Viewport Resizer下载 谷歌前端自适应开发工具

原文链接:http://www.phpbiji.cn/article/index/id/107/cid/6.html Viewport Resizer下载 谷歌前端自适应开发工具 在前端开发过程中,随着移动端手持设备的普及,避免不了要适应各种大小的屏幕,所以测试工作在开发中尤为重要: 设定各个分辨率的浏览器在目前各大浏览器中都有展现,但是用起来都比较不方便,所以我们推荐一款谷歌的自适应插件 Viewport Resizer 下载地址: http://pan.baidu.com/s/1eSunB9