2018年03月_baibaider

原创 js的垃圾回收机制和内存分配

GC垃圾回收机制：垃圾收集器会定期（周期性）找出那些不在继续使用的变量，然后释放其内存。不再使用的变量即指那些局部变量，全局变量的生命周期直到浏览器关闭页面才结束，这时会再清除一次。局部变量只在函数执行过程中存在，这个过程中会给它们分配内存去储存它们的值，然后在函数中使用，直至函数结束，而闭包是因为在函数外还有对这个变量的引用，所以并不会被垃圾回收机制清除。标记清除法（常用）：垃圾回收器在运行的时...

2018-03-29 13:29:04 468

转载 Highcharts的学习

简介：Highcharts 是一个用纯 JavaScript 编写的一个图表库，能够很简单便捷的在 Web 网站或是 Web 应用程序添加有交互性的图表，并且免费提供给个人学习、个人网站和非商业用途使用。Highcharts 支持的图表类型有直线图、曲线图、区域图、柱状图、饼状图、散状点图、仪表图、气泡图、瀑布流图等多达 20 种图表，其中很多图表可以集成在同一个图形中形成混合图。Highsto...

2018-03-28 20:41:35 356

转载 pwa

1.pwa是什么：PWA的中文名叫做渐进式网页应用。PWA 可以将 Web 和 App 各自的优势融合在一起：渐进式、可响应、可离线、实现类似 App 的交互、即时更新、安全、可以被搜索引擎检索、可推送、可安装、可链接。需要特别说明的是，PWA 不是特指某一项技术，而是应用了多项技术的 Web App。其核心技术包括 App Manifest、Service Worker、Web Push，等等。...

2018-03-28 20:36:34 379

原创 vue与react的区别

1.创建者等react是Facebook公司创建的js框架，并创新了新的语法，JSX（html in javascript），而vue相对来说更容易学习，且使用模板系统，Reat与Vue只有框架的骨架，其他的功能如路由、状态管理等是框架分离的组件。2.关于虚拟dom改变真实的DOM状态远比改变一个JavaScript对象的花销要大得多。·Virtual DOM是一个映射真实DOM的JavaScri...

2018-03-27 19:08:26 1510

原创使用Node.js的express框架搭建一个简单项目并且添加了一个路由

express简介：Express 是一个基于 Node.js 平台的极简、灵活的 web 应用开发框架，它提供一系列强大的特性，帮助你创建各种 Web 和移动设备应用。丰富的 HTTP 快捷方法和任意排列组合的 Connect 中间件，让你创建健壮、友好的 API 变得既快速又简单。Express 不对 Node.js 已有的特性进行二次抽象，我们只是在它之上扩展了 Web 应用所需的基本功能。...

2018-03-26 23:12:12 1069

转载 Node.js的浅浅学习

Node.js简介：简单的说 Node.js 就是运行在服务端的 JavaScript。Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。Node.js组成：引入 required 模块：我们可以使用 requir...

2018-03-23 19:46:17 153

原创对浏览器缓存的一些知识

1.为什么要设置缓存：是浏览器端保存数据用于快速读取或避免重复资源请求的优化机制，有效的缓存使用可以避免重复的网络请求和浏览器快速地读取本地数据，整体上加速网页展示给用户。2.浏览器依据什么去判断缓存： http缓存是基于HTTP协议的浏览器文件级缓存机制。即针对文件的重复请求情况下，浏览器可以根据协议头判断从服务器端请求文件还是从本地读取文件，chrome控制台下的Frames...

2018-03-23 18:57:49 1308

原创 cookie，localStorage，sessionStorage的概念，使用及区别

cookie：存储在用户本地中端上的数据某些网站为了辨别用户身份、进行 session 跟踪而储存在用户本地终端上的数据（通常经过加密）。Cookie 在计算机中是个存储在浏览器目录中的文本文件，当浏览器运行时，存储在 RAM 中发挥作用（此种 Cookies 称作 Session Cookies），一旦用户从该网站或服务器退出，Cookie 可存储在用户本地的硬盘上（此种 Cookies 称...

2018-03-21 17:13:54 367

原创前端攻击之xss和csrf

被动攻击：诱发用户触发陷阱启动发送。利用用户身份攻击企业内部网络。主动攻击：攻击者直接访问web应用，就能发起对web应用的攻击，比如sql注入（对数据运行非法sql产生的泄露机密信息）和os命令注入（通过程序运行非法操作系统指令，在能调用shell函数的地方，因为web通过shell来调用操作系统指令）。xss：（Cross Site Scripting，为了区别于c...

2018-03-19 17:41:15 743

原创 git的一些我不常用的命令

git fetch：获取远程分支git pull = git fetch + git merge；pull先获取远程分支，再与本地分支合并，并更新HEAD指针。git reset 后的参数：首先git提交的过程是这样的自己的代码，未经过git之前（working directory工作区）->add之后（暂存区对应stage/index）->commit之后（有了提交历史，提交到版本库...

2018-03-19 13:19:29 174

原创 gulp的介绍及gulpfile.js的配置

gulp是自动化的构建工具，处理的常见任务：（4个）搭建web服务器；优化资源；文件保存时自动重载；适用于处理器； //gulp创建项目 mkdir projet; cd project;//进入这个项目 npm init;//自动为你创建package.json文件（储存项目的相关信息） npm install gulp --save-dev//局部安装gulp，完成这...

2018-03-18 22:50:33 9215

原创 webpack简介及webpack.config.js的配置

基本信息：// webpack在执行时，除在命令行传入参数，还可以通过指定的配置文件来执行。默认会搜索当前目录下webpack.config.js。// 这个文件是一个node.js模块，返回一个json格式的配置对象，或者通过--config选项来指定配置文件。var webpack = require('webpack');module.exports = { entry:'./en...

2018-03-18 20:43:17 1770

原创 this指向，作用域，闭包，原型链

this：关键字this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁。情况1：如果一个函数中有this，但是它没有被上一级的对象所调用，那么this指向的就是window，这里需要说明的是在js的严格版中this指向的不是window，严格模式下指向undefined。function a(){ var user = "白白"; console....

2018-03-17 19:53:29 399

原创实现继承和创建对象的方法

面向对象的语言有一个标志，即拥有类的概念，抽象实例对象的公共属性与方法，基于类可以创建任意多个实例对象，一般具有封装、继承、多态的特性！但JS中对象与纯面向对象语言中的对象是不同的，ECMA标准定义JS中对象：无序属性的集合，其属性可以包含基本值、对象或者函数。可以简单理解为JS的对象是一组无序的值，其中的属性或方法都有一个名字，根据这个名字可以访问相映射的值（值可以是基本值/对象/方法）。创建对...

2018-03-17 14:26:25 476

原创各种的区别

1. jquery $(document).ready() 与window.onload的区别1.执行时间 window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。 $(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。 2.编写个数不同 window.onload不能同时编写多个，如果...

2018-03-17 14:02:01 327

原创架构模式MVC，MVP，MVVM

MVC架构模式:通过Model&View完成数据从模型层到视图层的逻辑，通过控制器controller 定义用户界面对用户输入的响应方式，它连接模型和视图，用于控制应用程序的流程，处理用户行为和数据上的改变。 MVC允许在不改变视图的情况下改变视图对用户输入的响应方式，用户对View的操作交给了Controller处理，在Controller中响应View的事件调用Model的接口对数据进...

2018-03-17 13:40:08 227

原创 scss，less等css方案

目前，在工程化开发中，使用最多的应该就是Less、Sass和Stylus。它们有个统一的名字——css预处理器。这些预处理器解决了css的一些缺憾：· 语法不够强大，不能够嵌套书写，不利于模块化开发· 没有变量和逻辑上的复用机制，导致在css的属性值中只能使用字面量形式，以及不断重复书写重复的样式，导致难以维护。css预处理器给出了非常可行的解决方案：1. 变量：就像其他编程语...

2018-03-17 13:39:07 2010

原创 !Doctype

!Doctype作用1.<!DOCTYPE>声明叫做文档类型定义（DTD），声明的作用为了告诉浏览器该文件的类型。让浏览器解析器知道应该用哪个规范来解析文档。<!DOCTYPE>声明必须在HTML 文档的第一行，这并不是一个HTML 标签。2.声明文档的解析类型(document.compatMode)为了避免浏览器的怪异模式。严格模式和混杂模式的区别、以...

2018-03-17 13:37:42 932

原创实现一个简单的坦克移动，主要是判断键盘输入

恩恩，真的是很简单的坦克移动，没有吃豆豆发射激光什么的~css：#div1{ width:200px; height:200px; background-color:red; position:absolute; left:0; top:0;}html： //初始坦克为向上js：var oDiv = document.getElementById("div1");

2018-03-17 12:32:24 1374

原创自制一个视频播放控件

学习了html5新标签后自己尝试写了一个视频控件，虽然不是很好看，但基本功能都实现了。css：<style type="text/css"> body{ margin:0; padding:0; } #all{ position: relative; ...

2018-03-17 12:17:06 932

原创 canvas绘制一个简单钟表

css：<style> body{background: black} #c1{background: white;} span{color: white;}</style>html：<canvas id="c1" width="400" height="400"> <span>不

2018-03-17 11:55:24 1540

原创 js深复制浅复制

深浅复制主要是针对于js的引用数据类型的，因为他们不只一层，并且修改一个变量是不希望修改到另外一个变量。概念：浅复制：只复制指向某个对象的指针，新旧对象共享一块内存，修改新对象会改到原对象上。深复制：不共享内存，修改新对象不会改到原对象上。实现：浅复制实现：js 简单的赋值操作一般实现的都是浅复制。深复制实现的七种方法：1. 手动复制：var obj1 = {"name":"baibai", "a...

2018-03-15 16:16:01 191

baibaider的博客