招聘信息/视觉中国

岗位要求:
1、学历不限,能力远比文凭重要;
2、三年以上工作经验;
3、精通 react + redux;

公司名称:视觉中国
公司简介:视觉中国是领先的视觉影像内容和整合营销传播服务提供商,旗下包括华盖创意(Getty Images China)、汉华易美(CFP)、东星娱乐(TungStar)、视觉ME社区(Shijue.me)、艾特凡斯(Advance)等业界著名品牌。
地理位置:电通时代广场2号楼A区,北京市朝阳区酒仙桥北路7号 邮编 100015
职位:前端工程师
薪资范围:初级10-15k、中级20-25k、资深30k或以上,面谈
联系人QQ:21770637
发布时间:2016-05-05 14:51:14

招聘信息/视觉中国

日常作业——JS篇 写一个简单的tap标签插件

写一个简单的tap标签插件

要求

1.可以用jq

2.实现通过不同参数的传入,可以设置滑动切换、淡入淡出、直接隐藏/显示的切换效果

3.实现通过不同参数的传入,可以设置切换触发的事件(mouseenter/click)

4.推荐文档结构

slider >
taps > tap * n
container > item * n

 

在制作过程中,请思考:jquery中mouseenter和mouseover有什么区别

日常作业——JS篇 写一个简单的tap标签插件

日常作业——html篇 浮动的理解(一)

利用浮动实现以下布局:

要求:

1.图片固定宽高;

2.文字宽度自适应;

3.兼容没有图片的情况

4.兼容ie7以上浏览器

homework_html_1

 

2016年4月20日 09:39:05追加题目

基于昨天的题目

现在要求图片在右侧显示,文字在左边

 

相关知识点:

1、浮动流元素,会失去元素本身在文档中所占的位置,所以下方的元素会“挤上来”

2、浮动元素虽然不占据文档位置,但是,文字节点并不能进入浮动元素显示区域和浮动元素设置的margin外边距

 

参考demo:m.zol.com.cn 列表部分的内容

日常作业——html篇 浮动的理解(一)

给dom节点扩展closest方法

想必大家都用过jq的closest方法(用来查找上级中最近的指定元素),这里我写的是一个简单的原生方法的实现

实际原生dom也是有这个方法的,只是兼容的浏览器少之又少

这里是一个最最简单的实现,工作中经常用到,所以记录一下

HTMLElement.prototype.closest = function(str){
	
	if(!str){
		return this.parentNode;
	}else{
		var temp = this.parentNode;
		while(temp){
			if(checkNode(temp)){
    			return temp;
    		}else{
    			temp = temp.parentNode;
    		}
		}
	}
	function checkNode(obj){
		var _this = obj;
		switch(str.substr(0,1)){
			case '.':
				if(_this.classList.contains(str.split('.')[1])){
					return true;
				}else{
					return false;
				}
				break;
			case '#':
				if(_this.id == str.split('#')[1]){
					return true;
				}else{
					return false;
				}
				break;
			default:
				if(_this.tagName == str){
					return true;
				}else{
					return false;
				}
				break;
		}
	}
}
给dom节点扩展closest方法

rem解决方案

基于一位前辈写的框架,修复了一些小问题

! function(W) {
	/* 
	    dpr         设备像素比
	    scale       缩放倍数
	    timer       延迟对象 
	    rootElement 根元素
	    viewport    meta > viewport
	*/
	var dpr,
		scale,
		timer,
		rootElement = document.documentElement,
		viewport = document.querySelector('meta[name="viewport"]'),
		initFontSize = parseInt(window.getComputedStyle(rootElement)["font-size"]),
		zolDesignParams = document.querySelector('meta[name="zol-rem-params"]'),
		defaultDesignWidth = 640,
		fontStyle = document.getElementById('zol-rem-font-style'),
		rootStyle = document.getElementById('zol-rem-root-style'),
		ua = navigator.userAgent;

	function setZolParams(params){
		if(!params)return;
		if(params = params.content){
			var width = /width=(\d+)/.exec(params);
			width && width[1] && (defaultDesignWidth = width[1]);
			
			var fonts = /fonts=([^;]+)/.exec(params);
			fonts && fonts[1] && (fonts = fonts[1].split(','));
			
			var str = 'body:{font-size:' + initFontSize * dpr + 'px}';

			fonts && fonts.forEach(function(size){
				str += '[data-dpr="1"] .f' + size + '{font-size:' + size / 2 + 'px!important}'
				str += '[data-dpr="2"] .f' + size + '{font-size:' + size + 'px!important}'
				str += '[data-dpr="3"] .f' + size + '{font-size:' + size / 2 * 3 + 'px!important}'
			});
			
			if(fonts && !fontStyle){
				fontStyle = document.createElement('style');
				fontStyle.id = 'zol-rem-font-style';
				fontStyle.innerHTML = str;
				document.getElementsByTagName('head')[0].appendChild(fontStyle);
				document.documentElement.setAttribute('data-dpr',dpr);
			}
		};
	};
	
	// 初始化REM,现阶段设计稿依然以640为主,按照取整数的原则,以64来划分刚好得到10,便于换算
	function initialRem() {
		var width = rootElement.getBoundingClientRect().width; // 文档宽度
		width / dpr > defaultDesignWidth && (width = defaultDesignWidth * dpr);
		initialRem.rem = width * 100 / defaultDesignWidth ; // 将页面划分64份,1rem为页面的1/64;
		//rootElement.style.fontSize = initialRem.rem + 'px' // 为根元素设置font-size;
		
		if(!rootStyle){
			rootStyle = document.createElement('style');
			rootStyle.id = 'zol-rem-root-style';
			document.getElementsByTagName('head')[0].appendChild(rootStyle);
		}
		rootStyle.innerHTML = 'html{font-size:' + initialRem.rem + 'px;-webkit-text-size-adjust: 100%;}';
	};

	// 平台暂只支持iPhone和Android,Windows Phone由于用户基数少暂不考虑
	// 规则只取整数,:3倍,2倍,1倍
	if (!dpr && !scale) {
		var platform = (W.navigator.appVersion.match(/android/gi) || W.navigator.appVersion.match(/iphone/gi));
		dpr = W.devicePixelRatio;
		dpr = platform ? dpr >= 3 ? 3 : dpr >= 2 ? 2 : 1 : 1;
		/android/ig.test(ua) && /ucbrowser/ig.test(ua) && (dpr = 1);
		scale = 1 / dpr;
	}

	// 经测试,发现ZOL安卓客户端的UIWebview处理起来会有问题,需添加target-densitydpi进行处理
	if (!viewport) {
		viewport = document.createElement('meta');
		viewport.setAttribute('name', 'viewport');
		viewport.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no' + (/android/i.test(ua) && /zol/i.test(ua) ? ', target-densitydpi=device-dpi' : ''));
		rootElement.firstElementChild.appendChild(viewport);
	} else {
		// 如果已有viewport 将根据初始化缩放比例来;没有按照计算的来
		var initScale = viewport.getAttribute('content').match(/initial\-scale=([^\,$]+)/);
		initScale && (scale = parseFloat(initScale[1]), dpr = parseInt(1 / scale))
	}

	// 将window.dpr设为只读
	Object.defineProperty(window, 'dpr', {
		value: dpr,
		writable: !1
	});

	// 处理resize的情况
	W.addEventListener('resize', function() {
		clearTimeout(timer), timer = setTimeout(initialRem, 300)
	}, false);

	// 处理bfcache的情况,UC等浏览器下存在
	W.addEventListener('pageshow', function(e) {
		e.persisted && (clearTimeout(timer), timer = setTimeout(initialRem, 300))
	}, false);


	// 重置字体方法,主要用于初始化处理和通过ajax动态写入部分的字体处理,只接受一个参数,即需要处理模块,缺省默认为body;
	// 这个方法只是一个临时性的,以后将全部采用react的方式,不在使用此方式进行处理
	W.setupFontSize = function(a) {
		2 !== W.dpr && (a || (a = document.body), a = a.querySelectorAll("[data-changed]"), [].forEach.call(a, function(a) {
			if (!a.style.fontSize) {
				var b = +getComputedStyle(a)["font-size"].replace(/px/, "");
				a.style.fontSize = b / 2 * window.dpr + "px"
			}
		}))
	};
	initialRem();
	setZolParams(zolDesignParams);
	
	var ondocumentReady = function() {
		setupFontSize();
	}
	// 设置字体大小
	document.readyState === 'complete' ? ondocumentReady() : document.addEventListener('DOMContentLoaded',ondocumentReady , false);
	
	
}(window);
rem解决方案

使用bind代理并扩展console.log

使用bind代理并扩展console.log

var log = (function(a) {
	return console.log.bind(console, arguments[0]);
})('app')
log([123123131], 1);

在EcmaScript5中扩展了叫bind的方法(IE6,7,8不支持),使用方法如下:

function T(id) {
	this.id = "Object";
	this.dom = document.getElementById(id);
	this.init && this.init();
}
T.prototype = {
	init: function() {    
		this.dom.onmouseover = function() {
			//this指向dom
			console.log("Over-->" + this.id);
		}
		this.dom.onmouseout = function() {
			//this指向此对象的实例化t
			console.log("Out -->" + this.id);
		}.bind(this)
	}
};
var t = new T('mulianju') //页面中存在的Id;

bind call 和apply 的区别:

http://www.cnblogs.com/jingwhale/p/4604917.html?utm_source=tuicool&utm_medium=referral

使用bind代理并扩展console.log

招聘信息/中国网库

公司名称:中国网库
公司简介:中国三大电商平台之一
地理位置:安外胜古中路1号蓝宝商务大厦A座402
薪资范围:20k左右
联系人电话:18600642261
联系人邮箱:liuxueling@99114.com(刘经理)

岗位职责:

(1)参与产品的前端开发,与后端工程师协作,高质高效完成产品的数据交互、动态信息展现;
(2)提升产品的用户体验、前端性能以及团队的开发效率;
(3)研究和探索创新的开发思路和前沿的前端技术,应用到团队与产品中。

岗位要求:

(1)熟练掌握各种Web前端技术(HTML/CSS/Javascript等)和跨浏览器、跨终端的开发;
(2)深刻理解Web标准,对前端性能、可访问性、可维护性等相关知识有实际的了解和实践经验;
(3)有使用一门非前端脚本语言(如:NodeJS /Python/PHP等),并有项目经验这优先考虑;
(4)对前端技术有持续的热情,个性乐观开朗,逻辑性强,善于和各种背景的人合作;
(5)在博客或Github上有技术沉淀者优先。

招聘信息/中国网库

解决UC浏览器、微信浏览器使用display:flex;的兼容性问题

在android平台的uc浏览器和微信浏览器中使用display: flex;会出问题。

使用display: flex;的时候需要加上display: -webkit-box;

使用flex: 1;的时候要加上:

-webkit-box-flex: 1;      
-moz-box-flex: 1;         
-ms-flex: 1;  

使用align-items: center;的时候需要加上:-webkit-box-align: center;

使用flex-direction: column;的时候需要加上:

-webkit-box-orient: vertical;
-moz-box-orient: vertical;
box-orient: vertical;

这里有个demo大家可以看一下
请点击:测试页面

 

转载自:http://www.sheng00.com/2148.html

解决UC浏览器、微信浏览器使用display:flex;的兼容性问题