Question

我在Javascript中为我的ASP.NET应用程序做了一些工作。经过一段时间后，我获得了大量具有广泛Javascript功能的视图，但所有视图都在不同的视图中复制。现在我决定让事情变得更容易，并决定开始构建我自己的Javascript库。

所以，这是我第一次来的代码，有一个我将在屏幕上控制的paintedText（这是一个库原型，所以我采用了一个简单的函数进行测试。当然这可以做到很容易没有图书馆。）

图书馆：

/*
 * My first Javascript library
 */

paintedText = (function () {
    "use strict";

    paintedText = paintedText || {};

    paintedText = (function (id) {

        //Private Property
        var version = "1.0.0";

        //Public Property
        var color = null;

        var elementId = id;

        //Public Method
        setColor = function (color) {
            var dom = getMyDOM(document.getElementById(id));
            domElement.style = "color : " + color;
        }

        //Private Method
        function getElementObj() {

            if (elementId === undefined) 
                alert("Undefined " + elementId);
            else
                return document.getElementById(elementid);
        }
    })
})

index.html页面：

<head>
    <script type="text/javascript" src="myLib.js"></script>
</head>
<body>

<div id="test">
 <h1>TEXT TO CHANGE COLOR</h1>
</div>

<script type="text/javascript">

    $(document).ready(function () {
        var item = new paintedText ('test');
        alert ('Will change color.');
        item.setColor('red');
    });

</script>
</body>

我一直收到paintedText不存在的消息，我坚持认为。我希望有人可以帮我进一步......

所以问题是：

为什么那段代码不起作用？
我的代码是否受到保护（我需要插入我的页面并制作确定我的变量是唯一的吗？

非常感谢你的帮助。

Answer 1

对于初学者，如果要创建IIFE的实例，则需要构造函数。

此外，dom在其自己的函数中定义。

这样的事情怎么样：

var PaintedText = (function(){

    function pt(id){
        this.element = document.getElementById(id);
    }

    pt.prototype.setColor = function(color){
        if(!this.element) throw new ReferenceError('element not found');
        this.element.style.color = color;
    };

    return pt;

})();

var pt = new PaintedText('test');
pt.setColor('red');

http://jsfiddle.net/U6KS2/

构建我的第一个Javascript库时出错

1 个答案: