You will learn followings
- Cloning JavaScript Object with Object.create
- Develop Custom DOM object for Edge/Chrome
Cloning JavaScript Object with Object.create
We present another article focusing on understanding the concept of creating objects using Object.create. The article will discuss the advantages and disadvantages of using “Object.create” to clone objects. Let's take a look at this function in detail.
What is Object.create?
Object.create can be used to create a new object from an existing object. When we create an object using Object.create, an empty object is created, and the "proto" object is mapped to the copied object.
When the "proto" attribute matches the object to be copied, it creates a chained structure that makes the properties and functions of the old object available to the newly created object.
Let's look at the following using an example.
var empDetails =
{
name: "Ramesh Kumar",
age: 40,
designation: "Web Developer",
contactDetails: "+91-9988776655"
}
var newEmpObject = Object.create(userDetails);In the above example, we can see that we are trying to create a new Object using Object.create. A simple Object “empDetails” is passed to the same function. Let’s look for the debugger to look for the Object structure of new Object that is created out of this Execution.
While debugging we can observe that “newEmpObject” points out to an empty Object that contains internal “__proto__” property which maps to the “empDetails” object that is passed as a parameter to the “Object.create”.
Develop Custom DOM object for Edge/Chrome
We can also create our custom plugin or object. We'll create a JavaScript object and then create nested methods in this with same name we were having in IE DOM object. Under these methods we can write our custom logic to return the same values or perform same action.
Add jQuery reference before this code and then make a call to getDOM() method like
var domObject = new getDOM();
Now as you will type dot (.) after domObject. all method will starts appearing to you and you can use these methods and can also alter them as per your needs.
function getDOM() {
return Object.create(getDOMFORChrome);
}
//below is closures use above mathod to get object
var getDOMFORChrome = (function () {
var Xml = function () {
return true;
};
var ValidateOnParse = function () {
return true;
};
var Url = function () {
return "";
};
var Text = function () {
return "";
};
var ParentNode = function () {
return "";
};
var NodeName = function () {
return "";
};
var NodeValue = function () {
return "";
};
var NodeType = function () {
return 1;
};
var DocumentElement = function (docElements) {
getDOMFORChrome.documentElement = docElements.documentElementFull.firstElementChild;
getDOMFORChrome.documentElement.firstChild = docElements.documentElementFull.firstElementChild;
return getDOMFORChrome.documentElement;
};
var NextSibling = function () {
return "";
};
var PreviousSibling = function () {
return "";
};
var IsChild = function () {
return "";
};
var FirstChild = function () {
//sub-Child
return "";
};
var Childnodes = function () {
return "";
};
var NodeTypeValue = function () {
return "";
};
var NodeTypeString = function () {
return "";
};
var Abort = function () {
//stop execution
return true;
};
var AppendChild = function (newChild) {
return newChild;
};
var CloneChild = function (deep) {
return deep;
};
var LoadXML = function (bstrXML, propertyToBeCreated) {
//bstrXML: full XML in string format
// propertyToBeCreated : new node to be created.
try {
if (propertyToBeCreated === undefined || propertyToBeCreated === "") {
getDOMFORChrome.xml = bstrXML; // set data in existing XML property
} else {
getDOMFORChrome[propertyToBeCreated] = bstrXML; //data will be stored in newly created property.
}
return true;
} catch (e) {
getDOMFORChrome.xml = ""; // On Error Clear XML
getDOMFORChrome[propertyToBeCreated] = "";
return false;
}
};
var Load = function (xmlSource, propertyToBeCreated) {
var output = "";
var flag = true;
if (xmlSource.length > 0) {
try {
getDOMFORChrome.documentElement = getDOMFORChrome.documentElementFull.firstElementChild;
getDOMFORChrome.documentElement.firstChild["text"] = getDOMFORChrome.documentElementFull.firstElementChild.textContent;
} catch (e) { var message = e.message; }
var data = ajaxGetData(xmlSource, "text");
if (propertyToBeCreated === undefined || propertyToBeCreated === "") {
getDOMFORChrome.xml = data;
getDOMFORChrome.url = xmlSource;
getDOMFORChrome.text = data;
} else {
getDOMFORChrome[propertyToBeCreated] = data; //data will be stored in newly created property.
}
flag = true;
}
else {
flag = false; //not loaded
}
return flag;
};
var SelectNodes = function (docxml, queryNode) {
// Param docxml: is full XML
//Param: queryNode is the node which need to be searched from above XML
//debugger;
queryNode = queryNode.replace("//", "");
const txtArray = queryNode.split("/");
try {
var specificNode = txtArray[0]; //node name
} catch (e) { var message = e.message; }
var xmlDoc = $.parseXML(docxml);
$xml = $(xmlDoc);
sourceXML = $xml.find(specificNode); //Return required nodes
return sourceXML;
};
var SetAttribute = function (id, value, sourceXML, specificNode) {
//param :id, id of XML node.
//param : value, value of the new node.
//param :sourceXML, it is the complete XML text in which node need to be added.
//param :specificNode, it is the name of node which will get addded in above complete XML and then final text will get returned.
//debugger;
var test = "";
var xmlDoc = $.parseXML(sourceXML);
$xml = $(xmlDoc);
if (specificNode === undefined || specificNode === "") {
test = $xml.attr(id, value); //will add prpty at root
} else {
//var test = $xml.find('section').attr('marked', 'marked');
test = $xml.find(specificNode).attr(id, value);
}
sourceXML = test[0].outerHTML;
return sourceXML;
};
var GetAttribute = function (id, sourceXML, specificNode) {
debugger;
//param :id, id of XML node.
//param :sourceXML, it is the complete XML text from which node need to be found.
//param :specificNode, it is the name of node/attr whose text will be returned.
var xmlDoc = $.parseXML(sourceXML);
$xml = $(xmlDoc);
if (specificNode === undefined || specificNode === "") {
sourceXML = $xml.attr(id); //will return this prpty
} else {
//var test = $xml.find('section').attr('marked', 'marked');
sourceXML = $xml.find(specificNode).attr(id);
}
return sourceXML;
};
var SelectSingleNode = function (docxml, queryNode) {
// Param docxml: is full XML
//Param: queryNode is the node which need to be searched from above XML
const data = "";
try {
debugger;
//If node and attribute both will be passed in 'queryNode' param
queryNode = queryNode.replace("//", "");
const txtArray = queryNode.split("/");
var xmlDoc;
try {
var specificNode = txtArray[0]; //node name
var id = txtArray[1]; // Attribute in above seleted node
xmlDoc = $.parseXML(docxml);
} catch (e)
{
return xmlDoc = docxml; //on error assign whole source xml/string
}
$xml = $(xmlDoc);
if (id === undefined || id === "") {
sourceXML = $xml.find(specificNode); //Return required single/first node
sourceXML = sourceXML[0];
} else {
sourceXML = $xml.find(specificNode).attr(id); //Return node's attribute value
}
return sourceXML;
}
catch (e) {
var msg = e.message;
console.log("core: error in SelectSingleNode");
}
return data;
};
var SetProperty = function (name, value) {
return true;
};
var Xml = function () {
return true;
};
return {
validateOnParse: ValidateOnParse,
url: Url,
text: Text,
parentNode: ParentNode,
nodeName: NodeName,
nodeValue: NodeValue,
nodeType: NodeType,
documentElement: DocumentElement,
nextSibling: NextSibling,
previousSibling: PreviousSibling,
isChild: IsChild,
firstChild: FirstChild,
childnodes: Childnodes,
nodeTypeValue: NodeTypeValue,
nodeTypeString: NodeTypeString,
abort: Abort,
appendChild: AppendChild,
cloneChild: CloneChild,
loadXML: LoadXML,
load: Load,
selectNodes: SelectNodes,
setAttribute: SetAttribute,
getAttribute: GetAttribute,
selectSingleNode: SelectSingleNode,
setProperty: SetProperty,
xml: Xml
};
})();
//Below Ajax methods will get used in above Closures.
function ajaxGetData(getURL, receiveDataType) {
var arr;
$.ajax({
type: "GET",
//contentType="text/xml",
dataType: receiveDataType,
async: false,
url: getURL,
//data: "password="+password,
success: function (data) {
arr = data;
}, error: function (error) {
//alert(error);
}
});
var retText = arr;
if (retText.lastIndexOf("/>") === retText.length - 2) {
retText = "";
}
else {
i = retText.search('">') + 2;
if (i >= 2) {
retText = retText.substr(i);
retText = retText.substr(0, retText.lastIndexOf("");
re = /</g;
retText = retText.replace(re, "<");
re = /&/g;
retText = retText.replace(re, "&");
return retText;
}
//Returning XML object to load in Custom DOM.
function ajaxGetXMLObject(getURL, receiveDataType) {
var arr;
$.ajax({
type: "GET",
//contentType="text/xml",
dataType: receiveDataType,
async: false,
url: getURL,
//data: "password="+password,
success: function (data) {
arr = data;
}, error: function (error) {
//alert(error);
}
});
//Returning XML object to load in Custom DOM.
return arr;
}
function ajaxPostData(postURL, dataToSend, sendDataType, receiveDataType) {
//debugger;
var arr;
if (sendDataType !== undefined && sendDataType.length <= 0) { sendDataType = "text/xml"; }
if (receiveDataType !== undefined && receiveDataType.length ") == retText.length - 2) {
retText = "";
}
else {
i = retText.search('">') + 2;
if (i >= 2) {
retText = retText.substr(i);
retText = retText.substr(0, retText.lastIndexOf("");
re = /</g;
retText = retText.replace(re, "<");
re = /&/g;
retText = retText.replace(re, "&");
return retText;
}
//End of AJAX methods
No comments:
Post a Comment