Use of Anonymous Function for 3Dmol.js

Q

Why do some 3Dmol.js examples use anonymous function?

✍: FYIcenter.com

A

There is no reason and no need to include 3Dmol.js code inside an anonymous function.

There is no difference between using 3Dmol.js with anonymous function and without anonymous function.

For example, the following HTML document, With-Anonymous-Function.html, uses an anonymous function as suggested by the 3Dmol.js official document.

<html><head>
<script src="https://3Dmol.org/build/3Dmol-min.js"></script>
</head>
<body>
<div id="viewer" style="width: 400px; height: 400px;"/>
<script>
$(function() {
  let config = { backgroundColor: 'grey' };
  let viewer = $3Dmol.createViewer( $('#viewer'), config );
  let pdbUri = 'https://files.rcsb.org/download/1YCR.pdb';
  jQuery.ajax( pdbUri, { 
    success: function(data) {
      let v = viewer;
      viewer.addModel( data, "pdb" );                     
      viewer.setStyle({}, {cartoon: {color: 'spectrum'}});
      viewer.zoomTo();                                    
      viewer.render();                                    
    },
    error: function(hdr, status, err) {
      console.error( "Failed to load PDB " + pdbUri + ": " + err );
    },
  });
});
</script>
</body></html>

the following HTML document, Without-Anonymous-Function.html, uses no anonymous function.

<html><head>
<script src="https://3Dmol.org/build/3Dmol-min.js"></script>
</head>
<body>
<div id="viewer" style="width: 400px; height: 400px;"/>
<script>
  let config = { backgroundColor: 'grey' };
  let viewer = $3Dmol.createViewer( $('#viewer'), config );
  let pdbUri = 'https://files.rcsb.org/download/1YCR.pdb';
  jQuery.ajax( pdbUri, { 
    success: function(data) {
      let v = viewer;
      viewer.addModel( data, "pdb" );                     
      viewer.setStyle({}, {cartoon: {color: 'spectrum'}});
      viewer.zoomTo();                                    
      viewer.render();                                    
    },
    error: function(hdr, status, err) {
      console.error( "Failed to load PDB " + pdbUri + ": " + err );
    },
  });
</script>
</body></html>

If you load both HTML documents in a Web browser, they work exactly in the same way.

 

"new window.ResizeObserver(this.resize)" Error

Display Protein Structure with 3Dmol.js

Getting Started with 3Dmol.js

⇑⇑ 3Dmol.js FAQ

2023-09-07, 260🔥, 0💬