如上一篇博文所叙述的，一个很偶然的机会，我得知可以使用Javascript开发Fireworks插件，又注意到了视觉小伙伴的需求，于是便上手开发Fireworks Extension了。
很幸运的，在充斥着广告的搜素引擎中，我很快地发现已经有人撰写过关于Fireworks开发的教程。特此奉上链接 实战 Fireworks MX 插件开发指南，以免小伙伴们百度google之劳 。在此文中，作者很细致的讲解了Fireworks MX插架开发的步骤，按部就班地做下来，基本上你就可以写写简单的Fireworks插件了。但是，时光的飞逝总会为我们带来些变化，瞥见《实战 Fireworks MX 插件开发指南》的发布日期，2003年，那时候我应该还在学一元二次方程什么的东西，Fireworks也还没有被Adobe买下了。
本系列的文章，我会着重讲解Fireworks Extension开发中需要注意的东西，特别是一些《实战 Fireworks MX 插件开发指南》一文中没有提到的东西。
首先要给出的当然是Adobe那焕然一新的API接口。
和网页开发一样，开发Adobe插件的时候，第一个要了解的就是DOM模型。
在日常视觉工作中，我们编辑的每一个Fireworks文件称作Document。通过全局的fw对象，我们有两种方法访问到document对象。
方法一：
通过这种方法，我们可以通过文档的序数访问到文档。
方法二：
通过方法二，我们可以直接访问到当前激活的文件。
获取document之后，其实我们仅能操作该document当前page里面的东西。
通过changeCurrentPage方法，可以切换当前的page。在document对象中有一个pagesCount属性，返回page的总数。
在之后我们就可以访问到我们需要操作的各种object了。在Fireworks中，层文件夹也是一个element object, 你需要通过isLayer方法来判断元素是不是层。在document对象中，document.layers属性会储存所有document中的层对象的引用，无论怎么嵌套的层都可以在这个数组中直接遍历找到。
和获取document的方法类似，获取element也有两种方法。
方法一：
方法二：
两个函数的区别也和docment一样。
通过Firewokrs暴露出的接口，可以看到，Adobe更希望我们直接对dom进行操作，提供了两个直接获取当前文档和当前选中对象的函数。下一篇博文中我将进一步介绍Fireworks dom操作中的其他一些细节。
利用sourcemap来调试sass - 卡布其诺猫 阅读原文»
最近项目用上了sass,作为css的预处理器，它可以让我们用程序化的思维书写样式，极大的简化了css的开发，实在是前端居家旅行必备的利器。
我们都知道，在项目中，样式的频繁调试是不可避免的，用上sass虽说coding代码量减少，但调试过程着实让人崩溃。
看一段sass代码：
嵌套书写的结构在sass中经常会被用到。
编译之后的样式是这样的：
在开发工具上我们看到的是编译后的文件，而非编译前的源文件。
这个时候就产生一个问题了。在生产环境中，我希望看到的未经编译文件的调试信息，而非编译后的，因为这样会极大的方便开发人员。就像上面的截图，你能在scss文件下，快速定位到这些代码的位置吗？
~~~~~~~~~~~~~~~~~~~~~~~~无力吐槽的分割线~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
好在，sass在3.3.0之后版本提供了sourcemap功能。至于什么是sourcemap,这里有个链接大家可以参考下。
http://code.tutsplus.com/tutorials/source-maps-101--net-29173
本人本地依赖 Ruby来编译scss文件，如果你没安装Ruby，请自行安装，相关教程可以google......
如果你本地没有安装Ruby,只要装有node.js和Grunt，同样的，它们也可以用来编译scss文件.
本地装有Ruby的同学得首先确定sass(3.3.0+)和compass是否已经安装就绪。
命令行下运行：
如果没有安装这两个包的同学请执行：
gem install compass --pre
如果是版本过于陈旧请执行：
~~~~~~~~~~~~~~~~~~~~我是傲娇的分割线~~~~~~~~~~~~~~~~~~~~~
安装好sass和compass后，我们本地建立一个测试用的项目。
目录结构如下：
sass目录下有一个li.scss文件，我们的任务就是把li.scss编译到css目录下，同时生成sourcemap文件。
获取sass的相关用法可以在命令行下输入：
进入项目根目录，命令行下输入：
这时sass目录下的scss文件都处于被监听的状态，一旦文件被修改，便会及时编译到css目录下，同时生成相应的sourcemap文件。当然，编译的同时，命令行下的窗口会输出相应的信息，以便开发者调试。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~美丽不可方物的分割线~~~~~~~~~~~~~~~~~~~
到这一步，我们已经成功生成了sourcemap文件，可惜的是，在浏览器下查看，我们仍未看到相对应的scss文件。
这是为什么呢？我们拥有了souremap文件，却缺少了相应的解析工具。
Chrome是支持sourcemap的，但要使用该功能，我们得首先开启它。
开启的步骤很简单，我就不过多描述了，大家看下面的截图就好了。哦，还有，推荐大家把chrome的版本升到33+，因为我不确保较低版本的chrome能否支持sourcemap。
“F12”，调出开发者工具，点击如下图标：
在弹出的面板里，选择：
重启你的chrome。
回到页面下，这个时候你就可以看到sourcemap起作用了。
这个时候，若你想修改scss文件，根据行号便可以快速定位，非常方便。
~~~~~~~~~~~~~~~~~~我是寂寞的分割线~~~~~~~~~~~~~~~~~
这里延伸一下。
许多同学都喜欢用webstrome来编写代码，其实我们利用其的File Watchers功能很方便就能编译scss文件。
‘Ctrl+Alt+S’调出setting面板，搜索“file watchers”。
点击“添加”按钮
弹出如下面板：
这里我们重点填写下面两项：
Program:xxxxx 这里填入你ruby安装目录下的scss.bat文件（windows系统下）
Arguments:xxx 这里输入的是编译时的一些参数，我这里输入的是：
--no-cache --sourcemap --style compact $FileName$:$FileParentDir$\css\$FileNameWithoutExtension$.css
配置完这些选项，当我们修改*.scss文件，文件就会自动编译，特别方便。
~~~~~~~~~~~~~~~~~~~~~~~~~~~写在最后的分割线~~~~~~~~~~~~~~~~~~~~~~~~~~~~
最后，谢谢大家。
本文链接：利用sourcemap来调试sass，转载请注明。
没有评论:
发表评论