我的前端开发之路---谨以记录工作中那些踩过的坑，持续更新中~~

1.node版本切换工具nvm使用

#查看所有的node版本
$nvm ls

#切换版本(本地为0.12.0)
$nvm use 0

#设置默认使用的node版本(例如0.12.0)
$nvm alias default 0.12.0

2.文本溢出显示省略标记(…)

css3属性text-overflow:ellipsis的用法

text-overflow：clip|ellipsis

clip： 当对象内文本溢出时不显示省略标记（…），而是将溢出的部分裁切掉。
ellipsis： 当对象内文本溢出时显示省略标记（…）。

在使用ellipsis的时候，必须配合overflow:hidden; white-space:nowrap; width:50%;共同使用才会有效果，width属性根据实际需要填写。

<style type="text/css">
.test{
    text-overflow:ellipsis; /*设置超出部分显示...*/
    overflow:hidden;
    white-space:nowrap;/*文本不换行*/
    width:150px;}
</style>

<div class="test">关于产品的推广---关于产品的推广</div>

3、JS实现字数限制，超出部分显示为省略号

if(Ext.getCmp("id").text.length >7){
  Ext.getCmp("id").setText(Ext.getCmp("id").text.substring(0,5)+"...");
}

4、函数式编程

• filter()可以可以取出数组中符合条件的元素 重新组成一个新的数组

  var arr = [1, 2, 4, 5, 6];
  
  var newArr = arr.filter(function(item, index) {
   return item > 3;
  });
  console.log(newArr); //[4, 5, 6]

• map()可以用来遍历一个数组中的所有元素

  var arr = [1, 2, 4, 5, 6];
  
  var newArr = arr.map(function(item, index) {
   return item * 2;
  });
  
  console.log(newArr); //[2, 4, 8, 10, 12]

• forEach()

  var arr = [1, 2, 4, 5, 6];
  
  arr.forEach(function(item, index) {
   console.log(item); //1, 2, 4, 5, 6
  });

• reduce()让数组中的前项和后项做某种计算，并累计最终值

  var arr = [1, 2, 4, 5, 6];
  
  var result = arr.reduce(function(prev, next) {
   return prev+next;
  });
  console.log(result); 

• every()检测数组中的每一项是否符合条件

  var arr = [1, 2, 4, 5, 6];
  var result = arr.every(function(item,index) {
   return item > 0;
  });
  console.log(result); //全部满足才为true

• some()检测数组中是否有某些项符合条件

  var arr = [1, 2, 4, 5, 6];
  
  var result = arr.some(function() {
   return item > 1;
  });
  console.log(result); //只要满足一个条件即为true

  5、countUp.js插件应用

  target = 目标元素的 ID；
  startVal = 开始值；
  endVal = 结束值；
  decimals = 小数位数，默认值是0；
  duration = 动画延迟秒数，默认值是2；

  示例：

  var demo = new countUp("myTargetElement", 24.02, 94.62, 2, 2.5);
  demo.start();

  部分代码：

  <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
  <script language="JavaScript" type="text/JavaScript" src="countUp.min.js"></script>
  <script type="text/javascript">
  var options = {
     useEasing : true,
     useGrouping : true,
     separator : ',',
     decimal : '.',
     prefix : '',
     suffix : ''
  };
  
  var demo = new CountUp("myTargetElement", 0, 32406, 0, 2.5, options);
  var demo2 = new CountUp("myTargetElement2", 0, 24745, 0, 2.5, options);
  var demo3 = new CountUp("myTargetElement3", 0, 71, 0, 2.5, options);
  
  demo.start();
  demo2.start();
  demo3.start();
  
  </script>

  当然在实际使用中得加上滚动条判断，记得先以后用jQuery

  $(window).scroll(function(){
   if($(window).scrollTop()>=600){
     demo.start();
     demo2.start();
     demo3.start();
   }
  })

6、画一个中间带文字的空心圆

.circle {
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: transparent;
  border: 1px solid #fff;
  border-radius: 10px;
}
.circle span {
  height: 20px;
  line-height: 20px;
  display: block;
  font-size: 12px;
  color: #000;
  text-align: center;
}

7、带底色的文字块，随着文字内容而改变

.block span {
  display: block;
  width:30px;
  background-color:#000;
}

8、closest()方法和parents()方法的对比

.closest()方法主要用来获取匹配选择器的第一个祖先元素，从当前元素开始沿DOM树向上。

.closest()方法从当前元素开始，沿DOM树向上遍历，直到找到已应用选择器的一个匹配为止。返回包括零个或一个元素的jquery对象。

.parents()方法从父元素开始，沿DOM树向上遍历，直到文档的根元素为止，将每个祖先元素添加到一个临时的集合；如果应用了选择器，则会基于该选择器对这个集合进行筛选。返回包含零个、一个或多个元素的jQuery对象。

9、bootstrap自带插件的glyphicon无法显示的问题

​ 昨天小编折腾了一下午，项目中引入了bootstrap的editable插件，但是插件中的glyphicon一直都无法显示，差点就想改源码了，但鉴于该了源码之后的样式太丑还没有插件自带的好看就放弃了。

​ 总结一下原因，项目中没有引入fonts文件夹，项目中的bootstrap.css文件过旧，没有写glyphicons-halflings-regular.eot,glyphicons-halflings-regular.svg, glyphicons-halflings-regular.ttf, glyphicons-halflings-regular.woff,glyphicons-halflings-regular.woff2的路径，必须在css文件里写好这些文件对应的正确路径，这样子才会在项目中显示glyphicon图标。

10、超过容器div的文字显示为省略号的样式

p {
  width:50px; /*必须设置宽度*/
  overflow: hidden; /*溢出隐藏*/
  text-overflow: ellipsis;/*以省略号...显示*/
  white-space: nowrap;/*强制不换行*/
}

11.css3 pointer-events:none设置某个区域不可点击

​ 在CSS3中pointer-events: none，表示它将捕获不到任何点击，而只是让事件穿透到它的下面。它的作用不只是禁用链接hover，打开链接，是真正意义上的onclick事件去掉了。a标签应用disabled属性不能禁用鼠标点击事件，但是可以禁用键盘事件。

因此，禁用a标签链接或按钮的完美组合是：pointer-events:none & without href

<a class="tab_a tab_on" style="pointer-events:none;">完美禁用</a>

​ 考虑到某些浏览器不支持CSS3 pointer-events属性，因此，在实际应用的时候，可能要对不同浏览器做不同处理，这个时候就需要判别当前用户浏览器是否支持pointer-events. 下面就是JS实现验证的代码：

var supportsPointerEvents = (function(){
  var dummy = document.createElement('_');
  if(!('pointerEvents' in dummy.style)) return false;
  dummy.style.pointerEvents = 'auto';
  dummy.style.pointerEvents = 'x';
  document.body.appendChild(dummy);
  var r = getComputedStyle(dummy).pointerEvents === 'auto';
  document.body.removeChild(dummy);
  return r;
})();

12、.map()函数介绍

.map()函数用于处理当前jQuery对象匹配的所有元素，并将处理结果封装为新的数组。map(callback)为包装集中的每一个元素调用回调函数，并将返回值收集到jQuery对象的实例中。

/* .map()方法遍历json数组中的某个key值并且以字符串的格式输出
   注意item["age"]这里需要添加引号""
*/
var data=[{name:"a",age:12},{name:"b",age:11},{name:"c",age:13},    {name:"d",age:14}];

var newArr = data.map(function(item,index) {
  var age = item["age"];
  return age;
}).toString();

//输出为 12,11,13,14 字符串格式

13、.each()函数介绍

$.each(function(index,element))

.each(iterator)遍历匹配集里所有的元素，为每一个元素调用传入的迭代函数。

var arr2 = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];
$.each(arr2, function(i, item){
alert(item[0]);
});
//输出为1 4 7
var obj = { one:1, two:2, three:3, four:4, five:5 };
$.each(obj, function(key, val) {
alert(obj[key]);
});
//输出为 1 2 3 4 5 

两者的异同：

• .map()方法主要用来遍历操作数组和对象，each()主要用于遍历jquery对象。

• .map()方法会返回一个新的数组，而each返回的是原来的数组。

• 使用map时，不改变items，只是创建了一个新的数组；而使用each时，改变的是原来的items数组。

15、$().each() 方法介绍

$(selector).each(function(index,element))

​ $().each()这个方法，在dom处理上用的比较多，如果页面上有多个input标签为checkbox，就可以用改方法来处理多个checkbox，例如：

$("input[name='ch']").each(function(i){
  if ($(this).attr('checked') == true){
    //do something 
  }
})

16、prop()和attr()的区别

1. 添加属性名称该属性就会生效应该使用prop();
2. 是有true,false两个属性使用prop();
3. 其他则使用attr();

$(window).prop();
$(document).prop();
// jquery的新规则：autofocus, async, checked,multiple,readOnly,location,selected 必须用.prop();
$(":checkbox").prop("checked",true);
$("option").prop("selected",true);

$("img").attr("src":"images/a.jpg");
$("img").removeAttr("src");

17、FIS开发命令（FISP对应命令为fisp）

fis release代码编译与部署：

Usage: release [options]  

  Options:  

    -h, --help             output usage information  
    -d, --dest <names>     release output destination  
    -m, --md5 [level]      md5 release option  
    -D, --domains          add domain name  
    -l, --lint             with lint  
    -t, --test             with unit testing  
    -o, --optimize         with optimizing  
    -p, --pack             with package  
    -w, --watch            monitor the changes of project  
    -L, --live             automatically reload your browser  
    -c, --clean            clean compile cache  
    -r, --root <path>      set project root  
    -f, --file <filename>  set fis-conf file  
    -u, --unique           use unique compile caching  
    --verbose              enable verbose output  

18、localStorage的用法

判断浏览器是否支持本地存储

if(window.localStorage){
    alert('This browser supports localStorage');
}else{
    alert('This browser does NOT support localStorage');
}

localStorage的用法极其简单！（Map格式（键-值））

localStorage.length: 返回现在已经存储的变量数目。
localStorage.key(n): 返回第n个变量的键值(key)。
localStorage.getItem(key): 和localStorage.key一样，取得键值为key的变量的值。
localStorage.setItem(key,val):和localStorage.key = val一样，设置键值key的变量值。
localStorage.removeItem(key):删除键值为key的变量。
localStorage.clear(): 清空所有变量。

需要注意的是，HTML5本地存储只能存字符串，任何格式存储的时候都会被自动转为字符串，所以读取的时候，需要自己进行类型的转换。（个人比较喜欢：JSON.parse/JSON.stringify）

// localStorage实现编辑器定时保存数据
<script type="text/javascript" src="localStorag.js"></script>
<script type="text/plain" id="content" name="content" style="width:800px;height:400px;"></script>
<script type="text/javascript">
    var editor = new UE.ui.Editor();
    editor.render('content');

    if(!window.localStorage){
        alert('您的浏览器不支持 localStorage 技术!');
    }else{
        var spanObj = document.getElementById('s1');
        var saveTimer= setInterval(function(){
            var str="";
            if(document.all){
              /*IE*/ 
              str=document.frames[1].document.body.innerHTML; 
            }else{/*Chrome,ff*/
                str=document.getElementById("ueditor_0").contentDocument.body.innerHTML; }
                if(str.length>20 && (str.indexOf("。")>-1 || str.indexOf("，")>-1)){ /*有内容才保存 且有句号或逗号*/
                localStorage.setItem("ctValue", str);
                var d = new Date();
                var YMDHMS = d.getFullYear() + "-" +(d.getMonth()+1) + "-" + d.getDate() + " " + d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds();
                spanObj.innerText='（数据保存于: '+YMDHMS+'）';
                setTimeout(function(){ spanObj.innerText=''; },5000);
            }
        },25000); //每隔N秒保存一次

        function stoplocs(){
            clearInterval(saveTimer); //停止保存
            //localStorage.removeItem("ctValue"); //清空
        }

        function showlocs(){
            var html = localStorage.getItem("ctValue");
            editor.setContent(html);
            //alert(localStorage.getItem("ctValue"));
        }
  }
</script>

19、handlebars语法——内置块表达式（Block helper)

• each && this

// 用each 遍历列表块内容，用this来引用遍历的元素
ul
    {{#each name}}
        li {{this}} li
    {{/each}}
ul

// json数据
{
    name: ["html", "css", "javascript"]
};

• unless block helper

// unless 这个语法是反向的if语法，就是当判断的值为false时他会渲染Dom
{{#unless data}}
    ul id "list"
        {{#each list}}
            li {{this}} li
        {{/each}}
    ul
{{else}}
    p {{error}} p
{{/unless}}

• handlebars的注释

{{！handlebars comments}}

• handlebars的访问（Path）

// 可以通过.来访问属性也可以使用../来访问父级属性。
h1 {{author.id}} h1

// 对应的json数据
{
  title:"My first Blog Post!",
  author:{
    id: 47,
    name: "Yehuda Katz"
  },
  body: "My first post. Wheeee!"
};

使用../访问
{{#with person}}
    <h1>{{../company.name}}</h1>
{{/with}}

// 对应的json数据
{
  "person":{"name": "Alan"},
  "company":{"name": "Rad,Inc."}
};

20、如何让表格支持html格式？

​ 问题是这样子的，在做天池项目的时候碰到了一个问题，需要对单元格里的内容进行换行，发现Bootstrap table可以支持html格式的，例如p标签，br标签可以被识别，但是在普通的表格里不支持html格式的，那最后是怎么解决的呢？

举个栗子：

使用{{expression}}时，输出的内容会被转义，如

<div>{{title}}</div>

context为

{
  title: '<p>Hello World</p>'
}

结果生成html：

<div>&lt;Hello World&gt;</div>

最终在页面上显示的字符串就是

<p>Hello World</p>

如果不想进行html的转义，有两种方法：

1. {{{ }}} 三个花括号
2. SafeString

在模板中将两个花括号替换成三个花括号，即可避免html字符串被转义

<div>{{title}}</div>
<div>{{{body}}}</div>

传入的context为

{
  title: '<p>Hello World</p>',
  body: '<p>Hello World</p>'
}

生成的结果：

<div>&lt;Hello world&gt;</div>
<div><p>Hello world</p></div>

页面上显示的就是

<p>Hello world</p>
Hello world

SafeString

Handlebars提供一个SafeString方法，使用这个方法返回的值即便在{{expression}}中也不会被转义.

Handlebars模板

{{sayhi}}

JavaScript

Hanlebars.registerHelper('sayhi', function(){
  var str = '<p>Hello World</p>';
  return new Handlebars.SafeString(str);
});

21、Splice()的用法

定义和用法：

splice( ) 方法向/从数组中添加/删除项目，然后返回被删除的项目。

注意: 该方法会改变原始数组。

arrayObject.splice(index,howmany,item1,......,itemX)

index：必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。

howmany：必需。要删除的项目数量。如果设置为0，则不会删除项目。

item1,…itemX：可选，向数组添加的新项目。

/* 创建一个新数组，并向其添加一个元素*/
<script type="text/javascript">

var arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"

document.write(arr + "<br />")
arr.splice(2,0,"William")
document.write(arr + "<br />")
</script>

//输出
George,John,Thomas,James,Adrew,Martin
George,John,William,Thomas,James,Adrew,Martin

/*删除从 index 2 ("Thomas") 开始的三个元素，并添加一个新元素 ("William") 来替代被删除的元素*/

<script type="text/javascript">

var arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"

document.write(arr + "<br />")
arr.splice(2,3,"William")
document.write(arr)

</script>

// 输出
George,John,Thomas,James,Adrew,Martin
George,John,William,Martin

22、JavaScript concat()方法

用法：concat()方法用于连接两个或者多个数组。

该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。

arrayObject.concat(arrayX,arrayX,......,arrayX)

举个栗子：

<script type="text/javascript">
  var a = [1, 2, 3];
  document.write(a.concat(4,5));
</script>

//结果输出
1,2,3,4,5

<script type="text/javascript">
  var arr = new Array(3);
  arr[0] = "George";
  arr[1] = "John";
  arr[2] = "Thomas";

  var arr2 = new Array(3)
  arr2[0] = "James";
  arr2[1] = "Adrew"; 
  arr2[2] = "Martin";

document.write(arr.concat(arr2));
</script>

//结果输出
George,John,Thomas,James,Adrew,Martin