ESLint
所有的配置规则都是写在 rules 对象里面的 key表示规则的名称 value表示表示规则的配置;extends是EsLint默认推荐的验证,你可以使用配置选择哪些校验是你所需要的,可以登录npmjs.com查看
env 可以预设好的其他环境的全局变量,如brower、node环境变量、es6环境变量、mocha环境变量等
"env": {
"browser": true
},
"extends": "eslint:recommended",
"rules": {
"indent": [
"error",
4
],
"linebreak-style": [
"error",
"windows"
],
"quotes": [
"error",
"double"
],
"semi": [
"error",
"always"
]
}
};
rules 就是自定义的规则,每条规则有3个等级:off或 0、warn或 1 和error 或 2。off表示禁用这条规则,warn表示仅给出警告,并不会导致检查不通过,而error则会导致检查不通过。
背景图不清晰
devicePixRatio,Android 和 iPhone 中,都有一个占整个屏幕大小的换算单位,Android 中叫 dip (device independent pixels,设备独立像素),iPhone 中叫 point。设备的物理像素和 dip 的比例就是 devicePixelRatio,可以通过 window.devicePixelRatio 属性获取。
如果div是100100的大小,就将图片大小设置为200200,background-size:cover
原理:首先,像素分为物理像素和逻辑像素。物理像素是不会变的,每个设备是固定的,逻辑像素是在CSS和javascript中使用的一个抽象的层。我们在设置css的样式时都是设置的逻辑像素。在pc端,一逻辑像素的占位就等于一物理像素的占位。但是在移动端,由于屏幕尺寸的限制存在缩放的问题。但是不论是放大还是缩小,我们设置的css像素不会变,但是一个css像素对应多少物理像素是由当前的缩放比例决定的。
DPR = 设备像素 / CSS像素
比如爱疯5,css像素是320568,DPR=2,所以其物理像素=6401136,大部分的手机DPR都是2,部分安卓手机是1.5,所以我们在设置背景图的时候将本来的大小各缩小一半,在手机上就能达到效果,并且大小刚好,也不会模糊。
事件冒泡机制
冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。
捕获型事件:事件从最不精确的对象(document 对象)开始触发,然后到最精确(也可以在窗口级别捕获事件,不过必须由开发人员特别指定)。
支持W3C标准的浏览器在添加事件时用 addEventListener(event,fn,useCapture) 方法,基中第3个参数 useCapture 是一个Boolean值,用来设置事件是在事件捕获时执行,还是事件冒泡时执行。而不兼容W3C的浏览器(IE)用 attachEvent() 方法,此方法没有相关设置,不过IE的事件模型默认是在事件冒泡时执行的,也就是在useCapture等于 false 的时候执行,所以把在处理事件时把 useCapture 设置为 false 是比较安全,也实现兼容浏览器的效果。
document.onload 和 document.ready 的区别。
页面加载完成有两种事件,一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件),二是onload,指示页面包含图片等文件在内的所有元素都加载完成。
dangerouslySetInnerHTML
getInitialState: function() {
return {html: '我想让它换行显示<br />,我想让它换行显示<br />'};
}
这段代码放在正常的html 页面中,它是会还行的,在React中则不会,因为react不会自动帮你解析代码,显示出来的结果还是:我想让它换行显示<br />,我想让它换行显示<br />
原因:不合时宜的使用 innerHTML 可能会导致 cross-site scripting (XSS) 攻击。 净化用户的输入来显示的时候,经常会出现错误,不合适的净化也是导致网页攻击 的原因之一。我们的设计哲学是让确保安全应该是简单的,开发者在执行“不安全”的操作的时候应该清楚地知道他们自己的意图。dangerouslySetInnerHTML 这个 prop 的命名是故意这么设计的,以此来警告,它的 prop 值( 一个对象而不是字符串 )应该被用来表明净化后的数据。这么做的意义在于,{__html:...} 背后的目的是表明它会被当成 "type/taint" 类型处理。 这种包裹对象,可以通过方法调用返回净化后的数据,随后这种标记过的数据可以(注意_html是两个)被传递给 dangerouslySetInnerHTML。这个功能主要被用来与 DOM 字符串操作类库一起使用,所以提供的 HTML 必须要格式清晰(例如:传递 XML 校验)
说说你对语义化的理解?
1.去掉或样式丢失的时候能让页面呈现清晰的结构:html本身是没有表现的,我们看到例如<h1>是粗体,字体大小2em,加粗;<strong>是加粗的,不要认为这是html的表现,这些其实html默认的css样式在起作用,所以去掉或样式丢失的时候能让页面呈现清晰的结构不是语义化的HTML结构的优点,但是浏览器都有有默认样式,默认样式的目的也是为了更好的表达html的语义,可以说浏览器的默认样式和语义化的HTML结构是不可分割的。
2.屏幕阅读器(如果访客有视障)会完全根据你的标记来“读”你的网页。
3.PDA、手机等设备可能无法像普通电脑的浏览器一样来渲染网页(通常是因为这些设备对CSS的支持较弱)。
4.有利于SEO:和搜索引擎建立良好沟通,有助于爬虫抓取更多的有效信息:爬虫依赖于标签来确定上下文和各个关键字的权重。
5.便于团队开发和维护,语义化更具可读性,是下一步吧网页的重要动向,遵循W3C标准的团队都遵循这个标准,可以减少差异化。
网友评论