• 1. 青い夜の記憶 - 须藤ひとみ
  • 2. 念夏 - 马天宇
  • 3. 偏爱 - 张芸京
  • 4. エンド・タイトル-东京爱情故事
  • 5. 夜色 - 玉置浩二
  • 6. オセンチな歩美 - 大野克夫
  • 7. The_Godfather_Waltz/Speak_Softly_Medley - Jack_Jezzro
  • 8. 猫になりたい - スピッツ
  • 9. Love_Theme_from_Cinema_Paradiso - Jeff_Steinberg
  • 10. 時には昔の話を - 加藤登紀子
person

每次写js脚本,基本的流程无非的可重复的功能先定义一个函数,初始化的部分一股脑的丢进$(funcation(){})。当需要加入新的功能,又要重复以上过程。
当项目写到一定程度,代码已经揉成一团了。随着项目的跟进,修改难度越来越大,也酝酿出各种鲜为人遇的BUG。

第一个原因是JS的对象语法不熟悉,不敢用,感觉不必用。第二个原因主要是为了简便,上手就做。
所以每次都在面向过程写,面向百度写,有什么函数都往里面塞,Jq对象使用不规范,变量命名随心所欲,一个函数功能不单一、定义太长、到处乱调用,不必要的重复执行,一大堆冗余的循环和判断...

回头看看自己的代码......算了,还是重写吧,重写还快点。

JavaScript

变量

  1. 命名规范 : 类型+对象描述的方式,如果没有明确的类型,就可以使前缀为名词
类型小写字母
arraya
booleanb
functionfn
inti
objecto
regularr
strings
  1. 避免全局变量污染,这样使用外层变量。
   (function($, w, d){  'use strict';

     $(function() {
       w.alert(d.querySelectorAll('div').length);
     });
   }(jQuery, window, document));
  1. Strict 模式。应该在你的脚本中启用严格模式,最好是在独立的 IIFE 中应用它。避免在你的脚本第一行使用它而导致你的所有脚本都启动了严格模式,这有可能会引发一些第三方类库的问题。

面向对象

var Vehicle = function () {
  this.price = 1000;
};
var v = new Vehicle();
  • 为了与普通函数区别,构造函数名字的第一个字母通常大写。
  • 生成对象的时候,必须使用new命令

否则构造函数只是一个普通的函数,this也代表为全局对象。this就是指代当前环境。

全局的时候,this就指代顶层对象window.

嵌套问题:

  var o = {
    f1: function() {
      console.log(this);
      var that = this;
      var f2 = function() {
        console.log(that);//this-->window
      }();
    }
  }

  o.f1()
  // Object
  // Object

为了防止各种意外发生,JavaScript 提供了callapplybind这三个方法,来切换/固定this的指向。

a.call(obj,arg1,arg2) // 在对象obj的环境下运行a方法,后面可传入方法的参数
var func = counter.inc.bind(counter);//这时候func方法中所在的环境就是counter

将包含this的函数当作回调函数传递是危险的,使用bind()解决。

瞎用this是非常危险的。嵌套、传递函数、函数赋值都必须谨慎。

  • 如果构造函数内部有return语句,而且return后面跟着一个对象,new命令会返回return语句指定的对象;否则,就会不管return语句,返回this对象。
  • new.target可以判断函数调用的时候,是否使用new命令。

严格模式

为了保证构造函数必须与new命令一起使用,一个解决办法是,构造函数内部使用严格模式,即第一行加上use strict。这样的话,一旦忘了使用new命令,直接调用构造函数就会报错。

IIFE

立即执行函数表达式(Immediately-invoked function expression)
在ES5中,是没有块级作用域的,而匿名函数的调用执行,匿名函数内部就作为了一个“块级作用域”。

(function(){
    //do something
})();
  1. 创建块级(私有)作用域,避免了向全局作用域中添加变量和函数。
  2. IIFE中定义的任何变量和函数,都会在执行结束时被销毁。

函数转换为表达式的方法并不一定要靠分组操作符(),我们还可以用void操作符,~操作符,!操作符……

!function($){
  //do something;
}(jQuery);

JQuery

JQuery变量

  1. 尽量使用CDN加载。使用裸协议的URL(去掉http:或者https:)。
  2. JQuery对象的变量使用$开头,驼峰命名。
  3. JQuery对象尽量复用。
  4. 使用单引号。
  5. 避免全局变量。
  6. 尽量一个var定义需要的变量。
  7. 短路求值。
var time = defaultTime || createTime();

选择器

  1. 查询元素首选ID选择器。
  2. 查询伪类、类选择器,尽量附带其他约束,防止扫描这个DOM树。
var $username = $("#login-form").find("input.username");
  1. 首先明确选择器后边部分。
// 未优化
$("div.data .gonzalez");
// 优化
$(".data td.gonzalez");
  1. 避免选择器冗余。
  2. 添加选择器上下文。
// 只在#class-container里扫描
$('.class', '#class-container');
  1. 避免使用通配符选择器
$('div.container > *'); // BAD
$('div.container').children(); // BETTER
  1. 缓存父元素,便于find()子元素。

DOM操作

  1. 操作任何元素前先将其从文档卸载,然后再贴回去。
var $myList = $("#list-container > ul").detach();
//...a lot of complicated things on $myList
$myList.appendTo("#list-container");
  1. 减少循环中使用append
    数组的array.join('')比直接+连接字符串更快。
  2. 不直接使用不一定存在的元素。判断一下。
var $mySelection = $("#nosuchthing");
if ($mySelection.length) {
    $mySelection.slideUp();
}

事件

  1. 不要用匿名函数绑定事件。
// GOOD
function myLinkClickHandler(){...}
$("#myLink").on("click", myLinkClickHandler);
  1. Document ready不要为匿名函数
// GOOD
$(initPage); // or $(document).ready(initPage);
function initPage(){
  // Document ready里可以初始化变量和调用其他初始化函数
}
  1. 函数放在外部,行内JS调用
<script src="my-document-ready.js"></script>
<script>
  // 任何其他需要设置的全局变量
  $(document).ready(initPage); // or $(initPage);
</script>
  1. 不要在HTML文件里添加行为(行内JS),这是调试的噩梦。
<a id="myLink" href="#" onclick="myEventHandler();">my link</a> <!-- BAD -->
$("#myLink").on("click", myEventHandler); // GOOD
  1. 对事件使用自定义命名空间。解绑特定事件,不影响其他地方在这个元素上绑定的事件。
$("#myLink").on("click.mySpecialClick", myEventHandler); // GOOD
// 后面会很容易的解绑这个特定的点击事件
$("#myLink").unbind("click.mySpecialClick");
  1. on()来绑定事件,自从 jquery 1.7 版本后,on() 是附加事件处理程序的首选方法。出于一致性考虑,你可以简单的全部使用 on() 方法。

Ajax

  1. 避免使用.getJSON().get(),只使用$.ajax(),前两者都是在内部使用的后者。
  2. 不要在https的网站上使用http请求。侧重无模式的url(在URL上去掉http/https)
  3. 不要把请求参数放在URL里,而是放在data对象里去。便于阅读和修改参数。
  4. 明确设置数据的类型dataType,这样很容易知道当前正在处理什么样的数据。
  5. 有Ajax加载的DOM,尽量使用事件委托。防止插入HTML后还要绑定事件。
  6. Ajax模板
var jqxhr = $.ajax({
  url: url,
  type: "GET",      // 默认值GET,可根据需要配置
  cache: true,      // 默认值true, dataType是'script'或'jsonp'时为false,可根据需要配置
  data: {},         // 请求参数对象
  dataType: "json", // 设置数据类型
  jsonp: "callback",// 只在操作JSONP时设置此项
  statusCode: {     // 针对特定错误码的回调处理函数
    404: handler404,
    500: handler500
  }
});
jqxhr.done(successHandler);
jqxhr.fail(failureHandler);

动画

  1. 采用统一的动画实现方式。
  2. 不要过度使用动画效果,除非追求用户体验。
  • 尽量使用简单的show/hide/toggle/slideUp/slideDown方法来显示隐藏元素。
  • 尽量使用预定义的动画时间间隔:slow,fast或400

插件

  1. 始终选择有良好维护、优秀文档、良好测试和社区支持的插件。
  2. 细心检查该插件与正在使用的jQuery版本的兼容性。
  3. 任何通用的组件都应该抽取成jQuery插件。
  4. 开发自己的插件。

开发插件

jQuery 的插件开发模式主要有三种:

  • 通过$.extend()来扩展jQuery
  • 通过$.fn向jQuery添加新的方法(被保护的“fn”命名空间)
$.fn.randomColor = functin() {
    // plugin code
    return this;
}
$('div').randomColor();

比较正式的方式:

;(function($){
    // 定义构造函数
    function myplugin($element,options){
        this.init();
        // ...
    }

    // 添加方法
    myplugin.prototype = {
        init: function(){
            // ...
        },
        method1: function(){
            // ...
        },
        method2: function(){
            // ...
        }
    };

    // 添加到jQuery对象中
    $.fn.myplugin = function(options){
        return this.each(function(){//选择器可能有多个元素 return(链式操作)
            if (!$.data(this, 'myplugin')) {//防止同一个元素上多次初始化
                $.data(this, 'myplugin', new myplugin(this, options));
            }
        });
    }
})(jQuery);
  • 通过$.widget()应用jQuery UI 的部件工厂方式创建

其他原则

  1. 参数尽量使用对象字面量。尽可能合并。
$myLink.attr("href", "#").attr("title", "my link").attr("rel", "external"); // BAD
// GOOD
$myList.attr({
    href: "#",
    title: "my link",
    rel: "external"
});
  1. 不要把CSS混进jQuery
$("#mydiv").css({'color':red, 'font-weight':'bold'}); // BAD
.error { color: red; font-weight: bold; } /* GOOD */
$("#mydiv").addClass("error"); // GOOD
  1. 原生js效率更高。

参考来源:http://www.runoob.com/w3cnote/jquery-style-guide-html.html

新评论