4月我又知道了啥

1. <area>,<map>,<img> 元素

• 实现图片热点

<img src="mm1.jpg" alt="美女" usemap="#MM">
<map id="MM" name="MM">
    <area shape="rect" coords="20,20,80,80" href="#rect" alt="矩形">
    <area shape="circle" coords="200,50,50" href="#circle" alt="圆形">
    <area shape="poly" coords="150,100,200,120,180,130,190,180,150,150,100,160,140,120,100,110" href="#poly" alt="多边形">
</map>

• usemap属性的值可以使name，也可以是id，但是chrome下只支持name，且不管是name还是id，usemap中都应该是#srting这样的格式

2. transform配置

transform: scale(x,y) // ie10

// 兼容写法
.test{ 
    -moz-transform:scale(2,2); 
    -webkit-transform:scale(2,2); 
    -o-transform:scale(2,2); 
    background:url(img/i.png) no-repeat; 
    width:198px; 
    height:133px; 
} 

• 除了设置大小，还可以设置旋转倾斜位移

transform:rotate()：

.demo_transform1{-webkit-transform:rotate(10deg);-moz-transform:rotate(10deg)}

transform:skew()：
.demo_transform2{-webkit-transform:skew(20deg);-moz-transform:skew(20deg)}

transform:translate()：
.demo_transform4{-webkit-transform:translate(120px,0);-moz-transform:translate(120px,0)}

3.jquery的ready和js的onload方法的差别

• ready只是dom结构加载完毕，便视为加载完成。(此时图片没有加载完毕)，onload是指dom的生成和资源完全加载完成

4. querySelector和querySelectorAll

• ie8+浏览器支持
• querySelector() 方法返回匹配指定 CSS 选择器元素的第一个子元素
• querySelectorAll() 方法返回匹配指定 CSS 选择器元素的所有子元素
• query选择符选出来的元素及元素数组是静态的，而getElement这种方法选出的元素是动态的。静态的就是说选出的所有元素的数组，不会随着文档操作而改变．

5. css3 中 calc来计算宽度

• ie10 支持

width:calc(33.3333% - (10px + 5px) * 2 - 15px )

6. webpack中的loader作用

• webpack把所有文件都当成模块对待，但是它只理解Javascript。Loaders把这些webpack不认识的文件转化成模块，以便webpack进行处理。

7. datav，阿里云的数据可视化组件展示

8. visjs

• 创建关系图等数据展示的插件（network，timeline）

9. vue和element组件实现到处table到excel功能

• 地址

10. WebSocket（所有浏览器都支持）

• 消息通知，在elementui中叫做Badage（标记）

来源

• 与http齐名，http只能是客户端主动向服务器发送消息，服务器才会返回数据，做不到服务器主动向客户端推送信息。
• 因为http单向请求，注定了如果服务器有连续的状态变化，客户端要获知就非常麻烦。我们只能使用"轮询"：每隔一段时候，就发出一个询问，了解服务器有没有新的信息

特点

• 服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息
• 属于服务器推送技术的一种。

---

11. github， npm， bower， jsDelivr

• jsDelivr：Open Source CDN
• bower： A package manager for the web，管理扁平依赖，不嵌套，专为前端设计
• npm：包管理工具，最初只为nodejs设计，后来延伸至整个js，嵌套管理依赖
• github：开源仓库

12. 隐藏滚动条 jQuery.nicescroll

$("body").niceScroll();

13. 懒加载 jQuery.scrollloading

<img class="scrollLoading" data-url="../images/1.jpg" src="../images/1.gif" width="630" height="420"
    />
<img class="scrollLoading" data-url="../images/2.jpg" src="../images/1.gif" width="630" height="420"
    />
<img class="scrollLoading" data-url="../images/3.jpg" src="../images/1.gif" width="630" height="420"
    />
<img class="scrollLoading" data-url="../images/4.jpg" src="../images/1.gif" width="630" height="420"
    />
<img class="scrollLoading" data-url="../images/5.jpg" src="../images/1.gif" width="630" height="420"
    />
    
$(function () {
    $(".scrollLoading").scrollLoading();
});

14. 事件，日期处理 moment插件

    var date = "2018-04-23 16:47:02"
    console.log(moment(date).format("MM-DD HH:MM"))
    
    // 04-23 16:04

15. call,apply,bind

• 都是用来改变this指向的
• call和apply都是立即执行，bind是绑定this之后，返回一个函数，不会立即执行

16. vue中为啥可以直接this.times，这样去访问data中的属性，而不是this.data.times

• 因为vue源码中会对data中的所有key遍历，做一个代理，将所有data中的值都直接代理到vue下面

17. vue源码中之所以使用数据劫持，而不是直接在dom操作的原因

• 需要频繁修改dom，会导致频繁回流或者重绘，浪费资源

jquery中获取子元素方法 find和children的区别

• find会深度遍历查找
• children只找第一层子节点

---

webpack使用总结

webpack 打包使用的cross-env

• 可以跨平台使用环境变量

{
  "scripts": {
    "build": "cross-env NODE_ENV=production webpack --config build/webpack.config.js"
  }
}

压缩文件

• 压缩css

loaders: [
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: [
            {
              loader: 'css-loader',
              options: {
                minimize: true //css压缩
              }
            }
          ]
        })
      },
]

• 压缩js

    new UglifyJSPlugin(), // js压缩

devtool

• 如果取值为source-map，则在打包过后会生成source-map文件，在运行环境下可以在调试器中直接映射到sources->network->webpack://->.目录下的对应文件

执行别的webpack打包文件

地址