Javascript:正常函数的命名空间封装

Question

我以正常的方式创建了函数，只是在命名空间中尝试。下面，我现在有，同样，我只想知道这将是如何在命名空间的方式。知道吗？

目标：我希望命名空间中的这段代码能够对这段代码进行优化。

<div class="Content" id="ThiPage">
    <div class="something">
    <p></p>
    </div>
    <div class="text">
    <p></p>
    <p></p>
    </div>
</div>

<div class="Content" id="ThiPage1">
    <div class="something">
    <p></p>
    </div>
    <div class="text">
    <p></p>
    <p></p>
    </div>
</div>
<div class="Content" id="ThiPage2">
    <div class="something">
    <p></p>
    </div>
    <div class="text">
    <p></p>
    <p></p>
    </div>
</div>

我当前的JS代码是

var sampPag = document.getElementById("ThiPage");
var sampPag1 = document.getElementById("ThiPage1");
var sampPag2 = document.getElementById("ThiPag2");

function samplefunct(thisArray){
sampPag.getElementsByTagName("div")[0].getElementsByTagName("p")[0].innerHTML = thisArray[1].heading;
sampPag1.getElementsByTagName("div")[0].getElementsByTagName("p")[0].innerHTML = thisArray[2].heading;
sampPag2.getElementsByTagName("div")[0].getElementsByTagName("p")[0].innerHTML = thisArray[0].heading;
//Body content
for(var i = 0; i < 20; i++){
sampPag.getElementsByTagName("div")[1].getElementsByTagName("p")[0].innerHTML += thisArray[1].text;
sampPag.getElementsByTagName("div")[1].getElementsByTagName("p")[1].innerHTML += thisArray[1].text;
if (i == 1) {sampPag.getElementsByTagName("div")[3].getElementsByTagName("img")[0].src += thisArray[1].image;}
sampPag1.getElementsByTagName("div")[1].getElementsByTagName("p")[0].innerHTML += thisArray[2].text;
sampPag1.getElementsByTagName("div")[1].getElementsByTagName("p")[1].innerHTML += thisArray[2].text;
if (i == 1) {sampPag1.getElementsByTagName("div")[2].getElementsByTagName("img")[0].src += thisArray[2].image;}
sampPag2.getElementsByTagName("div")[1].getElementsByTagName("p")[0].innerHTML += thisArray[0].text;
sampPag2.getElementsByTagName("div")[1].getElementsByTagName("p")[1].innerHTML += thisArray[0].text;
if (i == 1) {sampPag2.getElementsByTagName("div")[2].getElementsByTagName("img")[0].src += thisArray[0].image;}
}
}

Answer 1

您可以轻松地将fn移动到新的命名空间中。并将js代码添加到一个单独的外部.js文件中。

var myns = {}; 
myns.globvar = {}; //global variables restricted to the namespace.
myns.funcs = {};   //Add your functions to the funcs. 
 myns.funcs.samplefunctest= function () {
             / * Code here */
}

参考-http://addyosmani.com/resources/essentialjsdesignpatterns/book/#detailnamespacing

Answer 2

这可以像IIFE:一样简单

(function () { 
  var sampPag = document.getElementById('ThiPage');
  var sampPag1 = document.getElementById('ThiPage1');
  var sampPag2 = document.getElementById('ThiPag2');
  function samplefunct(thisArray) {
    sampPag.getElementsByTagName('div') [0].getElementsByTagName('p') [0].innerHTML = thisArray[1].heading;
    sampPag1.getElementsByTagName('div') [0].getElementsByTagName('p') [0].innerHTML = thisArray[2].heading;
    sampPag2.getElementsByTagName('div') [0].getElementsByTagName('p') [0].innerHTML = thisArray[0].heading;
    //Body content
    for (var i = 0; i < 20; i++) {
      sampPag.getElementsByTagName('div') [1].getElementsByTagName('p') [0].innerHTML += thisArray[1].text;
      sampPag.getElementsByTagName('div') [1].getElementsByTagName('p') [1].innerHTML += thisArray[1].text;
      if (i == 1) {
        sampPag.getElementsByTagName('div') [3].getElementsByTagName('img') [0].src += thisArray[1].image;
      }
      sampPag1.getElementsByTagName('div') [1].getElementsByTagName('p') [0].innerHTML += thisArray[2].text;
      sampPag1.getElementsByTagName('div') [1].getElementsByTagName('p') [1].innerHTML += thisArray[2].text;
      if (i == 1) {
        sampPag1.getElementsByTagName('div') [2].getElementsByTagName('img') [0].src += thisArray[2].image;
      }
      sampPag2.getElementsByTagName('div') [1].getElementsByTagName('p') [0].innerHTML += thisArray[0].text;
      sampPag2.getElementsByTagName('div') [1].getElementsByTagName('p') [1].innerHTML += thisArray[0].text;
      if (i == 1) {
        sampPag2.getElementsByTagName('div') [2].getElementsByTagName('img') [0].src += thisArray[0].image;
      }
    }
  }
}()); 

这就避免了创建任何全局变量。每当考虑模块模式时，我都会参考以下页面：http://www.adequatelygood.com/JavaScript-Module-Pattern-In-Depth.html.它合理地覆盖了现有的不同JavaScript模块模式。