当我使用gulp和browserify时,我的javascript模块不工作

My javascript module is not working when I used gulp and browserify

本文关键字:我的 javascript 模块 工作 browserify gulp      更新时间:2023-09-26

当我用gulp和browserify连接javascript文件时,我的javascript模块不工作。

这是我的模块

LastestPost.js

var PostBox = require('../objects/PostBox');
var LastestPosts = (function() {
    var btnLeft;
    var btnRight;
    var postBoxs = (function() {
        var arr = new Array();
        for (var i=0; i<4; i++) {
            var post_box = new PostBox();
            arr.push(post_box);
        }
        return arr;
    })();
    var index = 0;
    var lastIndex;

    return({
        initDOM: function($) {
            btnLeft = $('#btn-lastest-previous');
            btnRight = $('#btn-lastest-next');
            /* some codes */
        },
        initIndex: function() {
            if (index == 0) {
                /* some codes */
            }
            else if (index == lastIndex) {
                /* some codes */
            }
            else {
                /* some codes */
            }
        },
        getLastIndex: function() {
             $.get('/lastestposts-getlastindex', function(data) {
                lastIndex = data;
             });
        },
        updatePostBox: function() {
            var parameter = { index: index };
            $.get('/lastestposts-getindex', parameter, function(data) {
                /* some codes */
            });
        },
        increaseIndex: function() {
            if (index < lastIndex) {
                index++;
             }
         },
        decreaseIndex: function() {
            if (index > 0) {
                index--;
            }
         },
        getLeftBtn: function() {
             return btnLeft;
        },
        getRightBtn: function() {
            return btnRight;
        }
    });
 })();
 module.exports = LastestPosts;

Main.js

var LastestPosts = require('./module/LastestPosts');
$(document).ready(function() { 
    LastestPosts.initDOM($);
    LastestPosts.getLastIndex();
    LastestPosts.updatePostBox();
    LastestPosts.initIndex();
    (LastestPosts.getRightBtn()).click(function() {
        LastestPosts.increaseIndex();
        LastestPosts.initIndex();
        LastestPosts.updatePostBox();
    });
    (LastestPosts.getLeftBtn()).click(function() {
        LastestPosts.decreaseIndex();
        LastestPosts.initIndex();
        LastestPosts.updatePostBox();
    });
});

btnLeftbtnRight点击良好,但LastestPosts.increaseIndex()LastestPosts.initIndex()不工作。

在使用gulp和browserify之前,我像这样导入每个javascript文件。

<script src="./js/objects/PostBox.js"></script>
<script src="./js/module/Lastestposts.js"></script>
<script src="./js/main.js"></script>

这工作得很好,但在我用gulp和browserify连接javascript文件后,我的javascript模块不工作…

这是我的吞咽设置

gulp.task('build-js', function () {
    return browserify('./public/src/js/main.js')
        .bundle()
        .pipe(source('bundle.js'))
        .pipe(gulp.dest('./public/dist/js'));
});

请帮助这个小学生,很抱歉我的英语水平很差。我不擅长英语

不确定到底哪里出了问题,但问题归结为终端中的这个错误-

express deprecated res.send(status): Use res.sendStatus(status) instead app.js:107:9

这意味着最终的问题是这个特定的函数没有返回lastIndex:

getLastIndex: function() {
    $.get('/lastestposts-getlastindex', function(data) {
        lastIndex = data;
    });
},

如果将res.send(4)修改为res.send({lastIndex: 4});,将getLastIndex()修改为

getLastIndex: function() {
    $.get('/lastestposts-getlastindex', function(data) {
        lastIndex = data.lastIndex;
    });
},

不知道为什么它之前工作-但目前你的lastIndex私有变量是undefined打破一切-这就是为什么。

这个问题通常出现在'不干净'的内联注释中。

例如:

/*console.log('this will work');*/
/*
console.log('this might not work when minified');
*/

尝试删除所有注释并再次缩小代码