重用javascript代码（减少重复代码）

发布于 2024-09-27 11:34:01 字数 362 浏览 8 评论 0原文

当我在网页中制作一些组件时，我发现有很多重复的代码，例如，在我的页面中我想制作两个图表。

它们最大的区别在于数据存储和标题，但它们有许多相同的属性。

我通过定义 Ext.chart 的新实例来做到这一点：

var chart1=new Ext.chart.LineChart{config1};

var chart2=new Ext.chart.LineChart{config2};

config1 和 config2 中有很多相同的内容，有什么想法可以避免这种情况吗？

顺便说一句，我想到了 ext 中的扩展机制，但是我无法仅从 ext3.2 API 获得有关如何使用它的更多详细信息。

原文

When I make some components in my web page,I found there a so many duplicate codes,for example,in my page I want to make two charts.

THe biggest difference of them is the data store and the title,however they have many same attributes.

I do this by define a new instance of Ext.chart:

var chart1=new Ext.chart.LineChart{config1};

var chart2=new Ext.chart.LineChart{config2};

There are so many same contents in the config1 and config2,is there any ideas to avoid this?

BTW,I have thought the extend mechanism in ext,however I can not get more details about how to use it only from the ext3.2 API.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

遥远的她 2024-10-04 11:34:01

您可以扩展配置

var config = {
    // do you shared config here
}

// and apply any different/extending configs here
var config1 = Ext.apply(config, { title: "Title of config 1" }
var config2 = Ext.apply(config, { title: "Title of config 2" }

var chart1 = new Ext.chart.LineChart(config1);
var chart2 = new Ext.chart.LineChart(config2);

，如果您希望它更短：

var chart1 = new Ext.chart.LineChart(Ext.apply(config, {
    title: "Title of config 1"
});
var chart2 = new Ext.chart.LineChart(Ext.apply(config, {
    title: "Title of config 2"
});

编辑：使用 Ext.extend：

Ext.chart.LineChart = Ext.extend(Ext.chart.LineChart, {
    // put your shared config in here
});

var chart1 = new Ext.chart.LineChart({
    title: "Title of chart 1", 
    store: new Ext.data.Store({ ... });
});
var chart2 = new Ext.chart.LineChart({
    title: "Title of chart 2", 
    store: new Ext.data.Store({ ... });
});

You can extend config

var config = {
    // do you shared config here
}

// and apply any different/extending configs here
var config1 = Ext.apply(config, { title: "Title of config 1" }
var config2 = Ext.apply(config, { title: "Title of config 2" }

var chart1 = new Ext.chart.LineChart(config1);
var chart2 = new Ext.chart.LineChart(config2);

And if you want it even shorter:

var chart1 = new Ext.chart.LineChart(Ext.apply(config, {
    title: "Title of config 1"
});
var chart2 = new Ext.chart.LineChart(Ext.apply(config, {
    title: "Title of config 2"
});

Edit: With Ext.extend:

Ext.chart.LineChart = Ext.extend(Ext.chart.LineChart, {
    // put your shared config in here
});

var chart1 = new Ext.chart.LineChart({
    title: "Title of chart 1", 
    store: new Ext.data.Store({ ... });
});
var chart2 = new Ext.chart.LineChart({
    title: "Title of chart 2", 
    store: new Ext.data.Store({ ... });
});

回复收藏 0 原文

~没有更多了~