什么是Rem

rem和em很容易混淆，相同之处在于都是css单位，且都是相对单位。em先有，rem则是css3才引入，在介绍rem前，则需先了解em:

• em作为font-size的单位时，其代表父元素的字体大小

• em作为其他属性单位时，代表自身字体大小
  em可以让我们的页面更灵活，更健壮，比起到处写死的px值，em似乎更有张力，改动父元素的字体大小，子元素会等比例变化，这一变化似乎预示了无限可能
  有些人提出用em来做弹性布局页面，但其复杂的计算让人诟病，甚至有人专门做了个px和em的计算器，不同节点像素值对应的em值，o(╯□╰)o

什么是 lib-flexible

• 简介：一个制作H5适配的开源库，可以点击这里下载相关文件，获取需要的JavaScript和CSS文件。
• github地址：https://github.com/amfe/lib-flexible
• 阿里CDN地址：http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js

内容溢出

很多时候我们写页面的时候一定会碰到内容溢出，比如文章列表很长，又受其宽度的限制，此时超过的宽度的内容会以…显示

一般情况我们写一个固定高度，然后overflow:hidden,页可以做到内容截取，但是这种写法会存在不会出现…的出现，而且写死的话，不利于屏幕适配。

npm 安装 chromedriver 时，偶尔会出错，错误提示类似于：

1
2
3
4
5
6
7
8
9
10
11
12
13

> chromedriver@2.27.2 install /Users/Mario/Work/Lab/waylens-all-in-one-site/node_modules/chromedriver
> node install.js

Downloading https://chromedriver.storage.googleapis.com/2.27/chromedriver_mac64.zip
Saving to /var/folders/7l/mhhqzhps0y59by7pf04nyx5r0000gn/T/chromedriver/chromedriver_mac64.zip
events.js:161
      throw er; // Unhandled 'error' event
      ^

Error: connect ETIMEDOUT 74.125.23.128:443
    at Object.exports._errnoException (util.js:1023:11)
    at exports._exceptionWithHostPort (util.js:1046:20)
    at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1090:14)

经分析发现，某些版本下

前言

在实际开发的时候我们应该知道，有很多常见的实例操作。比如数组去重，关键词高亮，打乱数组等。这些操作，代码一般不会很多，实现的逻辑也不会很难，下面的代码，我解释就不解释太多了，打上注释，相信大家就会懂了。但是，用的地方会比较，如果项目有哪个地方需要用，如果重复写的话，就是代码沉余，开发效率也不用，复用基本就是复制粘贴！这样是一个很不好的习惯，大家可以考虑一下把一些常见的操作封装成函数，调用的时候，直接调用就好！

多入口设置与 html-webpack-pugin 插件详解

• 我们可以在entry指定多个入口。 在开始代码前我们需创建下面的目录结构：
  • index.html //显示的页面
  • mian0.js // webpack入口1
  • mian1.js // webpack入口2
  • style.css // 样式文件
  • webpack.config.js //webpack中默认的配置文件

webpack 四个核心概念

• Entry 入口
• Output 输出
• Loaders
• Plugins 插件
  webpack中默认的配置文件名称是webpack.config.js,因此我们需要在项目中创建如下文件结构：
• index.html // 显示的页面
• main.js // webpack 入口
• webpack.config.js // webpack 中默认的配置文件

• bundle.js // webpack命令自动生成的文件，无需创建

什么是webpack

• 模块打包机
• 主要任务是 分析你的项目结构找到JavaScript模块以及其他的一些浏览器不能直接运行的拓展语言（Scss、Less、TypeScrpt）,并将其转换和打包为合适的格式供浏览器使用，关系图如下
  

1.javascript 简介

如果ajax让Javascript有了新生，那么最近几年，html5和node的兴起，让javascript有了质的飞跃，如果以后我们想从事前端方向的发展，那么javascript一定要学好。

• javascript是网景（Netscape）公司开发的一款基于客户端浏览器，面向（基于）对象，事件驱动的网页脚本语言。
• javascript在用户浏览器内部运行，javascript能够检测和响应特定的用户操作，比如鼠标点击和键盘操作，更重要的是：几乎每个web浏览器都支持javascript。
  历史
  javascript 的祖先可以追索到20世纪90年代中期，首先是Netscape Navigator2引入了1.0版本，随后，‘哦周计算机制造商协会’（ECMA）开始介入，制订了ECMAScript规范，奠定了javascript迅猛发展的基础。与此同时，微软开发了自己版本的javascript：jscript,在IE浏览器上使用。
  Netscape在最初将其脚本语言命名为LiveScript,后来Netscape在与Sun合作知乎将其改名为Javascript.Javascript最初受java自发而开始设计，目的之一是看上去像java.因此语法上有类似之处，一些名称和命名规范也借自java.最终的结果Javascript和Java的关系是：雷锋与雷峰塔，周杰和周杰伦的关系

1.1 javascript是脚本语言

• 脚本英文为script，脚本简单来说就是一条条文字命令，并按程序顺序执行。比如php也是脚本语言
• 它和java等编程语言不同的是，javascript语法比较松散，要求不想编程语言那么严格
  • java: var number = 10
  • javascript: var num =10

1.2.javascript作用

对于制作一个网页而言：

• html // 给网业添加结果，骨骼
• css // 给网页添加样式，衣服
• js // 给网页添加功能，动作

1.3 体验javascript

2.学习javascript需要知道的

• javascript在页面中的位置
• 书写规范
• 执行顺序
• 环境
  …

  2.1.在web页面中添加javascript

  javascript代码适合页面内容一起发送给浏览器的，可以把javascript代码在HTML页面

• 嵌入式
  javascript语句之间包含在HTML文件里，语法结构如下：

  1 2 3

  <script type="text/javascript"> // js语句 </script>

• 外链式
  把javascript代码保存到单独的文件，然后利用