- 博客(79)
- 收藏
- 关注
RSS订阅原创 webpack打包优化速度
一、减少文件搜索范围1.优化resolve.extensions配置在导入语句没带文件后缀时，Webpack 会自动带上后缀后去尝试询问文件是否存在。在配置 resolve.extensions 时你需要遵守以下几点，以做到尽可能的优化构建性能：后缀尝试列表要尽可能的小，不要把项目中不可能存在的情况写到后缀尝试列表中。 频率出现最高的文件后缀要优先放在最前面，以做到尽快的退出寻找...
2019-07-01 14:25:55
1989
原创 webpack 其他配置
一、webpack处理HTML内嵌图片1.处理效果未使用loader时，会出现路径错误，图片不显示的情况；经过loader处理后，图片能正常显示2.安装命令：cnpm install --save-dev html-loader3.配置config文件二、使用sourcemap调试1.关于sourcemapSourcemap是为了解决实际运行代码（打...
2019-07-01 14:19:04
289
原创 npm ERR! Failed at the webpack1@1.0.0 start script. npm ERR! This is probably not a problem with npm
出现上面的错误，是端口被占用，换成其他端口即可
2019-06-20 18:31:00
8401
原创 npm ERR! Unexpected end of JSON input while parsing near '...es":{"delegates":"^0.'
在安装sass-loader和node-sass时报错，运行npm cache clean --force 后再进行安装，就没有报错了错误：C:\Users\dell\Desktop\webpackdemo\webpack1>npm install sass-loader node-sass --save-devnpm ERR! Unexpected end of JSON inp...
2019-06-20 18:30:47
257
原创 webpack 插件（plugins）
插件是 webpack 的支柱功能。webpack 自身也是构建于，你在 webpack 配置中用到的相同的插件系统之上！插件目的在于解决loader无法实现的其他事。由于插件可以携带参数/选项，你必须在 webpack 配置中，向plugins属性传入new实例。根据你的 webpack 用法，这里有多种方式使用插件。一、根据HTML模板自动生成HTML文件（html...
2019-06-20 18:26:14
694
原创 webpack loader
loader 用于对模块的源代码进行转换。loader 可以使你在import或"加载"模块时预处理文件。因此，loader 类似于其他构建工具中“任务(task)”，并提供了处理前端构建步骤的强大方法。loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript，或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中...
2019-06-20 16:09:59
572
原创 配置webpack-dev-server
1.相关概念webpack-dev-server是webpack官方提供的一个小型Express服务器。使用它可以为webpack打包生成的资源文件提供web服务。webpack-dev-server 主要提供两个功能：1.为静态文件提供web服务2.自动刷新和热替换(HMR)自动刷新指当修改代码时webpack会进行自动编译，更新网页内容热替换指运行时更新各种模块，即局部...
2019-06-19 18:15:21
24718
原创 webpack 入口entry和出口output进阶用法
入口1.单入口单文件：例如： entry：‘./src/index.js’多文件：在你想要多个依赖文件一起注入，并且将它们的依赖导向到一个“chunk”时，传入数组的方式就很有用。例如：2.多入口例如：出口在 webpack 中配置output属性的最低要求是，将它的值设置为一个对象，包括以下两点：filename用于输出文件的文件名。 目...
2019-06-19 17:35:45
459
原创 webpack相关概念及环境配置
相关概念webpack是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个bundle。简单来说，webpack其实就是一个JavaScript应用程序的静态模块打包器。web...
2019-06-19 17:08:03
182
原创 JQuery 轮播
1.效果图如下：<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <script src="js/jquery-1.9.1.min.js"></script>...
2019-06-03 10:52:28
250
原创 阻止事件冒泡与阻止事件默认行为
1.event.stopPropagation()阻止事件冒泡2.event.preventDefault()阻止事件默认行为。3.return false等效于同时调用event.preventDefault()和 event.stopPropagation() return false除了阻止默认行为之外，还会阻止事件冒泡。...
2019-05-29 11:12:29
519
原创 JQuery动画
1.动画效果的显示与隐藏show(speed,[callback]) 显示hide(speed,[callback]) 隐藏上面方法中参数speed表示执行动画时的速度，可以自定义，单位为毫秒，可以使用默认字符“slow”、“normal”、“fast”,其对应速度分别为“0.6秒”、“0.4秒”、“0.2秒”；可选参数[callback]为在动画完成时执行的回调函数示...
2019-05-29 11:10:30
285
原创 JQuery中的事件
JQuery里面的事件分为键盘事件、鼠标事件、窗口事件；在原生JS中写事件的基本方法有直接绑定和设置监听；JQuery中结构层和代码层分离，可以进行链式操作；一、事件绑定1.事件的对象<script> $("#btn1").click(function(event){ //事件对象event var e=event.target;...
2019-05-29 10:16:29
189
原创 JQuery 图片瀑布流
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; } html...
2019-05-27 19:00:54
307
原创 JQuery中的DOM操作（2）
八、JQuery创建DOM元素js中创建DOM元素的方式有两种，为document.createElement(); //object appendchild方式var str="<span></span>"; //innerHTML方式在JQuery中，结合了js的两种方式，函数$( )用于动态创建页面元素，语法格式为$(html)，其...
2019-05-23 20:12:39
281
1
原创 JQuery中的DOM操作（1）
DOM树 在访问页面时，需要与页面中的元素进行交互式的操作。在操作中，元素的访问是最频繁、最常用的，主要包括对元素属性、内容、值CSS的操作。一、操作元素的属性attr() prop() 获取或设置元素的属性值两者区别：简单来说，对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。对于H...
2019-05-21 19:41:51
1264
2
原创 颜色的rgb值和16进制值转换
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <script src="js/jquery-1.9.1.min.js"></script></head>...
2019-05-21 19:24:16
1128
原创 JQuery环境配置+选择器
什么是JQuery？jQuery 是一个JavaScript库，是一个由John Resig创建于2006年1月的开源项目。jQuery 凭借着简洁的语法和跨平台的兼容性，极大简化了JavaScript 开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发ajax的操作。其独特而又优雅的代码风格改变JavaScript 程序员的设计思路和编写程序的方式。简单地来说:jQuer...
2019-05-21 16:51:01
328
原创 几种网页布局的优缺点
一、静态布局特点：网页上的所有元素的尺寸都使用px作为单位。无论浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的PC端网页都是静态（定宽度）布局的。PC端：通常使用居中布局，所有样式的宽高都是固定的，有滚动条。移动端：需要重新写单独的一套样式。优点：简单方便，不存在兼容问题。缺点：网页无法根据用户设备屏幕的宽度进行自适应。二、流式布局特点：页面元素...
2019-05-16 19:32:25
12389
1
原创 Flex布局
关于flex布局，收藏一下。。http://www.ruanyifeng.com/blog/2015/07/flex-grammar.htmlhttps://blog.csdn.net/m0_37851778/article/details/77241009https://blog.csdn.net/lm9948/article/details/80732702https://bl...
2019-05-16 19:24:21
131
原创 圣杯布局 双飞翼布局
圣杯布局和双飞翼布局效果相同，实现方法不同。都是为了实现两侧宽度固定，中间宽度自适应的三栏布局。如下图：圣杯布局借助的是其他非主要元素覆盖了其父元素的padding值所占据的宽度，同一个杯子，非主要元素其只是占据了全部容器的padding值部分；使用flex弹性布局实现<!DOCTYPE html><html><head lang="en"&...
2019-05-16 19:15:06
142
原创 案例——跨域调用百度接口
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> .block{ width: 600px; heig...
2019-05-13 15:43:42
1401
原创 跨域问题
跨域问题是由于浏览器为了防止CSRF攻击，避免恶意攻击而带来的风险而采取的同源策略限制。当一个页面中使用XMLHTTPRequest对象发送HTTP请求时（XHR请求），必须保证当前页面和请求的对象是同源的，即协议、域名和端口号要完全一致，否则浏览器就会阻止此跨域请求返回的数据。分享几篇文章，写的十分详细，https://www.cnblogs.com/2050/p/3191744.h...
2019-05-07 19:55:10
73
原创 封装Ajax
封装过程的框架如下：<script>function ajax_method(url,data,method,success) { // 异步对象 var ajax = new XMLHttpRequest(); // get 跟post 需要分别写不同的代码 if (method == 'get') { // get请求 ...
2019-05-07 17:47:47
59
原创 Ajax
传统方法的缺点:传统的web交互是用户触发一个http请求服务器,然后服务器收到之后,在做出响应到用户,并且返回一个新的页面,,每当服务器处理客户端提交的请求时,客户都只能空闲等待,并且哪怕只是一次很小的交互、只需从服务器端得到很简单的一个数据,都要返回一个完整的HTML页,而用户每次都要浪费时间和带宽去重新读取整个页面。这个做法浪费了许多带宽，由于每次应用的交互都需要向服务器发送请求，应用的...
2019-05-07 17:14:11
99
1
原创 各种排序算法以及时间复杂度问题
相关概念时间复杂度 (在排序过程中需要比较和交换的次数) 空间复杂度 (在排序过程中需要的辅助存储空间) 稳定性 (该算法的实现是否可以保证排序后相等元素的初始顺序，只要该算法存在一种实现可以保证这种特征，那么该算法就是稳定的) 内部排序/外部排序 (在排序过程中数据元素是否完全在内存)冒泡排序数组中有n个数，比较每相邻两个数，如果前者大于后者，就把两个数交换位置；这样一来...
2019-05-07 16:01:55
5026
原创 清除浮动的方法
当父元素不设置高或者高设置为auto或者父元素的高度小于子元素高度时，子元素若浮动，即脱离文本流（这时无论你怎么调子元素的高度，父元素的高度都不会有变化），此时父元素就会出现塌陷（即高度为0或者为你设置的高度），这可能会影响页面下面的布局，所以在设置了浮动后要清除浮动。那么，清除浮动有哪些方式？一、overflow：hidden我们最常使用的就是给子元素设置浮动后，给父元素写overf...
2019-04-09 16:25:15
80
原创 编程数组题
1.移除数组 arr 中的所有值与 item 相等的元素。不要直接修改数组 arr，结果返回新的数组function remove(arr, item) { var a=arr.slice(0); for(var i=0;i<arr.length;i++){ if(a[i]==item){ a.splice(i,1); i--...
2019-04-09 12:39:12
527
原创 正则表达式
正则表达式(regular expression)描述了一种字符串匹配的模式（pattern），可以用来检查一个串是否含有某种子串、将匹配的子串替换或者从某个串中取出符合某个条件的子串等。正则表达式是由普通字符（例如字符 a 到 z）以及特殊字符（称为"元字符"）组成的文字模式。模式描述在搜索文本时要匹配的一个或多个字符串。正则表达式作为一个模板，将某个字符模式与所搜索的字符串进行匹配。普...
2019-04-02 16:06:48
268
原创 表单验证
form标签作用是用于将其他表单标签"包"起来，以便作为一个整体，可以提交数据到服务器。写法：<form name="表单名称" action="目标地址" method="数据提交方式" ></form>name：只是给该表单命名，用于js技术使用。action：设定表单数据提交给哪个文件，用于后端技术（比如php）来接受并处理数据method:...
2019-04-02 15:04:50
150
原创 History对象和Location对象
History 对象History 对象包含用户（在浏览器窗口中）访问过的 URL。History 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。所有浏览器都支持该对象。History 对象属性我们可以 console.log(history)来看一下输出结果：可以看到history只有length一个属性，返回的是浏览器历...
2019-04-02 12:04:16
2610
原创 浏览器切换tab 或者隐藏 计时器出现的bug
当浏览器切换页面或者最小化页面时，网页中如果存在计时器，再次打开可能出现bug,如使用计时器的图片轮播，在网页来回切换的时候图片会乱，解决方法:由visibilitychange 判断当前的活动状态，当前页面有没有被隐藏 hidden<script> var bowhidden="hidden" in document?"hidden": "webkithidde...
2019-04-02 11:50:24
1254
原创 图片轮播
一、淡入淡出轮播特点：实现图片自动以淡入淡出的方式轮播，当鼠标悬停在图片上面的时候轮播停止；图片下面表示顺序的原点会随着图片切换颜色改变，当鼠标悬停在圆点上时图片切换为鼠标当前悬停的圆点对应的图片；图片两边代表左右的箭头在点击的时候切换前后的图片；图片的淡入淡出轮播，可以理解为每一张图片切换到最上面的时候透明度由0慢慢变为1；<!DOCTYPE html&g...
2019-03-28 20:29:09
4869
原创 处理浏览器的默认选中
在网页上连续点击时，页面会出现蓝色背景的选中框，处理浏览器的默认选择：document.onselectstart=function(){ return false;};
2019-03-28 19:54:37
332
原创 水平居中和垂直居中
整理一下。。。水平居中块级元素：给元素设置magin:0 auto;<html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ marg
2019-03-13 20:41:38
398
原创 JavaScript 图片无缝滚动
图片无缝滚动案例效果图ps:允许上传图片大小有限制，只能录一点点......代码<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <st
2019-03-12 17:23:22
197
原创 JavaScript Date 对象
Date 对象用于处理日期和时间。创建 Date 对象的语法：var myDate=new Date()注意：Date 对象会自动把当前日期和时间保存为其初始值。列举一些常用的Date对象方法：<script> var time=new Date(); console.log(time); console.log(time.getFull...
2019-03-12 11:23:44
104
原创 验证码案例
我们常见的验证码，其中包括汉字，字母，数字，随机生成，用户输入后进行验证。效果图：代码：<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> &l
2019-03-12 11:10:47
473
原创 JavaScript Math 对象
Math 对象用于执行数学任务。Math对象里有自己封装的方法<script> console.log(Math.PI);//圆周率 console.log(Math.abs(-1));//取绝对值 console.log(Math.ceil(2.45));//向上取整 console.log(Math.floor(2.45));//向下取整...
2019-03-12 10:26:26
72
原创 怎么判断设备加载不同的js脚本
Navigator 对象包含有关浏览器的信息。在控制台输出navigator对象，我们可以看到Navigator 对象属性属性 描述 appCodeName 返回浏览器的代码名。 appMinorVersion 返回浏览器的次级版本。 appName 返回浏览器的名称。 appVersion 返回浏览器的平台和版本信息。 brows...
2019-03-11 16:22:11
958
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人