webpack-sourceMap

JavaScript 胡豪

sourceMapsourceMap 它是一个映射关系，他知道dist目录下main.js文件的某一行实际上对应的是src目录下index.js文件中的一行 就能知道打包后文件的错误 定位 在你开发文件下源代码的位置 它能精确到具体第几行第几列 但这样的映射很耗费性能 加个cheap,只会精确到第几行不会第几列,build的速度会快 在devtool里配置12345devtool:'source-map' //打包后dist目录下会生成.map文件//'inline-source-m...

阅读全文

webpack-entry/output

JavaScript 胡豪

entery与output项目的输入与输出项配置 如果想打包生成多个js输出原代码：输出一个dist.js12345entry: './src/index.js',output:{ filename : 'dist.js', path: path.resolve(__dirname, 'dist')} 修改后12345678910//输出项 dist.js 可以修改占位符name（生成的js名字对应入口文件的key值），或者hash//如下打包后生成两个js：mia...

阅读全文

webpack-plugins

JavaScript 胡豪

pluginswebpack中使用plugins 在输出项，自动生成html入口文件1plugins:[new HtmlWebpackPlugin()], 但是实际情况中，html内有个root根节点，怎么在项目中比如src文件夹内，新建index.html文件，定义一个模板123456789101112<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <met...

阅读全文

webpack loader

JavaScript 胡豪

loaderloader是有执行顺序的，多个loader执行,use：数组里从右到左，从下往上 资源文件打包配置项url-loader与file-loader区别url-loader会把文件转成base64 打包进js里limit就是 小于【给定参数】的打包进js里，大于【给定参数】的打包出的还是文件的形式[hash:7]的意思是，打包出的文件名称 是7位的hash值，如’66-7ecf3b4.jpg’1234567891011rules:[{ test:/\.(jpg...

阅读全文

网页禁止审查及一些简单禁止用户对页面操作

JavaScript 胡豪

前言对于一些网页，如原创文章，我们不希望用户对我们的网页文章内容拷贝粘贴，所以前端可以做一些操作去禁止，但这种操作也只是防君子不防小人，上有政策下有对策，还是有方法破解的。 先说破解禁止 F12 方法遇到有些网页禁止 F12 审查，我们可以用空白网页先开调试模式，再在地址栏输入网址进入网页 简单禁止 F12 审查此方法就是 js 监听 F12 键盘事件去做操作(不安全，存在绕过漏洞) 1234567891011121314document.onkeydown = function() &#...

阅读全文

javascript中的面向对象开发

JavaScript 胡豪

js面向对象开发什么是对象“无序属性的集合，其属性可以包括基本值、对象或者函数”，对象是一组没有特定顺序的的值。对象的没个属性或方法都有一个俄名字，每个名字都映射到一个值。 什么是面向对象编程？面向对象编程的基本思路完全不同。其背后的思想是：你将所需要做的功能抽象成一个“对象”，然后一遍遍地调用这个对象来完成你想要的功能。 每次调用对象时，你必须创建对象，确保对象的存在，然后为了使用对象所带的功能你需要设置它的属性，这些功能称为“方法（methods）”。 面向对象的特点 封装 对于一些...

阅读全文

关于元素在网页中的位置总结

CSS 胡豪

offsetLeft与style.left的区别offsetLeft 获取的是相对于父对象的左边距 left 获取或设置相对于 具有定位属性(position定义为relative)的父对象 的左边距 如果父div的position定义为relative,子div的position定义为absolute，那么子div的style.left的值是相对于父div的值，这同offsetLeft是相同的，区别在于： style.left 返回的是字符串，如28px，offsetLeft返回的是数...

阅读全文

css3手写菜单图标变成X号

CSS 胡豪

前言做项目中经常会遇到三条横线的菜单按钮，一般都是点击按钮出现菜单栏，再次点击关闭菜单栏，直接显示X号就显得很生硬，这里使用CSS3动画将这个过渡过程变得非线性感，更讨好眼球。例子里用的是hover更直接明显，在项目里可以用class来控制 如何写代码如下：1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636...

阅读全文

Fetch与Promise

JavaScript 胡豪

什么是FecthFetch是一种HTTP数据请求的方式，是XMLHttpRequest的一种替代方案。Fetch不是ajax的进一步封装，它们是两个东西。Fetch函数就是原生js，没有使用XMLHttpRequest对象。 XMLHttpRequest 是一个设计粗糙的API，配置和调用方式非常混乱，而且基于事件的异步模型写起来也没有现代的 Promise，generator/yield，async/await 友好。 Fetch 的出现就是为了解决 XHR 的问题，它实现了 Promi...

阅读全文

Vue之mixin

vue 胡豪

常见场景 何时需要使用到mixin呢? 通常遇到有两个非常相似的组件，他们的基本功能是一样的，但他们之间又存在着足够的差异性，此时的你就像是来到了一个分岔路口：我是把它拆分成两个不同的组件呢？还是使用一个组件，然后通过props传值？对于实现功能来说，这两者都可以做到，但是不够完美。拆成两个组件的写法，遇到功能变动就要在两个文件中去修改，无疑是增加了更新的风险，违反DRY原则。而一个组件，太多的props传值会使得简单的逻辑变得复杂，后期维护时使用组件必须理解一大段上下文，降低了工作...

阅读全文

Powered by Hexo and Hexo-theme-hiker

Copyright © 2018 - 2021 胡豪的博客 All Rights Reserved.

访客数 : | 访问量 :