Генерация ненавязчивого JS - PullRequest
Новая
       7

Генерация ненавязчивого JS

0 голосов
/ 10 июня 2010

Я много читал о ненавязчивом JS и о том, как его генерировать, и о том, что такое джаз ...

Моя проблема в следующем: у меня есть сайт, который сильно зависит от mod_rewrite, так что, по сути, всезапросы страниц отправляются на index.php, который генерирует основную структуру страницы и затем включает соответствующую страницу.Теперь на сайте есть разные разделы, и каждый раздел использует разные функции Javascript (например, для разных запросов AJAX).

Теперь, если бы я просто прикрепил функцию к onload страницы, очевидно,это не сработает, так как мне не нужно инициализировать одни и те же вещи для каждой страницы ... так, как лучше всего справиться с этой ситуацией?

Надеюсь, ситуация ясна, я буду счастливуточнить при необходимости

Ответы [ 3 ]

3 голосов
/ 10 июня 2010

Вы можете использовать addEventListener (стандартный) или attachEvent в HTML-коде, создаваемом вспомогательными страницами PHP.

Синтаксис прост. Э.Г. 

document.addEventListener("load", someFunction, false);

Это позволяет вам генерировать полный тег body в index.php, но запускать разные обработчики загрузки для каждой страницы. Также обратите внимание, что вы можете использовать это несколько раз для одного и того же элемента.

1 голос
/ 10 июня 2010

Я бы просто поместил его в файл .js.

mysite_common.js - общие утилиты и функции сайта

mysite_page_a.js - уникальные функции для страницы a

mysite_page_b.js - уникальные функции для страницы b

для страницы b вы включаете b.js, в то время как на странице a вы добавляете a.js

Затем в свой соответствующий unique.js вы можете свернуть свою функциональность в ondomready или аналогичном.

Держите его отдельно от вашего PHP, тогда это будет намного меньше раздражать позже, это также означает, что вы можете положиться на кеширование для своих js, чтобы сохранить нагрузку на страницу меньше.

Вы также можете посмотреть на такие вещи, как загрузчик YUI, который позволяет вам делать гораздо более сложные вещи, такие как загрузка по требованию битов функциональности js.

Вы можете использовать делегирование событий для предоставления различных функций в зависимости от контекста.

По сути, он работает, подключая прослушиватель событий к элементу контейнера, который фиксирует щелчки на дочерних элементах.Затем вы можете полностью отказаться от отдельных прослушивателей событий, а также взглянуть на подсказки родителей.скажем: 

<div id='container' class='page_a'>
...
    <input name='somename'>
...
</div>

Тогда 

var attachDelegates = function(container){
    container.onclick = function(e) {
    e = e || window.event;
    var t = e.target || e.srcElement;

    //Your logic follows
    if(t.name === 'somename'){
         dosomething(t);
    }
    if(t.className === 'someclass'){
         ... something else ...
    }
};

и onload = function(){attachDelegates('container');};

Функция attachDelegates может быть разной для каждой страницы, или вы можете иметь монолитную и простуюприкрепите подсказки к контейнеру или будьте внимательны к тому, какие классы вы добавляете.

Это гораздо более последовательные объяснения и примеры:
http://cherny.com/webdev/70/javascript-event-delegation-and-event-hanlders
http://blog.andyhume.net/event-delegation-without-javascript-library

Лично я использую YUI3 http://developer.yahoo.com/yui/3/examples/node/node-evt-delegation.html

, поскольку это дает мнеСелекторы стиля CSS3 и до сих пор довольно легко.

1 голос
/ 10 июня 2010

Нико, я бы предложил создать собственный код javascript для каждой включенной страницы (не важно, где на странице вы добавляете тег сценария) и, как предложил Мэтью, после того, как вы определили функцию, запускаемую при загрузке страницы, используйтеaddEventListener для загрузки этой пользовательской функции по «load»
Допустим, вы определяете функцию pageinit () где-то в теле включенного документа 

function pageinit(){..
}
window.addEventListener("load", function() { pageinit(); }, false);

Имеет ли это смысл для вашего проекта?*

...