10
09/2014
javascript 模式
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/