台中前端社群_小聚#2_筆記

台中前端社群_小聚#2.md

台中前端社群_小聚#2

原來要自我介紹

jQuery Validation

• 後端必要地需要驗證，但前端需要分擔這份工作

• 使用方法： documtent

• 基本用法：

   $(".selector").validate({
   rules: {
       name: "required",
       email: {
           required: true,
           email: true
       }
   },
   messages: {
       name: "Please specify your name",
           email: {
               required: "We need your email address to contact you",
               email: "Your email address must be in the format of name@domain.com"
           }
       }
   });
  

• jQuery.validator.addMethod() – Add a custom validation method.

• 用伺服器遠端驗證 (用 ajax 進行驗證)

   $( "#myform" ).validate({
       rules: {
       email: {
           required: true,
           email: true,
           remote: "check-email.php"
           }
       }
   });
  

• 其他驗證方法

  • HTML5
  • 其他 js 套件

• Can I use - 查看 HTML5 的技術在各大瀏覽器上的支援度

SASS

• 有兩種格式： sass,scss

• 讓 CSS 變得好管理， SCSS 中可用 // 作為註解

• 可寫成巢狀

   .container {
       .header{
           ...
       }
       .footer{
           ...
       }
   }
  

• 變數

   $blue: #FF0000
   color: $blue;
  

  • 可用於建值，Ex:

    img{ #{$keyName}: ... }
    

• mixin, 類似 function

   @mixin border-radius($size:2px){ // function 化，代參數並且可設定預設值
       -webkit-border-radius: $size;
       -moz-border-radius: $size;
       border-radius: $size
   }
   
   img{
       @include mixin(5px); // 使用 include 呼叫
   }
  

• Partials & import

• extend

• 計算

  • 終端機中使用 sass -i 使用 sass 互動模式進行計算
  • 還有一些內建函數可使用
    • 顏色函數

• 有一些 directive 例如 @if, @function...

• scss => sass ，sass使用縮排，比scss不容易亂

• compass

  • 一大堆 mixin
  • 一大堆 function

• Foundation - RWD 框架

• SUSY - 更潮更新的東西

• 參考資料和資源：

  • Css2sass

• SASS 實戰教學台中場

• Code School for SASS

Ajax 基礎

• 他用 slides.com 進行報告
• json_encode($var,...) //使用16進位編碼
• json hijacking