- 博客(75)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 探索Headless组件与Tailwind CSS的魔力——前端开发的新选择
前端技术日新月异，新的框架和工具层出不穷。今天，我将与大家深入探讨两个在前端开发中备受瞩目的技术：Headless组件和Tailwind CSS。它们各自在前端领域有着独特的价值和影响力，结合起来更是能够为我们带来前所未有的开发体验。接下来，我将为大家介绍它们在实际应用场景中的表现。
2024-04-16 11:18:55
831
原创 Web Components 与 CSS沙箱
在计算机安全中，沙箱（Sandbox）是一种用于隔离正在运行程序的安全机制，通常用于执行未经测试或者不受信任的程序或代码，它会为待执行的程序创建一个独立的执行环境，内部程序的执行不会影响到外部程序的运行。由于在微前端场景下，不同的技术栈的子应用会被集成到同一个运行池中，所以我们必须在框架层确保各个子应用之间不会出现样式互相干扰的问题。Web Component 是一组浏览器标准和API，允许你创建可重用的定制元素并且在你的 web 应用中使用它们，旨在解决HTML、CSS和JavaScript的复用问题。
2023-05-16 17:34:30
1191
原创 JavaScript沙箱
在计算机安全中，沙箱（Sandbox）是一种用于隔离正在运行程序的安全机制，通常用于执行未经测试或者不受信任的程序或代码，它会为待执行的程序创建一个独立的执行环境，内部程序的执行不会影响到外部程序的运行。
2023-05-16 17:13:00
2266
2
原创 git commit message 格式规范
本文整理了 Angular 代码仓库制定的 git commit message 格式规范 在工作中，我们肯定会与git打交道。那么当你提交代码后如何让别人很快了解到你此次提交代码的改动点是哪些。此时就需要一个提交信息来描述此次提交修改的内容。没有格式的提交信息，会使提交记录杂乱无章，不能很快的定位哪些提交涉及代码修改，哪些只是配置修改等等。而好的提交信息能使提交历史更容易阅读，找到你想要的信息。这篇文章将整理 Angular 代码仓库制定的提交规范。
2020-09-29 00:17:50
1263
原创 git rebase 与 git merge 取舍
在工作中，肯定会与git打交道。其中，最常用的命令有 git add、git commit、git push、git pull、git merge。也许你会说你没有用到过git merge，但是你肯定用过git pull，这个命令其实包含了git merge。git pull是git fetch + git merge的组合。 git merge是将两个或多个开发历史连接起来。其实，还有一...
2020-04-05 20:14:08
4402
2
原创 Web 实时推送技术
1、轮询（Polling） 轮询是由客户端每隔一段时间向服务器端发起请求，查看服务器端是否产生新的数据。优点：实现简单，只需在原有代码中添加定时器即可完成。缺点：轮询时间间隔不好设计，过长过短都不好。过长，导致用户不能及时接收到更新的数据；过短，导致查询请求过多，增加服务器的负担。并且，连接数会很多，每次请求都会产生 HTTP 的 header，有效负载过低。2、长轮询（Long-Pol...
2019-03-18 20:36:00
858
原创 抽奖动画
抽奖动画 之前写过一篇 按概率抽取 文章，今天来讲讲当你拿到后端返回的中奖信息将如果以动画的形式展现给用户。1、素材选取 此处用到的图片素材是出自组里视觉大大之手，我只是将图片改了一下。在此感谢视觉大大。2、页面搭建 根据视觉大大给的视觉稿先搭建一个页面，如下：<style> html, body{ width: 100%; height: 100%; ...
2018-11-22 18:39:53
1242
原创 记录我因无知踩过的坑——Linux（持续更新ing）
记录我因无知踩过的坑——Linux（持续更新ing） 最近经常在Linux下开发，所以感觉会遇到很多意想不到的坑，特以此文来祭奠它们。1、权限不够场景一： 使用 su 命令从 root 用户切换到普通用户，可能会遇到以下报错：Error: EACCES: permission denied, scandir '/root'(node:7489) UnhandledPromiseR...
2018-11-13 22:39:50
478
原创 CentOS7 Nginx安装
CentOS7 Nginx安装该文档用于记录在CentOS 7 中，使用yum安装Nginx。1、安装Nginxyum install -y nginx注意，如果无法安装，提示无Nginx源使用以下命令安装yum源rpm -ivh http://nginx.org/packages/centos/7/noarch/RPMS/nginx-nr-agent-2.0.0-11.el7.ngx...
2018-11-11 19:15:18
362
翻译 React 中的变量存储
在React中，我们可以将数据保存在 props、state、store 或者 this 中，但是为了更好的管理数据，我们应该正确的存储数据。 本文大部分为翻译自Where to Hold React Component Data: state, store, static, and this1、props 我们先从最简单的没有争议的 props 说起。 在 React 中 ...
2018-09-14 17:26:28
6955
原创 Grunt 压缩模板语言报错处理
场景复现： 当我们在模板（如Mustache）中使用模板语言包裹标签属性后，使用 grunt-contrib-htmlmin 压缩模板时，可能会遇到 Parse Error。例如&amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;span {{#overdue}}class=&amp;amp;amp;amp;amp;amp;amp;amp;quot;overdue&amp;amp;amp;amp;amp;a
2018-09-07 16:42:38
763
原创 初识Chrome Performance
Chrome Performance工具文章网上一搜一大把，但是作为一个刚入门的前端小白，我还是觉得自己整理一下（抄的），来加深理解。 网上很多文章都是使用官网提供的DEMO了进行分析的。大概看了一下该网站用例，用例是通过修改蓝色图标的 top 值来完成动画效果。其优化是将 offsetTop 值进行了缓存，以避免频繁读取引发的回流。但是优化后，仍然是修改元素的top值来完成动画，此处还...
2018-08-22 19:10:38
5227
原创 如何在一台电脑配置GitHub和gitlab的SSH
在工作中，很多小伙伴在一台电脑上使用不止一个Git账号，例如：自己的个人的GitHub账号，公司的GitLab账号等。在代码 clone、pull、push时，如果使用HTTPS通信，那么git账号之间不会有冲突，但是每次都需要输入账号密码，较为繁琐。并且当代码库规模较大时，采用HTTPS方式，可能会出现超时不响应的情况，因此需要配置SSH。SSH在配置完SSH key后使用很方便，但同一台电...
2018-07-24 11:13:37
4342
原创 git常用命令
git是一个基于内容寻址的存储系统，其记录的是内容而不是文件。1、基本操作git status： 查看状态。![git status对状态的跟踪](https://img-blog.csdn.net/20180713203858508?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RhbmdfeWlf/font/5a6L5L2T/fon...
2018-07-13 20:42:42
1483
原创 多列布局
1、定宽+自适应<div class="parent"> <div class="left"></div> <div class="right"></div></div>左边定宽（1）float + margin float 特性：元素浮动后，
2018-07-11 21:23:40
1466
原创 CSS居中布局
1、水平居中<div class="parent"> <div class="child">DEMO</div></div>（1）inline-block + text-align text-align设置在块级元素上时，可对其内部的inline元素起作用。<style> .child
2018-07-11 20:01:38
1674
原创 定时器与代码执行次序
1、常见的定时器 setTimeOut setInterval setImmediate （Node特有）process.nextTick（Node特有）以及在代码执行次序的面试题中常出现的 Promise 对象。2、代码执行次序 首先，任务分为同步任务 和 异步任务，并且同步任务 总是早于 异步任务执行。其次，异步任务分为追加在本轮循环的异步任务 和 追加在次轮循环的异步任务。
2018-04-24 17:25:37
3129
1
原创 grunt 配置文件
1、模板 grunt 配置文件一般是gruntflie.js或者gruntfile.coffee文件。但不管是种类型，其内容都是相同的。每一个grunt配置文件都包含下面内容。module.exports = function(grunt){ // 引入外部数据 pkg: grunt.file.readJSON('package.json'), // 加载所需的插件，在
2018-03-12 11:32:43
1824
原创 UC等浏览器不显示照片
浏览器拦截关键字：guanggao、ad、advert、advertisement、advertised、commercials等等。 注意在命名的时候不要出现这关键字，否则会被屏蔽。
2018-03-09 18:38:04
1687
原创 按概率（权重）抽取（显示）
在实际应用中可能你会碰到抽奖系统，或者有个广告位让你按权重进行显示。概率性的东西，要用到随机函数Math.random()。 某物品的概率 = 自身权重/总权重，为了避免浮点数精度问题，我们将概率转化为权重进行计算，自身权重 = 某物品的概率 * 总权重。所以随机抽取的物品为Math.random()* 总权重。function roll(args){ let sum_weig
2018-03-05 10:26:57
11499
原创 使用 iframe + postMessage 实现跨域通信
在实际项目开发中可能会碰到在 a.com 页面中嵌套 b.com 页面，这时第一反应是使用 iframe，但是产品又提出在 a.com 中操作，b.com 中进行显示，或者相反。 1、postMessage postMessage方法允许来自不同源的脚本采用异步方式进行有限的通信，可以实现跨文本档、多窗口、跨域消息传递。语法： otherWindow.postMessage(m
2018-02-28 15:33:09
77295
5
原创 JS类型判断
如何检测对象类型？可能第一反应是使用 typeof。但是 typeof 真的好用吗？不见得，如 typeof null 返回的是 “object”。 还有引用类型（Function除外）也返回的是 object。除了 typeof 以外还可以使用 Object.prototype.toString.call()、constructor、 和 instanceof。1、typeofv...
2018-02-28 11:02:15
1424
原创 函数节流（throttle）与函数去抖（debounce）
频繁执行一段JS逻辑代码对性能会有很大的影响，比如监听 resize、scroll、mousemove等事件，并作出相应的DOM操作，或者逻辑中需要进行后端请求，此时会发现每移动一定像素便触发了大量的回调函数，回调函数中又伴随着DOM操作，或者后端请求，继而引发浏览器的重排与重绘，性能差的浏览器可能会直接假死。为此，需要降低触发回调的频率，而函数节流（throttle）与函数去抖（deboun...
2018-02-25 14:35:01
1496
原创 webpack3-css进阶
使用less-loader 将less 文件打包与分离，使用sass-loader将sass 文件打包与分离。CSS3中有些属性需要加前缀，若自己查询并添加前缀比较麻烦，可以使用 postcss-loader 给 常css3 属性自动添加前缀。随着项目的进展，CSS也会越来越多，有时需求更改，带来了DOM结构的更改，这是若不关注css样式，会造成css的冗余。使用 PurifyCSS 可以消除未使用的css。
2018-02-01 14:44:45
1644
原创 webpack3-图片处理
1、css中图片处理 若在css中将图片以背景的方式展示时，如：#img{ background-image: url(../imgages/img.png);}此时，需要使用file-loader， url-loader 来处理。如过未使用loader将会报错： 安装：npm install --save-dev file-loader url-loaderfile-loade
2018-02-01 13:41:26
2530
原创 webpack3-CSS 文件打包
css 打包要依赖 style-loader 和 css-loader 来解析。syle-loader 是用来处理 css 文件中的 url() 等。css-loader 是用来将 将 css 以 style 标签的形式 插入到 head 标签下，如果想将 css 单独提取出来，需要使用 extract-text-webpack-plugin 插件。
2018-01-31 18:07:37
2712
1
原创 webpack3-loader和plugin
1、loader Loader是webpack最重要的功能之一。Loader让webpack能够处理不同的文件。loader可以将所有类型的文件转换为webpack能够处理的有效模块，然后利用webpack的打包能力，对他们进行处理。本质上，webpack loader将所有类型的文件，转换为应用程序的依赖图可以直接引用的模块。 例如，loader可以将sass，less文件的写
2018-01-09 19:08:33
2114
原创 webpack3-出入口以及服务配置
入口起点指示webpack应该使用那个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack会找到哪些模块和库是入口起点（直接和间接）依赖的。出口属性告诉webpack在哪里输出它所创建的文件，以及如何命名这些文件。webpack-dev-server是webpack官方提供的一个小型的express服务器。使用它可以为webpack打包生成的资源文件提供web服务，以及自动刷新和热替换。
2018-01-05 17:06:09
2474
原创 Webpack 3 —— 了解
Webpack可以看做是模块打包机：它做的事情是，分析项目结构，找到JavaScript模块以及其他的一些浏览器不能直接运行的拓展语言（如less、sass、ts等），并将其转换和打包为合适的格式供浏览器使用。在3.0出现后，webpack还肩负起了优化项目的责任，即Webpack完成的任务有：打包：可以把多个JavaScript文件打包成一个文件，减少服务器和下载带宽。转换：把拓展语言转换成普通的JavaScrip
2018-01-05 12:18:42
1825
原创 Mustache 模板引擎
Mustache 是一款经典的前端模板引擎，在前后端分离的技术架构下面，前端模板引擎是一种可以被考虑的技术选型，随着重型框架（AngularJS、ReactJS、Vue）的流行，前端的模板技术已经成为了某种形式上的标配，Mustache 的价值在于其稳定和经典
2017-11-22 11:22:29
7034
4
原创 AMD define函数
AMD，全称 Asynchronous Module Definition，即异步模块加载机制。AMD 规范非常简单只有一个API，即 define 函数: define([module-name?],[array-of-dependencies?],[module-factory-or-object]); 其中，module-name:模块标识，可以省略;array-of-dependencies:所依赖的模块数组
2017-11-21 23:13:47
6942
原创 HTTP首部字段
1、分类HTTP首部字段根据实际用途被分为 4 钟类型：通用字段：请求报文和响应报文两方都会使用的首部。请求首部字段：从客户端向服务器端发送请求报文时使用的首部。补充了请求的附加内容、客户信息、响应内容相关优先级等消息。响应首部字段：从服务器向客户端返回响应报文时使用的首部。补充了响应的附加内容，也会要求客户端附加额外的内容信息。实体首部字段：针对请求报文和响应报文的实体部分使用的首部。补充了资源内容更新时间等于实体
2017-11-13 19:11:51
1696
原创 React 轮播图
本文使用 React 实现轮播图组件。在该轮播图中，将使用到三个组件：ImgSlides 轮播图的顶层组件，用于状态控制；ImgFigure 图片组件，用于接收顶层传来的状态，并显示相应的图片；ControllerUnit 控制组件，用于控制图片的显示。
2017-11-06 20:32:04
6815
4
原创 Position 详解
Position 属性规定元素的定位类型，其可用属性为：absolute：生成绝对定位的元素，相对于 static 定位以外的第一个 父元素进行定位。fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。relative：生成相对定位的元素，相对于其正常位置进行定位。static：默认值。没有定位，元素出现在正常流中。inherit：规定应该从父元素继承 position 属性的值。
2017-10-31 15:42:14
2164
原创 Ubuntu14.04 安装 Android环境
命令：cordova platform add android // 安装 Android 平台 cordova requirements android // 检测依赖包环境Android 环境安装： 从 AndroidDevTools 下载 Android SDK 。 从gradle v2.14.1 下载 gradle 2.14。 从JDK 1.8 下载 JDK 1.8
2017-10-14 09:40:29
1551
原创 ionic 面包屑导航
1、bread-crumb.ts文件 在 ionic 中 NavController 是导航控制组件的基础类，在面包屑导航中将使用该对象实例的 length()、remove(startIndex, removeCount, opts)、push(page, params, opts)方法：length(): 返回该导航控制器的视图数量。remove(startIndex, removeCoun
2017-10-11 16:28:27
2230
原创 ionic 后退确认
Ionic 导航栏返回确认设置： （1）使用重写 backButtonClick 函数，该函数在点击导航栏返回键时执行第一步： 导入 Navbar、 AlertController等对象、以及 ViewChild 指令import { Component , ViewChild} from '@angular/core';import { ActionSheetController, Aler
2017-09-25 22:49:35
1814
原创 Angular2
2016年9月15号，Angular2 正式版本发布。Angular2 不向下兼容 AngularJS。 Angular2 新特性：移除了 controller + $scope 设计，改用组件式开发（容易上手）；性能更好（渲染更快，变化监测效率更高）；优先为移动应用设计（Angular Mobile Toolkit 套件）；更加贴合未来的标准（如 ES6/7、 WebComponent）UpgradeAdapte使
2017-09-21 22:30:57
1984
原创 node npm 版本
升级 npm ：npm install -g npm node 版本管理： nvm node 版本查看： nvm ls node 版本安装： nvm install <version> node 版本切换： nvm use <version> node 版本删除： nvm rm <version>
2017-09-21 16:16:48
1614
原创 npm配置淘宝源
node-sass 安装失败，配置淘宝源 npm config set sass_binary_site=https://npm.taobao.org/mirrors/node-sass/ npm config set phantomjs_cdnurl=https://npm.taobao.org/mirrors/phantomjs/ npm config set
2017-09-21 16:15:55
1959
空空如也
java实现对pc机无线网络的管理
2015-10-14
TA创建的收藏夹 TA关注的收藏夹
TA关注的人