Web前端
关注
分享
扫一扫
贰拾壹先生
勿忘初心，方得始终
展开
-
一个已经落日西山，但又不得不了解的库 require.js
需求最近一直在维护公司的老项目，看到前辈们的代码，有点怀疑自己的前端水平了，十多年前的代码，不禁让人感叹，能够运行十年甚至二十年的代码，应该可以算的上是古董了，不经有点膜拜之意。不敢下手，就连最基本的阅读感觉都快有点障碍了，吓得赶快恶补了一番。简单介绍一个，这是一个前后端没有分离的项目，前端采用JSP开发页面，代码里面包括了：AngularJS 1.0.0 的框架， RequireJS 2.0.0 等等，想看懂代码逻辑，不得不再补补。1， RequireJS 模块加载器AMD是RequireJS原创 2021-03-25 20:49:53 · 653 阅读 · 0 评论 -
轮播图（5）
轮播（5）轮播- JS 旋转木马（五）1， 需求， 继续完善轮播类型之中，常用的轮播—首页轮播，2， 原理 定义图片的初始化位置数组，之后所有的操作都是基于对这个数组进行修改，以此达到轮播效果，轮播的思路有很多中，也参考了很多网上其他人的方案，感觉这个思路是最容易也是方便实现的实现旋转木马轮播图1， 获取元素2， 动态设置轮播图每一个盒子的样式3， 鼠标移入和移除盒子，显示与隐藏左右两侧按钮4， 添加按钮事件 点击右侧按钮，正向旋转， 把数组的第一个原创 2021-03-12 13:30:26 · 601 阅读 · 0 评论 -
轮播图（4）
轮播（4）轮播-手风琴（四）1， 需求， 在之前的三个轮播图之上，继续完善轮播类型之轮播图-手风琴2， 原理 动态缓慢的改变图片的宽度，缓慢移动的代码被抽离出来，放在util.js文件中，方便其他轮播使用，轮播中所用到的图片依然用颜色代替，3， 代码（index.html）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <原创 2021-03-12 13:27:55 · 310 阅读 · 0 评论 -
轮播图（3）
轮播（三）3D倒影旋转木马 （二）1， 需求， 在之前的3D旋转木马的基础上，添加了倒影效果2， 原理 通过设置CSS动效，设置容器里面的每一个DIV的旋转角度其中：添加 perspective 属性时，其子元素会获得透视效果，而不是元素本身，视为了增强视觉3， 代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta n原创 2021-03-11 20:44:05 · 204 阅读 · 0 评论 -
轮播图（2）
轮播（2）轮播，又称旋转木马 （二）1， 需求， 旋转木马，通过CSS动画实现，也参考了网络牛人思路，实现了不同的两种，其实本质都一样，特此分享出来，方便有需要的同学2， 原理 通过设置CSS动效，设置容器里面的每一个DIV的旋转角度，和背景颜色，这里，我们依然没有图片，通过背景代替图片，其中：添加 perspective 属性时，其子元素会获得透视效果，而不是元素本身，视为了增强视觉3， 代码<!DOCTYPE html><html lang="en"原创 2021-03-11 20:36:26 · 124 阅读 · 0 评论 -
轮播图（1）
JS轮播图汇总轮播（一）1，需求 最近在写官网，里面有不同的轮播图要实现，包括旋转木马，这也是考验前端JS和CSS的基本功，也参考了网上很多其他人的写法，感觉各有千秋，再此，记录一下这段旅程，也方便一下其他有需要的同学，2，原理 （1）定义个容器，里面放置五张以上的图片，设置position: absolute, 让所有的图片叠加，通过添加不同的样式，控制图片显示隐藏，默认第一张图片设置opactity=1, 也就是激活状态，其他的图片都是opactity=0,隐藏状态，然原创 2021-03-11 20:16:56 · 225 阅读 · 0 评论 -
Git常用总结
git 用户邮箱配置git config --global user.name "xxxxxxxx"git config —global user.email "xxxxxxxx@com.cn"git 用户邮箱查看git config user.namegit config user.emailgit 资源查看npm config get registry Yarn config get registrynpm 和 yarn registry配置yarn config set re原创 2021-02-23 13:26:50 · 393 阅读 · 0 评论 -
npm, npx, yarn 的区别
1，yarn 和 npm 的区别yarn 和 npm 都是 node 软件包管理器，1， yarn: 是同步执行所有任务，提高了性能， 而且如果你上一次安装过软件包，第二个会从缓存中获取，2， npm: 是按照队列执行每一个package, 每一次都是从网络上下载，也就是说必须要等到当前 package 安装完成之后，才能继续后面的安装"6.0.3", // 表示安装指定的6.0.3版本"~6.0.3", // 表示安装6.0.X中最新的版本"^6.0.3" // 表示安装6.X.X中原创 2021-02-22 11:31:40 · 7783 阅读 · 1 评论 -
GitBook 使用教程
第一节：GitBook介绍GitBook使用教程详细的记录了一步步搭建自己的电子文档笔记1，环境搭建(1) 当前安装版本 node -v v15.2.0 npm -v 7.0.8(2) gitbook-cli 脚手架安装： npm install -g gitbook-cli 版本验证 gitbook-cli -V CLI version: 2.3.2 GitBook version: 3.2.3(3) 编译器的原创 2021-02-20 14:12:11 · 2845 阅读 · 3 评论 -
NVM 常用命令
NVM 是什么？NVM 是 NODE.JS 的版本管理工具，通过它可以安装和切换不同版本的NODE，从 GitHub 或者其他网站下载一个项目，我们首先查看的是当前这个项目所需要的 NODE 版本，NDOE.JS 官方版本更新的非常快，而且每一次更新改动都比较大，正是因为这个需求，才需要频繁的切换 NODE 版本NVM 下载1, Window版本https://github.com/coreybutler/nvm-windows/releases2, MAC 版本https://gith原创 2021-02-20 10:50:40 · 1727 阅读 · 1 评论 -
webpack升级 file-loader 报错,图片无法显示，提示 minify: false
*ERROR in Error: html-webpack-plugin could not minify the generated output. In production mode the html minifcation is enabled by default. If you are not generating a valid html output please disable it manually. You can do so by adding the followi原创 2020-08-29 19:48:59 · 866 阅读 · 0 评论 -
TypeError: merge is not a function
webpack 环境区分在使用webpack-merge 进行环境区分的时候，编译报错， TypeError: merge is not a functionconst merge = require('webpack-merge')const baseConfig = require('./webpack.base.config')const proConfig = { mode: 'production'}module.exports = merge(baseConfig, proC原创 2020-08-27 23:00:14 · 4787 阅读 · 1 评论 -
webpack 处理css-load版本太高报错问题
ERROR in ./src/style.css Module build failed (from ./node_modules/_css-loader@4.2.2@css-loader/dist/cjs.js):Error:Cannot find module ‘cssesc’问题描述 npm install -D css-loader style-loader npm install -D node-sass sass-loader npm install -D less less原创 2020-08-27 01:48:32 · 3595 阅读 · 1 评论 -
PingAn-cli 打造自己的脚手架
PingAn-cli 脚手架开发1，初始化package.json文件npm init -y2, 创建一个index.js文件,文件头添加 #!/usr/bin/env node 解释： 调用系统环境变量中的node解释器执行文件 还有一个中写法： #!/usr/bin/node console.log('PingAn-cli 脚手架工具')3, package...原创 2020-04-14 22:34:57 · 180 阅读 · 0 评论 -
webpack常用插件复习巩固
1,初始化 npm init -y 生产package.json文件2,创建src文件夹3,创建index.html ul>li{这是第$个li}*94,npm install jquery -s发现需要解决js兼容性问题，import $ from ‘jquery’ 通过发现这种方式导入报错，5,安装webpack 1, npm install w...原创 2020-04-04 20:57:38 · 292 阅读 · 0 评论 -
Flex总结
最新开发一个小程序，复习了一下flex, 好记性真的不如一个烂笔头啊，长时间不用都遗忘了1，任何容器都可以设置成flex容器.box{display:flex;}行内容器也可以设置成flex布局.box{display:inline-flex;}2, 容器的六个属性(1) -flex-direction:决定主...原创 2020-04-02 00:00:01 · 169 阅读 · 0 评论 -
最喜爱的VS Code设置
做前端整整两年了，用过Eclipse，Sublime Text, HBuilder, Webstorm，Atom, 最喜欢的还是VS Code, 理由有很多，其他的都不重要，重要的是自己喜欢，而且免费的。好的外观写出好的代码VS Code 颜色主题: Snazzy Operator，或者 Atom One Dark Theme{ "workbench.col...原创 2020-03-31 21:53:48 · 887 阅读 · 0 评论 -
JavaScript基础知识-（对象）
JavaScript中所有的事物都是对象，字符串，数字，数组，日期，等等，JavaScript对象可以看作是属性的无序集合，每个属性都是一个键值对，JavaScript对象除了可以保持自有属性，还可以从一个称为原型的对象继承属性。对象的方法通常是继承的属性，这种“原型式继承”是JavaScript的核心特征1，初识对象对象最常见的用法是：创建，设置，查找，删除，检测和枚举它的属性。属性包括名字...原创 2019-03-07 14:33:14 · 190 阅读 · 0 评论 -
JavaScript基础知识-（数组）
1，数组是值的有序集合。每一个值叫做一个元素，每个元素在数组中有一个位置，称为索引。JavaScript的数组是无类型的，数组元素可以是任意类型。数组的创建方法： （１）直接量：var a = [1,2,3,4,5,]; // 注意：索引从0开始，最后一个是逗号可选的（2）调用构造方法var arr = new Array(10) var arry = new Array(1,2,...原创 2019-03-07 14:32:24 · 290 阅读 · 0 评论 -
JavaScript中Math对象常用方法总结
1，Math.pow(2, 53) &nbsp;&nbsp;&nbsp;&nbsp;// =&gt; 2的53次幂2，Math.pow(3, 1/3) &nbsp;&nbsp;&nbsp;&nbsp;// =&gt; 3的立方根3，Math.sqrt(3) &nbsp;&nbsp;&nbsp原创 2019-02-18 14:21:01 · 609 阅读 · 0 评论 -
CSS选择器总结
1，div是一个标准的块级元素。一个块级元素会新开始一行并且尽可能撑满容器。 其他的常用块级元素包括：p，form 和HTML5中的新元素：header,footer,section等等 span 是一个标准的行内元素，就像a元素一样2，前端工程师主要打交道的是浏览器主要浏览器和内核： IE : 内核：tridentFirefox:内核GeckoGoogl...原创 2019-02-11 15:47:39 · 506 阅读 · 0 评论 -
CSS常用属性总结
1，首行缩进：text-indent:2em 1em == font-szie 大小 em是相对字体大小高度的2，文本装饰 text-decoration:line-through;3，行级元素：内容决定元素所占位置(inline)不可以通过CSS改变宽高比如：span strong em a del块级元素：独占一行(block)可以通...原创 2019-02-11 15:45:32 · 293 阅读 · 0 评论 -
CSS定位布局理解
1，CSS定位属性：允许你对元素进行定位position的四种方式（1）static(默认值) 所有标准文档流中的元素都是静态定位（2）relative:相对定位：在原来的位置，移动的距离 position: relative;/*相对定位*/ 脱离原来位置定位。相对自己原来的位置进行定位 left:40px; /*保留了原来的位置，向右移动大...原创 2019-02-11 15:37:57 · 395 阅读 · 0 评论 -
CSS圣杯布局 && 双飞翼布局
两者作用和区别：圣杯布局和双飞翼布局解决的问题都是一样的。两边固定宽度，中间自适应的三栏布局，已经由此演变出来的类似其他布局格式。中间布局代码要写在 前边，保证第一个渲染区别：两者在布局的前三点方法是一样的，通过float浮动，和margin-left负值，让三元素并排显示。行成三栏布局，区别在中间盒子处理的方式。怎么做才能不把中间盒子的内容覆盖住。让其完全显示。圣杯布局是通...原创 2019-01-28 16:03:18 · 1045 阅读 · 0 评论 -
伪元素 before after
伪元素 before after1，作用:伪元素的作用是在内容元素的前后插入额外的元素，但它是一个虚假的元素，不会影响内容元素的DOM节点2，用法:伪元素使用起来也比较容易，在CSS2.1的时候，一个冒号：表示伪元素。在CSS3中，为了区分伪类和伪元素，用 ：(一个冒号)表示伪类 :: (两个冒号)表示伪元素，目前在开发中，两种方式都行3，注意：伪元素必须设置content属性，不然...原创 2019-01-28 15:49:37 · 688 阅读 · 0 评论 -
JSONP跨域
根据同源策略的限制，在端口号，域名，协议其中有一个或者多个不同的时候，所发出来的请求都是跨域请求，受到了跨域限制。但是也有例外：比如：<script>标签访问的时候，可以不受同源策略的限制，但只能是GET请求 （1）JSONP使用也很广泛，在我之前做的电信项目里面，因为和多个CP方合作。对方的后端服务器不支持CORS方法，所以很多跨域请求都是通过JSONP实现的，再比如QQ,豆...原创 2019-01-28 15:35:59 · 214 阅读 · 0 评论 -
跨域CORS
CORS是W3C标准。全场跨域资源共享（Cross-origin resourse sharing）她允许浏览器向跨域资源服务器放出XMLHttpRequest请求，克服了AJAX只能同源使用的限制1，CORS通信是浏览器自动完成的，不需要用户参与。CORS通信和同源的AJAX通信没有差别，代码完全一样，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以通信Acces...原创 2019-01-28 15:33:32 · 723 阅读 · 0 评论