jquery best practice

odyss009

who am i

just frontend developer

What is jquery?

  • Selector Engine
  • Dom Manipulation
  • Event handling
  • Ajax
  • Etc

Selector engine

  • DOM is a mess
  • How to find specific node
  • css syntax
  • It is based on Sizzle
  • native implementation

tip

  • Don't use attr() to read a property(checked)
  • Use prop() or access the raw DOM elements
  • use closest("selector") instead of .parent()
  • keep simple

attr() vs prop()

<html>
  <input type="checkbox" checked="checked" name="isAllow"/>isAllow
  <a href="#bbb">go to hell</a>
</html>



console.log($("input").attr("checked"));
console.log($("input").prop("checked"));

console.log($("a".attr("href"));
console.log($("a".prop("href"));

      mobile

      • consider querySelector(), querySelectorAll()
      • document.getElementById
      • document.getElementsByClassName

      Dom manipulation

      • DOM API
      • createElement, appendChild, removeChild, createTextNode..
      • WTF
      • IE saved us
      • innerHTML, outerHTML, innerText, outerText

      Dom manipulation

      • JQuery provides easy way
      • html(), empty()
      • after(), before()
      • wrap(), unwrap()
      • $("<div>Hello</div>")

      sample

      <html>
          <div id="target">
          </div>
      </html>
      $("#target").html("<div>Oh~ my~</div>");
      $("#target").empty();

      $("#target").after("<div>after</div>");
      $("#target").before("div>before</div>");

      $("<div>ha ha ha</div>").appendTo($("#target"));

      Event

      • difficult to handle cross browser event
      • bind, live, delegate, click....
      • forget everything
      • remember only- on(), off()

      event

      • e.event may not be what you want.
      • e.currentTarget
      • bind vs live vs delegate vs on
      • To change context in a event handler, use $.proxy
      • Function.prototype.bind()
      • multiple event bind
      • elem.on({ click: func1, blur: func2, “focus.my”: func3 })
      • namespace events
      • use event.which for character info

      practice

      • Don't focus on JQuery
      • focus on contents
      • remove unnecessary factors
      • keep it simple

      ajax

      • communication with server
      • based on HTTP
      • stateless
      • Asynchronous
      • use $.ajaxSetup

      extend ajax

      use ajax library

      html

      • Core of web
      • contents/document
      • unobtrusive javascript
      • make it simple
      • well defined structure
      • web application

      css

      • presentation
      • layout, position, color..typography
      • SMACSS
      • OOCSS
      • CSS3
      • CSS Library

      SMACSS

      • BASE CSS
      • Widget CSS
      • Grid CSS
      • State css
      • Prefix

      javascript

      • The world's most misunderstood program language
      • prototype based
      • functional
      • dynamic
      • object literal
      • ECMA5, ECMA.next
      • Javascript Pattern

      tip

      • false, null, 0, -0, undefined, NAN, ""
      • Curry
      • Memoization
      • call, apply
      • this
      • ||,  &

      false value

      if(val == undefined || val = null) {
          //bla
      }

      if(!val) {
          //bla
      }

      || &&

      var obj = src || { name : "joe" };

      var obj = src && { name : "original" };

      async

      • Ajax, Animation, setTimeout
      • difficult to manage it
      • callback hell
      • Deferred and Promise
      • done, fail, then

      sample

      var timeoutId = setTimeout(function() {
          console.log("1st job is done");
      }, 1000);

      var asyncJob;

      asyncJob = function() {
          var dfd = new $.Deferred();
          setTimeout(function() {
              dfd.resolve();
          }, 1000);

          return dfd.promise();
      };

      asyncJob()
      .done(function() {
          console.log("job is done");
      })
      .then(function() {
          return "arg1";
      })
      .then(function(arg) {
          console.log(arg);
      });

      jquery plugin

      jquery friend

      UTIlity

      • use Lodash - alternative for underscore
      • find, findWhere, groupBy, map, reduce, filter, some..
      • throttle, debounce

      template engine

      • WTF
      var arr = [ {  "name" : "joe"}, {  "name" : "james"} ];
      for(var i = 0, len = arr.length; i < len; i++) {  var str = "<div>" + obj.name + "</div>";}

      template engine

      • a lot of template engine
      • Handlebars, Hogan,  mustache, jsviews, underscore templte.....


      {{#each comments}}
          <h2><a href="/post/ {{ name }}#{{id}}">{{title}}</a></h2>
          <div>{{body}}</div>
      {{/each}}

        application Structure

        • What is best practice for application
        • use boilerplate
        • Todo App
        • MVC
        • MVVM
        • pub/sub
        • router
        • library or framework

        library

        framework

        app scaffold library

        enjoy with source

        conclusion

        Made with Slides.com