发表于   |  

  • 函数的基础和注意点

1. return       
2. 调用自身形成递归
3. 无重载
4. **参数传递**方式
5. **arguments对象** 
    arguments不是真正的数组，对象除了可以读取参数，还可以为参数赋值（严格模式不允许这种用法）。
    有length 和callee属性；
    之前用arguments的地方可以被es6的解构和==rest==给取代了

  • 函数作用域

    1.变量的作用域
    2 .函数本身的作用域：

>函数本身也是一个值，也有自己的作用域。它的作用域与变量一样，就是其声明时所在的作用域，与其运行时所在的作用域无关。
>所以才需要参数啊，数值都基于参数；

3.==闭包==  :内部函数可以读取外部函数的局部变量，把此内部函数返回，就可以在外部读取其内部变量。

**闭包作用**： 读取函数内部的变量，一直保持在内存中，二是 使得其诞生环境一直存在；

原因就在于f1是f2的父函数，而f2被赋给了一个全局变量，这导致f2始终在内存中，而f2的存在依赖于f1，因此f1也始终在内存中，不会在调用结束后，被垃圾回收机制回收。


1
2
3
4
5
6
7
8
9
10
11
function f1(num){
  console.log(num)
  return function f2 (){
	console.log(num++)
  }
}
var out=add(3)
out()// 3,3
out()//4



另一个for循环的

1
2
3
4
5
6
7
8
9
  for (var i = 0; i < 10; i++) {
       (function(a) {
           // 变量 i 的值在传递到这个作用域时被复制给了 a,
           // 因此这个值就不会随外部变量而变化了
           setTimeout(function() {
               console.log(a);
           }, 1000);
       })(i); // 我们在这里传入参数来"闭包"变量
   }

  • 立即调用的函数表达式（IIFE）

    1.写法
    2.目的：一是不必为函数命名，避免了污染全局变量；二是IIFE内部形成了一个单独的作用域，可以封装一些外部无法读取的私有变量。
    3.es6的 ==作用域{}== 可以取代这种写法了；

参考blog

发表于   |  

  • js 中this用法

    1. 在一般函数方法中使用 this 指代全局对象
    2. 作为对象方法调用，this 指代上级对象
    3. 作为构造函数调用，this 指代new 出的对象
    4. apply/call 调用 ，apply方法作用是改变函数的调用对象
      apply方法（或者call方法）不仅绑定函数执行时所在的对象，还会立即执行函数，因此不得不把绑定语句写在一个函数体内。

5.bind方法用于将函数体内的this绑定到某个对象，然后返回一个新函数。

6.函数绑定运算符是并排的两个双冒号（::），双冒号左边是一个对象，右边是一个函数。该运算符会自动将左边的对象，作为上下文环境（即this对象），绑定到右边的函数上面。

  • apply /call bind的使用

es5的this几种情况

es5 this / http://javascript.ruanyifeng.com/oop/this.html
js中this

发表于   |  

  • 常用的类型也就除了html4中的 还可以使用到 tel 、 number 、range（方便做demo)

  • 属性有 ： (autocomplate autofocus) (form类的) (min max step) (palceholder required pattern )
    size maxlength readonly disable hidden

  • ？placeholder问题

    颜色： ::-webkit-input-placeholder{} :-moz-placeholde

    js解决兼容 ：方法很多，这里提供一种基于jq的使用虚拟span的方案，测试可用

    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
    var JPlaceHolder = {
        //检测
        _check : function(){
            return 'placeholder' in document.createElement('input');
        },
        //初始化
        init : function(){
            if(!this._check()){
                this.fix();
            }
        },
        //修复
        fix : function(){
            jQuery(':input[placeholder]').each(function(index, element) {
                var self = $(this), txt = self.attr('placeholder');
                self.wrap($('<div></div>').css({position:'relative', zoom:'1', border:'none', background:'none', padding:'none', margin:'none'}));
                var pos = self.position(), h = self.outerHeight(true), paddingleft = self.css('padding-left');
                var holder = $('<span></span>').text(txt).css({position:'absolute', left:pos.left, top:pos.top, height:h, lienHeight:h, paddingLeft:paddingleft, color:'#aaa'}).appendTo(self.parent());
                self.focusin(function(e) {
                    holder.hide();
                }).focusout(function(e) {
                    if(!self.val()){
                        holder.show();
                    }
                });
                holder.click(function(e) {
                    holder.hide();
                    self.focus();
                });
            });
        }
    };
    //执行
    jQuery(function(){
        JPlaceHolder.init();
    });

  • 样式问题
    input 的字体值等不继承，所以要重新写

    去掉默认样式：-webkit-appearance:none;

    -moz-appearance: none;

    (不如直接用样式覆盖)

    去掉背景色： -webkit-box-shadow: 0 0 0px 1000px white inset;

    palcehoder:颜色值

  • 验证问题

    基于 html5属性的 required tel 等

    如何修改提示提示信息？ 可以修改字体信息，但是不常用，不如使用插件

  • 样式定制

    修改默认的 radio checkbox的显示 例如iphone的开关

    修改type=’range’的默认显示

    1
    2
    3
    4
    5
    6
    7
    8
    ::-webkit-slider-runnable-track {
                           -webkit-appearance: none;
                           height: 2px;
                           border: none;
                           margin: 1em 0;
                           background: #fff;
                           color: #fff
                       }

发表于   |  

jquery的插件机制

  • jQuery.extend(object)
  • jQuery.extend([deep], target, object1, [objectN])
  • jQuery.fn.extend(object)

代码示例

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
//闭包限定命名空间
(function ($) {
    $.fn.extend({
        "highLight": function (options) {
            //检测用户传进来的参数是否合法
            if (!isValid(options))
                return this;
            var opts = $.extend({}, defaluts, options); //使用jQuery.extend 覆盖插件默认参数
            return this.each(function () {  //这里的this 就是 jQuery对象。这里return 为了支持链式调用
                //遍历所有的要高亮的dom,当调用 highLight()插件的是一个集合的时候。
                var $this = $(this); //获取当前dom 的 jQuery对象，这里的this是当前循环的dom
                //根据参数来设置 dom的样式
                $this.css({
                    backgroundColor: opts.background,
                    color: opts.foreground
                });
                //格式化高亮文本
                var markup = $this.html();
                markup = $.fn.highLight.format(markup);
                $this.html(markup);
            });
        }
    });
    //默认参数
    var defaluts = {
        foreground: 'red',
        background: 'yellow'
    };
    //公共的格式化 方法. 默认是加粗，用户可以通过覆盖该方法达到不同的格式化效果。
    $.fn.highLight.format = function (str) {
        return "<strong>" + str + "</strong>";
    }
    //私有方法，检测参数是否合法
    function isValid(options) {
        return !options || (options && typeof options === "object") ? true : false;
    }
})(window.jQuery);

调用

1
2
3
4
5
6
7
8
//调用
//调用者覆盖 插件暴露的共公方法
$.fn.highLight.format = function (txt) {
    return "<em>" + txt + "</em>"
}
$(function () {
    $("p").highLight({ foreground: 'orange', background: '#ccc' }); //调用自定义 高亮插	件
});

参考
参考地址

发表于   |  

几种切图的技巧

我个人使用的是cc2015 比较之前的版本在切图上有些不同的；在工作中我时常用这么几种切图方式

切单个图片

  • 转化为智能对象

这个是我从慕课网上听来的，大概的思路就是：先转化成智能对象– 然后使用选择工具划区域（可以画大点范围，但要包住智能对象）– 然后就是使用ctrl+c –然后 ctrl+N 即新建对象– 最后ctrl+v;然后就是所谓的ctrl+shift+alt+s 保存网页格式即可；

  • 直接图层导出png

由于设置的默认格式是png 的，这个可以在首选项中设置的，一般情况下用这种格式也没什么不好的吧

  • 使用图像资源

这个算是cc提供的新功能了吧，首先文件–图像资源勾选上–然后在你选择的图层上面直接命名，命名的格式随意，你就会看到在psd文件的目录下生成一个默认的文件夹，里面就是你切好的图片；

  • 常规切图法

这个就是选择图层之后，然后拉线，之后用切片工具切图然后保存就可以了；

以上各有个的优点吧，反正配合使用就好了；

切多个图片

  • 使用标尺拉线

比较传统的切图方式，就是使用标尺拉线，然后选择标尺的基于标尺，就可以快速生成，很多切片，然后删除不需要的

  • 使用图层的

使用图层的新建基于图层的切片，这个是基于图层的操作的，也就是说要选中很多相应的图层，然后使用 图层–新建基于图层的切片–然后就是保存咯

如何制作雪碧图

  • fireworks

    我之前一直使用fireworks来制作雪碧图，虽然早就不更新了，但是使用fireworks来测量和生成雪碧图还是挺快速的

  • 然后是看到了使用compass的函数来拼和雪碧图

这样要使用sass配合compass封装的函数，我只是看到有人这么做，但是还没有自己实践过，后来看到compass也停止更新了，而且很多里面的函数也没有太多用处，大不了sass玩的溜直接仿一个；

  • 然后就是其他一些小型的工具、在线或者线下的

这个就更有针对性。而且好像要配置一些参数之类的，我觉得很规则的还可以，如果是非规则的，还不如直接用ps去拼呢；

发表于   |  

如何给函数添加默认值

  • es5 可以根据函数参数类型typeof 、函数的个数位置 arguments对象来判断

    • 使用jq 的函数扩展 $.extend或其他函数库来扩展；
  • es6 的函数解构定义默认值
1
2
3
4
5
6
一般参数默认都是传一个对象；
function fn({a=21,b=4}={}){
  console.log(a+b)
}
fn({a:400})

缺点就是如果参数很多这样传感觉不清爽

  • 使用对象新属性 Object.assign的合并功能
1
2
3
4
5
6
7
8
9
10
11
let obj={
  x:11,
  y:22
}
function ob(opts){
   opts=Object.assign(obj,opts)
  console.log(opts.x+opts.y)
}
ob({y:55})

使用 对象的扩展运算符 ... es2017开始支持

1
2
3
4
5
6
7
function fn (opts){
  console.log(opts.x+opts.y)
}
let de={x:10,y:5}
let we={x:50}
fn({...de,...we})

扩展运算符的写法看起来更加简洁明了，其原理就是对象解构，然后属性重复的话后者覆盖前者。

扩展

Object.assign方法用于对象的合并，将源对象（source）的所有可枚举属性，复制到目标对象（target）。

所以其作用很广泛

  1. 为类（对象）添加属性和方法，可以方便扩展类和对象
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 Object.assign(SomeClass.prototype, {
  someMethod(arg1, arg2) {
    ···
  },
  anotherMethod() {
    ···
  }
});
// 等同于下面的写法
SomeClass.prototype.someMethod = function (arg1, arg2) {
  ···
};
SomeClass.prototype.anotherMethod = function () {
  ···
};
  1. 克隆对象
  2. 合并多个对象
  3. 为属性指定默认值

参考

参考链接

发表于   |  

Date对象的使用

date对象简述

Date()与new Date()

Date()可以当作普通函数直接调用，无论有没有参数，返回的都是当前的时间字符串
new Date()是实例化一个日期对象，有无参数时：
1.不传参数时：返回当前世界的字符串
2.milliseconds，1970年1月1日00:00:00 UTC开始计算的毫秒数作为参数。（可以为负值表示1970以前）
3.datestring，时间值字符串形式多种，常用的有

1
2
3
new Date('2013-2-15')
new Date('2013/2/15')
new Date('02/15/2013')

事实上所用可以被`Date.parse()`解析的都可以传进去

4.new Date(year, month [, day, hours, minutes, seconds, ms])

> 如果采用这种格式，最少需要提供两个参数（年和月），其他参数都是可选的，默认等于0。因为如果只使用“年”这一个参数，Date对象会将其解释为毫秒数。

new Date()默认会自动调用Date.parse()与Date.UTC()方法

  • Date.parse()解析日期字符串
  • Date.UTC()解析上面4的方法

new Date()参数合法性与智能折算
字符串不合法时，返回NaN或Invalid Date。如new Date('2016-12-32')；
使用4的方法，会自动折算,如new Date(2016,12,33)

日期的运算

  • 加法—字符串运算
  • 减法–数值运算
  • 全等 –都是false

静态方法

  • Date.parse()

    方法用来解析日期字符串，返回距离1970年1月1日 00:00:00的毫秒数。
    失败返回NaN

  • Date.UTC()

    Date对象返回的都是当前时区的时间。Date.UTC方法可以返回UTC时间（世界标准时间）

  • Date.now() es5方法

    方法返回当前距离1970年1月1日 00:00:00 UTC的毫秒数

实例方法

to类：从Date对象返回一个字符串，表示指定的时间。
get类：获取Date对象的日期和时间。
set类：设置Date对象的日期和时间。

发表于   |  

在linux 系统上编辑文本总是那么不爽，于是准备迁移到windows上

所以试试这个绑定

  • 首先什么是token啊
  • 然后这这个另存为之后会不会给我的本地的冲突啊，或者说我的本地只是不做同步，除非配置文件修改？
  • 然后这个文件就会默认的给我同步上去了？？？
  • 带着这些疑惑，我就试试看吧，看看如何

发表于   |  

Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.

Quick Start

Create a new post

1
$ hexo new "My New Post"

More info: Writing

Run server

1
$ hexo server

More info: Server

Generate static files

1
$ hexo generate

More info: Generating

Deploy to remote sites

1
$ hexo deploy

More info: Deployment