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/