- 博客(31)
- 收藏
- 关注
RSS订阅原创 ES5中function与ES6的class
ES6中的类只是语法糖，它并没有改变类实现的本质。举个例子，在ES5中定义一个类：function Person(name) { this.name = name;}Person.prototype.sayHello = function(){ return 'Hi, I am ' + this.name;}而用ES6的写法重写一下，检测类型发现Person本...
2019-08-25 17:09:27
334
1
原创 Webpack入门(四)——HTML打包
到目前为止，有关Webpack最基础的内容差不多已经讲完了，其中包括Webpack运行的基本流程、CSS的打包和图片的打包，也就是说，当你掌握这几节之后，基本上就能像以前不用Webpack时一样愉快地写代码了。当然，我们其实还有很多需要优化的地方，就比如本文所要讲到的，如何将HTML进行打包？在之前的实例中，Webpack虽然能够正常地将各种页面所需要的资源从src目录打包至dist目录，但是...
2019-08-24 15:32:02
212
原创 Webpack入门(三)——图片打包
我们知道，在Webpack中，js文件类型是能够被识别并直接打包的，而其他文件类型（如CSS和图片等）则需要通过特定的loader来进行加载打包。上一节我们讲到如何使用css-loader和style-loader两个loader来打包CSS代码，这次我将继续讲解如何使用loader将图片类型文件进行打包处理。一、上节回顾为了让大家思路更加明朗，我还是先将上一节结束时的目录结构和一些关键文件...
2019-08-24 15:23:02
337
原创 Webpack入门(二)——CSS打包
一、JS模块化我们在scripts目录下添加一个module.js文件，目录结构如下：并写入以下代码// module.jsvar text = 'Hello Webpack!';module.exports = { // CommonJS规范中模块输出语法 text: text};然后在index.js中引入module.js文件// index.jsvar ...
2019-08-24 15:01:49
226
原创 Webpack入门(一)——基本流程
1. 核心① 入口(entry)② 输出(output)③ loader④ 插件(plugins)2. 优势① 模块化开发（import，require）② 预处理（Less，Sass，ES6，TypeScript……）③ 主流框架脚手架支持（Vue，React，Angular）④ 庞大的社区（资源丰富，降低学习成本）准备工作1. 安装node.js2. 新建项目创建目录...
2019-08-24 14:29:52
134
原创 面试常见问题
声明变量的若干种方法ES5 只有两种声明变量的方法：var命令和function命令。ES6 除了添加let和const命令，除此之外还有另外两种声明变量的方法：import命令和class命令。在所有情况下，都取到顶层对象的方法// 方法一(typeof window !== 'undefined' ? window : (typeof process === 'object...
2019-08-22 15:20:25
135
原创 宏任务、微任务与EventLoop
javascript是一门单线程语言，在最新的HTML5中提出了Web-Worker，但javascript是单线程这一核心仍未改变。所以一切javascript版的"多线程"都是用单线程模拟出来的，一切javascript多线程都是纸老虎！javascript事件循环1.当执行JS代码时，生成执行栈，同步和异步任务分别进入不同的执行"场所"，同步的进入主线程执行栈，异步的进入Event T...
2019-08-20 20:40:55
144
原创 对象的深浅拷贝
值类型与引用类型值类型简单来说，值类型就是将一个变量赋值给另一个变量后，两个变量完全独立，改变其中的一个并不会影响另一个。var a = 1;var b = a; // b = 1a = 2; // a = 2 b = 1像上面的例子中，虽然后声明的变量b赋予了a的值，但是改变a的值，b却没有改变除了数值类型，与此类似的 js 中的值类型还有布尔值、字符串、null、undef...
2019-08-20 16:06:12
95
原创 浏览器同源策略以及跨域解决方法
什么是浏览器的同源策略同源是指同协议、同域名、同端口注：IE 未将端口号加入到同源策略的组成部分之中浏览器同源策略的目的是为了保证用户信息的安全，防止恶意的网站窃取数据。如果网页之间不满足同源要求，将不能:共享Cookie、LocalStorage、IndexDB获取DOMAJAX请求不能发送另外，同源策略又分为以下两种：DOM 同源策略：禁止对不同源页面 DOM 进行操作。这里主...
2019-08-20 15:47:04
552
原创 MVC ，MVP，MVVM 的区别
1. MVCMVC 的意思是， 软件可以分为三个部分。视图（View）：用户界面.控制器（controller）：业务逻辑模型（Model）： 数据保存1.View 传送指令 到 Controller2.Controller 完成业务逻辑后， 要求 Model 改变状态。3.Model 将新的数据发送到 View. 用户得到反馈 ,实际项目中 往往会采用更灵活的方法。MVC允许在...
2019-08-20 15:20:08
77
原创 网站性能优化
1. 尽量减少HTTP请求次数合并js合并css图片sprite2. 延迟加载内容图片懒加载数据懒加载功能懒加载（曝光或者点击后加载html模块、js功能模块）3. 使用离线缓存把常用的变动又少的js、css、图片存储到localstorage，第二次访问的时候直接走本地缓存。在移动端使用广泛。4. CSS、JS放置正确位置把css放在head中，保证页面看到的时候样式是对的...
2019-08-20 14:11:41
235
原创 前端常见的浏览器兼容性问题及解决方案
常见的浏览器内核可以分四种：Trident、Gecko、Blink、WebkitIE浏览器 Trident内核，也成为IE内核Chrome浏览器 Webkit内核，现在是Blink内核Firefox浏览器 Gecko内核，俗称Firefox内核Safari浏览器 Webkit内核Opera浏览器 最初是自己的Presto内核，后来加入谷歌大军，从Webkit又到了Blink内核 360...
2019-08-20 13:41:33
193
翻译 flex弹性布局详解
1.一些概念简介容器： 需要添加弹性布局的父元素；项目： 弹性布局容器中的每一个子元素，称为项目主轴： 在弹性布局中，我们会通过属性规定水平/垂直方向为主轴；交叉轴： 与主轴垂直的另一方向，称为交叉轴。2.弹性布局的使用1.给父容器添加display: flex/inline-flex;属性，即可使容器内容采用弹性布局显示，而不遵循常规文档流的显示方式；2.容器添加弹性布局后，仅仅是...
2019-08-17 16:28:43
168
原创 JS七种数据类型以及相关判断方法
js有7种数据类型：null undefined string number object boolean symbol第一种判断方式 typeof typeof null ---> "object" typeof undefined ---> "undefined" typeof true | false ---> 'boolean' typeo...
2019-08-17 15:36:15
125
原创 通用函数方法
想将对象冻结，应该使用**Object.freeze()**方法const foo = Object.freeze({});// 常规模式时，下面一行不起作用；// 严格模式时，该行会报错foo.prop = 123;除了将对象本身冻结，对象的属性也应该冻结。下面是一个将对象彻底冻结的函数：let constantize = (obj) => { Object.freez...
2019-08-17 15:12:33
191
翻译 Promise 对象
1.Promise 的含义所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。Promise对象有以下两个特点：（1）对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：pendi...
2019-08-17 15:04:29
63
原创 call()、apply()、bing()详解
call() apply() bind()都有着改变this指向的功能，先看定义apply()方法:Function.apply(obj,args)obj：这个对象将代替Function类里this对象args：这个是数组，它将作为参数传给Function(args–>arguments）call()方法:Function.call(obj,[param1[,param2[...
2019-08-16 15:13:01
494
原创 构造函数、原型、原型链详解
构造函数1.什么是构造函数在 JavaScript 中，用 new 关键字来调用的函数，称为构造函数。2.为什么要使用构造函数举个例子，我们要录入一年级一班中每一位同学的个人信息，那么我们可以创建一些对象，比如：let p1 = { name: 'zs', age: 6, gender: '男', hobby: 'basketball' };let p2 = { name: 'ls',...
2019-08-15 21:28:16
272
翻译 函数的扩展
1.函数参数的默认值ES6 之前，不能直接为函数的参数指定默认值，只能采用变通的方法。function log(x, y) { y = y || 'World'; console.log(x, y);}log('Hello') // Hello Worldlog('Hello', 'China') // Hello Chinalog('Hello', '') // Hello...
2019-08-10 13:58:15
93
翻译 数值的扩展
1.二进制和八进制表示法ES6 提供了二进制和八进制数值的新的写法，分别用前缀0b（或0B）和0o（或0O）表示。 0b111110111 === 503 // true 0o767 === 503 // true如果要将0b和0o前缀的字符串数值转为十进制，要使用Number方法：Number('0b111') // 7Number('0o10') // 8...
2019-08-02 11:42:35
105
翻译 字符串扩展
1.String.fromCodePoint()ES5 提供String.fromCharCode()方法，用于从 Unicode 码点返回对应字符，但是这个方法不能识别码点大于0xFFFF的字符。String.fromCharCode(0x20BB7)// "ஷ"上面代码中，String.fromCharCode()不能识别大于0xFFFF的码点，所以0x20BB7就发生了溢出，最高位...
2019-08-02 10:50:35
127
翻译 顶层对象属性
顶层对象，在浏览器环境指的是window对象，在 Node 指的是global对象。ES5 之中，顶层对象的属性与全局变量是等价的。window.a = 1;a // 1a = 2;window.a // 2上面代码中，顶层对象的属性赋值与全局变量的赋值，是同一件事。ES6 为了改变这一点，一方面规定，为了保持兼容性，var命令和function命令声明的全局变量，依旧是顶层对象的...
2019-08-01 11:31:39
400
原创 VUE生命周期总结
beforeCreate在创建实例之前，实例初始化之后被调用，this指向创建的实例，不能访问到data、computed、watch、methods上的方法和数据created实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。可访问data、computed、watch、methods...
2018-11-26 15:53:00
133
原创 vuex使用总结二
这篇文章主要介绍一下模块化的vuex以及取值方法，字数较少，主要是代码展示。此为目录结构：在大型项目中，如果把vuex只写在一个js文件夹或者分为mutations等模块不利于代码的后期维护，因此我们可以通过根据功能模块来对vuex进行划分，例如新建一个user.js文件来存放与用户信息有关的数据。getters是取数据的接口，因此可以新建一个getters.js文件来统一管理在use...
2018-11-12 15:10:08
167
1
转载 对象的解构赋值
对象的解构赋值对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。let { bar, foo } = { foo: "aaa", bar: "bbb" }foo // "aaa"bar // "bbb"let { baz } = { foo: &
2018-11-05 17:07:47
256
转载 vuex使用总结一
VUEX是什么？官方概念：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。个人理解：Vuex 就是前端为了方便数据的操作而建立的一个“前端数据库”。主要用于多个组件间的数据通信和状态管理；用户界面负责触发动作（Action)进而改变对应状态（State），从而反映到视图（View）上。如...
2018-10-30 19:13:09
244
翻译 数组的解构赋值
数组的解构赋值ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。// ES5声明变量let a = 1let b = 2let c = 3// ES6解构赋值let [a, b, c] = [1, 2, 3]本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。下面是一些使用嵌套数组进行解构的例子。...
2018-08-29 19:12:11
953
翻译 const命令
const命令const声明一个只读的常量。一旦声明，常量的值就不能改变。const PI = 3.1415PI // 3.1415PI = 3// TypeError: Assignment to constant variable.const声明的变量不得改变值，这意味着，const一旦声明变量，就必须立即初始化，不能留到以后赋值。const foo// Sy...
2018-08-29 14:39:36
224
翻译 块级作用域与函数声明
块级作用域与函数声明ES5 规定，函数只能在顶层作用域和函数作用域之中声明，不能在块级作用域声明。但是，浏览器没有遵守这个规定，为了兼容以前的旧代码，还是支持在块级作用域之中声明函数，因此上面两种情况实际都能运行，不会报错。 ES6 引入了块级作用域，明确允许在块级作用域之中声明函数。ES6 规定，块级作用域之中，函数声明语句的行为类似于let，在块级作用域之外不可引用。func...
2018-08-29 14:00:15
830
翻译 let命令
let命令let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。let不允许在相同作用域内，重复声明同一个变量。let适用于for循环.{ let a = 10 var b = 1}a // ReferenceError: a is not defined.b // 1var声明的变量都是全局变量，let则为局部变量...
2018-08-29 10:53:00
1394
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人