"JS Tips" JavaScript function as an object hiding problem

User Feedback

@ Disappearing keyboard feedback A question in the forum, in the Title model in APPBOXMVC, if you rename the Name property to the lowercase Name property, you will get an error:

Because this is an ASP. NET MVC project, this property is rendered to the page by Textboxfor, so name will be born as the id attribute of the DOM node:

f.simpleform ()                . ID ("SimpleForm1")                . Showborder (false)                . Showheader (false)                . Bodypadding (ten)                . Items (                    = = m.name)                    ,= = m.remark)                )

It's not a good idea, though, but there's no rule that the name string cannot be used as the value of the id attribute.

And on the other side, name is not a JavaScript keyword, it is impossible to conflict.

Analyze problems

or from the code, after a simple debugging, found id=name this text input box object can not find, and this object is stored on the f.ui above.

First we look at the definition of F.ui:

function (item) {    var itemType = F.gettype (Item.type | | ' Component ');     return New ItemType (item);};

In order to facilitate the user to write code, FINEUIMVC F.ui actually has two uses:

1. Used as a function: Create a control, you can create a control through F.ui in JS:

F.ui ({        ' button ', renderTo:document.body, Text: ' Buttons ', ID: ' button1 ',        listeners: {                  function  (event) {                        F.alert (' You clicked the button ');}}        );

2. As object: Save the control, you can refer to a control by F.ui in JS (such as the button created above):

F.ui.button1

Such an analysis problem comes, because the JS function itself is a property, here because F.ui is an anonymous function, so f.ui.name = = "(The function's Name property is an empty string)

For a normal function, this name property is the function name, as follows:

function test1 () {}console.log (test1.name)   // "Test1"

In fact, the JavaScript function has not only the name attribute, or length, caller, arguments, toString .... And so many properties, in the Chrome debugging tool can be easily viewed:

Therefore, when we try to save the text input box object named name to F.ui, it is not successful, and F.ui.name remains an empty string at this time.

Solve the problem

Since the two roles of F.ui have been well known by netizens and have been applied to many projects, it is not possible to abandon this practice because of conflict of several special attributes. So how to circumvent this problem?

We used an internal variable to hold the control instance on the page:

F._fjs_objects = {};

Also, in order to be compatible with the previous code, the F.ui function is still used to save the control instance, except that it must be judged before it is saved and not saved if the name passed in is a function property name:

function nameispropertyoffunction (name) {    return $.inarray (name, [' Arguments ', ' caller ', ' length ', ' Name ']) >=0 | |  function(objId, obj) {    = obj;         if (! nameispropertyoffunction (objId)) {        = obj;    }};

After optimization, all the previous code is not changed, and you can still get the control instance in two ways:

1. F (' ControlID ')
2. F.ui.controlid

For very special cases, the control ID is name, length, toString (of course, we strongly recommend that you name the control id!! ), the page does not go wrong, except that you can no longer get the control through F.ui.name, only by using F (' name ') to get the control object.

"JS Tips" JavaScript function as an object hiding problem