3 yin_991

尚未进行身份认证

我要认证

暂无相关简介

等级
TA的排名 7w+

使用webpack实现css的模块化

css实现模块化的目的主要是为了使得所引入的样式文件只对当前文件内容有效,不会影响其他文件的样式。webpack.config.js文件里面的css-loader加一个配置modules: true。const path = require('path');module.exports = { mode: 'development', entry: { m...

2019-12-02 23:49:08

使用webpack打包样式资源

使用webpack打包样式资源需要用到比较多的loader,而且这些loader的顺序不能乱,遵循从右到左、从下到上的解析规则。经过上一篇的文章,已经学习了使用webpack来打包图片文件,这一节就到了写如何使用webpack打包样式文件的时候了。虽然使用的loader比较多,但是只要按照顺序把loader写好,然后正确配置loader,其实样式文件的解析并不难。本文首先从最简单的cs...

2019-11-30 23:04:28

使用webpack的file-loader和url-loader打包图片资源

前面写了webpack打包js文件的方法,但打包图片资源又会用到什么的方法呢?本文就这个问题进行探讨学习。本文的目的是使用webpack打包图片资源,并能够使打包后的图片显示在浏览器上。初始化目录首先,备好一张图片素材,我使用的是一张之前在网上下载过的手机图片,格式为jpg,当然,使用其他的格式如png、gif也是可以的,到时在配置文件里面更改响应的配置即可。开始的时候目...

2019-11-30 17:59:14

使用webpack配置文件打包输入输出打包文件及自定义打包指令

本文开始讲解如何通过webpack配置文件打包,首先,来看一下项目的目录结构。上一篇文章讲到最基础的打包方式,没有使用webpack的配置文件来打包。使用webpack配置文件就得先在目录中新建一个webpack.config.js文件,这个就是webpack的配置文件。1、新建webpack.config.js文件touch webpack.config.js2、目录...

2019-11-28 23:44:18

使用最基础的webpack打包方法来打包js文件

上一篇文章讲了如何安装webpack,那么安装好了webpack就到了实践的时候了。首先,最基础的就是懂得如何打包js文件,webpack如果不使用loader的话,其实它本身就不会解析任何其他文件,只会解析js文件。所以本文先讲解如何打包js文件,从最简单的开始。1、新建一个文件夹存放项目mkdir study_22、初始化项目npm init3、安装webpackn...

2019-11-27 23:17:05

如何安装webpack4

本文主要讲解如何安装webpack4。所使用系统是mac,直接使用系统自带的终端输入指令安装,window系统的读者安装方法大同小异,可以先安装git再在git bash里面输入指令安装。1、先安装node npm 查看版本node --versionnpm --version查看版本,如果显示版本,那么就说明你电脑安装好了node,安装了node那么npm也会有,因为no...

2019-11-25 23:54:41

使用nvm来管理安装不同版本的node.js

在开发过程中,有时候不同的项目用了不同的node.js版本,这时,如果我们需要运行不同的node.js环境,那就得安装不同的版本的node.js,卸载和安装会花费点时间,也显得麻烦,那如果想随意切换不同版本node.js来使用的话,可以通过nvm版本管理工具来控制,以下以mac系统为例,讲解如何通过使用nvm来达到切换node.js版本使用的目的。(ps:window和mac系统不同的是,win...

2019-11-24 21:44:51

数组重排序方法——join、reverse、sort

1、join// 把数组中的所有元素放进一个字符串 join// 返回值,字符串// 默认是以','分割,方法参数里面也可以指定分割符arr=['border','left','color'];var str=arr.join('-');console.log(arr);console.log(str); 2、reverse// reverse 用于颠倒数组中的...

2019-02-05 12:51:51

js数组篇——删除添加方法

1、push// 把数值按顺序添加到数组的后面 push// 返回值是数组长度let arr1=[1,2,3,4];let len=arr1.push(88);console.log(arr1);console.log(len);  2、unshift// 把数值按顺序添加到数组的前面 unshift// 返回值是数组长度let arr2=['re...

2019-02-05 12:14:56

渲染机制类

1、什么是DOCTYPE及作用?DOCTYPE的作用是用来声明文档的类型和DTD的规范,主要用途是文件的合法性验证。DTD是文档类型定义,是用来定义XML、XHTML、HTML文档的类型,浏览器用它来判断文档的类型,并决定使用何种协议来解析文档以及切换浏览器模式。DOCTYPE不存在浏览器会启用兼容模式(混杂模式)。对于HTML5来说,DOCTYPE的声明只需要写一行简短的代码就能做到...

2019-01-31 22:14:11

通信相关

1、什么是同源策略及限制同源策略限制指的是限制从一个源加载的文档与另一个源加载的文档进行进行交互,它是一种隔离潜在的恶意文件的安全机制。所谓同源,指的是同协议,同端口,同域名,三者缺一不可,那所谓非同源,指的是三者中有一个不同,就算非同源,也是所谓的跨域。同源策略会有如下限制:cookie、localstorage、indexDB无法读取,dom无法操作、ajax请求无法发送2、前...

2019-01-30 20:16:49

创建Ajax的流程

var xmlhttp=null;if(window.XMLHttpRequest){  xmlhttp = new XMLHttpRequest();} else if(window.ActiveXObject){   xmlhttp=new ActiveXObject();}xmlhttp.open('get','file',true);xmlhttp.send()...

2019-01-29 19:58:59

回顾——原型对象、原型链、构造函数、实例对象之间的关系

说到原型链、原型对象,首先需要讲到构造函数。创建实例可以通过构造函数来创建。但创建实例不止通过构造函数这一种方法,还有字面量创建对象、Object.create()方法。创建实例对象的几种主要的方法:1、字面量var obj={name: "Jakey"};2、构造函数var people=function(){  var name="Tom";}var obj2=...

2019-01-29 14:20:13

javascript DOM事件

1、DOM事件的级别DOM 0级事件element.onclick=function(){}DOM 2级事件element.addEventListener('click',function(){},false)DOM 3级事件element.addEventListener('keyup',function(){},false);2、DOM的事件模型事件捕获   ...

2019-01-28 23:23:18

javascript——DOM篇

什么是DOM?DOM的全称是=>Document Object Model,翻译过来指的是文档对象模型。DOM是w3c(万维网联盟)的标准,它是“中立于平台和语言的接口,且允许程序和脚本动态地更新文档的内容、结构和样式”。DOM包含:(1)核心DOM:针对任何结构化文档的标准模型(2)XML DOM:针对XML的标准模型(3)HTML DOM:针对HTML的标准模型本...

2019-01-28 20:14:54

html&css扫盲篇

XHTML规则1、使用恰当的文档声明和命名空间2、使用meta标签声明内容类型3、属性值使用引号4、为属性赋值5、元素、属性小写6、关闭标签7、空标签使用空格斜杆结束8、注释内容不要使用双下划线9、确保小于号及和号是<、&css选择器id选择器不能以数字开头,因为mozilia/firefox不支持css3选择器分类基本选择器元...

2019-01-28 20:09:34

边距重叠及解决方法

边距重叠有三种情况边距重叠指的是盒子垂直方向的边距重叠问题1、父子元素之间的边距重叠2、兄弟元素之间的边距重叠3、空元素设置了外边距之后的高度解决方法:创建BFC(块级格式化上下文)BFC的原理(渲染规则)由于BFC这个元素的垂直方向会发生边距重叠,创建了BFC的区域不会与浮动元素的边距重叠,BFC在页面上是一个独立的容器,外面的元素不会影响它里面的元素,里面的元素也不...

2019-01-28 19:58:35

js获取盒子模型的高宽

dom.style.width/height 只能获取到内联样式的属性值,外部样式、内部样式的属性值是获取不到的。dom.currentStyle.width/height        只有ie支持window.getComputedStyle(dom).width/height   通用性好dom.getBoundingClientRect().width/height      ...

2019-01-28 18:59:47

浮动方法实现三列布局的原理

 方法1 浮动<style> .float>div{ height: 100px; } .float .left{ width: 300px; float: left; background: red; } .float .right{ width: 3...

2019-01-28 11:44:57

es6基础入门篇

1、let 允许重复赋值,但不允许重复声明变量2、const 声明常量,不允许重复声明,也不允许重复赋值3、字符串(1)String.fromCharCode(编码),能让编码转成字符示例,统计浏览器能支持多少个中文字符let name = '';for(let i=0x4e00;i<0x9fa5;i++) { name += String.fromCharC...

2018-09-05 12:42:08

查看更多

勋章 我的勋章
  • 持之以恒
    持之以恒
    授予每个自然月内发布4篇或4篇以上原创或翻译IT博文的用户。不积跬步无以至千里,不积小流无以成江海,程序人生的精彩需要坚持不懈地积累!
  • 勤写标兵Lv2
    勤写标兵Lv2
    授予每个自然周发布4篇到6篇原创IT博文的用户。本勋章将于次周周三上午根据用户上周的博文发布情况由系统自动颁发。