web前端技能树

移动前端自适应解决方案

拉钩网典型的弹性布局：关键元素高宽和位置都不变，只有容器元素在做伸缩变换
文字流式，控件弹性，图片等比缩放

拉钩网：https://m.lagou.com/

2.网易设置根元素html字体大小，使用rem，并用js计算不同分辨率下的html字体大小
使用rem布局结合在html上根据不同分辨率设置不同font-size，通过js计算出来的，所以当分辨率发生变化时，html的font-size就会变。
为了计算方便，取一个100px的font-size为参照，如设计稿的横向分辨率为640px，则body的width：6.4rem; 于是html的font-size=deviceWidth / 6.4。
这个deviceWidth就是viewport设置中的那个deviceWidth, 这个deviceWidth通过document.documentElement.clientWidth就能取到了。所以当页面的dom ready后，做的第一件事情就是：
document.documentElement.style.fontSize = document.documentElement.clientWidth / 6.4 +’px’;
视口要如下设置：

meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"

该meta标签的作用是让当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放。也许允不允许用户缩放不同的网站有不同的要求，但让viewport的宽度等于设备的宽度，这个应该是大家都想要的效果，如果你不这样的设定的话，那就会使用那个比屏幕宽的默认viewport，也就是说会出现横向滚动条。
网易：http://3g.163.com/touch/all?nav=2&dataversion=A&version=v_standard

3.淘宝动态设置viewport的scale以及动态计算html的font-size
视口要如下设置：

meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"

动态设置viewport的scale

var scale = 1 / devicePixelRatio;
document.querySelector('meta[name="viewport"]').setAttribute('content','initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');

device-width的计算公式为：
设备的物理分辨率/(devicePixelRatio * scale)；devicePixelRatio称为设备像素比
动态计算html的font-size

document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';

布局的时候，各元素的css尺寸=设计稿标注尺寸/设计稿横向分辨率/10
font-size可能需要额外的媒介查询，并且font-size不使用rem
淘宝：https://m.taobao.com/?sprefer=sypc00#index

微信小程序

小程序入门教程及实例
为什么需要小程序？？？

一般情况下我们不会选择卸载低频应用，因为需要以备不时之需，无形之中造成存储空

间的浪费。现在，用户可以将部分低频应用删掉，然后用小程序取而代之。

想必大家都关心微信新推出的应用号的最终形态到底是什么样子？怎样将一个“服务

号”改造成为“小程序”？

开发环境

1、下载和安装

2、参考

目录结构

一个小程序由两部分组成：框架主体部分、框架页面部分

1、框架主体部分包含3个文件：app.js  app.json  app.wxss（样式表）

app.js （脚本文件）

内调用了 App 函数，用来注册小程序实例，可以在这个文件中监听处理小程序的声明周期函数，并可以在此声明全局变量。小程序提供了全局方法getApp()方法返回小程序实例。此外，还提供了getCurrentPage获取当前页面的实例。

app.json （配置文件）

用来对小程序进行全局配置我们可以在这个文件中配置小程序是由哪些页面组成，配置小程序的窗口背景色，配置导航条样式，配置默认标题。

App.wxss （样式表文件）

Window 设置页面窗口表现

tabBar 设置页面底部tab表现，其中list数组长度不超过5且至少为2

networkTimeout 设置网络超时时间

Debug 设置debug模式的开启

微信小程序会读取这些文件，生成一个小程序实例

2、框架页面部分：index页面和 logs页面，即欢迎页和小程序启动日志的展示页

每一个页面是由同路径下同名的4个不同后缀文件组成，如：index.js、index.wxml、index.wxss、index.json。分别是脚本、配置、样式、页面结构文件。
WXML组件
小程序中并没有html 标签，而是提供了一系列 WXML 组件，目前小程序并没有提供

自定义组件的动能

View 视图容器

Input input

Button button

Text text

Checkbox 多选项目

数据绑定

数据绑定采用 “Mustache” 语法（双大括号）包裹变量

WXML 中的动态数据均来自对应Page 的data，并且需要调用 setData 方法通知视图数

据变化

深入了解

流程： App Launch-->App Show-->onload-->onShow-->onReady

前端半年水平

一、移动端
移动端dpr适配知识点
移动端性能优化

二、项目流程
团队协作完成流程页面能力
独立完成小型项目能力

三、CSS预处理器
Sass（项目实现统一使用Sass编写样式）
postCSS

四、前端标准/规范
ECMAScript3/5
ECMAScript6

五、编程语言
JavaScript
Node.js

六、包管理器 npm

七、JS框架
Angular
React

八、前端项目构建工具
gulp
grunt
FIS

九、代码组织（模块化）
类库模块化 CommonJS/webpack
业务逻辑模块化 bower
文件加载 Require
模块化预处理器 Browserify

十、软技能
知识管理/总结分享
沟通技巧/团队协作
需求管理/项目管理
交互设计/可用性/可访问性知识

jquery – 事件绑定的不同写法


编	写：袁	亮
时	间：2015-11-16
说	明：jquery事件绑定

一、作用
	1、将html显示与js动态交互分离，不在html中写一堆的onclick等js
	2、简化代码，统一处理，防止遗漏以及重复写，比如ajax请求等
	3、结构清晰，分层，html，css，js等独立
	
二、如何绑定事件
	1、bind：向匹配元素添加一个或多个事件处理器
		1.1 所有jquery版本均支持，但1.7版本后，推荐使用on
		1.2 只能对已经存在的元素进行事件绑定
		1.3 了解即可，不使用
	2、live:向当前或未来的匹配元素添加一个或多个事件处理器
		2.1 jquery 1.9版本以上，已经删除
		2.2 使用on来代替
	3、delegate：为指定的元素（被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）
		3.1 jquery 1.4以上版本支持
		3.2 1.7以下版本的时候可以考虑使用，旧项目，新项目使用不要使用
	4、on【重点】:为指定的元素,添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。使用 on() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）
		4.1 jquery 1.7以上版本支持
		4.2 尽量使用这个，不要使用其他三种绑定
		
三、简单例子
	$("选择器").on({
		click:function(){
			console.log("我是"+$(this));
			console.log("点击触发");
		},
		mouseout:function(){
			console.log("我是"+$(this));
			console.log("鼠标触发");
		}
	},"子选择器(可选)");

四、常见问题(1.72版本jquery下测试)
	1、元素后加载，事件绑定不成功
		1.1 示范代码
			<code>
			<div class="test">你好</div>
			<script type="text/javascript">
			$(function(){
				//a标签事件绑定
				$(".test a").on({
					click:function(){
						console.log("click");
					}
				});

				//后加载生成dom节点
				$(".test").prepend("<a>测试连接</a><hr>");
			});
			</script>
			</code>
		1.2 因为a标签是后加载的元素，在绑定事件的时候，dom数上还没有该元素，因此绑定失败
		
	2、解决办法1
		2.1 事件绑定在已经存在的父元素上，匹配选择器是否符合
		2.2 示例代码
			<code>
			<div class="test">你好</div>
			<script type="text/javascript">
			$(function(){
				//后加载生成dom节点
				$(".test").prepend("<a>测试连接</a><hr>");

				//a标签事件绑定
				$(".test").on({
					click:function(){
						console.log("click");
					}
				},"a");
			});
			</script>
			</code>
		2.3 优点：绑定事件与处理逻辑脱离，代码更简单易懂
		2.4 缺点：需要注意选择器必须是已经存在的节点，子选择器可以是后加载的元素，不清楚的话，可以直接绑定在document上
				iphone下，会出问题，元素需要添加cursor: pointer;样式，手机使用，不采用这个

	3、解决办法2
		3.1 在元素加载后，执行绑定函数
		3.2 实例代码
			<code>
			<div class="test">你好</div>
			<script type="text/javascript">
			$(function(){
				$(".test").prepend("<a>测试连接</a><hr>");

				$(".test a").on({
					click:function(){
						console.log("click");
					}
				});
			});
			</script>
			</code>
		3.3 优点：各种情况都兼容，不会出现绑定失败
		3.4 缺点：代码可能不是那么好看，绑定事件混在了处理逻辑中

五、使用建议
	1、使用1.7以上版本jquery，2.0以下（不兼容ie8及以下版本）
	2、绑定事件均使用on来绑定，不要使用其他的
	3、对于后加载元素，在加载完成之后进行事件绑定，避免兼容性问题

六、原理，额外拓展，dom树结构（了解即可）
	1、可以使用off来取消事件绑定
	2、可以使用.one，只绑定一次，触发之后就取消绑定
	3、页面dom数结构
	4、事件如何冒泡

附参考文档：
	1、浅谈Jquery中的bind(),live(),delegate(),on()绑定事件方式
	2、jQuery三种事件绑定方式.bind(),.live(),.delegate()