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")
}*/
832
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
