代码之家 › 专栏 › 技术社区 › JasonDavis

使用一个单独的JavaScript对象在许多其他JS对象之间共享数据更好吗?

javascript

JasonDavis · 技术社区 · 9 年前

我正在用PHP和JavaScript构建一个项目管理应用程序。这个问题更多地围绕着JavaScript方面,更像是一个架构问题。

所以我有多个JavaScript对象/类类型的文件,它们基本上类似于“模块”。。。

任务模式.js
项目论坛.js
任务列表.js

仅举几个处理应用程序部分的JavaScript文件。

还有很多。但他们都有一个共同点,那就是他们都需要共享访问某些数据位。

例如 用户列表 。我的大多数JavaScript文件都需要访问数据库中所有用户的用户列表。

因此,为了避免我的所有JS文件查询数据库以构建单独的用户列表,我计划用PHP注入一个全局JSvar作为JSON对象,该对象将保存用户列表,并允许所有JS文件访问1个用户列表!

更进一步,我在我的第一个JS文件中的一个文件中构建了一个JS函数,它将检查是否存在从PHP创建的全局用户列表,如果找不到,它将发出AJAX请求并获取列表本身!

如果它必须使用AJAX获取列表,那么它会将其设置为其他JS文件的全局用户列表变量,以避免产生自己的AJAX请求。

因此,用户列表将被缓存,以供所有人使用冗余回退进行访问,以确保加载!

在我的 TaskModal.js 文件,这是我添加的第一个AJAX回退文件,用于检查全局范围中的用户列表,如果在全局范围中找到,则将其缓存到本地变量。如果没有,则发出AJAX请求。

有了这个理论和设计,我需要在我的所有JS文件中基本上复制相同的用户函数,我想这也许不是最好的方法。。。

我是否应该有一个单独的User对象来处理上述所有功能,而单独的JS文件上的用户的唯一功能只是访问这个User对象?

下面是TaskModal的一个简单示例。js对象可能具有自己的User功能。所有这些都应该移动到单独的User对象吗?如果是这样的话,这会使从我的所有JS文件中访问用户数据变得更容易吗?

(function (window, document, $, undefined) {
    "use strict";

    //we cache a few useful values, like jQuery wrapped window and document
    var $window = $(window),
      $document = $(document),

    projectTaskModal = {

      // Cache Properties
      cache: {

        isUserObjLoaded: false,
        userList: '',
        isAjaxRequestPending: false,
        getUserListUrlEndpoint: '/post',
        user: {},
        deferred: '',
      },


      /**
       * Initialize projectTaskModal Object and fire off some other init functions
       * @return {[type]} [description]
       */
      init: function() {
        projectTaskModal.users.initUserList();
        projectTaskModal.users.getUserList();
        projectTaskModal.cache.user = projectTaskModal.users.getUserById('1gdfgdfkn123423423');

        console.log('cached User object:', projectTaskModal.cache.user);
      },



      // Get Userlist and other user related functions
      users: {

        initUserList: function() {

          // check for local Flag indicating that Userlist has been loaded.
          // a userlist loaded into DOM as Global var from PHP
          if(projectTaskModal.cache.isUserObjLoaded){

            // Local copy of userlist has already been loaded so we will not search for
            // it in the Global DOM + Not make a server AJAX request to load it
            //
            // Just return our local cached copy of Userlist
            return projectTaskModal.cache.userList;

          }else{

            // this.cache.isUserObjLoaded is FALSE so we must search Global DOM for userlist
            // generated from PHP.

            if (!window.hasOwnProperty('globalUserList')) {

alert('Global userlist is not loaded so load it ourself using AJAX request');
              // Global userlist is not loaded so load it ourself using
              // AJAX request and Promise.
              var loadUserListAjax = projectTaskModal.users.ajaxLoadUserListData()
              .done(function(response) {
                    console.log(response);
                    alert('AJAX request success');

                      // Parse JSON response var
                      var userListJson = response;

                      // next set FLAG that userList is loaded
                      projectTaskModal.cache.isUserObjLoaded = true;

                       // After loading userlist from server, cache it locally and to global var for other
                      // JS scripts to use and prevent them from also making AJAX requests!

                      projectTaskModal.cache.userList = userListJson;

                      window.globalUserList = userListJson.user_list;

                      projectTaskModal.cache.isAjaxRequestPending = false;

                      projectTaskModal.users.getUserList();


              }).fail(function(response) {
                  // AJAX request failed
                  console.log('response', response);
                  alert('AJAX request failed');
              }).always(function(response) {
                  projectTaskModal.cache.isAjaxRequestPending = false;

                  // Hide Loader/Spinner
                  setTimeout($.unblockUI, 1000);
              });



            }else{

              alert('Global userlist is loaded so cache it locally and do not make AJAX request!');
              // cache the Global userlist var to local property
              projectTaskModal.cache.userList = window.globalUserList;

              // next set FLAG that userList is loaded
              projectTaskModal.cache.isUserObjLoaded = true;

              projectTaskModal.users.getUserList();

            }
          }
        },


        ajaxLoadUserListData: function() {
            projectTaskModal.cache.isAjaxRequestPending = true;
            return $.ajax({
              type: 'POST',
              async: true,
              contentType: 'application/json; charset=utf-8',
              dataType: 'json',
              url: '/restful/fortune',
              data: {
                action: 'load-userlist'
              },
            });
        },



        getUserList: function() {
            if(projectTaskModal.cache.isUserObjLoaded){

                console.log('userList',projectTaskModal.cache.userList);
            }else{
                console.log('userlist Obj not loaded =(');
            }
        },


        getCurrentUser: function(user_id) {
            if(projectTaskModal.cache.isUserObjLoaded){
                myUserData[1].username
                console.log('userList',projectTaskModal.cache.userList);
            }else{
                console.log('userlist Obj not loaded =(');
            }
        },


        getUserById: function(user_id) {
          var userList = projectTaskModal.cache.userList;
          for (var i = 0; i < userList.length; i++) {
            if (userList[i].id === user_id) {
               user = {
                  id: userList[i].id,
                  username: userList[i].username,
                  role: userList[i].role,
                  gravatar: userList[i].gravatar,
               }
              return user;
            }
          }
          throw "Couldn't find object with user_id: " + user_id;
        },

      },
    };


    // Run Init on DOM Ready
    $(function() {
        projectTaskModal.init();

    });

}(this, document, jQuery));

浪费的内存?

在当前方法中,我没有单独的User对象。我基本上将用户列表存储在:

全局变量
3个单独的JS对象文件中的每一个的本地变量

这似乎是在浪费大量内存?将用户列表和数据存储在自己的专用User对象中会将4x用户列表减少到1吗?

快速阅读-目标大纲

我的项目管理应用程序中有3个或更多JavaScript文件/对象,它们都需要访问共享数据,例如 Userlist , Debug/Mocking , Milestones List , Tags List ,以及更多!

我不想让这些对象文件中的每一个从服务器加载数据,而是通过AJAX请求在相同的页面加载上反复加载相同的内容,我希望加载一次,并在所有JS对象/文件之间缓存和共享。

由于我是JS新手,我不确定在不使用第三方库的情况下实现这一目标的最佳途径!(jQuery正常)

为了简单起见,假设有3个JS对象/文件,Userlist是其中唯一可以共享的东西。

在页面加载中,我第一次尝试使用PHP将Userlist作为JSON对象加载到DOM作为全局变量。

如果找不到,我希望有一个回退,这样JS可以在需要时发出AJAX请求来加载用户列表。it将加载用户列表,在本地缓存完成工作的对象,然后将其作为全局变量缓存,就像PHP应该做的那样!在全局缓存之后,下一个要检查全局用户列表的JS文件应该找到它并将其本地缓存到自身,而无需执行任何服务器请求。

我在这里担心的是,我需要在所有3个JS对象/文件中复制这种加载/缓存机制!

而且我认为这可能会导致大量的记忆,这是可以避免的?

所以我的主要问题是,我上面描述的方法看起来像是一个坏方法吗?我提到的问题是真正的问题吗?如果这都是真的,还有什么更好的替代路线?

我在想,也许不是必须将所有这些用户代码复制到3个对象/JS文件中,而是可能是它;s自己的 User{} 对象

如果有一个User对象来处理加载Userlist并检查它;那么我如何最好地访问其他3个JS对象/文件中的User对象数据?

我希望这是合理的,我很难解释。

1 回复 | 直到 9 年前

Juank SuperDJ 9 年前

通过让一组js文件处理一个数据层,可以进一步分离您的关注点。我们可以命名这些 services 。另一组 modules 其将处理应用程序(或UI插件,例如图像库)的流并使用由数据层管理的数据。这听起来很漂亮,让我们用我喜欢在某些项目中使用的模式来跳代码。

在我加载的第一个js文件中,我为我的项目定义了一个全局命名空间

// main.js
(function(){
    window.MyCoolProject = {
        services: {},
        modules: {},
        helpers: {},
        laserGuns: {},
        etc: {}
    };
})();

通过这种方式,我们以有组织的方式将公共方法公开给我们的其他代码,并避免与其他js库发生冲突。然后加载数据层。

// services/user.js
// this file has all the functions required to load user data, these will be a bunch of ajax calls

(function(){

    // we can use this to cache data, even though we can cache via jquery. more on this later
    var cached = {};

    MyCoolProject.services.UserService = {
        getUsers: function(callback){
            // if the cache object has a 'users' property, we have already loaded this data so we returned the cached version of this. Note that we don't return data, we pass it through a callback as a asynch call
            if (cache.users){
                 callback(cache.users);
                 return;
            }
            // if there is no cached data, we make the ajax call
            $.ajax({
                 url: 'path/to/api.json'
                 method: 'GET',
                 // jquery also provides a cache for ajax calls, you can experiment with both to see which better suits your needs
                 cache: true,
                 success: function(data){
                     // once loaded we can manually cache the data
                     cache.users = data;
                     callback(cache.users);
                 }
            });
        },
        getUser: function(id, callback){ ... },
        etc: function(callback){ ... }
    };
})();

当你打电话的时候

MyCoolProject.services.UserService.getUsers(function(users){
    console.log(users); // will be the same list of users, despite how many times you call it. You will get the same cached version
});

进入模块。我相信这些代码可能与您已经拥有的代码相同,只是改变了加载数据的方式,以调用上面提到的服务层中的函数。您可以在不同的文件中调用相同的函数,并且不会有重复的数据。然而,有一个js gotcha!

在js中,对象(和数组)存储为彼此的引用。这意味着做一些事情,比如:

var a = {},
    b = a,
    c = b;

意味着 a 与 c 以及对 一 将反映在 c 从内部来说,这是同一块内存,但我相信有人比我更有资格解释这一点。如果将相同的数据对象拉到不同的其他位置,基本上不需要担心内存消耗。您需要注意的是,一个模块不会更改该数据,因为它会更改所有其他模块。如果在某些情况下需要更改数据对象,则必须先克隆它(请参见jquery中的$.exd())。

根据所有这些繁文缛节,模块将看起来像这样

// modules/userImageGallery.js
// a strange image gallery that shows a mugshot of each user
(function(){
    // we autoexecute the module and push its public methods into its namespace
    MyCoolProject.modules.UserImageGallery = (function(){

        var users = [];

        MyCoolProject.services.UserService.getUsers(function(data){
            users = data;
        });

        function next(){ currentUserIndex++; }
        function prev(){ currentUserIndex--; }

        ... etc ...

        // we expose the desired methods
        return{
            next: next,
            prev: prev
        };
    })();
})();

// now we, or any other module, can control the image gallery by calling
MyCoolProject.modules.UserImageGallery.next();

注意,javascript中有几种模式可供使用。有闭包、原型、单体(带有函数的对象)等。重要的是公共函数被推送到相应的全局命名空间中。

我希望现在您可以看到这对您的代码组织有何好处,您可以继续增长和添加模块和服务,并保持一切有序,但其他人可以访问。另一个好处是,您可以通过控制台访问这些方法,从而可以更轻松地运行测试。

展望未来

鉴于您提到自己是javascript新手,我建议您采用无框架方法。通过这种方式,您将了解js的所有调整和好处。一旦您感到舒适,就考虑查看angular或ember或任何其他数据绑定框架。它们提供了更好的关注点分离、对应用程序流的更多控制、改进的安全性和依赖性管理。希望你喜欢这趟旅程!