首先看下常规开发中 JavaScript 非结构化组织代码
- function appInit () {
- // 程序初始化操作
- }
- function appModule1 () {
- // 程序功能模块 1
- }
- function appModule2 () {
- // 程序功能模块 2
- }
- function appModule3 () {
- // 程序功能模块 3
- }
- $( document ).ready(appInit )
从技术角度看, 这种代码方式并没有任何错误, 但是通过下图可以发现这些函数都是建立在全局名称空间下
若在全局名称空间中创建很多变量很快会导致严重的问题, 比如在全局名称空间中定义了名为 i,_或 $ 的变量.
如何改善呢?
1, 使用一个单例创建一个应用程序名称空间
- var myApp = {
- init : function () {
- // 程序初始化操作
- },
- appModule1 : function () {
- // 程序功能模块 1
- },
- appModule2 : function () {
- // 程序功能模块 2
- },
- appModule3 : function () {
- // 程序功能模块 3
- }
- }
- $( document ).ready(myApp.init)
对于上面的新结构, 打开 Chrome 查看 Windows 下的属性时仅看到单个变量 myApp, 这中方式极大的降低了变量名冲突的可能性.
这一模式允许多个开发人员跨越多个文件, 在单个应用程序名称空间之下进行协同开发. 从代码结构角度来说, 可以将网站的每一部分拆成独立文件. 比如本例中的 common.JS,
appModule1.JS,appModule2.JS 和 appModule3.JS. 每个开发人员都有一个自己负责的网站部分和相应的 JavaScript 文件, 开发人员只需要关注自己的文件, 不需要担心会发生冲突.
common.JS
- var myApp = {
- common : {
- init : function () {
- // 初始化应用程序通用代码
- }
- }
- }
appModule1.JS
- myApp.appModule1 = {
- init : function () {
- // 初始化代码
- },
- update : function () {
- // 更新模块 1 的代码
- },
- render : function () {
- // 呈现模块 1 的代码
- }
- }
appModule2.JS
- myApp.appModule2 = {
- init : function () {
- // 初始化代码
- },
- update : function () {
- // 更新模块 2 的代码
- },
- render : function () {
- // 呈现模块 2 的代码
- }
- }
appModule3.JS
- myApp.appModule3 = {
- init : function () {
- // 初始化代码
- },
- update : function () {
- // 更新模块 3 的代码
- },
- render : function () {
- // 呈现模块 3 的代码
- }
- }
2,Module 模式
模块模式是单例的一种变种, 增强了单例模式提供的封装性, 并增加了创建私有方法和私有属性的功能
模块模式包含三个主要组件: 一个与前面例子类似的命名空间, 一个立即执行函数和函数返回对象, 该返回对象包含公有方法和公有属性, JS 代码如下:
- //App 的名称空间. 传入 jQuery 对象以缩短查找过程
- var myApp = function( $ ){
- // 私有变量和方法
- var message = "i am a module";
- function multiplier (x,y) {
- return x * y;
- };
- // 返回对象包含公有属性和方法
- return {
- init:function(){
- // 初始化 App
- },
- prop : '42',
- getProduct : function(){
- // 访问私有方法
- return multiplier(2,3);
- },
- shareMessage : function (arg){
- // 对私有属性进行限制访问
- if(arg == "admin"){
- return message;
- } else {
- throw new Error("No access");
- }
- }
- }
- }(jQuery)
控制台中测试如下:
扩展该模式以增加更多的模块也非常简单. 如下代码:
- myApp.module1 = function($){
- // 私有变量和方法
- var config = {
- "color":"red",
- "title":"module1",
- "width":"20px"
- };
- return {
- init:function(){
- // 初始化 module1
- },
- updateConfig : function(obj){
- config.color = obj.color || config.color;
- config.title = obj.title || config.title;
- config.width = obj.width || config.width;
- },
- render:function(){
- var $module1 = $("#id");
- $module1.text(config.title)
- .CSS({"width":config.width,"color":config.color})
- }
- }
- }(jQuery)
该代码描述了一个 module1 模块, 它包含一个私有配置对象和一个公共方法, 该公有方法允许根据一组预定义条件获得对 module1 配置的访问, 类似于 java 中 private 和 public 关键字的使用. 在 JS 开发中, 并非所以时候都需要使用这种保护访问, 但当我们需要实现这样功能时, 使用模块模式是非常重要的.
来源: https://www.cnblogs.com/qingxuit/p/9763198.html