yin_991的博客

原创 使用webpack实现css的模块化

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

原创 使用webpack打包样式资源

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

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

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

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

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

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

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

原创 如何安装webpack4

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

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

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

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

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

原创 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...

原创 渲染机制类

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

原创 通信相关

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

原创 创建Ajax的流程

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

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

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

原创 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的事件模型事件捕获   ...

原创 javascript——DOM篇

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

原创 html&css扫盲篇

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

原创 边距重叠及解决方法

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

原创 js获取盒子模型的高宽

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

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

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

原创 es6基础入门篇

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

原创 2018.8.9知识总结

原创 求一组数的最后一个数等于前面所有数的和并返回最后一个数

如果有一组已知的数，有着这样的规律：1，1，2，3，5，8，n。求n的值是多少。如果用代码实现，应该怎么做呢？这组数的规律就是最后一个数等于前面两个数的和，既然是对前两个数求和，那么就至少得要两个数，所以这样的话就得分情况讨论，此时用到if判断语句。如果数组长度小于等于2，就返回1；如果数组长度大于2，就计算前面两个数的和。这种情况是数组已知，只是求最后一个数。这是一种实现方法，代...

原创 二维数组的子数组元素进行合并且不重复

如果有三组数：['A1','A2','A3']、['B1','B2']、['C1','C2']，从每一组里抽出一个数并进行组合，且每种情况不同，一共有3*2*2=12种情况，这是很熟悉的数学题，如果用代码实现，应该如何做呢？其实我试过手写了一下代码，才发现手写的与在编辑器里边写边调试的体会很不一样，手写的感觉就是能边打草稿边思考，而调试的话能容易发现问题出在哪里然后也方面修改，很多时候也会带来一些...

原创 编写jQuery轮播图插件并在html文档中使用插件

有时候一个网页的内容往往是非常多的，而如何把各部分按照组件化的思想来开发也就显得非常重要了。组件化模式能够让代码看起来更有条理，最重要的是易于后期代码的维护，也易于团队协作开发的展开，要知道多人开发一个页面是需要有一个共同制定的规则的，比如在命名属性的时候书写格式也很重要，以什么前缀开头，就表示这个dom应该是哪个部分负责的，然后再样式编写额时候要注意父元素与子元素的关系，命名的时候也可以体现出来...

原创 【完整版】从分析页面布局、标记各部分区域高宽开始，构建一个挂号平台页面

【图片素材是在慕课网上的，我在看完视频之后，觉得这种开发方法很适合我这种小白去多多尝试，多多练习，这里我也是奔着掌握web前端开发方法来写的，嗯，代码及所有图片的标记也是我自己从头写过和标记的，这也算对自己学习的一个总结与扩展吧】我理解中，一般的开发流程应该是从需求分析到设计，再到编写代码，然后前后端对接调试。在开发一个平台之前，我们首先需要从UI设计师的手中拿到设计好了的图稿，初步分析页...

原创 如何解决滚动条的scrollTop总是0的情况

来源：https://www.cnblogs.com/xwgli/p/3490466.html 

原创 jquery的each方法遍历对象

//遍历对象 var d=$('div').each(function(index,domelement){ if(this.id === 'box2') { // return false;//fasle相当于for循环中的break,只有1有title return true//true 相当于for循环的continute，1、3都有title } th...

原创 回调函数与jQuery转换元素

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>回调函数</title></head><body> <div id="bo

原创 复制数组的方法（push pop shift reverse concat slice...都用上）

         //有一个数组a，把a复制给b，我想到的有以下几种方法：                 var a=[1,'yes',3], b; //方法一：push() b=new Array() for(var i=0;i<a.length;i++){ var c=a[i]; b.push(c) } document.write(b); c...

原创 构造函数、实例、原型、原型链之间的关系

1、构造函数是什么 所谓的构造函数其实就是一个普通的函数前面加了new运算符，其实质也是一个函数，所以构造函数都有函数的prototype属性。2、实例是什么 实例就是通过构造函数创建出来的对象。                    var M = function () { this.name = 'Jane'                    }                ...

原创 说在原型链之前_创建对象的几种方法

创建对象的方法 大体上创建对象的方法主要分为三种，第一种方法是通过字面量创建，第二种是通过构造函数创建，这两种是目前大家都比较熟悉的创建对象的方法，但是还有一种方法，那就是通过Object.create方法来创建。说多无谓，还是直接上代码，直接对着代码来理解                //（1）字面量创建对象 var obj1 = {name: 'Jane'} var obj2 = n...

原创 学习笔记-盒子模型应用1

学习笔记-盒子模型应用1

原创 canvas元素

canvas元素绘制图形

原创 表单元素之button元素、textarea多行文本元素

表单元素之button元素、textarea多行文本元素

原创 表单元素之output元素、度量条、进度条、fieldset、legend元素

表单元素之output元素、度量条、进度条、fieldset、legend元素

原创 表单元素之select、datalist元素

表单元素之select、datalist元素

原创 form表单元素及其属性

form元素及其属性代码

原创 用html5新布局元素代替div元素布局页面

用html5新布局元素代替div元素布局页面

原创 html通用属性

html全局属性

原创 div元素及其属性布局页面

回顾div的入门级操作