您可以使用自己的函数安全地扩展 Ti 或 Ti.UI 对象吗？答案

【问题标题】：Can you safely extend the Ti or Ti.UI object with your own functions?您可以使用自己的函数安全地扩展 Ti 或 Ti.UI 对象吗？
【发布时间】：2013-01-15 16:07:53
【问题描述】：

我正在开发一个中型 Appcelerator Titanium 应用程序。我想扩展 Ti.UI 对象，我想知道这是否安全。

我想做的事 将许多与 UI 相关的辅助函数和对象存储为 Ti.UI 树的一部分。

一个简单的例子是：

Ti.UI.COLORS = {
    RED: '#213234',
    BLUE: '#ABDCEF'
}

我最担心的是，这可能不安全，或者只是无法适应未来。

我为什么要这样做 我对 Titanium 的 JSS 有过不好的体验，我目前正在 CSS.js 文件中存储和检索我的文件。该文件捆绑了一些使样式更容易的函数和对象（如上面的颜色示例），并将它们与一长串样式类组合在一起，存储为对象。这些类使用辅助函数。

像这样：

//Provide helper functions
COLORS = { RED: 'etc' };
IOS_ANDROID = function(iosValue,androidValue){ 
    if (Device.isIOS) {

        return iosValue
    } else {
        return androidValue
    };

//Provide the styles as exports object (using commonJS)
exports.styles = {
    winHome: {
        backgroundColor: COLORS.RED
    },
    winProducts: {
        navBarHidden: IOS_ANDROID(true,false),
    }
}

现在我的应用已经长大了，这个样式对象的大小越来越烦人了。我正在尝试将样式拆分为几个 .js 文件并使用包含和要求组合它们（以及必要的功能）。所以我现在有一个“css-Home.js”、“css-Products.js”等。

这有点工作，但我目前需要在每个 css-.js 文件中重新包含/要求辅助函数。这感觉很尴尬。我试图严格遵守只使用 require() 而不使用 include() 的 CommonJS 实践。但是，如果我使用 require() 添加辅助函数，就像这样......

var cssHelpers = require('css-helpers.js')

...那么我需要在所有助手前面加上那个变量，就像这样...

exports.styles = {
    winHome: { 
        backgroundColor: cssHelpers.COLORS.RED,
    },
}

这就是为什么我想在应用初始化期间将这些基本的东西放入 Ti.UI 中。然后我将在任何地方都可以使用样式辅助函数。

【问题讨论】：

我认为扩展 Ti 对象是不好的做法。如果 Ti 决定使用你正在使用的东西，你会被淹没。我认为严格使用 CommonJS 方法很重要，但我认为有时候 include 是处理事情的正确方法。我会寻找另一种方式，而不是扩展 Ti 对象。
您知道Alloy 会为您完成这一切吗？也许你应该开始向它迁移？我有一个中型到大型项目，我能够成功迁移并且我没有回头！

标签： user-interface include styles titanium require

【解决方案1】：

如果您必须扩展默认对象，请尝试使用 applyproperties 方法，这是推荐的方法

【讨论】：

【解决方案2】：

我找到了一个不涉及更改 Ti.UI 的不错的解决方案。提示来自尝试在 Android 上运行该应用程序并发现它在不同部分之间传递的变量更少。所以我需要深入挖掘 CommonJS 的原理以及 require() 和 Ti.include() 的含义。

不必在我的 CSS 助手前面加上其父级名称的技巧如下：

在需要帮助函数的文件中需要一个 CSS-helpers.js 文件。
让 CSS-helper.js 的导出对象只返回一个函数。
请求后立即执行该函数。像这样：

//包含CSS辅助函数作为局部变量 require('shared/css-helpers')();
在 CCS-helpers 的一个导出函数中，使用 'this' 变量将函数直接应用到包含全局变量的 js 上下文中：

出口 = 函数（）{ this['IOS_ANDROID'] = 函数（ios,android）{ 等 }; this['otherHelperFunction'] = function(){}; }

现在，在包含 CSS-helpers 的文件中，您可以使用 IOS_ANDROID() 等辅助函数而无需任何前缀。这是因为 CSS-helpers 中的 'this' 变量指向调用函数的上下文。

【讨论】：