Monthly Archive 十月 2016

By柏小白

快速激活webstorm JetBrains系列产品

随着 JetBrains 新版本的发布,注册机已然不行了。

 

注册时选择 License server,填 http://idea.xn--w0sz4as21fs7k.com/,然后点击 OK,就搞定了。如有异常联系我

License server分享:

http://www.qidianban.site:1203/

http://idea.enjoysala.top/

http://idea.lianghongbo.com/license
http://idea.qinxi1992.cn
http://idea.lanyus.com/

 

 

使用网上传统的那种输入网址的方式激活不了,使用http://idea.lanyus.com/这个网站提供的工具进行,有效期已经更新了

1、进入hosts文件中:C:\Windows\System32\drivers\etc\hosts

2、将“0.0.0.0 account.jetbrains.com”添加到hosts文件中

注意:添加只有重新打开hosts文件进行确认之后在进行下一步操作。

修改成功后如图所示:

注:将这条数据加入之后会提示保存,然后确认之后,重新打开hosts文件确认是否添加成功,有时候会提示确认两次。

另可以直接将hosts文件复制到桌面,然后就可以直接进行编辑,保存操作,编辑之后再复制到原地址中,然后在cmd命令窗口执行: ipconfig /flush dns即可。

3、进入http://idea.lanyus.com/站点,点击获得注册码,然后将注册码复制,粘贴到IDEA中

 

注:爱前端 || 爱老婆

 

By柏小白

js面向对象学习

对象

JavaScript本身是一门面向对象的语言,JavaScript所有变量都可以当作对象使用(这里是说可以当对象使用,并不是说均是对象,应该理解为可以通过点操作符来调用一些属性方法),除了两个例外 null 和 undefined。

beauty.jpg

对象使用和属性

看到这个描述的时候,我果断尝试了一下 number 类型的数字字面值( literals ),敲下回车的一瞬间笑了,这话写错了啊。查阅了JavaScript 秘密花园的内容才知道问题所在,原来是JavaScript解析器把点操作符解析为了浮点字面量。可以通过一些方法让数字字面值看起来像对象,终究而言还是不能被称为对象。

1
2
3
4
5
6
1.toString(); // Uncaught SyntaxError: Invalid or unexpected token
// 数字字面量
1..toString(); // “1”
1 .toString(); // “1”
(1).toString(); // “1”

再尝试一些其他的类型作为对象的使用

1
2
3
4
5
6
7
8
9
10
11
12
// Boolean
false.toString(); // “false”
// Array
[1, 2, 3].toString(); // 1, 2, 3
// String
“string”.match(‘s’); // [“s”]
// Function
function D() {}
D.toString(); // “function D() {}”

原型

JavaScript没有类继承模型,而是使用 prototype 原型模型。虽然在ES6中增加了 class 关键字,但只是语法糖,仍旧是基于原型。
JavaScript对象有一个指向一个原型对象的链。当试图访问一个对象上的属性时,会先搜寻该对象的属性,再搜寻该对象的原型以及原型的原型,依次网上搜索,直到找到一个名字匹配的属性或者达到原型链的末尾。

  • 原型的使用方式一
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    var F = function(x) {
    this.x = x || 1;
    }
    F.prototype = {
    add: function(y) {
    return this.x + y;
    }
    }
    var f = new F();
    f.add(2); // 3
    var f1 = new F(2);
    f1.add(4); // 6

定义了函数F模拟类,其函数表达式相当于构造函数 constructor 。函数也是对象,通过给F对象的 prototype 属性赋值对象字面量来设定F的原型。通过关键字new来实例化函数F,返回实例化对象, x 为f对象的属性, add 为f对象的方法。

  • 原型的使用方式二
    赋值原型的时候立即执行函数表达式
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    var F = function() {};
    F.prototype = function() {
    var add = function(x, y) {
    return x+y;
    };
    var test = function() {
    console.log(‘private’);
    };
    return {
    add: add
    }
    }()
    var f = new F();
    f.add(3, 3); // 6
    f.test(); // f.test is not a function

给F函数的 prototype 属性赋值了一个立即执行函数表达式,函数表达式返回需要暴露的方法的一个对象,这种方式可以实现方法public/private。

原型链

JavaScript使用原型链的继承方式,如下面的例子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
function Foo() {
this.name = ‘unofficial’;
}
Foo.prototype.who = function() {
return this.name;
}
function Bar() {}
// 设置Bar的prototype属性值为Foo的实例化对象
Bar.prototype = new Foo();
Bar.prototype.foo = ‘Hello world!’;
// 修正Bar.prototype.constructor为Bar本身 ?
Bar.prototype.constructor = Bar;
var b = new Bar();
/*
* 原型链为
b [Bar的实例]
bar.prototype [Foo的实例]
{ foo: ‘Hello world’, name: ‘unofficial’ }
Foo.prototype
{method: …}
Object.prototype
{toString: …}
*/

实例b对象从Bar.prototype和Foo.prototype继承下来,因为b能访问自身原型属性foo,以及Foo原型方法who,也能访问Foo上的原型属性name。需要注意的是new Bar()不会重新创造出一个Foo实例,而是重复使用原型上的实例。

如果直接 Bar.prototype = Foo.prototype; 将会导致两个对象共享相同的原型。改变一个对象的原型将会影响到另外一个对象的原型。

属性查找

在查找一个属性的时候,JavaScript会向上遍历原型链,直到找到给定名称位置或者到达原型链的顶部Object.prototype,如果仍然没找到即返回undefined。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var Foo = function() {
this.add = function(x, y) {
return x + y;
}
}
Foo.prototype.add = function(x, y) {
return x + y;
}
Foo.prototype.test = function() {
console.log(‘来源于prototype的test方法’);
}
var f = new Foo();
console.log(f.add(1, 3)); // 4
f.test(); // 来源于prototype的test方法

调用f.add方法的后首先会在Foo中找add方法,找到了直接就调用add方法。test方法在实例中没有找到,就在原型链上找,能找到直接就执行,如果找不到会继续Object的原型上找,找不到才返回undefined

原型属性

当原型属性创建原型链的时候,任何类型都可以为它赋值,然而将原子类型的值赋值给它是被忽略。

1
2
3
4
5
6
// 用代码解释上面的话
function Foo() {}
// 可以赋值任何类型,比如说
Foo.prototype = 1; // 但是直接赋值类型值只是会被忽略,不会报错,相应的如果后面继续给原型赋值也会被忽略。原型直接是赋值为Object.prototype
console.log(new Foo()); // function Foo() {}

如果直接赋值对象就会像上面的应用一样,创建原型链。通过这种方法可以创建私有方法与公共方法。

性能

由于上文提到的属性查找会从当前对象一直沿着原型链查找,如果找寻一个不存在的问题是需要遍历整个原型链。
for in 循环遍历对象的属性时,原型链上的所有属性也都会被遍历。

扩展内置类型

虽然目前涉及到的应用环境不够复杂,对于复杂引用更多的类或者框架对于相应模块的封装的时候就需要用到原型来实现继承等等,但是不建议扩展内置类型的原型对象,这样会存在性能问题。

isPrototypeOf vs hasOwnProperty

  • isPrototypeOf() 方法测试一个对象是否存在于另一个对象的原型链上。
    prototype.isPrototypeOf(object) 检查prototype对象是否存在object的原型链上
1
2
3
4
5
6
7
8
9
var Foo = function() {};
var Bar = function() {};
Bar.prototype = new Foo();
var b = new Bar();
Foo.prototype.isPrototypeOf(new Foo()); // true
// 在b的原型链上查找对象Foo.prototype
Foo.prototype.isPrototypeOf(b); // true
  • isPrototypeOf vs instanceof
    instanceof运算符可以用来判断某个构造函数的prototype属性所指向的對象是否存在于另外一个要检测对象的原型链上。
    object instanceof constructor
    检查构造函数constructor的原型属性是不是存在object对象的原型链上

    Code one:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    var Foo = function() {};
    var Bar = function() {};
    var f = new Foo();
    var b = new Bar();
    f instanceof Foo; // true
    Foo.prototype.isPrototypeOf(f); // true
    f instanceof Bar; // false
    Bar.prototype = new Foo();
    var b1 = new Bar();
    b1 instanceof Foo; // true
    Foo.prototype.isPrototypeOf(b1); // true

    Code two:

    1
    2
    3
    4
    var human = {mortal: true};
    var socrates = Object.create(human);
    human.isPrototypeOf(socrates); //=> true
    socrates instanceof human; //=> ERROR!

    综上所述:在存在构造函数的时候,instanceof 与 isPrototypeOf 是没有区别的,在没有构造函数的时候只能使用isPrototypeOf

  • hasOwnProperty
    hasOwnProperty用于判断一个对象上是否包含自定义属性,而不是原型链上的属性。hasOwnProperty继承自Object.prototype。

    注意不能通过判断值为undefined来判断属性是否存在,因为该属性的值可能就是undefined

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var Foo = function() {
this.name = ‘unofficial’;
}
Foo.prototype = function() {
return {
getName: function() {
return this.name;
},
age: undefined
};
}()
Foo.prototype.color;
var f = new Foo();
f.color; // undefined
f.hasOwnProperty(‘color’); // false
f.hasOwnProperty(‘age’); // false
f.hasOwnProperty(‘name’); // true

可以在循环遍历的时候用来判断属性是不是是当前对象的属性,而不是继承自原型链

hasOwnProperty可以在当前对象中重写,如果如下例子:

1
2
3
4
5
6
7
8
9
10
11
12
var Foo = function() {
this.hasOwnProperty = function() {
return false;
}
this.name = ‘unofficial’;
}
var f = new Foo();
f.hasOwnProperty(‘name’); // false
// 通过其他对象继承的Object.prototype的hasOwnProperty方法
({}).hasOwnProperty.call(f, ‘name’); //true

ES6中方法如何实现类呢?

以下内容均是在chrome最新版本中测试

ES6中添加了关键字 class ,表面上是的写法和其他语言的类是一样的写法,实际上只是实现了prototype的语法糖。

1
2
3
4
5
6
7
8
9
10
11
‘use strict’;
class Foo {
constructor() {
this.name = ‘unofficial’;
}
getName() {
return this.name;
}
}
let f = new Foo();
console.log(f.getName());

当我们使用 console.log(‘%O’, f) ;时,返回的Foo对象和之前ES5通过function模拟的类实例的对象是一致的。
ES6

  • use strict
    必须在严格模式下执行
  • constructor
    例子中已经使用了 constructor ,实例化Foo类的时候自动执行构造方法。构造方法必须唯一
  • 原型方法
    关键字 get , set 的使用。
1
2
3
4
5
6
7
8
9
10
11
12
class Foo {
set username(value) {
this.name = value;
}
get username() {
return ‘my name is ‘ + this.name;
}
}
let f = new Foo();
f.username = ‘unofficial’;
console.log(f.username);
  • 静态方法
    静态方法指不需要对类进行实例化就可以使用类名直接访问类里面的方法, static 关键字用来定义类的静态方法。
1
2
3
4
5
6
class Foo {
static info() {
console.log(‘随意写的内容’);
}
}
Foo.info(); // 随意写的内容
  • 继承
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
class Animal {
constructor(name) {
this.name = name;
}
speak() {
console.log(this.name + ‘ 发了个声’);
}
}
class Dog extends Animal {
speak() {
console.log(this.name + ‘说自己饿了’);
}
}
let cat = new Animal(‘kitty’);
cat.speak(); // Kitty 发了个声
new Dog(‘哮天犬’).speak(); // 哮天犬说自己饿了

dog 类继承了 Animal 类,重写了父类的 speak 方法。

  • super 调用父类方法
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    ‘use strict’;
    class Animal {
    constructor(obj) {
    var {name, food} = obj;
    this.name = name;
    this.food = food;
    }
    speak() {
    console.log(this.name + ‘ 发了个声’);
    }
    eat() {
    console.log(this.name + ‘喜欢’ + this.food);
    }
    }
    class Dog extends Animal {
    speak() {
    console.log(this.name + ‘说自己饿了’);
    }
    eat() {
    super.eat();
    if(this.food == ‘耗子’) {
    console.log(‘又闲的蛋疼了吧’);
    }
    }
    }
    new Dog({name: ‘哮天犬’, food: ‘耗子’}).eat(); // 哮天犬喜欢耗子 又闲的蛋疼了吧
  • isPrototypeOf 的使用
    就上面的例子使用 isPrototypeOf

    1
    2
    let dog = new Dog({name: ‘哮天犬’, food: ‘耗子’});
    console.log(Animal.prototype.isPrototypeOf(dog));
  • hasOwnProperty 的使用
    1
    2
    console.log(dog.hasOwnProperty(‘name’)); // true
    console.log(dog.hasOwnProperty(‘speak’)); // false

prototy.js是怎么做的?

参考github上prototype.js的文档以及class.js可以学习到,如何创建一个类?

1
2
3
4
5
var Humen = Class.create();
// or
var Humen = Class.create({
// 这里可以自定义类方法
});

理解class.js时,Class是一个 立即执行的函数表达式 ,不成名的规定就是函数名大写作为类名。

1
2
3
4
5
6
7
8
9
var Class = (function() {
// 返回Class的方法
return {
create: create,
Methods: {
addMethods: addMethods
}
};
})();

这一个需要学习的点,闭包的立即执行的匿名函数中返回一个对象,对象中包含一个create的方法,以及Methods方法对象。

  • 创建类
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    function create() {
    // 可能会有两个参数
    // 第一个参数是父类,需要被继承的类 var gay = Class.create(‘Humen’);
    // 第二个参数是当前类的方法
    /*
    * 判断传入的参数
    * 1. $A方法处理arguments类数组对象为数组,这里使用了[].slice.call(arguments)来代替数组浅复制
    * 2. 判断第一个参数是不是类,如果是赋值给parent
    */
    var parent = null, properties = $A(arguments);
    if (Object.isFunction(properties[0]))
    parent = properties.shift();
    // 自定义Klass类,create函数最后返回的也是创建的Klass类
    /*
    * Klass为 Class.create 创建的类
    * initialize 为自定义构造方法
    * this.initialize 中的this指当前对象
    * apply(this, arguments) 参数this指实例化对象
    * new 实例化对象的时候,Klass函数会自动执行,其中的this.initialize.apply(this, arguments);也就执行了,即属性初始化了
    */
    function Klass() {
    this.initialize.apply(this, arguments);
    }
    // 当前类添加属性 superclass 存放父类;subclass 存放子类
    // 如果父类存在,父类的原型赋值给子类的原型,并初始化子类赋值给当前原型,添加当前类到父类的子类中
    // 将传入的当前类的方法添加到当前类的原型上
    /*
    * 继承addMethods方法
    * 设置父类 superclass
    * 设置子类 subclass
    */
    Object.extend(Klass, Class.Methods);
    Klass.superclass = parent;
    Klass.subclasses = [];
    /*
    * 如果父类存在
    * Subclass是一个类,父类的原型赋值给这个子类的原型
    * 实例化子类赋值给当前类的原型
    * 添加当前类到父类的子类数组中
    */
    if (parent) {
    Subclass.prototype = parent.prototype;
    Klass.prototype = new Subclass;
    parent.subclasses.push(Klass);
    }
    /*
    * 循环添加方法给当前类
    */
    for (var i = 0, length = properties.length; i < length; i++)
    Klass.addMethods(properties[i]);
    // 如果当前类方法中没有initialize方法,使用默认的空函数作为构造方法
    if (!Klass.prototype.initialize)
    Klass.prototype.initialize = function() { };
    // 重置当前类的constructor函数为自身
    Klass.prototype.constructor = Klass;
    // 返回构造的类Klass
    return Klass;
    }
  • 自定义方法,添加传入的参数方法作为当前类的方法
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    function addMethods(source) {
    // 判断父类是不是存在
    // 获取参数的键名
    var ancestor = this.superclass && this.superclass.prototype,
    properties = Object.keys(source);
    // 循环数组
    for (var i = 0, length = properties.length; i < length; i++) {
    var property = properties[i], value = source[property];
    // 这里主要是对于继承父类方法的调用的处理
    // 如果父类存在,并且是方法,方法的第一个参数必须是$super,如果是重写value
    if (ancestor && Object.isFunction(value) && value.argumentNames()[0] == “$super”) {
    var method = value;
    // 处理当前方法
    // wrap()
    value = (function(m) {
    return function() { return ancestor[m].apply(this, arguments); };
    })(property).wrap(method);
    // 新增valueOf
    value.valueOf = (function(method) {
    return function() { return method.valueOf.call(method); };
    })(method);
    // 新增toString
    value.toString = (function(method) {
    return function() { return method.toString.call(method); };
    })(method);
    }
    // 直接赋值给当前类的原型
    this.prototype[property] = value;
    }
    }

到这里基本上就学习完了prototype.js创建类的方法,但是如果需要融会贯通自己来实现一次,我想过程肯定还是会比较艰辛,继续加油。

面向对象是什么?

面向对象编程最美的调侃就是,“我还是单身,我是不是不适合面向对象编程”。也许是的,但是如果你能在脑海中抽象出类,需要的时候撸一发,对象迟早会有的。
OOP
面向对象是一种编程的范式方法,面向对象中的对象是类的实例,类是属性,方法的集合,对于一类对象可能有公共的行为与样式, 封装 在一起就形成了类。如果具体到这个类的一个子类型(狗与阿拉斯加雪橇犬),阿拉斯加肯定是狗,,既有狗的特性,但是同时他又有自己的特点,于是乎 继承 了狗类的一些行为。这是如果在拿来一直猫,猫和狗又都属于动物类,这事又可以抽象出一个动物类,他们都会叫,狗是汪汪汪,猫是喵喵喵,这个是叫的多种表现形式,被称为 多态

面向对象提高了程序的重用性,对于模块化开发以及重构等都带来很多好处。

实践 – 坦克大战游戏

坦克大战在玩小霸王卡版的时候经常约上邻居家的伙伴一起,其实最多的玩的还是雪人兄弟,这个是记忆比较深刻的。不扯远了,今天主要来实现一个简单的坦克大战游戏。
截止目前,还是没能还好的实现坦克大战,保留这个版本,再继续学习学习。

参考资料

JavaScript 秘密花园
强大的原型和原型链
JavaScript isPrototypeOf vs instanceof usage
Classes in ECMAScript 6 (final semantics)
prototype.js
面向对象程序设计

By柏小白

js开发过程中的小函数……陆续更新

1 获取指定范围内的随机数

当我们需要获取指定范围(min,max)内的整数的时候,下面的代码非常适合。

    function getRadomNum(min, max){
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }

 

测试
2016-03-26-2

2 随机获取数组中的元素

    function getRadomFromArr(arr){
        return arr[Math.floor(Math.random() * arr.length)];
    }

 

测试
2016-03-26-3

3 生成从0到指定值的数字数组

  var arr = [], length = 100, i = 1;
    for (; arr.push(i++) < length;) {
    }
    console.log(arr)

 

测试

3

4 打乱数字数组的顺序

   var arr = [1, 2, 3, 4, 5, 6, 7, 'a', 'dsfs', 8, 9, 'v'];
    arr.sort(function (){
        return Math.random() - 0.5
    });

 

测试
4

5 对象转换为数组

//注意对象必须是以下格式的才可以通过此方式转化为数组
//获取的DOM集合,以及函数的arguments也可以通过此方式转化为数组
    /**
     * 对象转换为数组
     * @type {{0: string, 1: string, 2: string, 3: string, length: number}}
     */
    var obj = {
        0: 'qian',
        1: 'long',
        2: 'chu',
        3: 'tian',
        length: 4
    }
    var _slice = [].slice;
    var objArr = _slice.call(obj);

 

测试
5

6 验证是否为数组

   function isArray(obj){
        return Object.prototype.toString.call(obj) === '[object Array]';
    }

测试

6

7 获取数组中最大或者最小值

    function maxAndMin(arr){
        return {
            max: Math.max.apply(null, arr.join(',').split(',')),
            min: Math.min.apply(null, arr.join(',').split(','))
        }
    }
//该方法适合一维或者多维数组求最大最小值的情况

测试
7

8 清空数组

//方式一 通过将长度设置为0
    var arr = [1, 2, 3, 4, 5];
    arr.length = 0;
//方式二 通过splice方法
    var arr = [1, 2, 3, 4, 5];
    arr.splice(0, arr.length);
//方式三 通过将空数组 [] 赋值给数组(严格意义来说这只是将ary重新赋值为空数组,之前的数组如果没有引用在指向它将等待垃圾回收。)
    var arr = [1, 2, 3, 4, 5];
    arr = [];

 

9 保留指定小数位

   var num =4.345678;
    num = num.toFixed(4);  // 4.3457 第四位小数位以四舍五入计算

 

10 不要直接使用delete来删除数组中的元素

    * 数组在js中也是对象,有时候我们可能会通过delete来删除数组中的元素,但是其实仅仅是将数组的元素的值赋值为了undefined。
     */
    var arr=[1,2,3,4,5,'谦龙','雏田'];
    delete arr[5];
    console.log(arr,arr[5],arr.length);

 

测试

10

可以通过splice来删除数组中的某一项

   var arr=[1,2,3,4,5,'谦龙','雏田'];
    arr.splice(5,1);
    console.log(arr,arr[5],arr.length);

测试

10-2

11 生成指定长度的随机字母数字字符串

    function getRandomStr(len) {
        var str = "";
        for( ; str.length < len; str  += Math.random().toString(36).substr(2));
        return  str.substr(0, len);
    }

测试
11

12 null 与 undefined

    function test(obj){
        if(obj!=null){// obj除了undefined 和 null 之外都会走这里
        //....这里写代码逻辑
        }
    }

 

13 找出数组中出现次数最的元素,并给出其出现过的位置

    function getMaxAndIndex( arr ){
        var obj = {};
        arr.forEach(function(item,index){
            if(!obj[item]){
                obj[item]= {indexs: [index]}
            }else{
                obj[item]['indexs'].push(index);
            }
        });
        var num=0;//记录出现次数最大值
        var str='';//记录出现次数最多的字符
        var reArr;//返回最大值的位置数组
        for(var attr in obj){
            var temp=obj[attr]['indexs'];
            if(temp.length>num){
                num=temp.length;
                str=attr;
                reArr=temp;
            }
        }
        return {
            maxStr:str,
            indexs:reArr
        }
    }

 

测试结果13

String Skill

时间对比:时间个位数形式需补0

const time1 = "2019-02-14 21:00:00";
const time2 = "2019-05-01 09:00:00";
const overtime = time1 > time2;
// overtime => false

格式化金钱

const ThousandNum = num => num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
const money = ThousandNum(20190214);
// money => "20,190,214"

生成随机ID

const RandomId = len => Math.random().toString(36).substr(3, len);
const id = RandomId(10);
// id => "jg7zpgiqva"

生成随机HEX色值

const RandomColor = () => "#" + Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, "0");
const color = RandomColor();
// color => "#f03665"

生成星级评分

const StartScore = rate => "★★★★★☆☆☆☆☆".slice(5 - rate, 10 - rate);
const start = StartScore(3);
// start => "★★★"

操作URL查询参数

const params = new URLSearchParams(location.search.replace(/\?/ig, "")); // location.search = "?name=young&sex=male"
params.has("young"); // true
params.get("sex"); // "male"

Number Skill

取整:代替正数的Math.floor(),代替负数的Math.ceil()

const num1 = ~~ 1.69;
const num2 = 1.69 | 0;
const num3 = 1.69 >> 0;
// num1 num2 num3 => 1 1 1

补零

const FillZero = (num, len) => num.toString().padStart(len, "0");
const num = FillZero(169, 5);
// num => "00169"

转数值:只对null、""、false、数值字符串有效

const num1 = +null;
const num2 = +"";
const num3 = +false;
const num4 = +"169";
// num1 num2 num3 num4 => 0 0 0 169

时间戳

const timestamp = +new Date("2019-02-14");
// timestamp => 1550102400000

精确小数

const RoundNum = (num, decimal) => Math.round(num * 10 ** decimal) / 10 ** decimal;
const num = RoundNum(1.69, 1);
// num => 1.7
复制代码

判断奇偶

const OddEven = num => !!(num & 1) ? "odd" : "even";
const num = OddEven(2);
// num => "even"

取最小最大值

const arr = [0, 1, 2];
const min = Math.min(...arr);
const max = Math.max(...arr);
// min max => 0 2
复制代码

生成范围随机数

const RandomNum = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
const num = RandomNum(1, 10);

Boolean Skill

短路运算符

const a = d && 1; // 满足条件赋值:取假运算,从左到右依次判断,遇到假值返回假值,后面不再执行,否则返回最后一个真值
const b = d || 1; // 默认赋值:取真运算,从左到右依次判断,遇到真值返回真值,后面不再执行,否则返回最后一个假值
const c = !d; // 取假赋值:单个表达式转换为true则返回false,否则返回true

判断数据类型:undefined、null、string、number、boolean、array、object、symbol、date、regexp、function、asyncfunction、arguments、set、map、weakset、weakmap

function DataType(tgt, type) {
    const dataType = Object.prototype.toString.call(tgt).replace(/\[object /g, "").replace(/\]/g, "").toLowerCase();
    return type ? dataType === type : dataType;
}
DataType("young"); // "string"
DataType(20190214); // "number"
DataType(true); // "boolean"
DataType([], "array"); // true
DataType({}, "array"); // false

是否为空数组

const arr = [];
const flag = Array.isArray(arr) && !arr.length;
// flag => true

是否为空对象

const obj = {};
const flag = DataType(obj, "object") && !Object.keys(obj).length;
// flag => true

满足条件时执行

const flagA = true; // 条件A
const flagB = false; // 条件B
(flagA || flagB) && Func(); // 满足A或B时执行
(flagA || !flagB) && Func(); // 满足A或不满足B时执行
flagA && flagB && Func(); // 同时满足A和B时执行
flagA && !flagB && Func(); // 满足A且不满足B时执行

为非假值时执行

const flag = false; // undefined、null、""、0、false、NaN
!flag && Func();

数组不为空时执行

const arr = [0, 1, 2];
arr.length && Func();

对象不为空时执行

const obj = { a: 0, b: 1, c: 2 };
Object.keys(obj).length && Func();

函数退出代替条件分支退出

if (flag) {
    Func();
    return false;
}
// 换成
if (flag) {
    return Func();
}

switch/case使用区间

const age = 26;
switch (true) {
    case isNaN(age):
        console.log("not a number");
        break;
    case (age < 18):
        console.log("under age");
        break;
    case (age >= 18):
        console.log("adult");
        break;
    default:
        console.log("please set your age");
        break;
}

Array Skill

克隆数组

const _arr = [0, 1, 2];
const arr = [..._arr];
// arr => [0, 1, 2]

合并数组

const arr1 = [0, 1, 2];
const arr2 = [3, 4, 5];
const arr = [...arr1, ...arr2];
// arr => [0, 1, 2, 3, 4, 5];

去重数组

const arr = [...new Set([0, 1, 1, null, null])];
// arr => [0, 1, null]

混淆数组

const arr = [0, 1, 2, 3, 4, 5].slice().sort(() => Math.random() - .5);
// arr => [3, 4, 0, 5, 1, 2]

清空数组

const arr = [0, 1, 2];
arr.length = 0;
// arr => []

截断数组

const arr = [0, 1, 2];
arr.length = 2;
// arr => [0, 1]

交换赋值

let a = 0;
let b = 1;
[a, b] = [b, a];
// a b => 1 0

过滤空值:undefined、null、””、0、false、NaN

const arr = [undefined, null, "", 0, false, NaN, 1, 2].filter(Boolean);
// arr => [1, 2]

异步累计

async function Func(deps) {
    return deps.reduce(async(t, v) => {
        const dep = await t;
        const version = await Todo(v);
        dep[v] = version;
        return dep;
    }, Promise.resolve({}));
}
const result = await Func(); // 需在async包围下使用

数组首部插入成员

let arr = [1, 2]; // 以下方法任选一种
arr.unshift(0);
arr = [0].concat(arr);
arr = [0, ...arr];
// arr => [0, 1, 2]

数组尾部插入成员

let arr = [0, 1]; // 以下方法任选一种
arr.push(2);
arr.concat(2);
arr[arr.length] = 2;
arr = [...arr, 2];
// arr => [0, 1, 2]

统计数组成员个数

const arr = [0, 1, 1, 2, 2, 2];
const count = arr.reduce((t, c) => {
    t[c] = t[c] ? ++ t[c] : 1;
    return t;
}, {});
// count => { 0: 1, 1: 2, 2: 3 }

解构数组成员嵌套

const arr = [0, 1, [2, 3, [4, 5]]];
const [a, b, [c, d, [e, f]]] = arr;
// a b c d e f => 0 1 2 3 4 5

解构数组成员别名

const arr = [0, 1, 2];
const { 0: a, 1: b, 2: c } = arr;
// a b c => 0 1 2

解构数组成员默认值

const arr = [0, 1, 2];
const [a, b, c = 3, d = 4] = arr;
// a b c d => 0 1 2 4

获取随机数组成员

const arr = [0, 1, 2, 3, 4, 5];
const randomItem = arr[Math.floor(Math.random() * arr.length)];
// randomItem => 1

创建指定长度数组

const arr = [...new Array(3).keys()];
// arr => [0, 1, 2]

创建指定长度且值相等的数组

const arr = new Array(3).fill(0);
// arr => [0, 0, 0]

reduce代替map和filter

const _arr = [0, 1, 2];

// map
const arr = _arr.map(v => v * 2);
const arr = _arr.reduce((t, c) => {
    t.push(c * 2);
    return t;
}, []);
// arr => [0, 2, 4]

// filter
const arr = _arr.filter(v => v > 0);
const arr = _arr.reduce((t, c) => {
    c > 0 && t.push(c);
    return t;
}, []);
// arr => [1, 2]

// map和filter
const arr = _arr.map(v => v * 2).filter(v => v > 2);
const arr = _arr.reduce((t, c) => {
    c = c * 2;
    c > 2 && t.push(c);
    return t;
}, []);
// arr => [4]

Object Skill

克隆对象

const _obj = { a: 0, b: 1, c: 2 }; // 以下方法任选一种
const obj = { ..._obj };
const obj = JSON.parse(JSON.stringify(_obj));
// obj => { a: 0, b: 1, c: 2 }

合并对象

const obj1 = { a: 0, b: 1, c: 2 };
const obj2 = { c: 3, d: 4, e: 5 };
const obj = { ...obj1, ...obj2 };
// obj => { a: 0, b: 1, c: 3, d: 4, e: 5 }

对象字面量:获取环境变量时必用此方法,用它一直爽,一直用它一直爽

const env = "prod";
const link = {
    dev: "Development Address",
    test: "Testing Address",
    prod: "Production Address"
}[env];
// link => "Production Address"

对象变量属性

const flag = false;
const obj = {
    a: 0,
    b: 1,
    [flag ? "c" : "d"]: 2
};
// obj => { a: 0, b: 1, d: 2 }

创建纯空对象

const obj = Object.create(null);
Object.prototype.a = 0;
// obj => {}

删除对象无用属性

const obj = { a: 0, b: 1, c: 2 }; // 只想拿b和c
const { a, ...rest } = obj;
// rest => { b: 1, c: 2 }

解构对象属性嵌套

const obj = { a: 0, b: 1, c: { d: 2, e: 3 } };
const { c: { d, e } } = obj;
// d e => 2 3

解构对象属性别名

const obj = { a: 0, b: 1, c: 2 };
const { a, b: d, c: e } = obj;
// a d e => 0 1 2

解构对象属性默认值

const obj = { a: 0, b: 1, c: 2 };
const { a, b = 2, d = 3 } = obj;
// a b d => 0 1 3

Function Skill

函数自执行

const Func = function() {}(); // 常用

(function() {})(); // 常用
(function() {}()); // 常用
[function() {}()];

+ function() {}();
- function() {}();
~ function() {}();
! function() {}();

new function() {};
new function() {}();
void function() {}();
typeof function() {}();
delete function() {}();

1, function() {}();
1 ^ function() {}();
1 > function() {}();

隐式返回值:只能用于单语句返回值箭头函数,如果返回值是对象必须使用()包住

const Func = function(name) {
    return "I Love " + name;
};
// 换成
const Func = name => "I Love " + name;

一次性函数:适用于运行一些只需执行一次的初始化代码

function Func() {
    console.log("x");
    Func = function() {
        console.log("y");
    }
}

惰性载入函数:函数内判断分支较多较复杂时可大大节约资源开销

function Func() {
    if (a === b) {
        console.log("x");
    } else {
        console.log("y");
    }
}
// 换成
function Func() {
    if (a === b) {
        Func = function() {
            console.log("x");
        }
    } else {
        Func = function() {
            console.log("y");
        }
    }
    return Func();
}

检测非空参数

function IsRequired() {
    throw new Error("param is required");
}
function Func(name = IsRequired()) {
    console.log("I Love " + name);
}
Func(); // "param is required"
Func("You"); // "I Love You"

字符串创建函数

const Func = new Function("name", "console.log(\"I Love \" + name)");

优雅处理错误信息

try {
    Func();
} catch (e) {
    location.href = "https://stackoverflow.com/search?q=[js]+" + e.message;
}

优雅处理Async/Await参数

function AsyncTo(promise) {
    return promise.then(data => [null, data]).catch(err => [err]);
}
const [err, res] = await AsyncTo(Func());

优雅处理多个函数返回值

function Func() {
    return Promise.all([
        fetch("/user"),
        fetch("/comment")
    ]);
}
const [user, comment] = await Func(); // 需在async包围下使用

DOM Skill

显示全部DOM边框:调试页面元素边界时使用

[].forEach.call($$("*"), dom => {
    dom.style.outline = "1px solid #" + (~~(Math.random() * (1 << 24))).toString(16);
});

自适应页面:页面基于一张设计图但需做多款机型自适应,元素尺寸使用rem进行设置

function AutoResponse(width = 750) {
    const target = document.documentElement;
    target.clientWidth >= 600
        ? (target.style.fontSize = "80px")
        : (target.style.fontSize = target.clientWidth / width * 100 + "px");
}

过滤XSS

function FilterXss(content) {
    let elem = document.createElement("div");
    elem.innerText = content;
    const result = elem.innerHTML;
    elem = null;
    return result;
}

存取LocalStorage:反序列化取,序列化存

const love = JSON.parse(localStorage.getItem("love"));
localStorage.setItem("love", JSON.stringify("I Love You"));

作者:JowayYoung
链接:https://juejin.im/post/5cc7afdde51d456e671c7e48
来源:掘金

By柏小白

使用VisualSVN Server创建版本库

  1. 打开VisualSVN Server Manager,可以在窗口的右边看到版本库的一些信息,比如状态,日志,用户认证,版本库等.要建立版本库,需要右键单击左边窗口的Repositores,如下图所示:

    使用VisualSVN Server创建版本库
  2. 2

    在弹出的右键菜单中选择Create New Repository或者新建->Repository,进入下一步,如下图所示:

    使用VisualSVN Server创建版本库
  3. 3

    输入版本库名称,勾上Create default structure复选框(推荐这么做).点击OK,版本库就创建好了,版本库中会默认建立trunk,branches,tags三个文件夹,如下图所示:

    使用VisualSVN Server创建版本库
    使用VisualSVN Server创建版本库
  4. 4

    这时候我们将项目导入到版本库中,找到你的项目文件夹,在项目文件夹上点击鼠标右键,找到SVN菜单,选择导入,如下图所示:

    使用VisualSVN Server创建版本库
  5. 5

    在弹出的对话框中填上版本库URL,这个URL可以从VisualSVN Server Manager中获取,在你的版本库上单击右键,选择Copy URL to Clipboard,这样就把版本库URL复制到你的剪贴版了.如下图所示:

    使用VisualSVN Server创建版本库
  6. 6

    将复制的版本库URL粘贴上,在URL后面加上trunk子路径。然后在导入信息里面填上导入信息”导入项目到版本库“,如下图所示:

    使用VisualSVN Server创建版本库
  7. 7

    点击确定,所选中的项目就会被导入到版本库中,如下图所示:

    使用VisualSVN Server创建版本库
  8. 8

    项目导入到版本库以后,不能随便让谁都能够读写版本库,所以需要建立用户组和用户。

    VisualSVN Server Manager窗口的左侧右键单击用户组,选择Create User或者新建->User,如下图所示:

    使用VisualSVN Server创建版本库
  9. 在弹出的对话框中填写User namePassword,然后点击OK,如下图所示:

    使用VisualSVN Server创建版本库
  10. 用相同的方式分别创建用户Develpoer1,Develpoer2,Develpoer3,Test1,Test2,Manger六个用户,分别代表3个开发人员,两个测试人员和一个项目经理,如下图所示:

    使用VisualSVN Server创建版本库
  11. 然后我们建立用户组,在VisualSVN Server Manager窗口的左侧右键单击用户组,选择Create Group或者新建->Group,如图:

    使用VisualSVN Server创建版本库
  12. 在弹出窗口中填写Group nameDevelopers,然后点Add按钮,在弹出的窗口中选择三个Developer,加入到这个组,然后点Ok,如下图所示:

    使用VisualSVN Server创建版本库
  13. 用相同的方式创建组Managers,Testers,如下图所示:

    使用VisualSVN Server创建版本库
  14. 接下来我们给用户组设置权限,在MyRepository上单击右键,选择属性,如下图所示:

    使用VisualSVN Server创建版本库
  15. 在弹出的对话框中,选择Security选项卡,点击Add按钮,选中Developers,Managers,Testers三个组,然后添加进来,给Developers,Managers权限设置为Read/Write,Tester权限设置为Read Only,如下图所示:

    使用VisualSVN Server创建版本库
  16. 到此,服务端就完成了。接下来,我们用客户端去检出代码,在桌面空白处单击右键,选择SVN检出,在弹出的对话框中填写版本库URL,选择检出目录,点击确定。如下图所示:

    使用VisualSVN Server创建版本库
  17. 开始检出项目,如下图所示:

    使用VisualSVN Server创建版本库
  18. 检出完成之后,我们打开工作副本文件夹,会看到所有文件和文件夹都有一个绿色的√。至此,创建版本库和使用TortoiseSVN导入项目,检出项目已经介绍完毕。

    如下图所示:

    使用VisualSVN Server创建版本库

 

By柏小白

WebStorm打开后无法显示文件夹目录

昨天乱整,WebStorm打开项目,发现项目的文件夹目录不见了 google 一哈,发现解决的方法!!!
项目文件夹目录消失
问题原因:WebStorm自动生成的配置文件 .idea/modules.xml损坏(就是我一开始乱搞,删项目照成)。

11

解决方法 = {

    1: "关掉webstorm;",

    2: "删除.idea文件夹(如果隐藏,请设置显示隐藏文件夹);",

    3: "重新打开项目;",

    4: "OK 搞定"
}
By柏小白

jQuery-插件开发全解析

之前写过一篇文章:jquery.fn.extend与jquery.extend插件开发

现在收集了更详细的解释文档

jQuery插件的开发包括两种:

一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法。jQuery的全局函数就是属于jQuery命名空间的函数,另一种是对象级别的插件开发,即给jQuery对象添加方法。下面就两种函数的开发做详细的说明。

1、类级别的插件开发

类级别的插件开发最直接的理解就是给jQuery类添加类方法,可以理解为添加静态方法。典型的例子就是$.AJAX()这个函数,将函数定义于jQuery的命名空间中。关于类级别的插件开发可以采用如下几种形式进行扩展:

1.1 添加一个新的全局函数

添加一个全局函数,我们只需如下定义:

jQuery.foo = function() {    
alert('This is a test. This is only a test.');   
};

1.2 增加多个全局函数

添加多个全局函数,可采用如下定义:

jQuery.foo = function() {    
alert('This is a test. This is only a test.');   
};   
jQuery.bar = function(param) {    
alert('This function takes a parameter, which is "' + param + '".');   
};    
// 调用时和一个函数的一样的:jQuery.foo();jQuery.bar();或者$.foo();$.bar('bar');

1.3 使用jQuery.extend(object);

jQuery.extend({      
foo: function() {      
alert('This is a test. This is only a test.');      
},      
bar: function(param) {      
alert('This function takes a parameter, which is "' + param +'".');      
}     
});
1.4 使用命名空间

虽然在jQuery命名空间中,我们禁止使用了大量的javaScript函数名和变量名。但是仍然不可避免某些函数或变量名将于其他jQuery插件冲突,因此我们习惯将一些方法封装到另一个自定义的命名空间。

jQuery.myPlugin = {           
foo:function() {           
alert('This is a test. This is only a test.');           
},           
bar:function(param) {           
alert('This function takes a parameter, which is "' + param + '".');     
}          
};   
// 采用命名空间的函数仍然是全局函数,调用时采用的方法:   
$.myPlugin.foo();          
$.myPlugin.bar('baz');

通过这个技巧(使用独立的插件名),我们可以避免命名空间内函数的冲突。

2、对象级别的插件开发

对象级别的插件开发需要如下的两种形式:

形式1:

(function($){      
$.fn.extend({      
pluginName:function(opt,callback){      
// Our plugin implementation code goes here.        
}      
})      
})(jQuery);

形式2:

(function($) {        
$.fn.pluginName = function() {      
// Our plugin implementation code goes here.      
};      
})(jQuery);

上面定义了一个jQuery函数,形参是$,函数定义完成之后,把jQuery这个实参传递进去.立即调用执行。这样的好处是,我们在写jQuery插件时,也可以使用$这个别名,而不会与prototype引起冲突.

2.1 在JQuery名称空间下申明一个名字

这是一个单一插件的脚本。如果你的脚本中包含多个插件,或者互逆的插件(例如: $.fn.doSomething() 和$.fn.undoSomething()),那么你需要声明多个函数名字。但是,通常当我们编写一个插件时,力求仅使用一个名字来包含它的所有内容。我们的示例插件命名为“highlight“

$.fn.hilight = function() {     
  // Our plugin implementation code goes here.     
};     
我们的插件通过这样被调用:   
$('#myDiv').hilight();

但是如果我们需要分解我们的实现代码为多个函数该怎么办?有很多原因:设计上的需要;这样做更容易或更易读的实现;而且这样更符合面向对象。 这真是一个麻烦事,把功能实现分解成多个函数而不增加多余的命名空间。出于认识到和利用函数是javascript中最基本的类对象,我们可以这样做。就像其他对象一样,函数可以被指定为属性。因此我们已经声明“hilight”为jQuery的属性对象,任何其他的属性或者函数我们需要暴露出来的,都可以在”hilight” 函数中被声明属性。稍后继续。

2.2 接受options参数以控制插件的行为

让我们为我们的插件添加功能指定前景色和背景色的功能。我们也许会让选项像一个options对象传递给插件函数。例如:

// plugin definition     
$.fn.hilight = function(options) {     
  var defaults = {     
   foreground: 'red',     
   background: 'yellow'     
  };     
// Extend our default options with those provided.     
  var opts = $.extend(defaults, options);     
// Our plugin implementation code goes here.     
};     
// 我们的插件可以这样被调用:   
$('#myDiv').hilight({     
  foreground: 'blue'     
});

2.3 暴露插件的默认设置

我们应该对上面代码的一种改进是暴露插件的默认设置。这对于让插件的使用者更容易用较少的代码覆盖和修改插件。接下来我们开始利用函数对象。

// plugin definition     
$.fn.hilight = function(options) {     
  // Extend our default options with those provided.     
  // Note that the first arg to extend is an empty object -     
  // this is to keep from overriding our "defaults" object.     
  var opts = $.extend({}, $.fn.hilight.defaults, options);     
  // Our plugin implementation code goes here.     
};     
// plugin defaults - added as a property on our plugin function     
$.fn.hilight.defaults = {     
  foreground: 'red',     
  background: 'yellow'     
};      
//现在使用者可以包含像这样的一行在他们的脚本里:   
//这个只需要调用一次,且不一定要在ready块中调用   
$.fn.hilight.defaults.foreground = 'blue';     
//接下来我们可以像这样使用插件的方法,结果它设置蓝色的前景色:   
$('#myDiv').hilight();

如你所见,我们允许使用者写一行代码在插件的默认前景色。而且使用者仍然在需要的时候可以有选择的覆盖这些新的默认值:

// 覆盖插件缺省的背景颜色 

$.fn.hilight.defaults.foreground = 'blue'; 

// ... 

// 使用一个新的缺省设置调用插件 

$('.hilightDiv').hilight(); 

// ... 

// 通过传递配置参数给插件方法来覆盖缺省设置 

$('#green').hilight({ 

 foreground: 'green' 

}); 

2.4 适当的暴露一些函数

这段将会一步一步对前面那段代码通过有意思的方法扩展你的插件(同时让其他人扩展你的插件)。例如,我们插件的实现里面可以定义一个名叫”format”的函数来格式化高亮文本。我们的插件现在看起来像这样,默认的format方法的实现部分在hiligth函数下面。

// plugin definition     
$.fn.hilight = function(options) {     
// iterate and reformat each matched element     
  return this.each(function() {     
    var $this = $(this);     
// ...     
    var markup = $this.html();     
// call our format function     
    markup = $.fn.hilight.format(markup);     
    $this.html(markup);     
  });     
};     
// define our format function     
$.fn.hilight.format = function(txt) {     
return '<strong>' + txt + '</strong>';     
};

我们很容易的支持options对象中的其他的属性通过允许一个回调函数来覆盖默认的设置。这是另外一个出色的方法来修改你的插件。这里展示的技巧是进一步有效的暴露format函数进而让他能被重新定义。通过这技巧,是其他人能够传递他们自己设置来覆盖你的插件,换句话说,这样其他人也能够为你的插件写插件。

考虑到这个篇文章中我们建立的无用的插件,你也许想知道究竟什么时候这些会有用。一个真实的例子是Cycle插件.这个Cycle插件是一个滑动显示插件,他能支持许多内部变换作用到滚动,滑动,渐变消失等。但是实际上,没有办法定义也许会应用到滑动变化上每种类型的效果。那是这种扩展性有用的地方。 Cycle插件对使用者暴露”transitions”对象,使他们添加自己变换定义。插件中定义就像这样:
$.fn.cycle.transitions = { 

// ... 

};

这个技巧使其他人能定义和传递变换设置到Cycle插件。

2.5 保持私有函数的私有性

这种技巧暴露你插件一部分来被覆盖是非常强大的。但是你需要仔细思考你实现中暴露的部分。一但被暴露,你需要在头脑中保持任何对于参数或者语义的改动也许会破坏向后的兼容性。一个通理是,如果你不能肯定是否暴露特定的函数,那么你也许不需要那样做。

那么我们怎么定义更多的函数而不搅乱命名空间也不暴露实现呢?这就是闭包的功能。为了演示,我们将会添加另外一个“debug”函数到我们的插件中。这个 debug函数将为输出被选中的元素格式到firebug控制台。为了创建一个闭包,我们将包装整个插件定义在一个函数中。

 (function($) {     
// plugin definition     
  $.fn.hilight = function(options) {     
    debug(this);     
// ...     
  };     
// private function for debugging     
  function debug($obj) {     
  if (window.console && window.console.log)     
 window.console.log('hilight selection count: ' + $obj.size()); 
  };     
//  ...     
})(jQuery);

我们的“debug”方法不能从外部闭包进入,因此对于我们的实现是私有的。

2.6 支持Metadata插件

在你正在写的插件的基础上,添加对Metadata插件的支持能使他更强大。个人来说,我喜欢这个Metadata插件,因为它让你使用不多的”markup”覆盖插件的选项(这非常有用当创建例子时)。而且支持它非常简单。更新:注释中有一点优化建议。

$.fn.hilight = function(options) {     
// ...     
// build main options before element iteration     
  var opts = $.extend({}, $.fn.hilight.defaults, options);   
  return this.each(function() {     
   var $this = $(this);     
//build element specific options     
 var o = $.meta ? $.extend({}, opts, $this.data()) : opts  
//...

这些变动行做了一些事情:它是测试Metadata插件是否被安装如果它被安装了,它能扩展我们的options对象通过抽取元数据这行作为最后一个参数添加到JQuery.extend,那么它将会覆盖任何其它选项设置。现在我们能从”markup”处驱动行为,如果我们选择了“markup”:

调用的时候可以这样写: jQuery.foo(); 或 $.foo();

<!--  markup  -->     
<div class="hilight { background: 'red', foreground: 'white' } 
  Have a nice day!     
</div>     
<div class="hilight { foreground: 'orange' }">     
  Have a nice day!     
</div>     
<div class="hilight { background: 'green' }">     
  Have a nice day!     
</div>     
现在我们能高亮哪些div仅使用一行脚本:   
$('.hilight').hilight();

2.7 整合
下面使我们的例子完成后的代码:

// 创建一个闭包     
(function($) {     
  // 插件的定义     
  $.fn.hilight = function(options) {     
    debug(this);     
    // build main options before element iteration     
    var opts = $.extend({}, $.fn.hilight.defaults, options) 
    // iterate and reformat each matched element     
    return this.each(function() {     
      $this = $(this);     
      // build element specific options     
      var o = $.meta ? $.extend({}, opts, $this.data()) : opts;     
      // update element styles     
      $this.css({     
        backgroundColor: o.background,     
        color: o.foreground     
      });     
      var markup = $this.html();     
      // call our format function     
      markup = $.fn.hilight.format(markup);     
      $this.html(markup);     
    });     
  };     
  // 私有函数:debugging     
  function debug($obj) {     
    if (window.console && window.console.log)     
      window.console.log('hilight selection count: ' + $obj.size());     
  };     
  // 定义暴露format函数     
  $.fn.hilight.format = function(txt) {     
    return '<strong>' + txt + '</strong>';     
  };     
  // 插件的defaults     
  $.fn.hilight.defaults = {     
    foreground: 'red',     
    background: 'yellow'     
  };     
// 闭包结束     
})(jQuery);

这段设计已经让我创建了强大符合规范的插件。我希望它能让你也能做到。

3、总结

jQuery为开发插件提拱了两个方法,分别是:

jQuery.fn.extend(object);  给jQuery对象添加方法。
jQuery.extend(object);  为扩展jQuery类本身.为类添加新的方法。

3.1 jQuery.fn.extend(object);

fn 是什么东西呢。查看jQuery代码,就不难发现。

jQuery.fn = jQuery.prototype = {  

init: function( selector, context ) {//....   

//......  

};

原来 jQuery.fn = jQuery.prototype.对prototype肯定不会陌生啦。虽然 javascript 没有明确的类的概念,但是用类来理解它,会更方便。jQuery便是一个封装得非常好的类,比如我们用 语句 $(“#btn1”) 会生成一个 jQuery类的实例。

jQuery.fn.extend(object); 对jQuery.prototype进得扩展,就是为jQuery类添加“成员函数”。jQuery类的实例可以使用这个“成员函数”。

比如我们要开发一个插件,做一个特殊的编辑框,当它被点击时,便alert 当前编辑框里的内容。可以这么做:

$.fn.extend({        

     alertWhileClick:function(){       

         $(this).click(function(){      

              alert($(this).val());       

          });       

      }       

});

$(“#input1″).alertWhileClick(); //页面上为:<input id=”input1” type=”text”/>

$(“#input1”) 为一个jQuery实例,当它调用成员方法 alertWhileClick后,便实现了扩展,每次被点击时它会先弹出目前编辑里的内容。

 

3.2 jQuery.extend(object);

为jQuery类添加添加类方法,可以理解为添加静态方法。如:

$.extend({  

    add:function(a,b){return a+b;}  

});

便为jQuery添加一个为add的“静态方法”,之后便可以在引入jQuery的地方,使用这个方法了,$.add(3,4); //return 7

By柏小白

使用WebStorm集成开发环境Less解析安装与配置

 

1.安Node.JS

由于Less是使用JS开发的,所以Less运行时依赖Node.JS,如果你电脑之前没有安装过Node.JS,还需下载安装Node.JS

柏小白-小白变大神

node.js官网 下载

安装过程都是一路下一步。安装完成后打开控制台输入node -v,如果能显示出版本号就说明,安装成功了。

2.替换淘宝镜像 CNPM

由于长城牌防火墙的原因,可能NPM(Node.js的包管理工具)无法访问到服务器,这时就可替换成淘宝的NPM镜像

打开控制台直接输入:
npm install -g cnpm –registry=https://registry.npm.taobao.org
MAC平台前面还需加一个sodo

3.安装Less

打开控制台直接输入:
cnpm install -g less
接着输入lessc -v能看到版本号就表示安装成功了

4.添加File Watchers

打开WebStorm,点击文件—>设置—>File Watchers—>右边的+

柏小白-小白变大神

Less配置

program:你Node安装路径下的lessc.cmd
arguments:–no-color –source-map=$FileNameWithoutExtension$.css.map $FileName$ 
working directory:$FileDir$
output paths to refresh:$FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map

之后你只要在项目中添加一个.less文件,系统就会自动为你编译了。