html, js 代码如何分离?

Question

<div style="display: none">
    <p id="from_pinyin"><?php echo $params['from_pinyin']?></p>
    <p id="to_pinyin"><?php echo $params['to_pinyin']?></p>
</div>
<section id="trainDetail">
    <ul class="train-info">
        <li class="train-info-detail flex-box">
            <div class="left-part flex1">
                <p id="from_station_name"><?php echo $params['from_station_name']?></p>
                <p id="from_time"><?php echo $params['from_time']?></p>
                <p id="from_date"><?php echo $params['from_date']?></p>
            </div>
            <div class="center-part">
               <p id="train_number"> <?php echo $params['train_number']?></p>
            </div>
            <div class="right-part flex1">
                <p id="to_station_name"><?php echo $params['to_station_name']?></p>
                <p id="to_time"><?php echo $params['to_time']?></p>
                <p></p>
            </div>
        </li>
    </ul>

    <header id="head">
        <nav id="headnav">
            <ul class="font-14">
                <li id="preDate">前一天</li>
                <li id="currentDate">
                    <span><?php echo $params['from_date']?></span>
                    <em class="icon-all down-arrow"></em>
                </li>
                <li id="nextDate">后一天</li>
            </ul>
        </nav>
    </header>

    <div class="sel_wrapper">
        <ul id="seats_info">

        </ul>
    </div>
</section>

<div id="calender_picker">
</div>

<div class="tip" style="display: none;">
</div>

<div id="loadingToast" class="weui_loading_toast" style="display: none;">
    <div class="weui_mask_transparent"></div>
    <div class="weui_toast">
        <div class="weui_loading">
            <!-- :) -->
            <div class="weui_loading_leaf weui_loading_leaf_0"></div>
            <div class="weui_loading_leaf weui_loading_leaf_1"></div>
            <div class="weui_loading_leaf weui_loading_leaf_2"></div>
            <div class="weui_loading_leaf weui_loading_leaf_3"></div>
            <div class="weui_loading_leaf weui_loading_leaf_4"></div>
            <div class="weui_loading_leaf weui_loading_leaf_5"></div>
            <div class="weui_loading_leaf weui_loading_leaf_6"></div>
            <div class="weui_loading_leaf weui_loading_leaf_7"></div>
            <div class="weui_loading_leaf weui_loading_leaf_8"></div>
            <div class="weui_loading_leaf weui_loading_leaf_9"></div>
            <div class="weui_loading_leaf weui_loading_leaf_10"></div>
            <div class="weui_loading_leaf weui_loading_leaf_11"></div>
        </div>
        <p class="weui_toast_content">加载中</p>
    </div>
</div>



<script>
    var fromPinyin = "";
    var toPinyin = "";
    var trainNumber = "";


    function initParams(){
        fromPinyin = $("#from_pinyin").text().trim();
        toPinyin = $("#to_pinyin").text().trim();
        trainNumber = $("#train_number").text().trim();
    }

    function appendZero(num){
        return num < 10 ? "0" + num : num;
    }

    function getNextDay(d){
        var weekArray = new Array("日","一","二","三","四","五", "六");
        var date = new Date(d);
        date.setTime(date.getTime() + 1000 * 60 * 60 * 24);
        return date.getFullYear() + "-" + appendZero(date.getMonth() + 1) + "-" + appendZero(date.getDate()) + " " + "周" + weekArray[date.getDay()];
    }

    function getPrevDay(d){
        var weekArray = new Array("日","一","二","三","四","五", "六");
        var date = new Date(d);
        date.setTime(date.getTime() - 1000 * 60 * 60 * 24);
        return date.getFullYear() + "-" + appendZero(date.getMonth() + 1) + "-" + appendZero(date.getDate()) + " " + "周" + weekArray[date.getDay()];
    }


    function refreshYuPiao(from, to, date, trainNumber){
        $("#loadingToast").show();
        $(".sel_wrapper").hide();
        $("#seats_info").children().remove();
        $.ajax({
            async: true,
            url: "/remanent?" + "from=" + from + "&to=" + to + "&date=" + date + "&trainNumber=" + $.trim(trainNumber),
            success: function(msg){
                $("#loadingToast").hide();
                $(".sel_wrapper").show();

                var data = $.parseJSON(msg);
                var htmlStr = "";

                for(var i = 0; i < data.length; i++){
                    var li = "";
                    if(data[i]['seat_num'] == 0){
                        data[i]['seat_num'] = '已售空';
                        li = "<li class='opacity'>";
                    }else{
                        li = "<li>";
                    }

                    var line = "<span class='sel_seats'>" + data[i]['seat_name'] + "</span>"+
                                 "<span class='sel_price'><label class='price'>" + data[i]['seat_price'] + "</label></span>"+
                                 "<span class='sel_num'>" + data[i]['seat_num'] +"</span>" +
                                 "<button type='button' class='sel_btn' onclick='buy(\""+ data[i]['seat_name']  + "\")'>预 定</button></li>";
                    line = li + line;
                    htmlStr += line;
                }
                $("#seats_info").append(htmlStr);
            },
        });
    }

    function init(){
        makeCalenderLayout();       //生成日历布局
        $("#calender_picker").hide();    //隐藏日历布局

        var from = $("#from_pinyin").text();        //进入页面先刷新余票
        var to = $("#to_pinyin").text();
        var date = $("#from_date").text();
        date = $.trim(date).split(" ")[0];
        var trainNumber = $("#train_number").text();
        trainNumber = $.trim(trainNumber);
        refreshYuPiao(from, to, date, trainNumber);

        $("tbody tr td:first-child, tbody tr th:first-child").addClass("sunday");     //添加周六周日的样式
        $("tbody tr td:last-child,  tbody tr th:last-child").addClass("saturday");

        var date = new Date();
        var d = date.getDate() + 1;
        $("[data-day='"+ d +"']").first().addClass("blank round");   //给日历上的今天添加样式
        $("[data-day='"+ d +"']").first().parent().prevAll().addClass("disable-color");
    }

    $(function () {
        init();
        initParams();
        showTip();
        //下一天
        $("#nextDate").click(function(){
            var currDate = $("#currentDate").text().trim();
            var date = currDate.split(" ")[0];
            $("#currentDate span, #from_date").text(getNextDay(date));

            var date = $("#from_date").text();
            date = $.trim(date).split(" ")[0];
            refreshYuPiao(fromPinyin, toPinyin, date, trainNumber);

        });

        //前一天
        $("#preDate").click(function(){
            var currDate = $("#currentDate").text().trim();
            var date = currDate.split(" ")[0];
            $("#currentDate span ,#from_date").text(getPrevDay(date));

            var date = $("#from_date").text().trim();
            date = $.trim(date).split(" ")[0];
            refreshYuPiao(fromPinyin, toPinyin, date, trainNumber);
        });

        //选择日期
        $("#currentDate").click(function(){
            $("section").hide();
            $("#calender_picker").show();
            $(".tip").show();
        });

        getTextFromCalender();
    });



    function isLeap(year){
        return (year % 100 == 0 ? (year % 400 == 0? 1 : 0) : (year % 4 == 0 ? 1 : 0));
    }

    // 日期布局生成
    function makeCalenderLayout(){
        var html = makeSingleMonthLayout(2015, 11);
        var html2 = makeSingleMonthLayout(2015, 12);
        var html3 = makeSingleMonthLayout(2016, 1);
        $("#calender_picker").append(html);
        $("#calender_picker").append(html2);
        $("#calender_picker").append(html3);

    }

    /**
     *
     * 根据年,月,生成指定月份的html文件
     *
     * @params year 年
     * @params month 1月份为1, 从1开始计数
     * @return
     *          "<div class='calendar_wrapper'>"
     *              "<table>"
     *                  "<tbody class='calender_month'>"
     *
     *                  "</tbody>"
     *              "</table>"
     *           "</div>"
     * */
    function makeSingleMonthLayout(year, month){
        var temp = year + "-" + appendZero(month);
        var preHtml = "<div class=\"calendar_wrapper\" data-ym=\"" + temp + "\"><table><h3>" + year + "年" + month + "月</h3><tbody class=\"calender_month\"><tr><th class=\"sunday\">日</th><th>一</th><th>二</th> <th>三</th><th>四</th>" +
            "<th>五</th><th class=\"saturday\">六</th></tr>";
        var afterHtml = "</tbody></table></div>";

        var daysOfMonth = new Array(31, 28 + isLeap(new Date().getFullYear()), 31,30,31,30,31,31,30,31,30,31);
        var date = new Date(year, month-1);
        date.setDate(1);
        var firstDayOfMonth = date.getDay();
        var rows = Math.ceil((daysOfMonth[date.getMonth()] + firstDayOfMonth) / 7);

        var html = "";
        for(var row = 0; row < rows; row++){
            var line = "<tr>";
            for(var col = 0; col < 7; col++){
                var d = (row * 7 + col) - firstDayOfMonth + 1;    //每个单元格的日期
                var cell = "<td><div data-day=\"" + d + "\">" + d + "</div></td>";
                if(d < 1 || d > daysOfMonth[date.getMonth()])
                    cell = "<td></td>";
                line += cell;
            }
            line = line + "</tr>";
            html += line;
        }
        return  preHtml + html + afterHtml;
    }

    /*
    * 得到日期
    * @returns
    * 2015-11-05 周四
    *
    * **/
    function getTextFromCalender(){
        var weekArray = new Array("日","一","二","三","四","五", "六");
        $("div[data-day]").click(function(){
            var ym = $(this).parents(".calendar_wrapper").attr("data-ym");
            var ymd = ym + "-" + appendZero($(this).text());
            var w = " 周" + weekArray[new Date(ymd).getDay()];

            $("#currentDate span").text(ymd + w);
            $("#calender_picker").hide();    //隐藏日历布局
            $("section").show();

            var from = $("#from_pinyin").text();        //进入页面先刷新余票
            var to = $("#to_pinyin").text();
            var trainNumber = $("#train_number").text();
            refreshYuPiao(from, to, ymd, trainNumber);
        });
    }

    function showTip(){
        var currentDate = new Date();
        var timestamp = new Date(new Date().getTime() + 60 * 24 * 3600 * 1000);
        var time = new Date(timestamp);
        var text = "今天是 " + (currentDate.getMonth() + 1) + "月" + (currentDate.getDate() + 1)
            + "日, 可以购买" + (timestamp.getMonth() + 1) + "月" + (timestamp.getDate() + 1) + "日的车票."
            + "部分车次预售期特殊, 请以车站当日公布的标准";

        $(".tip").text(text);
    }


    /**
     *  跳转到buy的界面
     *
     * */
    function buy(seatName){
        var fromDate = $("#from_date").text();
        fromDate = $.trim(fromDate).split(" ")[0];
        var url = "/buy1" + "/" + fromPinyin + "/" + toPinyin + "/" +
                    trainNumber + "/" + fromDate  + "/" + seatName;
        window.location.href = url;
    }

</script>

新人刚刚参加工作,新手.
如上的代码只是一个其中的一个页面.
我总感觉写的比较乱.比如js代码是不是和html代码写一个文件里不大好,命名不规范之类的
请大家帮我提点意见.谢谢

Answer 1

Web标准的核心理念就是将网页的结构(HTML)、样式(CSS)和行为(JavaScript)分离开来，所以js代码和html代码写一个文件里不符合Web标准的核心理念，不倡导这种做法。

建议的做法是把JavaScript代码存为一个扩展名为.js的独立文件，在</body>标签之前放一个<script>标签，并把它的src属性指向该文件：

<body>
...
...
<script src="file.js"></script>
</body>
<!-- 这样能使浏览器更快地加载页面 -->

关于命名规范及其他各种规范，推荐网易的NEC规范读一读

Answer 2

一般来说，楼上的说法是正确的，但在某些情况下，也可以把JS或CSS写在HTML里面，比如js和CSS代码很少，只有10来行，这样再把JS或CSS单独成为文件再引入就得不偿失了。因为HTML和JS分离的目的是管理和编写方便，尤其是当代码非常多的时候，这是非常必要的。
比如引入一个jquery插件。
<script src='jquery.min.js' type='text/javascript'></script>

Answer 3

不过一个项目的 js 应该是不会少的，在项目中应该把js放在一个文件夹中，然后通过<script>标签引进来，这样比较利于后面的维护。当然在命名上也要规范一点，至少能让人一眼能明白这个 js 是做什么操作的，或者是和哪个视图页面相对应。最好的话，是能和其他的前端开发人员一起制定一个关于这个项目的命名库，写一个文档记录下来，这样也便于后面来的人看懂代码提高生产力