09 2017 档案

css flex布局
摘要：传送门： Flex 布局教程：语法篇 FLex 布局在线测试 CSS3弹性伸缩布局简介 CSS box-flex属性，然后弹性盒子模型简介 阅读全文
posted @ 2017-09-28 21:04 HelloHello233 阅读(207) 评论(0) 推荐(0)
angularJS transclude
摘要：参考来源：彻底弄懂AngularJS中的transclusion 对以上文章进行摘录、总结和测试记录 在使用指令的时候，如果想要使用指令中的子元素，那么你就要用transclusion。 指令的DDO中，transclude有三个值： transclude: false |true | 'eleme 阅读全文
posted @ 2017-09-27 20:26 HelloHello233 阅读(311) 评论(0) 推荐(0)
JS模块之AMD, CMD, CommonJS、UMD和ES6模块
摘要：CommonJS 传送门 同步加载,适合服务器开发，node实现了commonJS。module.exports和require 判断commonJS环境的方式是（参考jquery源码）： 一旦出现某个模块被"循环加载"，就只输出已经执行的部分，还未执行的部分不会输出。 // a.js export 阅读全文
posted @ 2017-09-24 22:57 HelloHello233 阅读(571) 评论(0) 推荐(0)
js event loop事件循环
摘要：浏览器环境 以下两段代码是等价的。req对事件的回调设置，实际上就是当前主线程任务队列的任务。 setTimeout(fn,0)：往消息队列尾部添加一条消息，指定主线程有空的时候（所有同步任务执行完），要尽快执行fn函数 对于事件循环应该这么理解： 主线程中有一个（同步）任务队列，另一个地方又有一个 阅读全文
posted @ 2017-09-23 16:32 HelloHello233 阅读(151) 评论(0) 推荐(0)
bootstrap3之栅格系统
摘要：原理 栅格系统的核心就是媒体查询。指定的尺寸都是百分比，也就是流式布局。 查看bootstrap中的源码可以发现，对样式的定义次序全都是依次 xs、sm、md、lg，如： // grid-framework.less： // Common styles for all sizes of grid c 阅读全文
posted @ 2017-09-21 16:13 HelloHello233 阅读(709) 评论(0) 推荐(0)
viewport理解
摘要：参考：移动前端开发之viewport的深入理解 对以上的文章中的知识点，感觉换另一个角度更好理解一点记录如下： viewport（视觉窗口）是仅存在于移动web中的一个虚拟容器，用于承载页面，大部分的viewport宽度都是980px，而且这个容器具备 伸缩性 ，可以通过viewport来设置是否允 阅读全文
posted @ 2017-09-20 18:24 HelloHello233 阅读(264) 评论(0) 推荐(0)
css hack
摘要：js中比较多是使用UA来判断当前浏览器环境： 对于不同的ie环境测试方案，IE11自带的开发者工具： 好奇为什么就是没有6呢？ 以下代码来自360导航，不同环境下，打上不同的类 总结出几个重要的： \9 ：所有IE浏览器都支持._和- ：仅IE6支持* ：IE6、E7支持\0\9 ：IE8、IE9支 阅读全文
posted @ 2017-09-17 14:46 HelloHello233 阅读(238) 评论(0) 推荐(0)
reflow和repaint
摘要：浏览器根据html节点生成一颗dom树，接着根据这个dom树和css生成另外一棵树：render tree。最后浏览器就根据render tree来渲染界面。 dom树和render树的区别： 前者包含了隐藏的元素（display=none），后者不包含。render树仅仅包含了需要被渲染的dom节 阅读全文
posted @ 2017-09-17 11:21 HelloHello233 阅读(190) 评论(0) 推荐(0)
关于web页面优化
摘要：简单汇总了一下web的优化方案（主要的前端优化策略） 减少http请求次数 文件合并（js、css、图片）；ps：多个图片合并之后，总体积会变小 内联图片，即data:URL scheme，但容易导致html页面混乱 可缓存的ajax 尽量使用get而不是post，get仅发送一次TCP数据包，而p 阅读全文
posted @ 2017-09-16 21:33 HelloHello233 阅读(404) 评论(0) 推荐(0)
关于页面加载
摘要：两个概念 DOM就绪：指浏览器已经接收到整个HTML并且DOM解析完成，这时就可以开始操作dom了，如绑定事件。 渲染结束：浏览器已经接收到HTML中引用的所有样式文件、图片文件、以及Iframe等资源并渲染结束。 DOMContentLoaded 执行次序 JQuery中这两个方法就是对DOMCo 阅读全文
posted @ 2017-09-16 17:27 HelloHello233 阅读(470) 评论(0) 推荐(0)
alt、title和label
摘要：alt是html标签的属性，而title既是html标签，又是html属性。 title标签这个不用多说，网页的标题就是写在<title></title>这对标签之内的。 title作为属性时，用来为元素提供额外说明信息。例如，给超链接标签a添加了title属性，把鼠标移动到该链接上面是，就会显示t 阅读全文
posted @ 2017-09-16 16:45 HelloHello233 阅读(593) 评论(0) 推荐(0)
css3-transform
摘要：transform 所做的一系列变换，都仅仅只是这个元素的样子，元素自身所在文档流中所占用的位置不会发生变化，所以是不会影响到其他元素的位置的 2D translate：平移，这点类似于 relative+top+left 的效果 skew（x，y）：翻转，180deg 和 0deg 的效果是一致的 阅读全文
posted @ 2017-09-16 11:57 HelloHello233 阅读(165) 评论(0) 推荐(0)
word break和word wrap
摘要：默认情况下，如果同一行中某个单词太长了，它就会被默认移动到下一行去： word break（normal | break-all | keep-all）：表示断词的方式 word wrap（normal | break-word）：表示是否要断词 word wrap break-word 【要断词】 阅读全文
posted @ 2017-09-16 11:21 HelloHello233 阅读(171) 评论(0) 推荐(0)
聊聊svg
摘要：来源：SVG的用法 补充 依赖分辨率 不支持事件处理器 弱的文本渲染能力 能够以 .png 或 .jpg 格式保存结果图像 最适合图像密集型的游戏，其中的许多对象会被频繁重绘 不依赖分辨率 支持事件处理器 最适合带有大型渲染区域的应用程序（比如谷歌地图） 复杂度高会减慢渲染速度（任何过度使用 DOM 阅读全文
posted @ 2017-09-15 21:47 HelloHello233 阅读(213) 评论(0) 推荐(0)
JS严格模式
摘要：来源：Javascript 严格模式详解 精简总结一下阮大神的文章，严格模式下： "use strict" 必须是当前作用域（全局作用域或者函数作用域）中第一句实际运行的语句，否则当前作用域内不会被严格模式所约束 当需要多个js合并成一个时，要使用严格模式，最好是使用 IIFE 变量必须声明后再使用 阅读全文
posted @ 2017-09-15 21:25 HelloHello233 阅读(167) 评论(0) 推荐(0)
JS提前声明和定义方式
摘要：来源：JS的函数定义方式以及对声明的提前 以下代码，声明语句会被提前到当前作用域（全局作用域和函数作用域）的顶部。但赋值语句不会提前，依然留在原地 而函数的声明也会提前到作用域的顶部 对以上的总结就是：只要是声明（变量声明或函数声明）就会被提前，但赋值语句不会被提前 以下代码中的y所在的环境，是全局 阅读全文
posted @ 2017-09-15 21:24 HelloHello233 阅读(281) 评论(0) 推荐(0)
js跨域
摘要：来源：JavaScript跨域总结与解决办法 https://mp.weixin.qq.com/s/A0Oi-fUrmboRPPeNEjG3aw window.name window.name 的美妙之处：name值在不同的页面（甚至不同域名）加载后依旧存在，并且可以支持非常长的 name 值（2M 阅读全文
posted @ 2017-09-12 21:00 HelloHello233 阅读(363) 评论(0) 推荐(0)