Как отделить JQuery от HTML

Question

Я перепробовал все комбинации, о которых мог подумать, и не понял этого.Вот мой рабочий код (все в HTML-документе):

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        var $alert = $('.alert');
        if ($alert.length) {
            var alerttimer = window.setTimeout(function () {
                $alert.trigger('click');
            }, 3000);
            $alert.animate({ height: $alert.css('line-height') || '50px' }, 200).click(function () {
                window.clearTimeout(alerttimer);
                $alert.animate({ height: '0' }, 200);
            });
        }
    });
</script>

А вот и вызов:

<div id="alert"><a href="../Home/English">English</a></div>

Теперь я хочу провести рефакторинг, чтобы скрипт перешел в файл .js.Как это будет выглядеть после рефакторинга?Спасибо!

Answer 1

Просто поместите свой пользовательский код в файл .js, загрузите его на свой сервер и укажите его под ядром jQuery:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="custom.js"></script>

и затем внутри файла custom.js вы помещаете свой собственный JS:

$(function () {
    var $alert = $('.alert');
    if ($alert.length) {
        var alerttimer = window.setTimeout(function () {
            $alert.trigger('click');
        }, 3000);
        $alert.animate({ height: $alert.css('line-height') || '50px' }, 200).click(function () {
            window.clearTimeout(alerttimer);
            $alert.animate({ height: '0' }, 200);
        });
    }
});

Обновление

Я только что заметил, что в вашем примере HTML есть элемент с идентификатором alert, а ваш код JS ищет элементы с КЛАССОМ alert. Если вы хотите настроить таргетинг на идентификатор, вы должны добавить хеш (#), а не точку:

var $alert = $('.alert');

Должен измениться на:

var $alert = $('#alert');

Возможно, вы захотите получить доступ к селекторам jQuery (это сэкономит вам много времени в будущем): http://api.jquery.com/category/selectors/

Answer 2

Вам также следует посмотреть различные блоги и статьи о " ненавязчивом JavaScript ":

• http://www.onlinetools.org/articles/unobtrusivejavascript/

• http://www.webstandards.org/action/dstf/manifesto/

• http://icant.co.uk/articles/seven-rules-of-unobtrusive-javascript/

Answer 3

В дополнение ко всем предлагаемым решениям я просто хочу добавить еще несколько предложений, которые помогут немного подсушить, попробуйте использовать метод расширения HtmlHelper:

public static MvcHtmlString JsScript(this HtmlHelper helper, string jsFileName)
{
  TagBuilder builder = new TagBuilder("script");
  builder.Attributes.Add("language", "javascript");
  builder.Attributes.Add("type", "text/javascript");
  builder.Attributes.Add("src", "Scripts/" + jsFileName);
  return new MvcHtmlString(builder.ToString(TagRenderMode.Normal));
}

Таким образом, если вы решили, что хотите переместить свойСценарии в другую папку, все, что вам нужно сделать, это обновить метод расширения, плюс он выглядит красиво в представлении:

@Html.JsScript("MyViewScript.js");

Answer 4

Выглядит хорошо, вы можете сделать это

HTML

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" src="YourScript.js"></script>

Содержимое YourScript.js

$(function () {
    var $alert = $('.alert');
    if ($alert.length) {
        var alerttimer = window.setTimeout(function () {
            $alert.trigger('click');
        }, 3000);
        $alert.animate({ height: $alert.css('line-height') || '50px' }, 200).click(function () {
            window.clearTimeout(alerttimer);
            $alert.animate({ height: '0' }, 200);
        });
    }
});

Answer 5

Это будет выглядеть точно так же, за исключением отдельного файла. Допустим, файл добавлен в подпапку documentroot /js

<script type="text/javascript" src="/js/site.js"></script>

site.js

$(function () {
    var $alert = $('.alert');
    if ($alert.length) {
        var alerttimer = window.setTimeout(function () {
            $alert.trigger('click');
        }, 3000);
        $alert.animate({ height: $alert.css('line-height') || '50px' }, 200).click(function () {
            window.clearTimeout(alerttimer);
            $alert.animate({ height: '0' }, 200);
        });
    }
});