2018年2月20日星期二
响应式开发:
优点,一套代码,减少工作量,节省时间,每个设备都能得到设计,搜索优化,
缺点:加载更多样式资源,对设计师要求高,设计难精准定位,老版本浏览器兼容性不好,
微信浏览器的内核,是qq浏览器的x5内核;
媒体查询:@media alland (min-width:800px)and(orientation:landscape){width:视口宽度,height:视口高度; device-width:设备屏幕宽度,
Orientation:设备横向还是纵向;aspect-ratio:视口宽高比,
device-aspect-ratio:设备宽高比; rsolution:检测设备屏幕的宽度
前缀:min 或max viewport(布局视口。可视视口,理想视口:侯建手机浏览器优化的页面而添加的,<meta name=”viewport” content=”width=device-width”/> )
分析设计图:是否有相应设计规范,字体,颜色,字号,间距,允许误差, 那些可变,那些固定,
设计时间原则:优雅降级,大屏幕还是小屏幕,支持浏览器,是否包含相同内容,不管设备大小,断电的选择;0--480,481--800,801--1400,1400+
组织项目目录结构:约定代码结构,命名规范,
Doc,src(js,css,img,index,html,login.html. )
Robots.text:搜索机器人先找这个文件,告诉搜索引擎那些可以访问,(User-agent:*Disallow:/admin/)
Favicon.ico:比特虫
Humans.txt:团队信息
.Editorconfig:设置编码格式,编辑器下载插件,
.gitignore:git的配置文件(*~和.DS_Store文件,Mac电脑自动生成的,默认隐藏的,.idea是webstorm的配置文件)webstorm提供了一个工具add template
LICENSE.txt:协议;
README.md:项目简介,使用方式,相关链接,
CHANGELOG.md:项目每个版本的更新,说明该版本号,更新内容,修复了哪些问题,
Markdown:格式化的文本文件,(标题一:#空格;标题二##空格,一共六级标题;列表:-或者*;有序列表:1. ,2.;引用一段名言:>;插入链接:【百度】(url);插入图片:!【图片不存在替换的文字】URL();粗体:**文字**;斜体:*文字*;表 格:|1|2|3|
第二行|---|:---:|---| ;代码:``` ```;)
Html编码:
Ie文档模式:<meta http-equiv=”x-ua-compatible” content=”ie=edge”
<meta name=viewport content=”width=device-width, initial-scale=1’>
ie兼容写法:<! --[if lte IE8]>
<p>您的浏览器较老,请到<a href=”http://browsehappy.com”>这里</a>更新,</p>
<![endif]-->
class命名:aaa-bb
ID命名:驼峰;
Logo:使用img标签;
Ul>li*7>span
Div.class
大纲:webstorm结构中有个HTML5 outline;
实现样式:
实现pc端样式: normalize.css清除默认样式
(保持了标签的原有样式,清除了浏览器之间的显示差异。)
引入normalize.css后,设置一些基本样式,html:字号,颜色;
::selection:字体选中的样式,ul li的默认样式;以及设置一些工具样式:
清除浮动:尾元素:。Clearfix:after{content:”.”;display:block;height:0;clear:both;visibility:hidden}或者:.clearfix:after,clearfix:before{content:””;display:table}.clearfix:after{clear:both}
谷歌浏览器字号最小值12px(中文);如果设置3rem,实际是36p
选中除了第一个li以外的li: ul li+li
Bug: li标签display:inline-block;会有空白字符间隙,解决;不换行或者,-padding,或者不写结束标签;
Width:的动态设置,width:calc(33.33333%-n)
Autoprefixer css online自动添加前缀
移动端样式实现:
媒体查询:@media only screen and (min-width:800){}
@media only screen and (min-width:481) and (max-widht:800){}
@media only screen and (max-width:480){}
媒体查询中的rem除以16;不设置viewport无效;针对每个有变化的单独设置样式;
属性选择器:img[src$=”.png”]或者a[href^=”http://”]
Nth-of-type和nth-of-child(所有子类中寻找)
::和:兼容性更好些
Webstorm右键分割代码:
响应式轮播:owlcaiousel2
响应式图片:加载与用户设备相符的图片;js或服务器端控制;
Srcret(<img srcset=”img/480.png 480w,img/800.png 800w,img/1600.png 1600w”);srcset配合sizes(sizes=”100vw(默认)”也可写成sizes=”(min-width:800px) 800px(800px或写成100vw-30em) 100vw”);
Picture:<picture><source media=”(max-width:39em)” srcset=”img/1.png 768w ”/> <source media=”orientation : landscape)横屏显示的图片” </picture>
Webp格式文件,只有谷歌和安卓支持,是JPG格式大小的2/3
使用svg格式图片,矢量图,很难表现色彩丰富的图片,
在线创建svg格式图片的网站:editor.method.ac和icomoon
polyfill兼容性处理方案:处理响应式图片:picturefill(引入就可以使用picture);对于ps做好的图片,还可以在线压缩一下:tinypng.com
Npm的使用:“jQuery”:“~1.7.1”前两个版本一致,最后一个随意,
^第一个一直,后两个可变,卸载,npm uninstall update更新
Npm install -h
Http-server:npm install http-server -g 使用:http-server src -p 8888
Webstorm:Ctrl +l +行数。跳转到行
如何处理兼容性:ie8不支持h5标签
虚拟机软件:vmware;parallels dsktop;viurtual box;
移动设备活跃排名网站:友盟指数
安卓模拟器:www.genumotion.net(翻墙)
浏览器的兼容性写法查询网站:browserhacks.com
Html5shiv:ie8以下不支持h5标签;
Respond:老浏览器支持媒体查询
Modernizr:检测浏览器对css和h5的支持情况
多个设备上的调试:browser-sync
Can i use:
如何打包发布:代码优化;
Gulp使用:安装gulp;创建gulpfile.js文件;安装插件;gulp-rev;gulp-rev-replace;gulp-useref;gulp-filter;gulp-uglify;gulp-csso
Jquery:
Jquery:1.xx支持ie6+;2.xx支持ie9+;
.Hide()
.animate()
.stop()阻止其他动画
选择器:
事件:$(“but”).bind绑定,和unbind解绑,1.7之后使用使用on绑定,off解绑
Currenttarget;
阻止事件冒泡:
Dom操作: .text(function(i,new){}) .html .val 获取到属性:.attr(比如href)
添加方法:append;prepend ; before after
删除:remove;empty
样式:. Css({ width:”10px”,height:”20px”})
jq盒模型:.height(不包括border和padding).innerheight(不包含border)outheight(true包含margin)
取值与赋值合体:.html() .val() .attr() .width()取值取得一组中的第一个,
赋值是所有
Each方法: $(‘li”).each(function(index,ele){ $(ele).html(index)})
Trim方法:去除前后空格
链式调用:.end()返回上个结果集.eq(1).css().end().eq(2).css
元素的遍历:向下:children()子代(参数可选) find()后代(参数必选)
向上:Parent()父亲 parents() parentUntil()区间
同级:siblings() 所有同级 next()下一个 nextAll() nextUntil()区间 prev()前一个
prevAll()前面所有 preUntil()
过滤:first() last() eq() filter() not()
Ajax:$.get(‘url’,{name:’aaa’,age:”14”},funvtion(data){})
.load()加载静态文件;
扩展: $.fn.mufn=function(){}
代替$:var myjq=$.noconflict()使用myjq调用
瀑布流:
Toggle(function(){ alert(1)},function(){alert(2)})第一次执行1,第二次执行2
Jquery ui
交互:draggable:.draggable()就可以拖动
Droppable:容器div允许放置其他div,监听.On(‘drop’,function(event,ui){}
Resizeable:.resizeable()可以手动拖动改变大小
Selectable:ul设置selectable(),li点击时会增加ui-selected的class名,设置样式
Sortable:多个Li,拖动可以改变位置,
控件(widgets):
Accordion:手风琴效果.Accordion()
Autocomplete:自动补全。autocomplete({ source:{‘a’,’b’,’c’}})
Datepicker: .datepicker()日期选择器
Dialog: 将$(‘div’),的内容作为对话框弹出;
Progressbar:进度条。Progressbar({ max:100});.progressbar(‘option’,”value”,数值)
Menu:菜单,.menu({position:{at:”right top ”}})
Slider:可拖动的进度条.Slider({change(通常用slide事件):function(evt ,ui){ div.text(sliderdiv.slider(‘option’,”value”))}})
Spinner:下拉列表, .spinner(“value”,”10”)
Tab:.tabs()
方法: .Addclass(‘classname’,1000,动画类型,回调函数)
百叶窗:.toggle(”blind”,{dirrection:”down”})
Color animation: .animate({color: , background: })
Jquery mobile: xcode模拟器,安卓:genymotion
<div data-role=”page”
Page:页面跳转效果:
Button: checkbox radio
Grid:栅格:
Listview:带搜索过滤功能
Navbar:
Popup:弹出窗口:
Selectmenu:
主题:
事件:tab点击;tab swiperight scrollstart ,scrollend tabhold长按
整站开发实例:
Ico图标:<link href=”” rel=”shortcut icon”/>
布局模块---整体框架-----整理公共样式#a,#b{}
Ie7以下Margin-bottom失效:浮动div,margin-bottom失效;
解决:套个容器加padding-bottom
阴影:box-shadow:10px 20px 5px #ccc;
解决ie不支持图片半透明问题的库:js/dd_belatedPNG.Js
调试分组:console.group(“第一组”)
console.log()
console.groupEnd()
输出全部信息:console.dir()
查看渲染时间:console.time('hello'); console.timeEnd('hello');
Dom优化:
innerhtml和dom操作: chrome:dom操作效率比innerHTML要好;
其他浏览器。innerHTML性能要好;
减少dom操作:
(1)节点克隆: var newli =oli.cloneNode(true)
- 访问元素集合,尽量用局部变量(局部变量用dom节点保存)
- :使用querySelectorAll()选择器(ie8一下不支持)
Dom与浏览器:
- 减少重排:尽量在appendchild前添加操作;合并dom操作:(.csstext批量设置样式) 缓存布局信息;文档碎片:createDocumentFragment()
- 减少重绘
事件委托:
跨域:
- 子域和主域之间: dociment.domain=”a.com”
- 服务器代理:缺点增大服务器压力
- Jsonp(json +padding(内填充 )):
- Location.hash: (<iframe></iframe>)
- Window.name:
- Flash
- Html5 postmessage
闭包:
- 什么是闭包:函数嵌套函数。
- Js中的垃圾回收机制:
- 好处:希望一个变量长期驻扎在内存中,模块化代码;避免全局变量污染;
- 注意:ie下内存泄露
Iframe:
获取到iframe中元素;$(‘iframe’).contentWindow.document.getelementbyid() chrome必须服务器环境下可访问;
Iframe.contentDocument; ie6和ie7不支持
Iframe中改变外部样式: window.parent.document.getelementbyid().style.color=”red”(外面第一层)
Window.top(最顶层)
Ie下的iframe的onload事件只能用事件绑定形式;iframe。Attachevent(“onload”,function(){}) ;其他浏览器可以iframe.Onload=function(){}
防止网站被钓鱼:if(window=window.top){window.top.location.href=window.location .href}
改变大小:
对象的引用:
深拷贝:function deepcopy(obj){
If(typeof obj !=object){ return obj}
Var newobj={}
For(let attr in obj){ newobj[attr]=deepcopy(obj[attr])}
}
韩雪冬轮播图:
1,2,3,4---2,3,4,1---3,4,1,2 :实现原理:var arr=div.innerhtml.split(‘,’)
Arr.push(arr[0]); arr.shift();
获取最终样式的函数: function getstyle(obj ,attr){
If( obj.currentstyle){ return obj.currentstyle}else{
Return getcomputedstyle( obj,false )[ attr] }
}
快速排序:
- 找个基准点,建立两个数组,分别存储两边数组,利用递归进行下次比较
- Function Quicksort (arr){ if(arr.length==1){return arr}
Var num =math.floor(arr.length/2)
Var newvalue =arr.splice(num,1)
Var left =[] , right=[]
for(var i=0;i<arr.length;i++){
if(arr[i]<numValue){
left.push(arr[i]);
}
else{
right.push(arr[i]);
}
}
return quickSort(left).concat([numValue],quickSort(right));
历史管理HTML5:
- History:存hsitory.pushState() 取:window.onpopstate=function(evt){ num=evt.state}
- Onhashchange :当hash改变触发,
枚举算法:
从众多候选答案中选出正确的解用for来从众多的候选答案中,用过if找出正确的解
函数声明和函数表达式(a=function(){}):函数表达式可以后面加括号执行;函数声明不可以;函数声明可以被提前解析;
命名函数表达式:var a=function aaa(){} aaa()调用会报错;ie下不会
事件委托:
好处1:提高性能; 事件源:ie:window.Event.srcelement 标准下event.target
事件的兼容性写法:var ev=ev||window.enent
Var target =ev.target||ev.srcElement
好处2:新添加的元素还会有之前的事件
进度条:
硬代码:写死的数据,某些模块加载完,就当成已加载完一部分;
跟flash配合,as3
HTML5: xhr onprogress
跟后台的配合:
无缝切换:
删除第一个元素,追加到最后;
选中文字分享:
IE下的选中文字:if(document.selection){return document.selection .createRange().text}else{
Window.getselection().tostring()}
web前端开发规范:
空白禁止使用 : 使用hspace;vspace;padding ;margin ;text-indent
<a href="javascript:;"></a>
<a href="javascript:void(0);"></a>
下载和浏览速度的控制:直接a链接:
嵌套:include(服务端)/ iframe
缓存设置:通过页面中的meta标签
- 浏览器兼容性:块级元素浮动后,有横向margin情况下,ie6显示margin比设置的大;float的元素中加入display:inline
- 设置较小高度标签(一般小于10px), 在IE6,IE7,遨游中高度超出自己设置高度 给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。或者font-size:1px
- 问题说明:I.E.下,even对象有srcElement属性,但是没有target属性; Firefox下,even对象有target属性,但是没有srcElement属性。
- 解决方法:使用 var obj=event.target||window.event.srcElement;
- firefox与I.E.的父元素(parentElement)的区别
- IE:obj.parentElement firefox:obj.parentNode解决方法: 因为firefox与I.E.都支持DOM,因此使用obj.parentNode是不错选择.
搭架服务器:
Apache:解压===》运行(bin下cmd(管理员权限) )=>httpd.exe -k install -n => httpd -t ==>
启动:httpd -k start -n “apache24” 重启restart 停止stop
60行 端口设置(可以同时监听多个端口)
网站根目录: 246行
默认文档:index.html 283行
目录浏览:Options Indexes FollowSymLinks 去掉indexes
Host文件的作用:DNS解析时,先查找 浏览器缓存,再找操作系统缓存,再找host文件里面的IP地址,如果有就不在查找DNS服务器
每个计算机有65535个端口。
http:默认端口80 HTTPS默认端口443
Url: https://zcr.com:80/school/student?id=5&name=xiaoming#phe
红色:host 主机 zcr.com主机名
#后面:锚点值
?请求参数
/ 请求路径
虚拟主机:
想在一台电脑上部署多个站点,就必须通过配制虚拟主机的方式解决
*监听绑定在当前电脑下的任意IP的80端口
由于多个虚拟主机一起工作,每个虚拟主机必须配置ServerName(访问的域名)
配制:载入配制文件:509 解除注释
Extra下的vhost.conf 下面修改配制,根目录和serverName
声明式渲染:dom状态只是数据状态的一个映射,
所有逻辑尽可能再状态层进行
当状态改变了,view会被框架自动更新到合理状态
router-link的默认事件配制:event=“mouseover” exact精确匹配模式
重定向:函数形式:redirect:(to)=>{ if(to.path==”aaa”){ return ‘/home’ } }
路由别名:alias:”/index” router.js文件中配制;当访问index路径时候也是渲染这个组件(但是activecalss不会激活)
嵌套路由的配置:二级路由的默认子路由:path为空的时候就会默认渲染这个路由设置默认子路由后;父级路由就不需要name属性,name属性给默认子路由
routeer-link:to=”/home” 或者写成::to={name:‘about’}
小技巧:二级路由不想显示父级路径;配置二级路由时path:”/home”加/
多个router-view:会默认渲染到没有名字的里;路由配置时;components:{default:aaa,sider:dider}sider会渲染到name为side的router-view里面
滚动行为:scrollBehavior(to,from,saveposition){
Saveposition点击前进后退时候记录
Else{ return {x:0,y:0} } } 也可以通过#aa形式保存位置
动态路由传参:/user:id?/:tip? 问号可以有可以没有
Created生命周期中定义的函数,在更新中不会触发,使用watch监听$route中的路由变化
过度动画:v-enter v-enter-to v-active
过渡模式:in-out out-in tranisition中mode=””
Name属性:替换v-
Meta:可以配置一些路由原信息,通过this.$route.meta. Index
左右切换效果的实现,可以通过meta中配制index属性,通过index的变大还是缩小来判断采取left还是right进行tranisition动画的设置
编程式导航:
组件级钩子函数:beforeroutEnter:中无法访问this,通过next((vm)=>{VM访问实例}) beforeRouteUpdata
beforeRouteLeave
router实例上的钩子函数:beforeEach afterEach
单个路由中:beforeEnter
判断是否需要登录权限:router.beforeEach(to,from,next){
If(to.matched.some((item)=>item.meta.login)
}
滚动动画实现:tween.js
组件的按需加载:
let Workbench = (resolve) => {
return import('@/views/backend/workbench')
打包到一个文件:
*let Doc = (resolve) => {
return require.ensure([], () => {
resolve(require('@/views/backend/doc'))
}, "abc")
}*//*
let Workbench = (resolve) => {
return require.ensure([], () => {
resolve(require('@/views/backend/workbench'))
}, "abc")
}*/