HTML5 - 标准组件与API开发

HTML5标准基本上可以在绝大多数浏览器上运行了（PC，移动浏览器，很多人还是用的老版本的浏览器，不兼容）但是现在这方面的应用还不是很多；更多的时候，我们都是在用标准的组件，由于组件本身的开发使用只是考虑了一般的应用或者发布者本身的业务需呀，并不一定完全符合自身业务的需求。比如Genoverse的开发。标准的DEMO由三个部分组成(碱基对【Ensembl】，基因【Genes】，【Regulatory Features】), 数据使用的是grch38 标准（欧洲）人体基因库。使用少数几行代码确实能轻松构建一个简单的应用：

 

var genoverseConfig = {};

 

var geneUrl= 'http://192.168.184.128:8080/eawebportal/EnsemblProxyServlet?ensembltype=gene&geneselector=__CHR__:__START__-__END__';

var stdUrl  = 'http://192.168.184.128:8080/eawebportal/EnsemblProxyServlet?ensembltype=std&geneselector=__CHR__:__START__-__END__';

var cfgPlugins = [ 'controlPanel', 'karyotype', 'trackControls', 'resizer', 'tooltips', 'fileDrop' ];

 

genoverseConfig.container = '#genoverse2';

genoverseConfig.width = 1240;

genoverseConfig.genome = 'grch38';

genoverseConfig.start = 32889611;

genoverseConfig.end = 32973805;

genoverseConfig.plugins = cfgPlugins;

genoverseConfig.tracks = new Array();

genoverseConfig.tracks.push(Genoverse.Track.Scalebar);

genoverseConfig.tracks.push(Genoverse.Track.extend({

         name    : 'Ensembl',

         controller : Genoverse.Track.Controller.Sequence,

         model   : Genoverse.Track.Model.Sequence.extend({

         url            : geneUrl,

         dataRequestLimit : 10000000

   }),        

   view     : Genoverse.Track.View.Sequence,

   resizable  : false,

}));

genoverseConfig.tracks.push(Genoverse.Track.Gene);

genoverseConfig.tracks.push(Genoverse.Track.extend({

         name        : 'Regulatory Features',

         url          : stdUrl,

         resizable     : 'auto',

         model       : Genoverse.Track.Model.extend({ dataRequestLimit : 5000000 }),

         setFeatureColor : function (f) { f.color = '#AAA'; }                     

}));

 

当然也可以通过定制一个TRACKER来显示：

 

Genoverse.Track.extend({

                       name       : 'Ensembl', // 名字，显示在TRACK的右边

            …

                       controller    : Genoverse.Track.Controller.MyCustController,

                       model      :Genoverse.Track.Model.MyCustModel,

                       view       : Genoverse.Track.View.MyCustView,

                       resizable    : false,

}));

 

MVC，太古老了，回到施乐实验室，N年前的事了。 ：），不用解释

 

但是一个明显的问题是，整个Container受限于 __CHR__:__START__-__END__，这也意味着所有的TRACK数据的展示必须在这个约束范围内，不一定完全匹配需求。

 

当然数据的分析也是一个重要的环节，不然怎么做？总之，需要花时间弄清楚真个源代码体系。更要懂HTML5编码，不然怎么改造？但是在组件开发流行的今天（往往有短平快的压力），要找一个基础开发的人员确实是很困难了。真的，能用简单的API构造应用的越来越少了，很难做出特色的应用。并且有时候，利用现成的组件，不一定快多少，当然可以改变需求, 这也是一个思路。 ：）

 

知道有个什么东西，什么东西用什么东西做的，真的不一定能有多大的帮助。 很多时候我们需要的是程序员而不是程序猿。