代码共享 -- Javascript code modules
一个Javascript?code?module是被放置在经过注册位置的简单js代码。?通过Components.utils.import()?or?Components.utils["import"]()方法来实现module的引用。
?
它允许在插件内部，将其它域的js对象放置在当前对象的域中使用。
看一个例子：
const?EXPORTED_SYMBOLS?=?['sayHello'];
?
function?sayHello(){
return ‘Hello World’;
}
?
?
除了有一个固定的const?EXPORTED_SYMBOLS?数组之外，和普通的js文件没什么区别。
第一句表示：将sayHello变量export到引用它的对象的域中。
可以来验证一下：
①、将HelloWorld插件做一些修改：
增加了一个core.js，增加了一个codeModules.js内容分别如下：
Components.utils.import('resource://module/codeModules.js');
window.addEventListener('load',?function()?{
gBrowser.addEventListener('DOMContentLoaded',?function(e)?{
?alert(sayHello());
},?false);
},?false);
?
const?EXPORTED_SYMBOLS?=?['sayHello'];
?
function?sayHello(){
return?'hello?world';
}
?
②、因为我们已经将content注册过了，所以接下来注册modules，修改chrome.manifest
resource?????????module???????chrome/modules/?
?
③、将core.js引入到页面，修改
<script?type="application/javascript"?src="chrome://sample/content/core.js"></script>
?
这样一来，打开任意一个页面，都会调用core.js里面的方法。
接下来看看core.js文件，一开始就通过：Components.utils.import('resource://module/codeModules.js');
引入了一个插件内的文件，然后就可以在core.js里面调用这个文件的方法了，当然前提是这个文件已经将这个方法给export了，如果要export多个方法，可以修改EXPORTED_SYMBOLS数组，添加一个新的变量即可。
运行结果，打开任意的页面，可以弹出：
?
这样就可以引申出一个设计架构，在插件开发的时候，个人觉得还是比较实用的：
可以设计一个类似于如下的Module，命名为util.js：
const?EXPORTED_SYMBOLS?=?['Util'];
?
var?Util?=?{
??__noSuchMethod__?:?function(aName,?aArguments)?{
????try?{
??????Components.utils.import('resource://module/utils/'?+?aName?+?'.js',
??????Util);
??????return?Util[aName].apply(Util,?aArguments);
????}?catch?(e)?{
??????throw?new?Error('Could?not?import?util?'?+?aName?+?':\n'?+?e);
????}
??}
}
?
这个Module有一个Util对象，它覆盖了?__noSuchMethod__这个方法，这个方法是FF暴露出来的接口，如何在某个对象上调用一个不存在的方法，在FF浏览器中，就会执行__noSuchMethod__方法，如果这个对象覆盖了这个方法，那么就会按照覆盖的方法执行。这样一来就可以把这个对象当做工具来使用了，如果调用它不存在的方法，它就会去引入以这个方法名为名字的资源文件，然后通过apply调用这个方法。
__noSuchMethod__的详细介绍，请参考：http://irving-wei.iteye.com/blog/1994948
?
?
如何使用这个Module？
?
在module目录下创建一个新的目录，命名为utils，将codeModules.js拖入其中，改名为sayHello.js。新的目录结构如下图：
?
接下来就可以修改core.js
Components.utils.import('resource://module/util.js');
window.addEventListener('load',?function()?{
gBrowser.addEventListener('DOMContentLoaded',?function(e)?{
?alert(Util.sayHello());
},?false);
},?false);
?
Build，安装插件，运行。
?
只要在util目录下添加以需要暴露的方法命名的a.js文件，就可以通过Util工具类在任意引入util.js的文件中调用a方法了，非常方便。
这个设计来源自GraseMonkey的源码分析。
<!--EndFragment-->