- 博客(16)
- 收藏
- 关注
RSS订阅原创 关于babel
lable是什么？babel是一个javascript转译器,负责把ES6转换为ES5为什么需要lable?浏览器不能编译新版本的javascript语法lable相应版本babel-preset-es2015 将es2015版本的js转译为es5 babel-preset-es2016 将es2016版本的js转译为es5 babel-preset-es2017 将es20...
2018-05-11 10:30:55
262
原创 JS设计模式
什么是模式？已验证的解决方案容易被复用富有表达力什么是设计模式？ 设计模式是解决软件设计常见问题的可复用方案什么是反模式？ 反模式是一种针对某个特定问题的不良解决方案，该方案会导致槽糕的情况发生定义大量污染全局的变量修改Object类的原型使用document，write创建页面硬编码，写死功能等单例模式？确保一个类只能有一个实例...
2018-04-12 16:04:23
819
原创 NPM 使用介绍
全局安装与本地安装npm 的包安装分为本地安装（local）、全局安装（global）两种，从敲的命令行来看，差别只是有没有-g而已，比如npm install express # 本地安装 npm install express -g # 全局安装本地安装1. 将安装包放在 ./node_modules 下（运行 npm 命令时所在的目录），如果没有 no...
2018-04-12 16:03:30
346
原创 CommonJS、Requier、SeaJs（模块加载器）
服务器端 CommonJS(同步加载)1.文件即模块 2.使用module.exports(exports) 暴露对外的接口 3.require同步加载依赖模块function area(r){ return Math.PI*r*r;}module.exports={ area:area}浏览器端RequireJS(异步加载)1.define定义模块 ...
2018-04-11 01:15:22
371
原创 web模块化
为什么需要模块化 ？业务发展>代码量变大,难以维护什么是模块化？拆分代码成多个文件>将特定功能的代码放到同一个文件模块化优点:1.模块化有自己的命名空间，避免变量冲突； 2.使用对象创建命名空间能减少全局变量污染以及提高代码的可读性；var module= (function( var b = 'hello'; function sayhello...
2018-04-11 00:39:06
805
原创 web性能优化手段
1、减少请求文件数；2、减少资源体积；3、提高网络传输；减少请求文件数：小图片合并雪碧图或者使用iconfont；JS、CSS文件合并；...减少资源体积：精简代码；压缩css、js、图片；开启Gzip（压缩技术方案）；提高网络传输：使用浏览器缓存；使用CDN（内容分发网络）；...
2018-04-10 17:26:28
144
原创 css单位
绝对单位：px、in、pt、mm、cm相对单位：%、em、vm、vh、rem个人设计中常用的字体单位：px：像素，一个像素对应于计算机屏幕上的一个点（分辨率越高对应的点越多）；em: 相对于浏览器默认字体大小的单位，如果浏览器默认字体大小是16px，那么1em = 1x16px=16px；如果浏览器默认字体大小是8px，那么1em=1x8px=8px;很多前辈在多年的实践中得出一个经验，他们建议在...
2018-04-09 17:08:21
218
原创 CSS伪类和伪元素；
伪类选择器：你要获取的选择器对象在当前页面找不到，它是抽象的；实例：a:hover {color:#FF00FF;} /* 鼠标划过链接 *伪元素选择器：你要获取的选择器存在于当前页面；实例：p::first-line { color:#ff0000; font-variant:small-caps;}找到p元素的第一行；...
2018-04-09 16:46:50
115
原创 HTML转义字符（字符实体）
在 HTML 中，某些字符是预留的不能直接使用，如小于号（<）和大于号（>），直接使用HTML文档解析会误认为它们是标签。所以如果我们希望正确地显示预留字符，那必须在 HTML 源代码中使用字符实体（character entities），如可以使用&lt;表示小于号（<），&gt;表示大于号（>）。常用字符实体字符实体可以有两种方法表示：一种为实体名称，一...
2018-04-09 16:27:24
1096
原创 HTML文档基础结构
HTML元素：HTML标签成对出现的地方，而且上面包含一定的信息；DOCTYPE元素 ：HTML顶级元素/根元素（只能包含head元素或者body元素）； --文档声明，告诉浏览器使用哪个HTML版本进行解析head元素：HTML文档的属性信息（也叫元数据），head里面的元素标签统称为元标签；--类比work文档的文件名、创建时间、修改时间...body元素：存放页面的内容；其它元素要么归属于h...
2018-04-09 16:19:21
154
原创 HTML树型结构
HTML元素的嵌套展示最终形成一种HTML树形结构；结构分两种：竖型结构（父元素、子元素）、横向结构（兄弟元素）；父元素统称祖先元素，子元素统称后代元素；结构之间的关系如下：...
2018-04-09 15:46:59
1847
原创 块级元素和行内元素
块级元素：1、默认占据整行的宽度；2、默认块级元素前后自动换行；行内元素：1、同行显示（不换行）；2、宽度由内容决定；3、行内元素上下外边距无效；由display属性决定：block --定义为块级元素；inline --定义为行内元素；inline-block --同时具有两种特征；...
2018-04-09 15:29:58
123
原创 什么是 Viewport?
Viewport：就是你设备屏幕的可视宽度和高度；手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中（因为当时你设计网页的时候是按浏览器的宽度和高度来设计，现在突然放到你手机屏幕浏览而你手机屏幕尺寸太小了产生了冲突不协调），通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看...
2018-04-09 14:45:54
360
原创 CSS媒体查询
媒体：设备（手机、平板、电脑）；媒体解析：获取不通屏幕尺寸（宽度和高度）；根据媒体设计样式：当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面；CSS 语法：@media mediatype and|not|only (media feature) { CSS-Code;}你也可以针对不同的媒体使用不同 stylesheets :<link rel="stylesh...
2018-04-09 14:20:06
472
原创 CSS网格布局；
网格分析：N行N列组成网格（拐来拐去又变为表格）；在CSS布局中我们只需要实现一行N列效果，然后组成多行多列：必须调整全局盒模型：* { box-sizing: border-box;}响应式网格视图通常是 每行12 列，行宽度为100%，行、列在浏览器窗口大小调整时会自动伸缩；由此我们可以计算出每列的百分比: 100% / 12 列 = 8.33%；在每列中指定 class， clas...
2018-04-09 13:33:27
524
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人