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

这可以像 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 模块模式。

Answer 2

您可以轻松地将 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

Javascript：正常功能的命名空间包装

Javascript: Namespace wrap up for normal function

javascript

oop