blocks|key|629283|text|听起来你想要的是要求JS。我现在几乎在我所有的构建中都使用了这个。或者，您也可以查看显示模块模式作为后盾，但是对于您所做的事情，它听起来更合适。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|629284|http://requirejs.org|offset|length|629285|读得好：http://net.tutsplus.com/tutorials/javascript-ajax/principles-of-maintainable-javascript/|629286|entityMap|0|LINK|mutability|MUTABLE|url|http://requirejs.org/|1|http://net.tutsplus.com/tutorials/javascript-ajax/principles-of-maintainable-javascript/^0|0|0|K|0|0|4|2G|1|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@$D|T|E|U|1|V]]|A|$]]|$1|F|3|G|5|6|7|W|8|@]|9|@$D|X|E|Y|1|Z]]|A|$]]|$1|H|3|-4|5|6|7|10|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|O]]|P|$5|K|L|M|A|$N|Q]]]]

It sounds like what you're after is Require JS. I use this in almost all of my builds now. Alternatively you can have a look at the revealing module pattern as a fallback but for what you're after it sounds like Require is much more suitable. 

<a href="http://requirejs.org" rel="nofollow">http://requirejs.org</a>

A good read: <a href="http://net.tutsplus.com/tutorials/javascript-ajax/principles-of-maintainable-javascript/" rel="nofollow">http://net.tutsplus.com/tutorials/javascript-ajax/principles-of-maintainable-javascript/</a>

blocks|key|629322|text|只有两种方法可以让JavaScript进入HTML：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|629323|内联-+<script>+some+JavaScript+</script>|ordered-list-item|offset|length|style|BOLD|CODE|629324|Link+-+<script+src='main.js'></script>|629325|我知道这是显而易见的，但我们需要这一共同点。;)|629326|JavaScript没有能力将其他JavaScript文件“导入”到它自己中。所有“导入”都是在HTML中完成的。您可以通过以下几种方法来做到这一点：|629327|将分别链接到HMTL中|unordered-list-item|629328|通过一些JavaScript动态链接
var+script+=+document.createElement("script")；script.src+=+"all.js"；|629329|图书馆喜欢RequireJS。RequireJS使用异步模块定义(AMD)+API。它是用于定义模块的JavaScript机制，以便可以异步加载模块及其依赖项。|629330|考虑将JavaScript分离为不同文件的原因是很重要的。|629331|Maintainability+--一件一件的工作变得更容易|629332|Readability+--如果所有内容都在一个大文件中，那么很难看出什么是什么|629333|分工-更容易让多个开发人员处理多个文件，而不是一个大文件。|629334|重用-所有功能都可以分解为高度内聚力模块|629335|单独的JavaScript文件，闭包使things+私有。|629336|现在，在一天结束时，当一切都准备好生产时，您可以做的最好的事情就是将所有的优化合并到一个文件中，以便用户只能下载一个文件。|629337|在处理JavaScript中的私有变量时，您会在某个时候想要访问它们。|629338|公共函数-可以更改。|629339|特权函数-可以访问私有变量的公共函数。|629340|但是，如果函数位于实例中，那么只能在每个对象中更改。|629341|让我用一些代码来说明。|629342|模块-test.html和main.js+(合并了first.js、second.js和main.js以便于测试)|629343|var+MODULE+=+(function+()+{
	//Private+variables
	var+privateParent,
	++++app;
	
	privateParent+=+'parentPrivate';
	
	return+app+=+{
		//Privileged+method
		getPrivateParent:+function()+{
			return+privateParent;
		}
	};
}());

MODULE.sub+=+(function+(parentApp)+{
	//Private+variables
	var+childMessage,
	++++Constr;
	
	childMessage+=+'+-+trying+to+access+parent+private+field:+'+%2B+parentApp.getPrivateParent();++//prints+parentPrivate

	Constr+=+function+()+{
		this.childF+=+this.childFunction();
	};
	
	//Constructor
	Constr.prototype+=+{
		constructor:+MODULE.sub,
		version:+"1.0",
		childFunction:+function+()+{
			$("#testing-div").append(childMessage+%2B+"");
		}
	};
	return+Constr;
	
}(MODULE));
	
//We+could+just+as+easily+print+to+the+console,+but+the+'append'+allows+us+to+display+the+results+on+the+page.

$("#testing-div").append("This+first+part+shows+what+does+not+work;+everything+is+'undefined'.+"+%2B+"");
$("#testing-div").append("You+are+unable+to+access+the+var+or+func+directly.+"+%2B+"");
$("#testing-div").append("MODULE.privateParent+=+"+%2B+MODULE.privateParent+%2B+"");
$("#testing-div").append("MODULE.app+=+"+%2B+MODULE.app+%2B+"");
$("#testing-div").append("MODULE.sub.childMessage+=+"+%2B+MODULE.sub.childMessage+%2B+"");
$("#testing-div").append("MODULE.sub.Constr+=+"+%2B+MODULE.sub.Constr+%2B+"");
$("#testing-div").append("MODULE.sub.childFunction+=+"+%2B+MODULE.sub.childFunction+%2B+"");
$("#testing-div").append("END+lesson.+You+must+access+childFunction()+through+the+new+operator."+%2B+"");
$("#testing-div").append("----------------------------------------------------"+%2B+"");
	
$("#testing-div").append("Let's+see+if+making+an+instance+of+the+Object+works"+%2B+"");
var+test+=+new+MODULE.sub();
test.childFunction();+//run+the+method
$("#testing-div").append("Looks+like+it+did!!!!"+%2B+"");
$("#testing-div").append("----------------------------------------------------"+%2B+"");
	
$("#testing-div").append("Now+let's+try+to+change+the+childFunction()+?"+%2B+"");
test.childFunction+=+function()+{$("#testing-div").append("+-+This+is+a+new+function."+%2B+"");}
test.childFunction();+//+altered+version
$("#testing-div").append("Looks+like+it+was+changed.+:("+%2B+"");
$("#testing-div").append("----------------------------------------------------"+%2B+"");
$("#testing-div").append("Does+it+stay+changed?"+%2B+"");
var+test2+=+new+MODULE.sub();
test2.childFunction();+//+doesn't+work
$("#testing-div").append("NO,+it+was+only+Overriden+in+the+'test'+Object.++It+did+not+effect+all+the+other+new+objects.+:)"+%2B+"");
$("#testing-div").append("----------------------------------------------------"+%2B+"");|code-block|syntax|javascript|629344|<!DOCTYPE+html>
<html>
<head>
<meta+charset="ISO-8859-1">
<title>Module+Test</title>

</head>
<body>
++++<h1>This+is+a+test+for+separate+Modules+and+Private+variables.</h1>
++++<div+id="testing-div">
++++</div>
++++<script+src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
++++<script+src="main.js"></script>
</body>
</html>|629345|​|629346|如果您想要使用RequireJS来完成上述工作，您可以。RequireJS使用模块模式，这就是你我已经在使用的模式。如果您想要分离这些文件，那么有两种方法可以做到这一点。|629347|普通-只需设置JS文件以使用RequireJS，只需稍作修改即可进入上述模块。|629348|杠杆式--使用RequireJS的模块性质作为模块来设置闭包。这看上去可能更难理解，但从长远来看，它可能更有效率。|629349|注意:我还没有机会对这两个选项进行比较，但为了完整起见，我想将它们包括在内。|629350|您可能会发现以下参考资料很有帮助：|629351|JavaScript模块模式:深度|629352|JavaScript中的私有成员|629353|entityMap|0|LINK|mutability|MUTABLE|url|http://requirejs.org/|1|https://github.com/amdjs/amdjs-api/wiki/AMD|2|http://en.wikipedia.org/wiki/Cohesion_%2528computer_science%2529|3|http://requirejs.org/docs/optimization.html|4|http://www.adequatelygood.com/JavaScript-Module-Pattern-In-Depth.html|5|http://javascript.crockford.com/private.html^0|0|0|2|4|Y|0|0|4|7|V|0|0|0|0|1|0|0|I|0|0|3|5|9|0|Q|F|1|0|0|0|F|0|0|B|0|0|2|0|0|2|D|5|2|0|F|E|0|0|1P|11|2|3|0|0|Z|0|0|A|0|0|J|0|0|M|P|1|0|0|B|0|0|1L|0|0|0|0|1|0|0|2D|0|0|13|0|0|1L|0|0|12|0|0|H|0|0|H|0|H|4|0|0|G|0|G|5|0^^$0|@$1|2|3|4|5|6|7|2R|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|2S|8|@$E|2T|F|2U|G|H]|$E|2V|F|2W|G|I]]|9|@]|A|$]]|$1|J|3|K|5|D|7|2X|8|@$E|2Y|F|2Z|G|H]|$E|30|F|31|G|I]]|9|@]|A|$]]|$1|L|3|M|5|6|7|32|8|@]|9|@]|A|$]]|$1|N|3|O|5|6|7|33|8|@]|9|@]|A|$]]|$1|P|3|Q|5|R|7|34|8|@$E|35|F|36|G|H]]|9|@]|A|$]]|$1|S|3|T|5|R|7|37|8|@$E|38|F|39|G|H]]|9|@]|A|$]]|$1|U|3|V|5|R|7|3A|8|@$E|3B|F|3C|G|H]]|9|@$E|3D|F|3E|1|3F]|$E|3G|F|3H|1|3I]]|A|$]]|$1|W|3|X|5|6|7|3J|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|R|7|3K|8|@$E|3L|F|3M|G|H]]|9|@]|A|$]]|$1|10|3|11|5|R|7|3N|8|@$E|3O|F|3P|G|H]]|9|@]|A|$]]|$1|12|3|13|5|R|7|3Q|8|@$E|3R|F|3S|G|H]]|9|@]|A|$]]|$1|14|3|15|5|R|7|3T|8|@$E|3U|F|3V|G|H]]|9|@$E|3W|F|3X|1|3Y]]|A|$]]|$1|16|3|17|5|6|7|3Z|8|@$E|40|F|41|G|H]]|9|@]|A|$]]|$1|18|3|19|5|6|7|42|8|@$E|43|F|44|G|H]]|9|@$E|45|F|46|1|47]]|A|$]]|$1|1A|3|1B|5|6|7|48|8|@$E|49|F|4A|G|H]]|9|@]|A|$]]|$1|1C|3|1D|5|R|7|4B|8|@$E|4C|F|4D|G|H]]|9|@]|A|$]]|$1|1E|3|1F|5|R|7|4E|8|@$E|4F|F|4G|G|H]]|9|@]|A|$]]|$1|1G|3|1H|5|R|7|4H|8|@$E|4I|F|4J|G|H]|$E|4K|F|4L|G|H]]|9|@]|A|$]]|$1|1I|3|1J|5|6|7|4M|8|@$E|4N|F|4O|G|H]]|9|@]|A|$]]|$1|1K|3|1L|5|6|7|4P|8|@$E|4Q|F|4R|G|H]]|9|@]|A|$]]|$1|1M|3|1N|5|1O|7|4S|8|@]|9|@]|A|$1P|1Q]]|$1|1R|3|1S|5|1O|7|4T|8|@]|9|@]|A|$1P|1Q]]|$1|1T|3|1U|5|6|7|4U|8|@$E|4V|F|4W|G|H]]|9|@]|A|$]]|$1|1V|3|1W|5|6|7|4X|8|@$E|4Y|F|4Z|G|H]]|9|@]|A|$]]|$1|1X|3|1Y|5|D|7|50|8|@$E|51|F|52|G|H]]|9|@]|A|$]]|$1|1Z|3|20|5|D|7|53|8|@$E|54|F|55|G|H]]|9|@]|A|$]]|$1|21|3|22|5|6|7|56|8|@$E|57|F|58|G|H]]|9|@]|A|$]]|$1|23|3|24|5|6|7|59|8|@$E|5A|F|5B|G|H]]|9|@]|A|$]]|$1|25|3|26|5|R|7|5C|8|@$E|5D|F|5E|G|H]]|9|@$E|5F|F|5G|1|5H]]|A|$]]|$1|27|3|28|5|R|7|5I|8|@$E|5J|F|5K|G|H]]|9|@$E|5L|F|5M|1|5N]]|A|$]]|$1|29|3|-4|5|6|7|5O|8|@]|9|@]|A|$]]]|2A|$2B|$5|2C|2D|2E|A|$2F|2G]]|2H|$5|2C|2D|2E|A|$2F|2I]]|2J|$5|2C|2D|2E|A|$2F|2K]]|2L|$5|2C|2D|2E|A|$2F|2M]]|2N|$5|2C|2D|2E|A|$2F|2O]]|2P|$5|2C|2D|2E|A|$2F|2Q]]]]

There are only 2 ways to get JavaScript into HTML:

<ol>
<li>Inline - <code>&lt;script&gt; some JavaScript &lt;/script&gt;</code></li>
<li>Link - <code>&lt;script src='main.js'&gt;&lt;/script&gt;</code></li>
</ol>

I know this is obvious but we need that common ground for what comes next. ;)

JavaScript does not have the ability to "import" other JavaScript files into it's self. All the "importing" is done in the HTML. You can do this several ways:

<ul>
<li>Link each one individually into the HMTL</li>
<li>Dynamically link them in through some JavaScript

<pre><code>var script = document.createElement("script");
script.src = "all.js";
document.documentElement.firstChild.appendChild(script);
</code></pre></li>
<li>Library like <a href="http://requirejs.org/" rel="noreferrer">RequireJS</a>. RequireJS uses <a href="https://github.com/amdjs/amdjs-api/wiki/AMD" rel="noreferrer">Asynchronous Module Definition (AMD) API</a>. It is the JavaScript mechanism for defining modules such that the module and its dependencies can be asynchronously loaded. </li>
</ul>

It is import to consider reasons for separating JavaScript into separate files.

<ul>
<li>Maintainability - it becomes easier to work on one piece at a time</li>
<li>Readability - if everything is in one big file it is very hard to see what is what</li>
<li>Division of Labor - it is easier to have multiple developers working on multiple files instead of one big one</li>
<li>Reuse - all your functions can be broken up into <a href="http://en.wikipedia.org/wiki/Cohesion_%28computer_science%29" rel="noreferrer">highly cohesive</a> modules </li>
</ul>

Separate JavaScript files DO NOT make things Private, Closures make things Private.

Now, consider at the end of the day when everything is ready for production the best thing you could do is <a href="http://requirejs.org/docs/optimization.html" rel="noreferrer">Optimize</a> your JavaScript by combining it all into one file so that the user only has one file to download. 

<hr>

When dealing with Private variables in JavaScript, you will at some point want to access them. 

<ul>
<li>Public function - can be altered. </li>
<li>Privileged function - a Public function that can access the Private variable. </li>
<li>However if the function is in an Instance then it can only be altered in each Object. </li>
</ul>

Let me illustrate with some code.

module-test.html and main.js (merged first.js, second.js, and main.js for easier testing)<div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var MODULE = (function () {
	//Private variables
	var privateParent,
	 app;
	
	privateParent = 'parentPrivate';
	
	return app = {
		//Privileged method
		getPrivateParent: function() {
			return privateParent;
		}
	};
}());

MODULE.sub = (function (parentApp) {
	//Private variables
	var childMessage,
	 Constr;
	
	childMessage = ' - trying to access parent private field: ' + parentApp.getPrivateParent(); //prints parentPrivate

	Constr = function () {
		this.childF = this.childFunction();
	};
	
	//Constructor
	Constr.prototype = {
		constructor: MODULE.sub,
		version: "1.0",
		childFunction: function () {
			$("#testing-div").append(childMessage + "&lt;/br&gt;");
		}
	};
	return Constr;
	
}(MODULE));
	
//We could just as easily print to the console, but the 'append' allows us to display the results on the page.

$("#testing-div").append("This first part shows what &lt;b&gt;does not work&lt;/b&gt;; everything is 'undefined'. " + "&lt;/br&gt;");
$("#testing-div").append("You are unable to access the var or func directly. " + "&lt;/br&gt;");
$("#testing-div").append("MODULE.privateParent = " + MODULE.privateParent + "&lt;/br&gt;");
$("#testing-div").append("MODULE.app = " + MODULE.app + "&lt;/br&gt;");
$("#testing-div").append("MODULE.sub.childMessage = " + MODULE.sub.childMessage + "&lt;/br&gt;");
$("#testing-div").append("MODULE.sub.Constr = " + MODULE.sub.Constr + "&lt;/br&gt;");
$("#testing-div").append("MODULE.sub.childFunction = " + MODULE.sub.childFunction + "&lt;/br&gt;");
$("#testing-div").append("END lesson. You must access childFunction() through the &lt;b&gt;new&lt;/b&gt; operator." + "&lt;/br&gt;");
$("#testing-div").append("----------------------------------------------------" + "&lt;/br&gt;");
	
$("#testing-div").append("Let's see if making an instance of the Object works" + "&lt;/br&gt;");
var test = new MODULE.sub();
test.childFunction(); //run the method
$("#testing-div").append("Looks like it did!!!!" + "&lt;/br&gt;");
$("#testing-div").append("----------------------------------------------------" + "&lt;/br&gt;");
	
$("#testing-div").append("Now let's try to change the childFunction() ?" + "&lt;/br&gt;");
test.childFunction = function() {$("#testing-div").append(" - This is a new function." + "&lt;/br&gt;");}
test.childFunction(); // altered version
$("#testing-div").append("Looks like it was changed. :(" + "&lt;/br&gt;");
$("#testing-div").append("----------------------------------------------------" + "&lt;/br&gt;");
$("#testing-div").append("Does it stay changed?" + "&lt;/br&gt;");
var test2 = new MODULE.sub();
test2.childFunction(); // doesn't work
$("#testing-div").append("NO, it was only Overriden in the 'test' Object. It did not effect all the other new objects. :)" + "&lt;/br&gt;");
$("#testing-div").append("----------------------------------------------------" + "&lt;/br&gt;");</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset="ISO-8859-1"&gt;
&lt;title&gt;Module Test&lt;/title&gt;
&lt;!-- 	&lt;script data-main="scripts/main" src="scripts/require.js"&gt;&lt;/script&gt; --&gt;
&lt;/head&gt;
&lt;body&gt;
 &lt;h1&gt;This is a test for separate Modules and Private variables.&lt;/h1&gt;
 &lt;div id="testing-div"&gt;
 &lt;/div&gt;
 &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
 &lt;script src="main.js"&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
---

If you want to use RequireJS to accomplish the above, you can. RequireJS uses the Module Pattern which is what you and I are already using. If you want to separate out the files then there are two ways to do this.

<ol>
<li>Normal - Just set up your JS files to use RequireJS and drop in the above Modules with only a slight modification.</li>
<li>Leveraged - Use the Module nature of RequireJS as the modules to set up the closures. This looks like it may be harder to figure out but it may be more efficient in the long run. </li>
</ol>

NOTE: I haven't had a chance to compare these two options yet but wanted to include them for completeness. 

<hr>

You may find the following references helpful:

<ul>
<li><a href="http://www.adequatelygood.com/JavaScript-Module-Pattern-In-Depth.html" rel="noreferrer">JavaScript Module Pattern: In-Depth</a></li>
<li><a href="http://javascript.crockford.com/private.html" rel="noreferrer">Private Members in JavaScript</a></li>
</ul>

blocks|key|2099206|text|模块化(分裂代码)不同于数据保护(隐藏数据)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2099207|RequireJS解决了模块化问题，而不是数据保护问题.或者换个说法..。无论试图保护数据存在什么问题，以及保护数据的任何解决方案，这些问题和解决方案无论有无RequireJS都是一样的。|2099208|RequireJS实现了所有机制来指定模块之间的依赖关系，只在需要时加载这些依赖项，避免重新加载已经加载的东西，避免加载根本不需要的东西，快速更改模块的位置，具有冗余等。|2099209|部署后，如果发现RequireJS太重，可以使用杏仁库。|offset|length|2099210|我们不能有一个可供孩子访问的字段，但不能被外部公众访问(即受保护的)。有什么办法做到这一点吗？|blockquote|2099211|如果您想要模块化(即您希望子程序与父级独立编码)，我认为这在JavaScript中是不可能的。可以让孩子和父母在相同的闭包中操作，但是这样就不是模块化的了。无论是否使用RequireJS，这都是正确的。|2099212|如果不是，这意味着如果我们wanteparentPrivate是可访问的，我们需要公开它。然后用户将能够修改它！|2099213|如果要防止分配给parentPrivate，可以在包含parentPrivate的命名空间上使用parentPrivate。|style|CODE|2099214|但是，我不知道各种浏览器对它的支持程度如何。如果parentPrivate中的内容本身是一个对象，而不是一个原始值，那么如果您不希望代码的客户端修改它，也需要冻结它。一旦一个对象被冻结，它将为每个人被冻结，所以拥有该对象的模块不会得到特殊的处理来修改它。严寒也不会隐藏任何东西。|2099215|或者您可以使用setter和getter，如下面的RequireJS示例中所示：|2099216|define(function+()+{
++++'use+strict';

++++var+writable+=+"initial+value";

++++var+namespace+=+{
++++++++get+unwritable()+{+return+writable;+},
++++++++doSomething:+function+()+{+writable+=+"changed+value";+}

++++};

++++return+namespace;

});|code-block|syntax|javascript|2099217|如果模块是以parent的形式导入的，那么parent.unwritable不能被写入，但是模块本身仍然可以更改写入writable返回的值。注意，如果getter返回的值是对象而不是原始值，则调用方可以修改该对象。|2099218|同样，无论您是否使用RequireJS，这都是正确的。解决办法是一样的，问题是一样的，等等。|2099219|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/jrburke/almond^0|0|0|0|O|2|0|0|0|0|0|8|D|R|D|1C|D|0|O|D|0|0|0|6|6|L|H|1M|8|0|0^^$0|@$1|2|3|4|5|6|7|1F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1G|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|1H|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|1I|8|@]|9|@$H|1J|I|1K|1|1L]]|A|$]]|$1|J|3|K|5|L|7|1M|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|1N|8|@]|9|@]|A|$]]|$1|O|3|P|5|L|7|1O|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|1P|8|@$H|1Q|I|1R|S|T]|$H|1S|I|1T|S|T]|$H|1U|I|1V|S|T]]|9|@]|A|$]]|$1|U|3|V|5|6|7|1W|8|@$H|1X|I|1Y|S|T]]|9|@]|A|$]]|$1|W|3|X|5|6|7|1Z|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|10|7|20|8|@]|9|@]|A|$11|12]]|$1|13|3|14|5|6|7|21|8|@$H|22|I|23|S|T]|$H|24|I|25|S|T]|$H|26|I|27|S|T]]|9|@]|A|$]]|$1|15|3|16|5|6|7|28|8|@]|9|@]|A|$]]|$1|17|3|-4|5|6|7|29|8|@]|9|@]|A|$]]]|18|$19|$5|1A|1B|1C|A|$1D|1E]]]]

Modularization (splitting the code) is not the same as data protection (hiding data).

RequireJS solves the modularization issue, not the data-protection issue. Or to put it differently... Whatever issues exist with trying to protect data and whatever solutions exist to protect data, these issues and solutions are the same with or without RequireJS.

RequireJS implements all the mechanics to specify dependencies between modules, to load these dependencies only as needed, to avoid reloading things that have already been loaded, avoid loading things that are not required at all, quickly change the location of modules, have redundancy, etc.

After deployment if one finds RequireJS somehow too heavy, there's the <a href="https://github.com/jrburke/almond" rel="nofollow">almond</a> library that can be used instead.

<blockquote>
 We can't have a field that's accessible by child but not to outside public (i.e. protected). Is there any way to achieve that?
</blockquote>

If you want modularization (i.e. you want the child to be coded separately from the parent), I do not believe this is possible in JavaScript. It would be possible to have child and parent operate in the same closure but then this would not be modular. This is true with or without RequireJS.

<blockquote>
 If not, meaning if we wanteparentPrivate to be accessible, we need to make it public. Then the user will be able to modify it!
</blockquote>

If you want to prevent assigning to <code>parentPrivate</code>, you can use <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze" rel="nofollow"><code>Object.freeze()</code></a> on the namespace that contains <code>parentPrivate</code>.

However, I don't know how well it is supported by various browsers. And if what is in <code>parentPrivate</code> is itself an object rather than a primitive value, it also needs to be frozen if you don't want it to be modified by clients of your code. And once an object is frozen, it is frozen for everyone so the module that owns the object does not get special treatment to modify it. And freezing does not hide anything.

Or you could use setters and getters like in this RequireJS example:

<pre><code>define(function () {
 'use strict';

 var writable = "initial value";

 var namespace = {
 get unwritable() { return writable; },
 doSomething: function () { writable = "changed value"; }

 };

 return namespace;

});
</code></pre>

If the module is imported as <code>parent</code>, then <code>parent.unwritable</code> cannot be written to but the module itself can still change the value returned by writing to <code>writable</code>. Note that if the return value returned by the getter is an object rather than a primitive value, this object can be modified by the caller.

Again, this is true whether or not you use RequireJS. The solutions are the same, the problems are same, etc.

blocks|key|2099268|text|javascript中的受保护变量可以通过传入受保护的变量作为附属物来实现。子类必须在父类中创建，因为只有父类才能访问受保护的变量。示例jsFiddle|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2099269|App+=+window.App+%7C%7C+{};
App.ParentClass+=+(function(){

+++var+protectedState+=+{
++++++protectedVar:+'wow+such+protection'
+++}

+++return{
++++++SubClassInstance:+App.SubClass(protectedState),+//make+the+subclass+accessible+from+outside
+++}
})();+//closure+gives+us+privacy|code-block|syntax|javascript|2099270|SubClass.js|2099271|App+=+window.App+%7C%7C+{};
App.SubClass+=+function(protectedState){

++++return+{
++++++++logProtectedVar+:+function(){
++++++++++++//can+access+protectedState+of+parent
++++++++++++console.log(protectedState.protectedVar);
++++++++}
++++}
}//+I+require+protected+state+to+work|2099272|main.js|2099273|//+protected+variable+is+accessible+from+parent+and+subclass+and+nowhere+else

App.ParentClass.SubClassInstance.logProtectedVar();
//+'wow+such+protection'+|2099274|注意:正如Charles+.提到的，这种模式只在protectedState是一个对象时才能工作。如果它是字符串/int，它将通过值传递，子类中的更改在父级副本中不可见。|style|CODE|2099275|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/17334081/how-can-i-share-module-private-data-between-2-files-in-node|1|http://jsfiddle.net/cwf9C/3/^0|T|5|0|1U|A|1|0|0|0|0|0|0|O|E|0^^$0|@$1|2|3|4|5|6|7|14|8|@]|9|@$A|15|B|16|1|17]|$A|18|B|19|1|1A]]|C|$]]|$1|D|3|E|5|F|7|1B|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|1C|8|@]|9|@]|C|$]]|$1|K|3|L|5|F|7|1D|8|@]|9|@]|C|$G|H]]|$1|M|3|N|5|6|7|1E|8|@]|9|@]|C|$]]|$1|O|3|P|5|F|7|1F|8|@]|9|@]|C|$G|H]]|$1|Q|3|R|5|6|7|1G|8|@$A|1H|B|1I|S|T]]|9|@]|C|$]]|$1|U|3|-4|5|6|7|1J|8|@]|9|@]|C|$]]]|V|$W|$5|X|Y|Z|C|$10|11]]|12|$5|X|Y|Z|C|$10|13]]]]

Protected variables in javascript can be achieved by passing in the protected variables <a href="https://stackoverflow.com/questions/17334081/how-can-i-share-module-private-data-between-2-files-in-node">as a dependency</a>. The subclass must be created within the parent as only there does it have access to the protected variables. <a href="http://jsfiddle.net/cwf9C/3/" rel="nofollow noreferrer">Example jsFiddle</a>

<pre><code>App = window.App || {};
App.ParentClass = (function(){

 var protectedState = {
 protectedVar: 'wow such protection'
 }

 return{
 SubClassInstance: App.SubClass(protectedState), //make the subclass accessible from outside
 }
})(); //closure gives us privacy
</code></pre>

SubClass.js

<pre><code>App = window.App || {};
App.SubClass = function(protectedState){

 return {
 logProtectedVar : function(){
 //can access protectedState of parent
 console.log(protectedState.protectedVar);
 }
 }
}// I require protected state to work
</code></pre>

main.js

<pre><code>// protected variable is accessible from parent and subclass and nowhere else

App.ParentClass.SubClassInstance.logProtectedVar();
// 'wow such protection' 
</code></pre>

NOTE: as Charles W. mentioned, this pattern only works when <code>protectedState</code> is an object. If it were a string/int it would be passed by value and changes made in the subclass would not be visible from the parents copy.

For the module pattern, I'm doing something like:

<pre><code>(function(namespace) {
 // tons of code
 // blabla
})(window.myGlobalNamespace);
</code></pre>

How do I split the code? I can think of a few ways, like use a hierachy of namespaces, or expand the object outside by <code>window.myGlobalNamespace.additionalFunc = function () {//blabla}</code>. What are the other ways? What are the pros and cons? Which one is considered better practice?

Both of the two answers suggest RequireJS. Can you please explain how RequireJS can solve these problems:

first.js:

<pre><code>(function(context) {
 var parentPrivate = 'parentPrivate';
})(window.myGlobalNamespace);
</code></pre>

second.js:

<pre><code>(function(context) {
 this.childFunction = console.log('trying to access parent private field: ' + parentPriavte);
}(window.myGlobalNamespace.subNamspace);
</code></pre>

main.js:

<pre><code>window.myGlobalNamespace.subNamspace.childFunction(); // doesn't work
</code></pre>

And people can do

<pre><code>window.myGlobalNamespace.subNamspace.childFunction = function() {alert("a new function");}
</code></pre>

to change my code's behaviour!

Here, there are two problems:

<ol>
<li>We can't have a field that's accessible by child but not to outside public (i.e. protected). Is there any way to achieve that?</li>
<li>If not, meaning if we wanteparentPrivate to be accessible, we need to make it public. Then the user will be able to modify it!</li>
</ol>

What's more, all the public functions can be altered and replaced. I don't want that to happen.

I don't see how RequireJS solves these problems. Can someone shed some light?

Module pattern- How to split the code for one module into different js files?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

对于模块模式，我正在执行如下操作：(function(namespace) {    // tons of code    // blabla})(window.myGlobalNamespace);我该如何划分密码？我可以想出几种方法，比如使用名称空间的层次结构，或者通过window.myGlobalNamespac...

问模块模式-如何将一个模块的代码拆分为不同的js文件？
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问模块模式-如何将一个模块的代码拆分为不同的js文件？EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问模块模式-如何将一个模块的代码拆分为不同的js文件？
EN