张荧集的博客 | Zhang Yingji's Blog

JS深拷贝

浅拷贝与深拷贝浅拷贝只复制指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存。但深拷贝会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象。深拷贝实现 1 一层拷贝用 Object.assign()函数 var obj1 = { a: 10, b: 20, c: 30 }; var obj2 = Object.assign({}, obj...

Posted by zhangyingji on October 23, 2018

CSS3

笔记

边框圆角border-radius 四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角一个值：四个圆角值相同阴影box-shadow，语法如下 box-shadow: 水平阴影垂直阴影 [模...

Posted by zhangyingji on October 16, 2018

HTML5

笔记

标签兼容问题 IE9+ 低版本解决方法： // 1 设置display:block，创建这个标签 document.creatElement("header"); // 2 引入html5shiv.js <!--[if lt IE 9]> <script type="text/javascript" src="js/html5shiv.js"></scr...

Posted by zhangyingji on September 28, 2018

ECMAScript 6

笔记

前言记录一些es6的实用用法，es6学习推荐阮一峰《ECMAScript 6 入门》 14 Promise Promise.all()方法用于将多个 Promise 实例，包装成一个新的 Promise 实例 Promise 新建后立即执行，然后，then方法指定的回调函数，将在当前脚本所有同步任务执行完才会执行 // jquery自带promise Promise.all([ ...

Posted by zhangyingji on September 28, 2018

了解CORS和CSRF攻击、XSS攻击

CORS CORS(Cross Origin Resourse-Sharing)定义了在必须访问跨域资源时，浏览器与服务器应该如何沟通。基本思想就是使用自定义的HTTP头让浏览器与服务器进行沟通,从而决定请求或响应是否成功。分为简单跨域请求和非简单跨域请求非简单请求预检查的机制会发送一个OPTIONS请求到服务器。如果服务器没有返回带有特殊头部的数据，简单请求GET或者POST请求...

Posted by zhangyingji on September 20, 2018

[转]CSRF攻击与防御

CSRF（Cross-Site Request Forgery，跨站点伪造请求） CSRF攻击攻击原理及过程 1.用户C打开浏览器，访问受信任网站A，输入用户名和密码请求登录网站A； 2.在用户信息通过验证后，网站A产生Cookie信息并返回给浏览器，此时用户登录网站A成功，可以正常发送请求到网站A； 3.用户未退出网站A之前，在同一浏览器中，打开一个TAB页访问网站B； 4.网站...

Posted by zhangyingji on September 20, 2018

CSS3 媒体查询(Media Query)

CSS3 媒体查询 CSS3的媒体查询可用来创建响应式布局，为特性的设备配置有选择性的加载CSS样式语法 @media mediatype and|,|not|only (media feature) { CSS-Code; } 常用媒体类型 all（所有），适用于所有设备。 handheld（手持），用于手持设备。 print（印刷），用于分页材料以及打...

Posted by zhangyingji on September 15, 2018

cookie、localStroage与sessionStroage

cookie 应用场景判断用户是否登陆过网站, 以便下次登录时能够实现自动登录（或者记住密码）保持上次登录的时间等信息保存上次登录查看的页面浏览计数缺点最大4k 会随请求发送，浪费带宽用户可以禁用cookie, 使功能受限安全性较低 localStroage API // 增加数据项 localStorage.setItem...

Posted by zhangyingji on September 10, 2018

typeof和instanceof

typeof 用于判断变量的数据类型 typeof返回的值有：object、undefined、boolean、string、number、function、symbol 无法具体识别数组和其他对象使用场景 // 判断一个变量是否存在,避免a不存在时报错 if(typeof a != "undefined") { alert("YES"); } Examples // ...

Posted by zhangyingji on September 10, 2018

前端性能优化

基础减少DOM操作 CSS放头部：减少首页加载时间 JS放底部：减少首页加载时间使用CDN 减少http请求合并图片（CSS sprites）合并CSS、JS文件 lazyLoad 压缩图片、CSS、JS文件减少reflow(回流)和repaint(重绘) reflow：例如某个子元素样式发生改变，直接影响到了其父元素以及往上追溯很多...

Posted by zhangyingji on September 8, 2018

JavaScript正则表达式

学习笔记

创建 // 使用字面量形式 var expression = / pattern / falgs // 使用构造函数 var pattern = new RegExp("pattern","flags") flgs可有一或多个： g 被应用于所有字符串 i 不区分大小写 m 到达一行末尾时还会继续查找下一行常用方法 search() 返回第一个与 regexp...

Posted by zhangyingji on September 7, 2018

JavaScript高级程序设计

笔记

1 组成 ECMAScript 文档对象模型(DOM,Document Object Model) 浏览器对象模型(BOM,Browser Object Model) 2 使用JS noscript标签：脚本不能执行时显示此部分延迟脚本 // 页面解析完后运行，只适用外部脚本，且不一定按顺序执行 defer=“defer” 异步脚本 // 需要确保脚本不存在依...

Posted by zhangyingji on August 19, 2018

Git

笔记

前言第一部分列举了常用的使用场景（以github为例）和做了一些报错整理第二部分列举了常用的命令参考来源：廖雪峰的官方网站场景首次使用git # 配置用户名和邮箱 git config --global user.name <用户名> git config --global user.email <邮箱> 已有项目转git # 把...

Posted by zhangyingji on August 9, 2018

GitHub Pages + Jekyll 快速搭建博客

Zhang Yingji’s Blog https://github.com/zhangyingji GitHub Pages 开启本功能，首先需要新建仓库,仓库名为用户名.github.io，则GitHub Pages的功能默认开启 Jekyll 首先需要安装Ruby + DevKit : https://rubyinstaller.org/downloads/ 然后安装Jek...

Posted by zhangyingji on August 8, 2018

输入URL到页面加载完发生的那些事儿

1 浏览器解析URL解析出主机名 URL示例 http://www.zhangyingji.top/index.html 对应如下：协议 + // + Web服务器名 + / + 文件路径名 2 浏览器将主机名转换成服务器ip地址浏览器先查看浏览器缓存-系统缓存-路由器缓存有没有：进行DNS解析，获取IP 3 浏览器向服务器发起TCP连接 TCP连接：三次...

Posted by zhangyingji on July 26, 2018

Zhang Yingji's Blog