10 09/2014

javascript 模式

最后更新: Wed Sep 10 2014 12:37:50 GMT+0800

Before

// @codekit-prepend "jquery.fitvids.js"
// @codekit-prepend "placeholder.js"
// @codekit-append "prism.js"

// Protect global namespace
(function($) {


  // Make videos fluid width
  $("article, .photo-grid, .single-video-wrapper, .gallery-grid .grid-5-6").fitVids({
    customSelector: "video"
  });



  // IE 9 placeholders
  $('input, textarea').placeholder();



  // Search stuff
  var openSearch = $(".open-search, #x-search, #refine-search");
  var body = $("body");

  function toggleSearch() {
    if (body.hasClass("show-nav")) {
      $("body").toggleClass("show-nav");
    } else {
      $(".search").toggleClass("open");
      $(".open-search").toggle();
      $(".close-search").toggle();
    }
  }
  openSearch.on("click", function(e) {
    e.preventDefault();
    toggleSearch();
    setTimeout(function(){
      $(".search-field").focus();
    }, 100);
  });
  var searchParts = $(".search-parts > a:not(.x-search)");
  var searchForm = $("#search-form");
  searchParts.on("click", function() {
    var el = $(this);
    var newActionURL = el.data("url");
    searchForm.attr("action", newActionURL);
    searchParts.removeClass("active");
    el.addClass("active");
  });



  // Small screen navigation stuff
  $("#show-hide-navigation").on("click", function(e) {
    e.preventDefault();
    $("body").toggleClass("show-nav");
  });



  // Code highlighting stuff
  $("pre.lang-html, pre[rel=HTML]").find("code").addClass("language-markup");
  $("code.html, code.lang-html").removeClass().addClass("language-markup").parent().attr("rel", "HTML");

  $("code.javascript").removeClass().addClass("language-javascript").attr("rel", "JavaScript");
  $("pre[rel=JavaScript], pre.lang-js, pre[rel=jQuery], pre.JavaScript").attr("rel", "JavaScript").find("code").removeClass().addClass("language-javascript");

  $("pre[rel='CSS'], pre[rel='LESS'], pre[rel='Sass'], pre[rel='SASS'], pre[rel='SCSS']").find("code").removeClass().addClass("language-css");
  $("code.css, code.lang-css").removeClass().addClass("language-css").parent().attr("rel", "CSS");

  $("pre[rel=PHP]").attr("rel", "PHP").find("code").removeClass().addClass("language-javascript");
  $("code.php").removeClass().addClass("language-javascript").parent().attr("rel", "PHP");



  // Comments Stuff
  $(".comment.buried").on("click", function() {
    $(this).removeClass("buried");
  });
  $("#view-comments-button").on("click", function(e) {
    e.preventDefault();
    $("#comments").show();
    $(this).hide();
  });



  // Illustrator links
  var timer;
  var illustratorLink = $(".illustrator-link").hide();
  $(".deals-header, .almanac-title, .videos-title, .snippets-title, .demos-title, .gallery-header, .forums-title")
    .mouseenter(function() {
      timer = setTimeout(function() {
        illustratorLink.slideDown(200);
      }, 3000);
    })
    .mouseleave(function() {
      clearTimeout(timer);
    });


})(jQuery);

After

// @codekit-prepend "jquery.fitvids.js"
// @codekit-prepend "placeholder.js"
// @codekit-prepend "highlighting-fixes.js"
// @codekit-append "prism.js"

var csstricks = {

  el: {

    body: $("body"),

    allInputs: $('input, textarea'),

    searchForm: $("#search-form"),
    searchOpeners: $(".open-search, #x-search, #refine-search"),
    searchSections: $(".search-parts > a:not(.x-search)"),
    searchField: $(".search-field"),
    search: $(".search"),
    openSearch: $(".open-search"),
    closeSearch: $(".close-search"),

    videoWrappers: $("article, .photo-grid, .single-video-wrapper, .gallery-grid .grid-5-6"),

    navToggle: $("#show-hide-navigation"),

    illustratorLink: $(".illustrator-link"),
    headerAreas: $(".deals-header, .almanac-title, .videos-title, .snippets-title, .demos-title, .gallery-header, .forums-title"),

    buriedComments: $(".comment.buried"),
    viewCommentsButton: $("#view-comments-button"),
    commentsArea: $("#comments")

  },

  timer: 0,

  init: function() {
    csstricks.bindUIActions();

    csstricks.makeVideosFluidWidth();
    csstricks.polyfillPlaceholders();

    csstricks.el.illustratorLink.hide();
  },

  bindUIActions: function() {
    csstricks.el.searchOpeners.on("click", csstricks.handleSearchClick);
    csstricks.el.searchSections.on("click", csstricks.handleSearchPartsClick);

    csstricks.el.navToggle.on("click", csstricks.mobileNavToggle);

    csstricks.el.headerAreas.on("mouseenter", csstricks.openIllustratorLinkArea);
    csstricks.el.headerAreas.on("mouseleave", csstricks.closeIllustratorLinkArea);

    csstricks.el.buriedComments.on("click", csstricks.revealComment);
    csstricks.el.viewCommentsButton.on("click", csstricks.revealCommentsArea);
  },

  makeVideosFluidWidth: function() {
    csstricks.el.videoWrappers.fitVids({
      customSelector: "video"
    });
  },

  polyfillPlaceholders: function() {
    csstricks.el.allInputs.placeholder();
  },

  handleSearchClick: function(event) {
    event.preventDefault();
    csstricks.toggleSearch();
    setTimeout(function() {
      csstricks.focusSearchField();
    }, 100);
  },

  mobileNavToggle: function(event) {
    event.preventDefault();
    csstricks.el.body.toggleClass("show-nav");
  },

  focusSearchField: function() {
    csstricks.el.searchField.focus();
  },

  handleSearchPartsClick: function(event) {
    var el = $(event.target);
    var newActionURL = el.data("url");
    csstricks.el.searchForm.attr("action", newActionURL);
    csstricks.el.searchSections.removeClass("active");
    el.addClass("active");
  },

  toggleSearch: function() {
    if (csstricks.el.body.hasClass("show-nav")) {
      csstricks.el.body.toggleClass("show-nav");
    } else {
      csstricks.el.search.toggleClass("open");
      csstricks.el.openSearch.toggle();
      csstricks.el.closeSearch.toggle();
    }
  },

  openIllustratorLinkArea: function() {
    csstricks.timer = setTimeout(function() {
      csstricks.el.illustratorLink.slideDown(200);
    }, 3000);
  },

  closeIllustratorLinkArea: function() {
    clearTimeout(csstricks.timer);
  },

  revealComment: function(event) {
    $(event.target).removeClass("buried");
  },

  revealCommentsArea: function(event) {
    event.preventDefault();
    csstricks.el.commentsArea.show();
    csstricks.el.viewCommentsButton.hide();
  }

};

csstricks.init();

via

http://css-tricks.com/can-you-over-organize-javascript/

http://css-tricks.com/how-do-you-structure-javascript-the-module-pattern-edition/