Question

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

目标：我希望Namespace中的这段代码能够完成此代码的优化。

<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：命名空间总结正常功能

2 个答案: