前端技术库工程组建

###jQuery类

jQuery，在线版，<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
轮播组件 unslider (5.6k)

Unslider is an ultra-simple jQuery slider for your website.
	<link rel="stylesheet" href="/path/to/unslider/dist/css/unslider.css">
	<!-- The barebones HTML required for Unslider -->
	
	<div class="wrap">
            <div class="demo">
                <div class="slider">
                    <div class="banner">
                        <ul>
                            <li>This is my slider.</li>
                            <li>Pretty cool, huh?</li>
                        </ul>
                    </div>
                </div>
            </div>
     </div>
	<!-- And the relevant JavaScript -->
	<script src="//code.jquery.com/jquery-3.1.4.min.js"></script>
	<script src="/path/to/unslider.js"></script> 
	<!-- but with the right path! -->
	
	$('.banner').unslider({
		animation: 'fade／vertical／horizontal', // 添加动画效果 
		autoplay: true, // 自动播放
		arrows: false, // 左右箭头导航
		nav: false,  // 下部导航
		infinite: true, // 无限播放
		speed: 750, // 移动速度
	});

自己的原生轮播组件 slider https://github.com/DearSW/slider
返回顶部按钮 Back to top.
fullpage.js

<div id='fullpage'>
	<section>
		First
		<div class='slide'>one</div>
		<div class='slide'>tow</div>
		<div class='slide'>three</div>
	</section>
	
	<section>Second</section>
	<section>Third</section>
	<section>Four</section>
	<section>Five</section>
	
</div>
$('#fullpage').fullpage(options);
var options = {
	sectionsColor:['','','','',''],
	controlArrows: true/false,
	verticalCentered: true/false,
	resize: true/false,
	scrollingSpeed: number,
	anchors: ['','','','',''],
	lockAnchors: 
	
};

swiper 是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。
covervid 视频背景插件，原生支持和jQuery支持。


.covervid-wrapper {
  		position: absolute;
   	top: 0;
   	left: 0;
   	width: 100%;
   	height: 100%;
}
<div class="covervid-wrapper">
   	<video class="covervid-video" autoplay loop poster="img/video-fallback.png">
       	<source src="videos/clouds.webm" type="video/webm">
       	<source src="videos/clouds.mp4" type="video/mp4">
   	</video>
</div>
<script type="text/javascript">
	// If using jQuery
		$('.masthead-video').coverVid(1920, 1080);
		
	// If not using jQuery (Native Javascript)
	
		coverVid(document.querySelector('.covervid-video'), 640, 360);
           var vidContainer = document.querySelector('.covervid-wrapper');
           var vid = document.querySelector('.covervid-video');
           function fullScreen(element,w,h) {
               var screenHeight = window.innerHeight;
               var screenWidth = window.innerWidth;
               if(w) {
                   element.style.width = screenWidth + 'px';
               }
               if(h) {
                   element.style.height = screenHeight + 'px';
               }
           }
           fullScreen(vid,true,false);
           fullScreen(vidContainer,true,true);
		
</script>

moment.js JavaScript 日期处理类库
- https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js，这个是处理时间的默认版本。
- <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment-with-locales.min.js"></script>，这个是携带语言的版本，可以在脚本中声明语言：如这样moment.locale(str)。
- <script src="./moment-timezone-with-data.min.js"></script>，这个版本是世界时区的版本，并携带了各个时区的数据，这样使用：var m = moment().tz(str);$labelTime.text(m.format("HH:mm A ") + m.zoneAbbr());，moment().tz(String) is used to change the timezone on an existing moment。
- 演示地址 https://dearsw.github.io/Collection/html/c5_2-world.html

video.js H5视频播放器
- 需要两个文件，video-js.css 和 video.js

###模块加载器

AMD <script src="//cdn.bootcss.com/require.js/2.3.2/require.min.js"></script>
JS模块化编程

###CSS类

初始化样式 normalize (http://odfgqiz57.bkt.clouddn.com/css/normalize.css)(https://ofjyk77x6.qnssl.com/css/normalize.css)
渐变色集合
semanticUI之container
semantic之grid
meta viewport <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no" />

通俗的讲，移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域，
在具体一点，就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域，
但viewport又不局限于浏览器可视区域的大小，它可能比浏览器的可视区域要大，也可能比浏览器的可视区域要小。
在默认情况下，一般来讲，移动设备上的viewport都是要大于浏览器可视区域的，
这是因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小，
所以为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站，
移动设备上的浏览器都会把自己默认的viewport设为980px或1024px（也可能是其它值，这个是由设备自己决定的），
但带来的后果就是浏览器会出现横向滚动条，因为浏览器可视区域的宽度是比这个默认的viewport的宽度要小的。
下图列出了一些设备上浏览器的默认viewport的宽度。
<meta name="msapplication-window" content="width=device-width;height=device-height">
<meta name="viewport" content="width=device-width">
content中有 6 个属性可用，width，initial-scale,minimum-scale,maximum-scale,height,user-scalable
资源链接(http://www.cnblogs.com/2050/p/3877280.html)

###兼容性

html5shiv.js － HTML5 支持，html5shiv is an HTML5 JavaScript shim for IE to recognise and style the HTML5 elements

1
2
3

<!--[if lt IE 9]>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
<![endif]-->

respond.js – 媒体查询支持，min/max-width media query polyfill

1	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>

selectivizr.js – css伪类支持 (eg :last-child)，selectivizr is a JavaScript utility that emulates CSS3 pseudo-classes and attribute selectors in Internet Explorer 6-8.

1	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/selectivizr/1.0.2/selectivizr-min.js"></script>

Modernizr －浏览器特性检测，Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser.

1	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>

###React

生产环境
- babel转码器，在线版，<script src="//cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.17.0/babel.min.js"></script>，Standalone build of Babel for use in non-Node.js environments. Similar to the (now deprecacted) babel-browser
- react，在线版，<script src="//cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.min.js"></script>
- react-with-addons，在线版，<script src="//cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-with-addons.min.js"></script>
- react-dom，在线版，<script src="//cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.min.js"></script>
- react-dom-server，在线版，<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom-server.min.js"></script>

###SemanticUI

###Sencha Touch

###Canvas

<canvas width='x' height='x' id='x' >抱歉，请端正你的生活作风</canvas>
if(canvas.getContext){ canvas.getContext('2d') }
2D上下文的坐标开始于<canvas>元素的左上角，原点坐标是(0,0)。默认情况下，width和height表示水平和垂直方向上可用的像素数目。
填充（fillStyle）和描边（strokeStyle），默认值为“＃000000”，所有涉及描边和填充的操作都将使用这两个样式，除非重新设置这两个值。
绘制矩形：fillRect(),strokeRect(),clearRect()，都接受4个参数，x坐标，y坐标，width，heigth；
描边的线条宽度由lineWidth属性控制，值为整数；lineCap属性控制线条末端的形状是平头（butt）、圆头（round）、方头（square）；lineJoin属性控制线条相交的方式是圆交（round）、斜交（bevel）、斜接（miter）。
绘制路径：
- arc(x, y, radius, startAngle, endAngle, counterclockwise)，绘制一条弧线。
- arcTo(x1, y1, x2, y2, raduis)，从上一点开始绘制一条弧线。
- lineTo(x, y)，从上一点绘制一条直线，到(x, y)为止。
- moveTo(x, y)，将绘图游标移动到(x, y)。
合成：globalAlpha和globalCompositionOperation
使用图像数据：getImageDate()

###待整理

<link rel="stylesheet" href="css/mobile.css" media="(max-width: 640px)">
<link rel="apple-touch-icon-precomposed" href="img/webclip.png" sizes="512x512">
<script async="" src="//www.google-analytics.com/analytics.js"></script>
<script>!function(e,a,t,n,c,o,s){e.GoogleAnalyticsObject=c,e[c]=e[c]||function(){(e[c].q=e[c].q||[]).push(arguments)},e[c].l=1*new Date,o=a.createElement(t),s=a.getElementsByTagName(t)[0],o.async=1,o.src=n,s.parentNode.insertBefore(o,s)}(window,document,"script","//www.google-analytics.com/analytics.js","ga"),ga("create","UA-69889362-1","auto"),ga("send","pageview");</script>
cdnjs
https://dearsw.github.io/Frontend-Resource/html/index.html
http 无法和 https互相访问的问题，那就是不要给URL加上固定的协议，让浏览器自己去选择如何使用什么协议，也就是相对URL的写法。如：https://dearsw.github.io/Frontend-Resource/html/index.html，改写成相对写法：//dearsw.github.io/Frontend-Resource/html/index.html。