zhw13260525048-CSDN博客

原创寄生组合继承

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <script&

2018-12-30 21:01:07 153 1

原创 H5 新API总结

1 网络状态我们可以通过window.navigator.onLine来检测，用户当前的网络状况，返回一个布尔值，但是不同浏览器会存在差异所以HTML5 给我们提供了2个事件 online 和 offlineonline用户网络连接时被调用offline用户网络断开时被调用他们监听的对象都是window2 全屏HTML5规范允许用户自定义网页上任一元素全屏显示。1、Node....

2018-11-13 16:41:31 448

原创案例：H5API实现文件读取，在当前页面显示缩略图

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <input type

2018-11-13 16:24:48 1224

原创 JS offset、scroll、client三系列

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>title</title> <script src="common.js"></scri

2018-11-11 18:16:47 205

原创兼容代码：封装getScroll函数以及固定导航栏案例

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0

2018-11-11 18:00:41 221

原创案例：原生JS实现360开机动画

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> .box { width: 322px; positio

2018-11-11 17:07:19 1096

原创案例：原生JS实现完整的轮播图

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { padd

2018-11-11 17:05:13 250

原创案例：左右焦点轮播图（淘宝焦点图）

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> body, ul, ol, li, img { margin: 0;

2018-11-11 17:03:33 995

原创案例：模拟百度搜索

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #box { width: 450px; ma

2018-11-11 14:35:52 529

原创兼容：绑定事件与解绑事件的兼容代码

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>title</title></head><body><input type=

2018-11-09 18:41:26 134

原创案例：动态创建表格

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>title</title> <style> div{ width: 200px; heig

2018-11-08 23:10:55 156

原创案例：全选和全不选

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { padding: 0; margin: 0;

2018-11-07 21:29:39 458

原创案例：Tab栏切换

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0;

2018-11-07 19:39:43 302

原创兼容案例：封装innerText和textContent

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>$永远的24k纯帅$</title> <style> div { width: 200px;

2018-11-07 18:51:22 270

原创案例：模拟搜索框

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>$永远的24k纯帅$</title> <style> input { color: gray;

2018-11-07 17:19:54 224

原创案例：显示和隐藏二维码

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> .nodeSmall { width: 50px; he

2018-11-07 16:18:51 1088 1

原创 Webpack学习笔记

Vue.js - Day5 - Webpack在网页中会引用哪些常见的静态资源？ JS .js .jsx .coffee .ts（TypeScript 类 C# 语言） CSS .css .less .sass .scss Images .jpg .png .gif .bmp .svg 字体文件（Fonts） .svg .ttf ....

2018-10-21 17:35:19 133

原创 Vue的生命周期

2018-10-18 22:43:54 118

原创纯JS解析URL地址

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <script&amp

2018-10-15 19:56:41 518

原创页面性能

提升页面性能的方法有哪些？1、资源压缩合并，减少HTTP请求（精灵图、图标字体）2、非核心代码异步加载--------->异步加载的方式----------->异步加载的区别3、利用浏览器缓存（最重要的）---------->缓存的分类----------------->缓存的原理4、使用CDN（内容分发网络）5、预解析DNS<meta htt...

2018-10-13 23:32:49 182

原创 JS运行机制

JS是单线程的，setTimeout和setInterval是异步任务，要挂起，不先执行，等同步任务完成之后，再去处理异步任务 console.log(1); setTimeout(function () { console.log(2); }, 0); console.log(3); console.log(4);输出...

2018-10-13 22:46:52 107

原创浏览器渲染机制

什么是DOCTYPE 及作用？DTD（document type definition，文档类型定义）是一系列的语法规则，用来定义XML或（X）HTML的文件类型。浏览器会使用它来判断文档类型，决定使用何种协议来解析，以及切换浏览器模式（通俗的说，就是告诉浏览器我是什么文档类型，浏览器根据这个来判断我用什么引擎来解析它来渲染它）DOCTYPE是用来声明文档类型和DTD规范的，一个主要的用途...

2018-10-13 22:22:08 102

原创遍历DOM树

//获取页面中的根节点--根标签 var root=document.documentElement;//html //函数遍历DOM树 //根据根节点,调用fn的函数,显示的是根节点的名字 function forDOM(root1) { //调用f1,显示的是节点的名字 // f1(root1); //获取根节点中所有的子节点 var child...

2018-10-13 19:14:19 611

原创浅拷贝与深拷贝

//浅拷贝:拷贝就是复制,就相当于把一个对象中的所有的内容,复制一份给另一个对象,直接复制,或者说,就是把一个对象的地址给了另一个对象,他们指向相同,两个对象之间有共同的属性或者方法,都可以使用 var obj1={ age:10, sex:"男", car:["奔驰","宝马","特斯拉","奥拓"] }; //另一...

2018-10-13 18:19:51 80

原创前端面试：事件代理

<ul id="ul"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> ...

2018-10-13 17:07:44 135

原创闭包

//闭包 /* * 闭包的概念:函数A中,有一个函数B,函数B中可以访问函数A中定义的变量或者是数据,此时形成了闭包(这句话暂时不严谨) * 闭包的模式:函数模式的闭包,对象模式的闭包 * 闭包的作用:缓存数据,延长作用域链 * 闭包的优点和缺点:缓存数据* * 闭包的应用 * * * */ //函数模式的闭包...

2018-10-13 17:06:02 111

原创 JS函数中的几个成员

//函数中有一个name属性----->函数的名字,name属性是只读的,不能修改 //函数中有一个arguments属性--->实参的个数 //函数中有一个length属性---->函数定义的时候形参的个数 //函数中有一个caller属性---->调用(f1函数在f2函数中调用的,所以,此时调用者就是f2) function f1(x,...

2018-10-13 15:19:26 304

原创 apply和call和bind方法

apply和call都可以让函数或方法调用，传入参数和自己调用的写法不一样，但是效果是一样的 function f1(x,y) { console.log("结果是:"+(x+y)+this); return "10000"; } f1(10,20);//函数的调用 f1.apply(null,[100,200]); f1.call(null,100,...

2018-10-13 15:16:11 86

原创原型个人小结

构造函数里有原型 prototype实例对象里有原型 __proto__通过构造函数实例化的对象如 function Person(){}; var p=new Person();则 Person.prototype==p.__proto__为trueprototype和__proto__中都有构造器constractor，且constractor都指向构造函数Personp...

2018-10-12 20:39:47 129

原创 Node.js中exports 和 module.exports 的区别

- exports 和 module.exports 的区别 + 每个模块中都有一个 module 对象 + module 对象中有一个 exports 对象 + 我们可以把需要导出的成员都挂载到 module.exports 接口对象中 + 也就是：`moudle.exports.xxx = xxx` 的方式 + 但是每次都 `moudle.exports.xxx = xx...

2018-10-05 09:45:23 363

原创服务端渲染和客户端渲染的区别

+ 客户端渲染不利于 SEO 搜索引擎优化+ 服务端渲染是可以被爬虫抓取到的，客户端异步渲染是很难被爬虫抓取到的+ 所以你会发现真正的网站既不是纯异步也不是纯服务端渲染出来的+ 而是两者结合来做的+ 例如京东的商品列表就采用的是服务端渲染，目的了为了 SEO 搜索引擎优化+ 而它的商品评论列表为了用户体验，而且也不需要 SEO 优化，所以采用是客户端渲染...

2018-10-04 14:21:06 1087

原创 TCP协议三次握手

发送端首先发送一个带SYN标志的数据包给对方。接收端收到后，回传一个带有SYN/ACK标志的数据包以示传达确认信息。最后发送端再回传一个带ACK标志的数据包，代表握手结束...

2018-09-30 12:46:55 107

原创 Node.js概述

Node.js是什么？1、是JavaScript运行时2、既不是语言，也不是框架，它是一个平台Node.js中的JavaScript1、没有BOM、DOM2、ECMAScript基本的JavaScript语言部分3、在Node.js中为 JavaScript提供了一些服务器级别的API（文件操作能力、HTTP服务的能力） require 是一个方法它的作用就是用...

2018-09-30 11:35:42 191 1

原创 Vue.js概述

Vue-cli 脚手架：搭建基本代码框架vue.router: 官方插件管理路由vue-resource ： AJAX通信Webpack ：构建工具es6+eslinteslint：es6代码风格检查工具工程化组件化模块化为什么要用Vue框架了1、旧浏览器逐渐淘汰，移动端需求增加2、前端交互越来越多，功能越来越复杂3、架构从传统的后台...

2018-09-28 21:32:39 222

原创 mvc和mvvm模式

1，MVC （Model-View-Controller）M - Model ：数据保存V - View : 用户界面C - Controller ：业务逻辑MVC ，用户操作> View (负责接受用户的输入操作)>Controller（业务逻辑处理）>Model（数据持久化）>View（将结果通过View反馈给用户）MVC是最经典的开发模式之一，最...

2018-09-28 16:41:53 180

原创排序、堆栈、队列、链表、递归、波兰式和逆波兰式

冒泡排序选择排序：https://segmentfault.com/a/1190000009366805插入排序希尔排序：https://segmentfault.com/a/1190000009461832归并排序快速排序：https://segmentfault.com/a/1190000009426421堆排序计数排序... 堆栈、队列、链表：h...

2018-09-26 20:58:37 388

原创 CSRF和XSS

CSRF：基本概念和缩写：CSRF通常称为跨站请求伪造，Cross-site request forgery攻击原理：要完成一次CSRF攻击，受害者必须依次完成两个步骤：　　1.登录受信任网站A，并在本地生成Cookie。　　2.在不登出A的情况下，访问危险网站B。防御措施： 1、Token验证 2、Referer验证（Referer指页面来源）...

2018-09-26 20:36:59 393

原创前端通信类知识

1、什么是同源策略及限制同源策略限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的关键的安全机制。 Cookie、LocalStorage和IndexDB无法读取 DOM无法获得 AJAX无法发送2、前后端如何通讯 AJAX:同源策略 WebSocket：不受同源限制 CORS：都...

2018-09-26 20:04:31 235

原创 HTTP协议类

1、HTTP协议的主要特点简单快速、灵活、无连接、无状态2、HTTP报文的组成部分请求报文：请求行、请求头、空行、请求体响应报文：状态行、响应头、空行、响应体3、HTTP方法 GET ---------------------->获取资源 POST --------------------->传输资源 ...

2018-09-26 14:59:41 177

原创 DOM事件类

1、DOM事件的级别DOM0：element.onclick=function(){}DOM1设定的时候没有设计跟事件相关的事件DOM2：element.addEventListener('click',fuction(){},false)DOM3：element.addEventListener('keyup',fuction(){},false) （事件类型增加了）2、D...

2018-09-26 13:27:34 157