设为首页 收藏本站
查看: 621|回复: 0

[经验分享] Javascript开发之工具归纳

[复制链接]

尚未签到

发表于 2017-2-23 11:59:32 | 显示全部楼层 |阅读模式
写在前面
  由于JS开发对我来说是全新的技术栈,开发过程中遇到了各种各样的框架、工具,同时也感叹一下相对于.Net的框架(工具框架以及测试框架等)JS框架真的是太丰富了、社区的力量果然强大~~~也是由此希望本文能概括常用的框架以及一些基本理念,不断完善中,希望各位有经验的朋友能多多提意见。
0. 前端框架
Ember.js
  Ember.js是一套javascript的框架,Ember是一个雄心勃勃的Web应用程序,消除了样板,并提供了一个标准的应用程序架构的JavaScript框架。
  更多请参考《Ember.js系列文章》
Angular.js

  AngularJS是为了克服HTML在构建应用上的不足而设计的。HTML是一门很好的为静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了。所以我做了一些工作(你也可以觉得是小花招)来让浏览器做我想要的事。
  通常,我们是通过以下技术来解决静态网页技术在构建动态应用上的不足:
  类库 - 类库是一些函数的集合,它能帮助你写WEB应用。起主导作用的是你的代码,由你来决定何时使用类库。类库有:jQuery等
  框架 - 框架是一种特殊的、已经实现了的WEB应用,你只需要对它填充具体的业务逻辑。这里框架是起主导作用的,由它来根据具体的应用逻辑来调用你的代码。框架有:knockout、sproutcore等。
中文站:http://angularjs.cn/React.js
  许多人使用React作为MVC架构的V层。 尽管React并没有假设过你的其余技术栈, 但它仍可以作为一个小特征轻易地在已有项目中使用. ReactJs三大特性:UI层、VirtualDom、数据流
  中文站:http://reactjs.cn/
  一篇不错的入门介绍:http://www.cocoachina.com/webapp/20150721/12692.html
Backbone.js
  Backbone.js为复杂WEB应用程序提供模型(models)、集合(collections)、视图(views)的结构。其中模型用于绑定键值数据和自定义事件;集合附有可枚举函数的丰富API; 视图可以声明事件处理函数,并通过RESRful JSON接口连接到应用程序。
  官方地址:https://github.com/jashkenas/backbone/
  中文介绍:http://www.cnblogs.com/nuysoft/archive/2012/03/19/2404274.html
Knockout.js
  Knockout是一个轻量级的UI类库,通过应用MVVM模式使JavaScript前端UI简单化。
  Knockout有如下4大重要概念:

  • 声明式绑定 (Declarative Bindings)使用简明易读的语法很容易地将模型(model)数据关联到DOM元素上。


  • UI界面自动刷新 (Automatic UI Refresh)当您的模型状态(model state)改变时,您的UI界面将自动更新。


  • 依赖跟踪 (Dependency Tracking)为转变和联合数据,在你的模型数据之间隐式建立关系。


  • 模板 (Templating)为您的模型数据快速编写复杂的可嵌套的UI。
  简称:KO
  官方网站:http://knockoutjs.com
  @汤姆大叔 开发指南:http://www.cnblogs.com/TomXu/archive/2011/11/21/2257154.html
sproutcore.js
  SproutCore的目标是在浏览器中提供极佳的桌面效果应用而无需任何浏览器插件。所有这些都不是用什么新技术实现的,而是采用这几年广为应用同时又在不断发展的技术。SproutCore主要采用了JavaScript、HTML以及CSS,这样对后端系统就没什么限制了,显然是个优势。sproutcoreJS2.0是Ember.js前身。
  官方网站:http://sproutcore.com/
1. 基础知识篇
Node
  Node全称是Node.js是一套javascript运行时环境,实际上是对Google V8引擎的一个封装。
  Node.js官网:https://nodejs.org/
  Node.js中文社区:https://cnodejs.org/
  iyunv-Node.js专题:http://developer.iyunv.com/art/201109/290443.htm
Ember-cli
  Ember-cli是Ember.js的一套命令行工具,方便快捷的增加模板、路由、模型、视图等MVC结构,还提供有/无视图的测试框架,提高开发效率,是开发Ember.js必不可少的工具。
  官方网站:http://www.ember-cli.com/
ES6
  ECMAScript是一种由Ecma国际(前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Assocication)通过ECMA-262标准化的脚本程序设计语言。这种语言在万维网上应用广泛,它往往被称为JavaScript或JScript,但实际上后两者是ECMA-262标准的实现和扩展。
  博友介绍ES6的文章:http://www.cnblogs.com/Wayou/p/es6_new_features.html
  阮一峰的ES6书籍:http://www.ruanyifeng.com/blog/2014/04/ecmascript_6_primer.html
Travis CI
  Travis CI是在软件开发领域中的一个在线的,分布式的[1]持续集成服务,用来构建及测试在GitHub[2]托管的代码。这个软件的代码同时也是开源的,可以在GitHub上下载到[3],尽管开发者当前并不推荐在闭源项目中单独使用它。[4]
  它提供了多种编程语言的支持,包括Ruby,JavaScript,Java,Scala,PHP,Haskell和Erlang在内的多种语言。[5]许多知名的开源项目使用它来在每次提交的时候进行构建测试,比如Ruby on Rails,Ruby和Node.js。[5][6]
  注:目前在Github上Travis CI比较流行,其不仅仅是一个持续集成的框架,而且还能利用github上的更改“钩子”进行代码变化时自动运行测试,而且还可以将测试结果图标用Markdown的语法绑定到你自己的ReadMe.md中简单方便实用。
  Travis CI天生支持Node.js的语法无需指定语言,所以可以同时支持两种组合语言测试,例如Node.js+Python、Node.js+Scala等,但前提是Node.js+『』的组合。
  官方网站:https://travis-ci.org/
RESTful API
  RESTful架构是一种流行的互联网软件架构,它结构清晰,符合标准,易于理解,扩展方便。
REST是Representational State Transfer的缩写,翻译为“表现层状态转化”。表现层其实就是资源,因此可以理解为“资源状态转化”。
网络应用上的任何实体都可以看作是一种资源,通过一个URI(统一资源定位符)指向它。
  非常有价值的参考资料:RESTful JSONAPI,理解RESTful架构
2. 包管理工具篇
Npm
  NPM的全称是Node Package Manager[1] ,是一个NodeJS包管理和分发工具,已经成为了非官方的发布Node模块(包)的标准。
  如果你熟悉ruby的gem,Python的pypi、setuptools,PHP的pear,那么你就知道NPM的作用是什么了。
  Nodejs自身提供了基本的模块,但是开发实际应用过程中仅仅依靠这些基本模块则还需要较多的工作。幸运的是,Nodejs库和框架为我们提供了帮助,让我们减少工作量。但是成百上千的库或者框架管理起来又很麻烦,有了NPM,可以很快的找到特定服务要使用的包,进行下载、安装以及管理已经安装的包。
  官方网站:https://www.npmjs.com/
Bower
  Bower 是一个针对Web开发的包管理器。该工具主要用来帮助用户轻松安装CSS、JavaScript、图像等相关包,并管理这些包之间的依赖。
  功能有些类似于Component。不同之处是,Component是围绕GitHub系统构建的,而Bower既可以管理基于本地资源的包,也可以管理基于git系统的包。在Bower中,可以通过 component.json文件来定义包的名称、版本、代码中的主要元素、版本之间的依赖关系等。
  官方网站:
3. 编辑器篇
Sublime 3
  付费IDE。
  官方网站:http://www.sublimetext.com
WebStorm
  付费IDE,30天免费,JetBrains出品,提供大量插件。
  官方网站:http://www.jetbrains.com/webstorm/
HBuilder
  DCloud公司是为HTML5而生的一家创业公司。
HTML5要想普及,需要解决很多问题。业内俗称HTML5有“性工能”障碍,因为HTML5的性能、工具、能力都比不过原生。
DCloud为此推出了3个产品:HBuilder开发工具、HTML5plus增强浏览器引擎、mui前端框架。
HBuilder是所有产品的核心和入口。
我们希望把HBuilder打造成最好用的、免费的HTML5开发工具,让程序员可以更爽的开发HTML5应用。
  官方网站:http://dcloud.io/
Atom
  Atom IDE是由Github出品,目前免费并且部分开源,其强大的插件支持以及良好的界面样式深受一些极客码农的青睐,目前的版本是v1.0.1。
  官方地址:https://atom.io/themes
4. 测试框架篇
QUnit
  QUnit是一个强大的JavaScript单元测试框架,该框架是由jQuery团队的成员所开发,并且是jQuery的官方测试套件。Qunit是Jquery的单元测试框架,并且被广泛使用在各个项目中。
  官方网站:http://qunitjs.com/
Jshint
  JSHint 是一个JavaScript 的代码质量检查工具,主要用来检查代码质量以及找出一些潜在的代码缺陷。
  官方网站:http://jshint.com/
Selenium
  Selenium[1] 也是一个用于Web应用程序测试的工具。Selenium测试直接运行在浏览器中,就像真正的用户在操作一样。支持的浏览器包括IE(7、8、9)、Mozilla Firefox、MozillaSuite等。这个工具的主要功能包括:测试与浏览器的兼容性——测试你的应用程序看是否能够很好得工作在不同浏览器和操作系统之上。测试系统功能——创建回归测试检验软件功能和用户需求。支持自动录制动作和自动生成 .Net、Java、Perl等不同语言的测试脚本。Selenium 是ThoughtWorks专门为Web应用程序编写的一个验收测试工具。
  官方网站:http://www.seleniumhq.org/
WebDriverTest
  说起Web自动化测试,首先想到的就是Selenium。其实WebDriver就是基于Selenium的一个自动化测试类库,但它不再是运行在浏览器内的JS程序,而是自己可以控制浏览器。旨在改进Selenium1.0中出现的诸多问题,并且提供了非常易用、可读性很强的API。
5. JS类库
Underscore.js
  Underscore 是一个 JavaScript 工具库,它提供了一整套函数式编程的实用功能,但是没有扩展任何 JavaScript 内置对象。 他解决了这个问题:“如果我面对一个空白的 HTML 页面,并希望立即开始工作,我需要什么?” 他弥补了 jQuery 没有实现的功能,同时又是Backbone 必不可少的部分。
  Underscore 提供了100多个函数,包括常用的:mapfilterinvoke — 当然还有更多专业的辅助函数,如:函数绑定、JavaScript 模板功能、创建快速索引、强类型相等测试等等。
  中文地址:http://www.bootcss.com/p/underscore/
Lodash.js
  lodash 是一个 JavaScript 实用工具库,提供一致性,模块化,性能和配件等功能。
  与UnderscoreJs合并消息? http://www.infoq.com/cn/news/2015/06/underscore-lodash-merging?utm_campaign=infoq_content&
  精彩文章:http://ju.outofmemory.cn/entry/106512
  官方地址:https://lodash.com/
6. 模块打包/加载工具
Webpack
  模块打包器,主要目的是捆绑浏览器中应用的Javascript文件,支持同步(CommonJS/NodeJs)和异步加载(AMD),同时包含转换、打捆、打包等功能,代替RequireJS。
  主要优势:

  • 模块来源广泛,支持包括npm/bower等等的各种主流模块安装/依赖解决方案
  • 模块规范支持全面,amd/cmd以及shimming等一应具全
  • 浏览器端足迹小,移动端友好,却对热加载乃至热替换有很好的支持
  • 插件机制完善,实现本身实现同样模块化,容易扩展
  依赖资源/JS库:

  • esprima
  • enhanced-resolve
  • uglify-js
  • mocha
  • should
  • optimist
  • async
  • mkdirp
  • clone
  不错的入门指迷:http://segmentfault.com/a/1190000002551952
  入门介绍:https://github.com/petehunt/webpack-howto(译文http://segmentfault.com/a/1190000002552008)
RequireJS
  JS文件模块加载器,可以在前端或者Node环境下。
  官方网站:http://requirejs.org/
Browserify
  Browserify本身不是模块管理器,只是让服务器端的CommonJS格式的模块可以运行在浏览器端。这意味着通过它,我们可以使用Node.js的npm模块管理器。所以,实际上,它等于间接为浏览器提供了npm的功能。
  同样功能的Browserify和Webpack的对比:http://www.oschina.net/translate/browserify-vs-webpack
  通俗易懂的介绍:http://www.ruanyifeng.com/blog/2014/09/package-management.html
Component
  Component是Express框架的作者TJ Holowaychuk开发的模块管理器。它的基本思想,是将网页所需要的各种资源(脚本、样式表、图片、字体等)编译后,放到同一个目录中(默认是build目录)。项目停止,不再维护。
Duo
  Duo是在Component的基础上开发的,语法和配置文件基本通用,并且借鉴了Browserify和Go语言的一些特点,相当地强大和好用。
Grunt
  前段自动化构建、打包、代码压缩小工具
  简介:http://www.cnblogs.com/yexiaochai/p/3603389.html
  中文站:http://gruntjs.cn/
Gulp
  Gulp是一个构建系统,Grunt升级版本,它能通过自动执行常见任务,比如编译预处理CSS,压缩JavaScript和刷新浏览器,来改进网站开发的过程。
  简介:http://www.w3ctech.com/topic/134
  中文网站:http://www.gulpjs.com.cn/
Broccoli
  快速的、可信赖的管理通道,如同Grunt和Gulp。目前已被Ember.js采纳进来。
  官方网站;http://broccolijs.com/
  
  ----------------------------------------------------------------------------------------------------------------------------------------------------
未完待续
  2015.11.07 加入ReactJS、AngularJs、BackboneJs, UnderscoreJs
  2015.11.17 加入编辑器Atom、打包工具Webpack、Grunt、Gulp...

运维网声明 1、欢迎大家加入本站运维交流群:群②:261659950 群⑤:202807635 群⑦870801961 群⑧679858003
2、本站所有主题由该帖子作者发表,该帖子作者与运维网享有帖子相关版权
3、所有作品的著作权均归原作者享有,请您和我们一样尊重他人的著作权等合法权益。如果您对作品感到满意,请购买正版
4、禁止制作、复制、发布和传播具有反动、淫秽、色情、暴力、凶杀等内容的信息,一经发现立即删除。若您因此触犯法律,一切后果自负,我们对此不承担任何责任
5、所有资源均系网友上传或者通过网络收集,我们仅提供一个展示、介绍、观摩学习的平台,我们不对其内容的准确性、可靠性、正当性、安全性、合法性等负责,亦不承担任何法律责任
6、所有作品仅供您个人学习、研究或欣赏,不得用于商业或者其他用途,否则,一切后果均由您自己承担,我们对此不承担任何法律责任
7、如涉及侵犯版权等问题,请您及时通知我们,我们将立即采取措施予以解决
8、联系人Email:admin@iyunv.com 网址:www.yunweiku.com

所有资源均系网友上传或者通过网络收集,我们仅提供一个展示、介绍、观摩学习的平台,我们不对其承担任何法律责任,如涉及侵犯版权等问题,请您及时通知我们,我们将立即处理,联系人Email:kefu@iyunv.com,QQ:1061981298 本贴地址:https://www.yunweiku.com/thread-346223-1-1.html 上篇帖子: 探讨webapp的SEO难题(上) 下篇帖子: 作为Coder的利器记载
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

扫码加入运维网微信交流群X

扫码加入运维网微信交流群

扫描二维码加入运维网微信交流群,最新一手资源尽在官方微信交流群!快快加入我们吧...

扫描微信二维码查看详情

客服E-mail:kefu@iyunv.com 客服QQ:1061981298


QQ群⑦:运维网交流群⑦ QQ群⑧:运维网交流群⑧ k8s群:运维网kubernetes交流群


提醒:禁止发布任何违反国家法律、法规的言论与图片等内容;本站内容均来自个人观点与网络等信息,非本站认同之观点.


本站大部分资源是网友从网上搜集分享而来,其版权均归原作者及其网站所有,我们尊重他人的合法权益,如有内容侵犯您的合法权益,请及时与我们联系进行核实删除!



合作伙伴: 青云cloud

快速回复 返回顶部 返回列表