- 博客(47)
- 收藏
- 关注
RSS订阅原创 webpack最小化lodash
lodash作为一个比较常用的前端开发工具集，在使用webpack进行vendor分离的实践中，会遇到将整个lodash文件分离到vendor.js的问题。这样会使vendor.js文件变得特别大。webpack.config.js文件代码如下：var path = require('path');module.exports = mode => { return { ...
2019-01-11 22:22:06
565
原创 构建多页面应用——优化(二)
最近，一直尝试使用webpack做多页面应用的开发。并且一个实际的项目为原型，实现对一个静态的企业站进行优化。原站点地址，测试站点地址。如果想要做一个自己个个人博客，或者企业官网来说，有一定的参考意义。webpack的resolve.alias在做模块化开发的过程中，有一个需要解决的问题就是引用模块的路径问题。注：在webpack中，每一个文件（不管是js，css, html，还是图片等）...
2019-01-07 21:45:01
209
原创 构建多页面应用——hash
这里的hash主要从两个方面来说。一个是webpack生成的hash，另一个是页面链接中的hash，如：http://localhost:8080/ywbk.html#restaurant中的#restaurant。后者在单页面应用的路由处理中经常用到。webpack中的hashwebapck每次构建都会生成一个新的hash(主要用于生产环境)。它的作用就是用来标记构建生成的状态，通常使用的...
2019-01-06 01:34:27
480
原创 webpack 构建多页面应用
如何使用webpack构建多页面应用，这是一个我一直在想和解决的问题。网上也给出了很多的例子，很多想法。猛一看，觉得有那么点儿意思，但仔细看也就那样。使用webpack这个构建工具，可以使我们少考虑很多的问题。我们常见的单页面应用只有一个页面，它考虑问题，解决问题围绕着中心化去解决，因此很多麻烦都迎刃而解。如果你使用过vue.js，那么想必你一定用过vue-router，vuex，它们就是典型...
2018-12-16 21:10:46
501
原创 webpack4.x的变化（二）
我之前写过一篇文章webpack4带来了什么，这篇文章优点照猫画虎的意思，文章中说明了一些什么，但好像是还没有说透，感觉不是那么好，所以下定决心，在写一篇，可能这一篇也有不足，但后续还会继续补充。话不多说，下面进入正文。webpack4.x提出的一个口号是实现0配置，也就是说，我们不用添加配置文件webpack.config.js，就可以实现构建打包的目的。因为，webpack4.x之前的版本，...
2018-12-15 15:50:06
327
原创 你为什么用或不用框架？
最近，在持续关注一个Twitter话题，就是 Why do people decide to use frameworks? ，这个话题是由Nicole Sullivan提出的。刚开始，我对这个问题也没有太在意，也就是随意的看了看，正如提问者Nicole Sullivan说的那样，我刚开始也觉得这是一个愚蠢的问题。但是这个问题就像蒲公英的种子一样，就这么在我的脑海里扎了根，截至到我这写这篇文章之...
2018-10-25 20:18:20
201
原创 webpack4带来了什么
在开发人员还在体会webpack3.x的余韵时，webpack4.x已经悄然而来。而对使用者来说，最期待的问题无外乎如下：新版本与旧版本相比都有哪些改变？webpack3.x到webapck4.x的迁移？使用webpack4.x我们应该注意什么？webpack的新特性webpack 作为构建工具的强大之处在于：可以在 webpack.config.js 中配置很多独特的功能；...
2018-10-17 21:00:25
466
原创 $.ajax vs axios vs fetch
Ajax 是什么？答：Ajax是一种可以在浏览器和服务器之间使用异步数据传输（HTTP请求）的技术。使用它可以让页面请求少量的数据，而不用刷新整个页面。而传统的页面（不使用Ajax）要刷新部分内容，必须重载整个网页页面。Ajax 基于什么？答：它基于的是XMLHttpRequest（XHR）。这是一个比较粗糙的API，不符合关注分离的设计原则（Separation of Concer...
2018-10-16 13:28:45
2439
原创 浮动的label
在web项目中，有一个很重的模块就是登陆/注册模块，这个模块的主体部分就是一个form表单，这个form表单包含两个重要input组（用户名/密码），每个input组都包含label和input，而关于 label+input 的布局方案多种多样，不同的设计师有不同的设计风格，不同的前端工程师又有不同的实现方式。通过对比发现，现在的方案是既注重美观，又注重性能。那么，关于label和input都...
2018-10-14 10:46:32
799
原创 HTML5中dialog元素尝鲜
对话框（别称模态框，浮层）是web项目中用于用户交互的重要部分，我们最常见的就是js中 alert()，confirm()，但是这个对话框的不美观，也不能自定义样式，所以在开发的过程中，一般根据自己自己的需求造轮子或者使用第三方的。对话框的组成常见的弹出框形式：位置：屏幕的左上角，右上角，左下角，右下角，垂直居中等大小：定宽定高，定宽不定高，不定宽不定高等开发中的对话框形式就是位置和大小...
2018-10-13 00:47:52
1750
原创 伪类&伪元素
伪类（pseudo-class）& 伪元素（pseudo-element）伪类和伪元素在web开发中用的好的话，可以说犹如神助。但一定要分清楚，什么是伪类，什么是伪元素。如何区分伪元素与伪类？答：伪元素在html文档渲染后，页面中有相应的内容显示，同时能够设置它的样式，而伪类只能设置样式伪元素和元素的区别？答：很明显，从字面意思上来说，伪元素就不是真正的元素，而只有形而没有神，...
2018-10-11 13:22:50
321
原创 用 css 做图形（图标）
在前端开发中，你或多或少都会接触到css图形。之前我整理过 伪元素&伪类 的内容，为的就是更加熟悉了解它们，以便更好的使用它们。同时也也使用它一做了一些动画。 css3-animate。这里说的用css做图形，其实是使用一个html元素，结合它的伪元素 ::before & ::after （不需要其他额外的非伪元素的html元素），然后定义样式来生成所需的图形。这里不是说不可...
2018-10-11 13:21:55
961
原创 JS函数知识点梳理
要想学好JavaScript除了基本的JavaScript知识点外，作为JavaScript的第一等公民——函数，我们要深入的了解。函数的多变来源于参数的灵活多变和返回值的多变。如果参数是一般的数据类型或一般对象，这样的函数就是普通函数；如果函数的参数是函数，这就是我们所要知道的高级函数；如果创建的函数调用另外一部分（变量和参数已经预置），这样的函数就是偏函数。此外，还有一点就是可选参数（op...
2018-03-07 16:55:03
174
翻译 eval()不是魔鬼，只是被误解了（翻译）
原文来自：https://www.nczonline.net/blog/2013/06/25/eval-isnt-evil-just-misunderstood/ 作者：Nicholas C.Zakas在JavaScript中，我不确定是否有比eval()受到更多诽谤的。它就是个简单的函数被设计用来将字符串转换为可被执行的JavaScript代码。在我的早期的职业生涯里，它比任何其他的东西更受
2018-02-04 19:37:46
2741
2
原创 漫谈promise使用场景
深入理解promise对于现在的前端同学来说你不同promise你都不好意思出门了。对于前端同学来说promise已经成为了我们的必备技能。那么，下面我们就来说一说promise是什么，它能帮助我们解决什么问题，我们应该如何使用它？这是我个人对promise的理解。欢迎吐槽 ：)Promise是什么promise的意思是承诺，有的人翻译为许愿，但它们代表的都是未实现的东西，
2018-02-03 03:02:17
1007
原创 算法 宽度遍历（面试题详解）
问题来源https://segmentfault.com/q/1010000013091395?_ea=3284779问题描述：存在一个0，1值的二维数组，给定一个坐标[x,y]，如果该坐标所代表的元素值为1，则返回该坐标所代表的元素相邻的所有值为1的元素坐标。解题思路对于这种查找元素这类题目，脑袋里的第一个想法就是应该使用遍历。然后选择使用何种遍历，由于这个查找元素是
2018-02-02 13:21:06
443
原创 express使用session与cookie详解
无状态的http我们都知道http的请求和响应式相互独立的，服务器无法识别两条http请求是否是同一个用户发送的。也就是说服务器端并没有记录通信状态的能力。我们通常使用cookie和session来确定会话双方的身份。cookiecookie 是从服务器端发送的，服务器给不同的用户发送不同的标识，这个标识表示用户的身份，服务器通过客户端发送的这个标识来识别用户的身份，从而查询服务器
2018-01-30 12:20:56
3726
原创 JavaScript 观察者模式 （通俗易懂）
观察者模式又叫做发布-订阅模式。这是一种一对多的对象依赖关系，当被依赖的对象的状态发生改变时，所有依赖于它的对象都将得到通知。生活中的观察者模式就如我们在专卖店预定商品（如：苹果手机），我们会向专卖店提交预定申请，然后店家受申请，正常这样就完事了。假如，近段时间苹果手机的需求很大，而商品有限，那么商家就会要这些果粉预留电话等待通知，等到手机一到，商家就会遍历果粉预留信息，然后发通知给这
2018-01-26 19:57:05
5421
1
原创 JavaScript iterator 设计模式
迭代器模式就是按照顺序访问一个对象中元素，而不用暴露该对象的内部组成。迭代器模式就是将这个迭代实现从业务中分离出来。但实际开发中我们并不将他当成一个设计模式。前瞻后顾说起迭代器，想必对ES6有了解的同学应该不会陌生。我们知道，for ... of 遍历的对象必须是迭代器对象，而普通对象则不能，因为普通对象内部没有实现迭代器，而像数组则内部实现了迭代器，所以可以用for ... of
2018-01-24 14:59:25
186
原创 webpack引入eslint详解
webpack中eslint使用首先，要使webpack支持eslint，就要要安装 eslint-loader ，命令如下:npm install --save-dev eslint-loader在 webpack.config.js 中添加如下代码：{ test: /\.js$/, loader: 'eslint-loader', enforce:
2018-01-22 15:33:20
12801
1
原创 javascript 代理模式(通俗易懂)
所谓的的代理模式就是为一个对象找一个替代对象，以便对原对象进行访问。使用代理的原因是我们不愿意或者不想对原对象进行直接操作，我们使用代理就是让它帮原对象进行一系列的操作，等这些东西做完后告诉原对象就行了。就像我们生活的那些明星的助理经纪人一样。我们举一个明星买鞋子的例子。1.明星自己去买鞋。// 定义一个鞋子类var Shoes = function(name){ t
2018-01-21 23:58:53
730
原创 如何用babel将ES6转换为指定的版本的ES代码
由于新版本的ECMASscript的强大特性，使我们写js代码更加得心应手，例如：calss，let，for…of，promise等等，但可惜的是这些js新特新只被最新版本的浏览器支持，那么指定范围的低版本的浏览器的支持就需要一个专门的工具，babel就是这样的一块前端工具。但是babel系列的插件现在越来越多，对于初次接触使用它的人来说需要花费不少的时间，尤其是讨厌英文的人。babel-
2018-01-20 19:00:08
9808
原创 javascript 数据类型判断 (常见库的数据类型判断源码的分析)
JavaScript一共有六种数据类型，分为原始类型（又名基本类型）和对象类型（又名引用类型）原始类型有五种，分别为number，string，boolean，undefined，null五种。对象类型常见的有Function，Array，Date，正则ES6新增SymbolJavaScript 自己提供的乐行判断type如果不对对象做严格区分使用type。nu
2018-01-17 03:07:29
228
原创 javascript 策略设计模式
什么是策略。策略就是根据形势的发展而制定的行动方针。比如说春节快要到了，我们要回家，回家我们就要选择交通工具。怎么回家我们就需要制定方案。比如说我吧，我们家在河南一个农村，不管是汽车，火车，飞机都没有直达的。我可以选择从北京到郑州乘火车，然后从北京到长葛做长途汽车，然后从长葛到家做短途汽车。当然也可以选择其他方式，这就要根据自己的实际需要，时间不紧花费又低我一般就选择这个方案。开发
2018-01-16 16:00:08
125
原创 JavaScript 单例模式
定义确保一个类仅有一个实例，并提供一个访问它的全局访问点。单例模式使用的场景比如线程池、全局缓存等。我们所熟知的浏览器的window对象就是一个单例，在JavaScript开发中，对于这种只需要一个的对象，我们的实现往往使用单例。实现单例模式 （不透明的）一般我们是这样实现单例的，用一个变量来标志当前的类已经创建过对象，如果下次获取当前类的实例时，直接返回之前创建的对象
2018-01-15 12:44:52
146
原创 漫谈javascript函数式编程
javascript的函数式语言特性我们知道JavaScript使一门面向对象的编程语言，但这门语言同时拥有很多函数式语言的特性。JavaScript的设计者在设计最初就参考了LISP方言之一的Scheme，引入了Lambda表达式、闭包、高阶函数等内容，正是因为这些特性让JavaScript灵活多变。Lambda(匿名函数)表达式lambda在JavaScript中通常被引用
2018-01-12 23:12:35
261
原创 JavaScript——对象（查漏补缺）
说到JavaScript，我们就总是会提到对象，说到对象我们就会提到原型继承，这是我们接触JavaScript时经常会遇到的，尤其是在面试中我们也是会经常遇到。一般知道对象，理解原型看起来是足够够了，但是有一些小细节的问题，我想我们还是要注意的，下面我们就来说说。对象的常见创建方法new Object()实现对象的继承，继承自Object，这种方法现在不常用let ob
2018-01-11 18:42:41
169
原创 学习正则（告别复制粘贴）
知识学到自己手里的才是自己的，如果复制，粘贴别人的对自己帮助并不大，它只能帮自己解决一时的问题（有时还要花费自己大量的时间来查找），而不能从根本上解决问题。就好像前段时间我的的大学同学问了我一个正则问题，如何验证用户输入的密码必须包含字符、数字、特殊符号，他说在百度上找了大量的正则示例都不能解决问题，我就问然后呢，他给我说我问你，我当时就无语了，我当时因为正在做项目，一时没想出来，我跟他说你没
2018-01-09 02:50:36
220
翻译 30-seconds-code——browser
英文文章来源于：https://github.com/Chalarangelo/30-seconds-of-code/blob/master/README.mdBrowsercurrentURL返回当前页面的 URL。用 window.location.href 获得当前的 URL.const currentURL = () => window.location.h
2018-01-04 23:18:07
142
原创 this,call和apply(这三个东西，如何牢牢记住)
这三个东西虽然一直再用，也用的很顺手，知道它的用法，也知道它的区别，但是最近在攻克设计模式这个高地时总感觉缺点什么，没得办法，就只好重新学习一下。并总结了些许个人心得，分享给大家。this跟别的语言不太一样，JavaScript的this总是指向一个对象，而具体指向那个对象又是基于函数的执行环境（有人理解为上下文）动态绑定的，不是函数被声明的环境，而是函数被引用的环境。this
2018-01-03 18:36:39
1370
原创 面向对象的JavaScript（如何一步步成为js高手）
‘工欲善其事，必先利其器’，在深入学习JavaScript之前，我认为我们很有必要了解以下，JavaScript这门面向对象的动态语言到底是一门什么样的语言。J
2018-01-03 00:03:00
1074
原创 设计模式（通往高手之路的必备技能）
‘从大处着眼，从小处着手’，以前对这句话一知半解，自从踏出校门走入社会，开始工作以来，有了越来越深的理解，偶有发现这句话用在程序开发中也有用，所以，近段时间开始尝试着分析jQuery源码，分析angularjs源码，学习设计模式。设计模式的由来看过GOF的总结的23种设计模式的人，都或多或少的有种似曾相识的感觉，事实确实如此，这些设计模式原来就有。
2018-01-02 23:53:09
155
原创 掌握面试——弹出框的实现（一道题中包含布局/js设计模式）
这道面试题，当初我面试的时候被问过两次，因此比较深，此外，我记得还有设计模式的考察，所以，有深刻的体会。面试题主要考察什么面试不是个轻松的活，不管是对面试官还是面试者都一样。对于面试官来说，别的先不管，首先一点技术要过关，对候选人的基本要求就是基础扎实，有相关项目经验，有解决问题的能力，思路清晰，易于沟通。而对于面试者来说要技术扎实，知识面要广，要有技术闪光点
2018-01-02 02:10:14
1282
原创 观察者设计模式
观察者设计模式是一个好的设计模式，这个模式我们在开发中比较常见，尤其是它的变形模式订阅/发布者模式我们更是很熟悉，在我们所熟悉jQuery库和vue.js框架中我们都有体现。我在面试中也曾经被问到observer和它的变形模式publish/subscribe，说实话，当时有点懵。随着工作经历渐多，也认识到它的重要性，特别是当你想要朝着中高级工程师进阶时这个东西更是绕不过。
2017-12-30 17:02:40
334
1
原创 factory 设计模式
工厂模式是另一个有关创建对象概念的模式。它和其他的设计模式的区别在于它没有显示地要求我们使用构造函数，相反，它为创建对象提供一个通用的接口，用这个接口我们可以创建我们希望创建的指定类型的工厂对象。
2017-12-30 01:29:09
3291
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人