创建一个 ember-cli-addon - 推酷
创建一个 ember-cli-addon
最近公司主项目用到了 ember + ember-cli，虽然当前前端业内推崇 react , 但是接触到 ember-cli 过后，被 ember-cli 的工程化震撼到了，相比于 react， 前者算是一个 lib , 而后者更应该算是一个框架，这篇文章的主题不打算完整的介绍一下 ember，出于公司需要建一个公共组件库的目的， 这里介绍一下 ember-addon 相关的技术细节
为什么需要 addon
addon 也就是插件模式，对于有多个 ember-cli 项目的情况，需要将公共的部分以组件的方式剥离出来，addon 就是 ember-cli 提供的剥离方式
如何创建一个 addon
如何创建一个 addon 的部分，我直接提供文章参考链接了，本文更多的介绍一些其中遇到的细节问题和关键点
ember-cli 加载addon 的方式
ember addon 是通过 npm 模块管理的，可以将 addon 发布到 npm 仓库当中， 当运行
的时候， ember-cli 会根据 package.json 里边的依赖遍历所有组件，如果发现组件的 package.json 的 keywords 里边有
&keywords&: [
&ember-addon&,
那么就判断为一个 ember addon 并加载
addon 目录结构
主要的几个目录:
对于 app 目录，ember-cli 会将这个目录合并到 项目的 app 目录中，合并并不是意味着写法能完全和项目 app 目录一致，有两个需要注意的点：
app 不支持 pod 方式，具体参考这个 issue
style 不支持 less、sass
对于 addon 目录里边的文件，可以在项目代码里边当模块 import 进去，比如
// file your-addon/addon/components/your-component.js
import co from 'your-addon/components/your-component'
app 目录合并，addon 目录引用这两个点应该是 addon 机制的核心， 理解了就知道怎么去创建一个组件了
对于 vendor 目录里边的文件，可以直接通过 ‘your-addon/vendor/file’ 的路径引用, 所以如果想在 addon 中使用 less, 可以如下方式
// file your-addon/vendor/styles/style.less
// project/app/style/app.less
import 'your-addon/vendor/styles/style.less';
ember-cli 开发测试
写完 addon 总要有地方看看 addon 写成什么样子，目前有两种方式
在 your-addon/test 目录下面有个 dummy project
your-addon$ ember s
直接在 addon 项目目录 启动服务， 会基于 dummy 项目启动一个 project，这个项目和其他的项目完全一样，找到 application.hbs , 在其中引用组件就行
在一个项目中直接引用组件, 通过 npm link 的方式在项目中建立一个对组件的映射
your-addon$ npm link
your-project: npm link your-addon
your-project: vim package.json // 依赖中添加 &your-addon&: &*&
常见的一个问题
初始化的项目 ember s ，打开浏览器会报错， 原因是 jQuery 的版本问题（这都能 breakdown 整个项目，醉了），修改 bower.json 中的 jQuery 版本为 1.11.3 , 重新 bower install 就能 work 了
已发表评论数()
已收藏到推刊！
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
没有分页内容
图片无法显示
视频无法显示
与原文不一致Lavavel 不必过多介绍了， 作为全世界最流行的PHP框架，有着清晰的架构、完善的文档、丰富的工具等等，能够帮助开发者快速构建多页面web应用程序。
然而，随着技术的发展，web程序的另一面??客户端，正在变得越来越多元（PC，手机，平板，其他专用设备等）。所以需要一种统一的机制，方便服务器与不同的设备进行通信。Restful API 就是基于这个思想被提出来的。
阮一峰给出了对Restful架构的总结：
每一个URI代表一种资源；
客户端和服务器之间，传递这种资源的某种表现层；
客户端通过四个HTTP动词，对服务器端资源进行操作，实现&表现层状态转化&。
从行为上讲，就是服务器在约定好一套资源交互规则之后，依据该规则，通过统一的API接口与不同的前端设备进行交互。服务器只需要专注于数据的存储与分析，或曰业务逻辑的实现。在不同客户端上，其表现逻辑和交互逻辑与服务器端的业务逻辑实现了双重分离??逻辑分离与物理分离。
如果前后端只有资源（数据）的交互，那么页面路由自然当交给前端控制，相当于前端在首次加载页面后就不再进行全页面的刷新，所有的数据通过ajax从后端随取随用，所有的表单提交也是同样方法，这就是一个单页面应用（Single Page Application, SPA）。
Ember.js是一个模块化的前端框架，基于MVC理念，它提供了UI绑定、模板系统、路由系统等功能，非常适合SPA的快速开发。特别是Ember还提供了一个完整的命令行开发包??Ember Cli，不仅省去了繁琐的开发环境配置，还提供了丰富的开发与构建工具，例如，你立即就可以用CoffeeScript甚至ES6进行开发，相应的解释器已经随开发包安装妥当，在启动 ember server 的情况下，你也不必每次改动都在命令行键入 ember build，系统自动识别文本改动并进行解释与合并，将编译好的文件放在 dist/ 目录下。
然而，当我把 Laravel 和 Ember.js 分别配置妥当之后，发现我并不能马上撸起袖子写代码，因为他们并不是为彼此而生的。例如，此时我就面临着两个问题：
Laravel 与 Ember.js 有各自的路由系统，如何让 laravel 出让自己对 URL 的控制？
用户授权通常是由服务器管理和维护的，Laravel 提供完整的 authentication 方案，但在SPA 中后端不得不出让一部分权限控制给前端（主要是页面访问权限和为ajax授权），解决这个问题的最佳实践是怎样的？
我相信之前已经有很多人遇到类似问题，该问题可能有通用的原则指导，但在操作层面与具体的框架相关，限于篇幅，本文讨论第一个问题。第二的问题另作回答。
定义API接口
在laravel中，laravel/app/Http/routes.php 文件是所有 URL 的入口，所有的 URL 和相应的处理函数都应当在这里定义。
//&laravel/app/Http/routes.php
Route::group(&array(&'prefix'&=&&'api/v1'&),&function()
&&&&//&USERS&API&==================================
&&&&Route::get('users/{id}',&'UserController@getById');
&&&&Route::delete('users/{id}',&'UserController@destroyById');
&&&&Route::put('users/{id}',&'UserController@updateById');
&&&&Route::post('users',&'UserController@storeNew');
&&&&//&OTHER&API&==================================
&&&&//&......
我将所有API放入一个路由组，这个组约定API请求必须以 api /【版本号】作为前缀，例如需要服务器返回 id=5 的用户信息，应当向如下地址发出 GET 请求：
&&&&http://your_demain/api/v1/users/5&&&&
服务器收到该请求后将 request 对象传递给 UserController 的 getById 成员方法做处理。
我还在该文件中定义了用户授权的相关接口，并将它们分在一组：
//&laravel/app/Http/routes.php
Route::group(&array&(&'prefix'&=&&'auth'&),&function()
&&&&Route::post('login',&'Auth\AuthController@postLogin');
&&&&Route::get('logout',&'Auth\AuthController@getLogout');
&&&&Route::post('register',&'Auth\AuthController@postRegister');
三个接口分别提供登录、登出和注册功能。
好了，laravel 的路由只需要做这么多事情。
将其他URL的控制权交给前端
Ember页面启动时以 ember/dist/index.html 文件作为入口，dist 目录存放着所有构建好的文件，均为系统自动生成。在 index.html 文件中，从ember/dist/assets 目录加载了2个脚本文件和2个样式文件：
&!--&ember/dist/index.html&--&
&!DOCTYPE&html&
&&&&&!--&其他head标签&--&
&&&&&link&rel=&stylesheet&&href=&assets/vendor.css&&
&&&&&link&rel=&stylesheet&&href=&assets/ember-app.css&&
&&&&&script&src=&assets/vendor.js&&&/script&
&&&&&script&src=&assets/ember-app.js&&&/script&
这4个文件包含了所有前端的逻辑和样式。而 laravel 以 laravel/public 作为项目根目录，该目录下保存了由 laravel 构建好的前端资源。所以我的处理方式如下：
????同步 ember/dist/assets 与 laravel/public/assets 两个目录，后者是前者的镜像
??在 laravel/resources/views 定义一个 view 命名为 app.php，它的内容是&ember/dist/index.html 的拷贝??
??laravel 拿到除 API 与 AUTH 之外的请求（之后统称非API请求），均返回 app.php??????
在正常使用时，前端只在首次加载时发出非API请求，一旦拿到 app.php 前端就获得了对应用表现层的控制，只要不刷新页面，之后用户与应用的所有交互都将由前端捕捉与控制。
具体操作如下：
由于我在 windows 下做开发，系统不提供直接同步两个本地目录的工具， 而且也没有找到实时自动同步的第三方桌面应用，最后选择了名为 InSync 的一款软件，每次同步都需要手动点击一下，是一个潜在的效率瓶颈。
在&laravel/resources/views 目录下创建 app.php 文件， 将&ember/dist/index.html 的内容拷贝过来。
在&laravel/app/Http/routes.php 中创建一个新的路由分组：
//&laravel/app/Http/routes.php
Route::get('{data?}',&function()
&&&&return&View::make('app');
})-&where('data',&'.*');
该分组捕捉所有非API请求并返回 app.php。
前端具体实现
在Ember中，每个路由都有与之相关联的一个模型（Model）。Model 负责数据的查询、更改和将更改保存回服务器，这一过程是通过模型适配器（Adapter）完成的。所以需要修改适配器让它匹配后端所定义的 API 前缀约定：
//&ember/app/adapters/application.js
export&default&DS.RESTAdapter.extend({
&&&&namespace:&'api/v1'
然后就可以在&ember/app/routers.js 中定义前端路由了：
//&ember/app/routers.js
Router.map(function()&{
&&&&this.route('user',&{&path:&'/user/:user_id'&});
&&&&//&Other&routes&...
这里有个不得不提的问题：
Ember 中每一个 Model 可以视为一种资源，而 Model 已经定义好了与这种资源的各种交户行为。例如当我定义好 userModel 之后，我要向服务器查询一条 user 记录可以使用如下代码，注释给出了它的网络请求（省略了前缀）：
this.store.find('user',&5);&&&&//&=&&GET&'/users/5'
新建一个用户：
var&user&=&this.store.createRecord('user',&{&&
&&&&email:&'',&&
&&&&password:&'123'
user.save();&&//&=&&POST&to&'/users'
这一默认行为是不可配置的，所以后端提供的 API 必须配合该规则进行构建，这也是使用大型框架所带来的灵活性的的缺失。在需要大量定制化功能的应用中，轻量级的前端框架例如 backbone 更具有竞争力。
Ember意识到了这个问题，在最新的2.0版本中，可以通过自定义服务（Service）来解决。
至此，确定了页面加载方案，打通了前后端的数据交互通道，前后端由各自为政变成了相互协作、各司其职，应用终于“活”了起来。您所在的位置： &
开发者眼中最好的 22 款 GUI 测试工具
开发者眼中最好的 22 款 GUI 测试工具
慧都控件网 编译
Abbot是一个基于GUI的简单的Java测试框架，它能够帮助开发者测试Java用户界面。 它提供事件自动生成和验证Java GUI组件，使您能够轻松地启动，探索和控制应用程序。
是一个基于GUI的简单的Java测试框架，它能够帮助开发者测试Java用户界面。 它提供事件自动生成和验证Java GUI组件，使您能够轻松地启动，探索和控制应用程序。开发者可通过脚本和编译代码两种方式来使用Abbot框架，这就是为什么它被认为是在开发者的系统 测试和QA的功能测试中都能用到的最完美的GUI测试工具。
498)this.width=498;' onmousewheel = 'javascript:return big(this)' alt="测试工具abbot" src="/wyfs02/M01/2C/EE/wKiom1ORIevgNwFcAADaXeSBkgY706.jpg" />
2.EggPlant - GUI自动化测试工具
EggPlant 是一个QA的GUI自动化测试工具，它是为使专业商业软件的应用程序测试和手工测试更加简单方便而特别设计的。 因为它不与底层代码进行交互,并且使用图像匹配技术与被测试的所寻找的对象级别应用程序完全不同，所以EggPlant是用于对那些出现问题的应用程序进 行QA自动化测试和黑盒测试的最理想的工具，而这些出现问题的应用工具包括Flash, java, HTML, .Net, Silverlight等。
498)this.width=498;' onmousewheel = 'javascript:return big(this)' alt="测试工具EggPlant" src="/wyfs02/M00/2C/ED/wKioL1ORIb_AY2KIAABFo0j0OQc805.jpg" />
3.GUIdancer - Eclipse的GUI自动化测试工具
GUIdancer 是一个用于GUI自动测试的Eclipse测试工具，这个工具强大的行为库可以用于创建Java 和 HTML应用的功能测试。 它可以让那些以前没做过编程工作的测试人员编写模块化的灵活的测试 。 创建测试只需从GUIdancer库中所需的模块拖放即可完成。
498)this.width=498;' onmousewheel = 'javascript:return big(this)' alt="测试工具GUIdancer" src="/wyfs02/M01/2C/ED/wKioL1ORIb-gVhwAAABUcn5rcyY492.jpg" />
4.HP WinRunner
HP WinRunner&是一个自动化的GUI功能测试工具，它支持用户以测试脚本的形式记录和回退UI的交互。由于它能获取、验证和自动回退用户的交互，因此你可以识别缺陷和确定业务流程是否按照所设计的那样工作。
498)this.width=498;' onmousewheel = 'javascript:return big(this)' alt="测试工具HP WinRunner" src="/wyfs02/M02/2C/EE/wKiom1ORIeyDeqciAACzhINqTOU418.jpg" />
5.IcuTest - GUI单元测试工具
IcuTest是用于WPF应用程序上的GUI单元测试工具。它不仅仅是另外一个能记录和回退的自动化系统，它还可以直接与你的测试框架相结合。开发者可以通过测试代码同时进行调试来测试应用，在没有打开整个应用和个人GUI组件的情况下这种测试也是很容易的。
498)this.width=498;' onmousewheel = 'javascript:return big(this)' alt="测试工具IcuTest" src="/wyfs02/M00/2C/EE/wKiom1ORIezRNgHeAACTAp3Bs6A783.jpg" />
iMacros是用于网络测试 、自动化网络和数据提取的独特工具，它不但能记录你的工作，还能回放你那些重复的工作。它能够填充表格并自动化的下载和上传文本、图片、文件和网页，也可以轻松的将你的数据通过CSV或XML文件格式或数据库或任何其他来源导入/导出到web应用程序。
498)this.width=498;' onmousewheel = 'javascript:return big(this)' alt="测试工具iMacros" src="/wyfs02/M01/2C/ED/wKioL1ORIb-iTskgAAClzaXkkv8604.jpg" />
7.FitNesse
是一个完整独立的Wiki站点&&包含一个网络服务器和自动化测试工具。它完美的应用于协作验收测试，而提供详细描述系统功能的可读信息的单元测试则不是它的菜。
498)this.width=498;' onmousewheel = 'javascript:return big(this)' alt="测试工具FitNesse" src="/wyfs02/M02/2C/ED/wKioL1ORIcDSv8XzAACiT4pMTV8645.jpg" />
8.Maveryx - 开源的自动化测试框架
Maveryx是一个用于Java 应用程序功能、回归、GUI和数据驱动测试的新型自动化工具。 它不需要任何用于构建和执行测试的GUI图形，而是使用GUI对象探测器来测试GUI对象并在运行的时候通过操作控制它来进行直接识别。
498)this.width=498;' onmousewheel = 'javascript:return big(this)' alt="测试工具Maveryx" src="/wyfs02/M00/2C/EE/wKiom1ORIe3SHOMIAACZYX5HlfI303.jpg" />
QAliber是一个用于 windows操作系统平台下桌面和网络应用的免费和开源的GUI自动化测试工具。它包含一套用于 .NET下自动化开发的工具和一个无需任何编码知识技能的GUI自动化编写工具。
498)this.width=498;' onmousewheel = 'javascript:return big(this)' alt="测试工具QAliber" src="/wyfs02/M01/2C/EE/wKiom1ORIe2CJzu7AACL1mFYQNw846.jpg" />
10.Selenium - 软件测试
Selenium 是一组跨越多种平台的web应用程序自动化测试工具 。通过使用Selenium，开发人员在不需要学习任何测试脚本语言的情况下，可以很容易地使用记录/回放测试工具来编写测试。Selenium 是真正的多平台、多浏览器测试工具，提供对一些流行的编程语言的支持，包括c#、Java、Groovy、Perl、PHP、Python、Ruby和各 种流行的测试框架。
498)this.width=498;' onmousewheel = 'javascript:return big(this)' alt="测试工具Selenium" src="/wyfs02/M02/2C/ED/wKioL1ORIcCTH8zZAACMcHD2gUY129.jpg" />
11.SWTBot - 标准桌面小程序工具包
SWTBot 是一个基于java的用于SWT测试的UI和功能测试工具，是一个基于Eclipse的应用程序， 它还为开发人员提供了API的阅读和编写应用程序。 这对开发者甚至所有人来说，测试UI都变成了一件极其简单的事情了。 SWTBot集成了Eclipse插件，可以记录和回放测试，并提供了ant任务。这样您就可以从CruiseControl内部运行你的构建项目或使用 任何其它CI工具。
498)this.width=498;' onmousewheel = 'javascript:return big(this)' alt="测试工具SWTBot" src="/wyfs02/M00/2C/ED/wKioL1ORIcHzbWpoAACefRzBSig082.jpg" />
12.Tellurium - 自动化测试框架
Tellurium是一个基于web应用程序UI模块的自动化测试框架 。它是一个将各种UI元素聚合在一起的集合，代表了一种嵌套了基本UI元素格式的复合UI对象。
498)this.width=498;' onmousewheel = 'javascript:return big(this)' alt="测试工具Tellurium" src="/wyfs02/M01/2C/EE/wKiom1ORIe6jICD0AADHMWR9Ykk212.jpg" />
Watir 是一个基于Ruby网络应用的开源的网络UI测试工具。在网络应用开发中，它作为工具包被用于基于浏览器的自动化测试。
498)this.width=498;' onmousewheel = 'javascript:return big(this)' alt="测试工具Watir" src="/wyfs02/M02/2C/EE/wKiom1ORIe6xt5GbAADSK84irFk755.jpg" />
Watin 是一个用于.net的网络应用测试工具。 它用c#编程语言编写，旨在给你提供一个在IE和火狐的浏览器中使用.net进行自动化测试的简单方法。
498)this.width=498;' onmousewheel = 'javascript:return big(this)' alt="测试工具WatiN" src="/wyfs02/M00/2C/ED/wKioL1ORIcHiFGlfAACvyBdCFUw129.jpg" />
15. Ranorex - 自动化测试工具集
Ranorex 是新一代易于使用和容易理解的自动化测试工具集。 它允许开发人员通过记录UI操作而不需要编写任何代码来完成自动化UI测试。这个工具集在完全与Visual Studio兼容以后，开发人员能够很容易在 Ranorex Studio 搭建的UI测试环境下打开和测试已经存在的项目。当然，对于那些全新的项目也是一样的。
498)this.width=498;' onmousewheel = 'javascript:return big(this)' alt="测试工具Ranorex" src="/wyfs02/M01/2C/ED/wKioL1ORIcHTWgxVAABvfZdySIA688.jpg" />
16.RIATest
RIATest是一个为 Adobe Flex应用程序设计的多平台GUI自动化测试工具 。
498)this.width=498;' onmousewheel = 'javascript:return big(this)' alt="测试工具RIATest" src="/wyfs02/M02/2C/EE/wKiom1ORIe7DFAG9AAC-ysUhfjM762.jpg" />
17.Autotest.net
Autotest.net是一个通过CLI进行内部通信的GUI测试平台。
498)this.width=498;' onmousewheel = 'javascript:return big(this)' alt="测试工具Autotest.net" src="/wyfs02/M00/2C/EE/wKiom1ORIe-j4QSlAACKE76BwEk776.jpg" />
18.Samurai网络测试框架
Samurai网络测试框架是一个生动的Linux测试环境，它预先配置好了在Web pen-testing环境下的各项功能。
498)this.width=498;' onmousewheel = 'javascript:return big(this)' alt="测试工具Samurai网络测试框架" src="/wyfs02/M01/2C/ED/wKioL1ORIcKTETvtAACGsCkBlx4451.jpg" />
Sahi是一个成熟、对测试者友好、面向商业的网络应用自动化测试工具。它通过使用代理将JavaScript插入网络页面，JavaScript会对网络应用进行自动化帮助。
498)this.width=498;' onmousewheel = 'javascript:return big(this)' alt="测试工具Sahi" src="/wyfs02/M02/2C/EE/wKioL1ORIcKxaQ1FAACw3LD_2YM744.jpg" />
loadUI是一个免费和开源的企业级负载测试工具。 它拥有一个可视化的可拖拽的界面，允许你在可交互和实时的状态下，进行创建、配置和重新分配负载测试 。
498)this.width=498;' onmousewheel = 'javascript:return big(this)' alt="测试工具loadUI" src="/wyfs02/M00/2C/EE/wKiom1ORIe-w8oh_AACOk6qkfzM847.jpg" />
21.SWAT - 简易网络自动化工具包
简易网络自动化工具包（简称SWAT）是一个允许用户在多个浏览器中进行自动化测试的测试工具。SWAT拥有一个适当集成了UI记录和SQL工具，由C#代码写成的健壮的编辑器。
498)this.width=498;' onmousewheel = 'javascript:return big(this)' alt="测试工具SWAT" src="/wyfs02/M01/2C/EE/wKiom1ORIe_T_JKUAAC5a0DoL7Q516.jpg" />
22.GTT & GUI测试工具
GTT是一个基于java swing应用的GUI测试工具。它提供了视图和模型声明两种机制来自动验证 AUT的正确性。
498)this.width=498;' onmousewheel = 'javascript:return big(this)' alt="测试工具GTT" src="/wyfs02/M02/2C/EE/wKioL1ORIcOSGkhSAACPKHwzW_4973.jpg" />
英文原文：&
译文来自：【编辑推荐】【责任编辑： TEL：（010）】
关于&&的更多文章
写给开发人员――苹果的最新一代移动操作系统已经正式与公众见面
所以姑娘，让我们做一枚花见花开的程序媛。
讲师： 13人学习过讲师： 51人学习过讲师： 36人学习过
如何看将流行的JavaScript MVC框架Ember.js? 这款Java
一周一周的过的很快，2013年已经进入了倒计时。开发频
在脚本语言领域，Lua是最快、最高效的脚本语言之一，
本书是程序员面试宝典系列中的一册，也是上一本《程序员面试宝典》的姊妹书。本书对程序设计面试中Java常见的题型和常用解答技巧
51CTO旗下网站