- 博客(93)
- 收藏
- 关注
RSS订阅原创 工程化第一步这个package.json要真的搞明白才行
工程化最开始就是package.json开始的，很多人学了很多年也没搞清楚这个为什么这么神奇，其实有些字段是在特定场景才有效的，那每个属性的适用场景和作用是什么，又牵扯很多知识点，今天先解读一些常见的属性，，后期在遇到特定场景也会再逐步的补充这些属性，只有真正清楚知道每个自动的属性和场景你才能真正使用它得心应手，也才能真正掌握并帮助你解决你的问题。链接：https://juejin.cn/post/7315606159742058530。2.license 如何配置。
2023-12-24 13:20:06
472
原创 工程化版本号怎么能不清楚呢
我们为什么要学习版本号呢？4. 如何规范合理的发布自己的npm包。不了解它又怎么能解决它导致的错误呢？1. 如何在npm 包中去锁定版本。5. 什么时先行版本号什么时主版本号。3. 如何解决笔记版本号的大小关系。2. 如何做自动化版本号管理。
2023-12-20 18:39:28
447
原创 SCSS Module 这样处理配置和使用太赞了
CSS Module 只是Scss和Css Module结合，可以利用SCSS对代码静态处理的能力，用它来做样式隔离其实是很榜的，可以从它强大的配置和灵活的使用上来讲述一下
2023-12-09 15:28:19
911
原创 React和Preact 这样处理className更优雅
来辅助开发，可以更方便的处理className的问题，下面就介绍一下如何使用他们，来达到更高效便捷的开发。1. 像Vue的:class 指令一样，不需要模板字符串。3.不需要外部在依赖clsx库，在ES中可以使用。2.不需要再头部引入react和preact。
2023-12-09 09:38:27
611
原创 被忽略的Button组件隐藏了这么多
Button 组件基本每个应用都会用到，平时我们写的可能并不能算一个真正的button，如何写好一个button也是最基本，那如何来设计一个Button组件，针对不同的业务场景如何设计出符合设计的button,也是每个开发者必备的技能，下面就具体开始一个Button组件的开发。1. 如果对原生button进行改造，哪些属性是必要的。3.如何使用button，div，a标签实现按钮。4.如何实现button的交互功能。
2023-12-09 09:32:53
454
原创 Vite CSS Module 优雅的处理样式隔离
今天介绍的是我写的一个vite插件vite-plugin-oneof-css-module，该插件主要处理scss module，那它适用于什么场景呢？2. 可以根据不同的文件夹或文件分别进行不同的处理，比如 组件 .c-[local],模板.t-[local]等。1. 最大的特点就是使用scss module 可以不用写 .module.scss 了。4. 在大型项目中做样式隔离。如何使用详情可参考我的文章。3.在微服务中，做样式隔离。
2023-11-25 23:02:36
1652
原创 Antd Select 设置偏移量
添加 dropdownAlign={{ offset: [0, 30] }} 这个属性，可以设置偏移量。可以查看我在掘金的这篇文章，很详细的讲解了global和local的使用。那如何使用css module 去覆盖Select的样式呢？对于Select 组件我要想实现如下效果，该如何处理呢？index.scss 简单的讲解一下如何去覆盖这些样式。这样我们就可以很完美的定制自己喜欢的Select了。并没有相关的属性API,如何去处理这个呢？我们查看你select组件。
2023-02-24 13:21:50
768
原创 CSS Module 作用域
正常使用CSSModule可以防止样式被覆盖可以很好做样式隔离，但通常我们通用模块的组件的class或是第三方组件class不一定能满足我们的使用，需要进行样式覆盖，下面就介绍了利用CSSModule的作用域，那如何更优雅的覆盖样式，避免全局污染呢？css的规则是全局的，按理说是没有作用域这个概念的，任何一个样式的规则对全局都是有效的，而要想产生局部的作用域，唯一的方法就是使用一个独一无二的名字，不与其它的选择器重名，这个便是CSSModule的做法。或是下面的写法，这种写法适用于单个或比较少的情况。
2023-02-24 13:00:47
556
原创 Preact 在TSX中优雅使用className
# 背景简介vue的class处理很方便，React中className中JSX却没有去很好的处理class，之后便出来了react-auto-classnames 可以像vue一样去写class，这样就大大提高了开发的效率，随着preact中不断的广泛应用，便编写了preact插件来自动取处理className。即preact-auto-clsx
2022-10-02 11:46:01
911
原创 vite 更好的处理 css module的插件
一个react的项目，如果使用css module 则需要.module.xx ，这样很不美观，而且繁琐，如果能类似webpack中的oneOf那使用起来就方便灵活了，那如何实现呢？但是vite官方的配置是只能处理.module.xx的文件，这个对于我们全部使用css module 来说是有点不够用的了，那于是我便写了这个插件，来满足项目的需要。这个是vite处理css的插件，其实官方内置的是有的，如下代码所示，我们可以看到这个是使用postcss-modules插件来处理的，配置也是一样的。
2022-09-24 15:10:15
2684
原创 apply 和 call
apply 和 call定义: apply和call更改对象的内部指针,即改变对象的this指向的内容其本质就是将特定函数当做一个方法绑定到指定对象上并进行调用举个例子说明下就理解了:fun.apply(obj)其实就是将fun函数的地址赋值给obj的一个属性,此时fun函数内的this就指向了obj,(obj成了fun函数的所有者)我们就可以通过obj调用fun函数了 console....
2019-10-15 16:29:08
204
原创 this的研究
研究 this定义: 总是指向函数的所有者看完还是很懵逼,首先我们要搞懂什么是调用者什么是所有者,如下例子:调用者:把函数a赋值给变量c那变量域 c 就是函数a的调用者,此时的变量c存放的是a的地址同理d的x属性域也存放a函数的地址,它也是函数a的调用者.所有者:因为c 是属于全局对象window 所有,所以window对象就是函数a的所有者同理,x属于对象d所有,所以对象d也...
2019-10-15 15:39:26
166
原创 js类型
js 检测数据类型常用的方法：typeof() 返回某个字符串undefinedbooleanstringnumberobjectfunctionconstructor 判断对象的类型[].constructor==Array/123/.constructor==RegExpinstanceof 只能用来判断两个对象是否属于实例关系， 而不能判断一个对象实例具体属于哪...
2019-05-04 16:47:56
202
原创 Http协议知识点一
http的状态码：2xx：表明请求被正常处理200 客户端发送的请求在服务端被正常处理204 服务器接收的请求已经处理成功，但没有资源可返回206 客户端进行了范围请求，响应报文包含由Content-Range指定范围的实体内容（即对资源某部分的请求）3xx:重定向301 永久重定向，请求资源已被分配新的URI，以后应使用资源现在所指的URI302 临时性重...
2019-05-04 00:05:16
183
原创 鼠标定位第一章:获取鼠标在页面中的位置
兼容性写法:效果:代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>鼠标</title> <style> *{ margin: 0; ...
2019-04-16 14:37:47
1485
原创 vue类似jquery slide的效果的一个指令
案例：https://github.com/zshsats/vueFile定义指令 directives: { slide: { inserted:function(el,binding){ if(binding.value){ let height...
2019-03-27 00:20:21
877
原创 webapck4+vue搭建的小型简单架构
webpack4的一些常用配置，只做了解学习使用适用于单页面，以Vue为例讲解github：https://github.com/zshsats/vueFile使用webpack4+vue搭建的前台项目，并实现了两个小组件和栅格布局配置包括，异步加载，打包对字体，图片的处理，剔除无用的css，压缩，复制到静态文件，.vue的解析，es6->es5配置等喜欢的可以给个start...
2019-03-27 00:08:12
301
原创 常用的兼容浏览器的函数封装
/* * ev:具体元素 * styleName:获取元素的属性名 * */ function getStyle(ev,styleName) { if(ev.style[styleName]){ return ev.style[styleName]; }else if(ev.currentStyle){ ...
2019-03-15 09:39:53
460
原创 静态radio
静态的,没有添加js效果,可以封装<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>单选框</title> <link rel="stylesheet"
2019-03-14 21:28:46
235
原创 原生JS简单的实现单页面Hash路由
(function(global) { function Router(){ this.before = null; //切换前 this.after = null; // 切换后 this.routes=[]; this.redirectRoute=""; ...
2019-03-14 21:17:13
1123
1
原创 使用Vue实现手风琴菜单效果
使用vue的指令个事件冒泡委托给一个事件处理使用 <vertical-menu :menuList="dataList" :initIndex="0" @fold-body="foldHandle" @go-state="goWhere"></vertical-menu> data() { return { is
2019-03-14 21:14:49
7631
1
原创 axios在Vue中的使用
二次封装axiosimport axios from 'axios';const ajax = axios.create({ baseURL: 'http://localhost:1888/', timeout: 3000,});axios.defaults.withCredentials=true;ajax.interceptors.request.use( ...
2019-03-14 20:59:02
210
原创 原生JS编写简单的编辑器
使用vue编写的,没有任何依赖,可改写其它形式轻量级编辑器只是在document.execCommand()方法做了包装,不兼容的浏览器器生成的标签是一致的,所以的富文本的选择要根据项目决定实现了一点功能,写了个dome,加深对富文本原理的理解template<div class="page-editor"> <div class="editor-wrapper...
2019-03-14 20:50:27
1844
原创 JS数组
/** 修改原数组的方法** pop() 删除数组的最后一个元素* push() 在数组的尾部添加元素* reverse() 颠倒数组中元素的位置* shift() 删除数组中的第一个元素* sort() 将数组中的元素排序* splice() 将数组中插入,删除或替换元素* unshift() 在数组的头部添加元素** 不修改原数组的方法** concat() 在...
2019-03-12 12:32:25
158
原创 js 类型判断
类型判断typeof(type);原生'undefined'*'boolean' 'string' 'number''object' 'function'自定义类型判断函数function typeOf(obj) { var typeList = { '[object Boolean]' : 'boolean', ...
2019-03-08 17:09:38
1892
原创 用CSS画三角形
第一步:原理:利用css盒子模型的border .theory{ padding: 30px; border-top: 50px solid red; border-bottom: 50px solid blue; border-left: 50px solid green ; ...
2018-12-26 17:06:01
193
原创 iview 中如何按需加载Moda
iview文档:https://www.iviewui.com/components/modal第一步使用modal组件,如何在我需要的时候在加载内容?初始值:isShow=false使用v-if指令 <div v-if="isShow"> <Modal v-model="addUser" title="创建用户" > &...
2018-12-05 17:19:22
1460
原创 css中如何使图标的旋转
css中如何使图标的旋转例如：使用的是阿里的icon <i class="iconfont icon-xiangshangjiantou icon-select"></i>//icon-xiangshangjiantou 向上的箭头实现其旋转向下：使用css3的transform属性旋转180度如下，是无效的：.icon-select{ trans...
2018-10-21 15:01:33
15418
2
原创 javascript观察者模式
javascript观察者模式观察者模式又称“发布-订阅（Publish/Subscribe）模式”，订阅者也称为观察者，而补观察的对象称为发布者或主题。当发生了一个重要的事件时，发布者将会通知（调用）所有订阅者并且可能经常以事件对象的形式传递消息。例如:(只做简单的说明观察者模式)几个程序员小朋友要从某网站订阅相关书籍,js编程全解这本书但现在没货,等有货再通知他们,去购买,其中王五同...
2018-10-10 11:02:10
579
原创 javascript组合模式
javascript 组合模式需求:一个学校有两个班级，每个班级有两个组，小组分着上课，一起考试不使用组合模式: /* * 需求 ， * 一个学校有两个班级，每个班级有两个组，小组分着上课，一起考试 * *不使用组合模式 * */ var school = function (name...
2018-10-09 11:59:27
479
原创 javascript 享元模式
javascript 享元模式享元模式（Flyweight Pattern）主要用于减少创建对象的数量，以减少内存占用和提高性能。这种类型的设计模式属于结构型模式，它提供了减少对象数量从而改善应用所需的对象结构的方式。例如:需求 : 在开学季,家里蹲大学,有大量的同学需要入学登记方式1: 不使用享元模式 var student = function (school,professio...
2018-10-09 11:57:15
585
原创 javascript 代理模式
javascript 代理模式通过图来讲解什么是惰性代理(第二个案例)普通代理模式(用处不大,基本不用,主要做案例说明代理模式是什么) /* * 普通代理模式 * */ //图书类 var Book = function (bid,bName,bPrice) { this.bid = bid; ...
2018-10-09 11:47:26
339
原创 javascript 适配器模式
javascript 适配器模式适配器模式：将一个类的接口转换成客户希望的另一个接口。适配器模式让那些接口不兼容的类可以一起工作例如, 我以前做了个api库,其中有个add函数,之前传递两个参数,先在呢,我想传递三个参数,但我依然想兼容以前的api库接口请参考前面文章 /* * 适配器模式 * */ //以前的api 库 var fun = new Interfa...
2018-10-09 11:42:01
216
原创 javascript装饰者模式
javascript装饰者模式装饰者模式，动态地将责任附加到对象上。若要扩展功能，装饰者提供了比继承更加有弹性的替代方案。实例讲解:刚出售的一栋楼有100套清水房现有 冰箱，床，空调，根据每套房主人的需要来决定是否安装，或是安装几个 /* * 刚出售的一栋楼有100套清水房 * * 现有 冰箱，床，空调，根据每套房主人的需要来决定是否...
2018-10-09 11:36:00
238
原创 javascript 简单工厂
简单工厂简单工厂模式(Simple Factory Pattern)：又称为静态工厂方法(Static Factory Method)模式，它属于类创建型模式。在简单工厂模式中，可以根据参数的不同返回不同类的实例。简单工厂模式专门定义一个类来负责创建其他类的实例，被创建的实例通常都具有共同的父类。例如:自行车商店 ,客户要求不同的类型(编号)的车,返回不同自行车的实例 //定义一个接...
2018-10-09 11:13:29
384
原创 理解javscript 桥接模式
理解javascript 桥接模式桥接模式是指：将抽象和行为划分开来，从而将各个可能变化的维度分离开来，各自独立成一个类，但是能够动态的组合。举个例子：实现每个角色的功能（简单说明，不做实际使用）人 分为学生和老师两个角色，每个角色都有吃，跑，玩等功能类，如果实现每个角色有哪些功能常规的做法：为了简单说明问题，使用ES6来说明这个问题： var role = function()...
2018-10-05 14:25:35
242
原创 深入理解javascript 对象原型和构造函数
深入理解javascript 对象原型和构造函数对象的创建过程当你使用new操作符调用F构造函数时，会经历以下步骤：1.创建一个空对象，作为将要返回的实例对象2.将空对象的原型指向构造函数的prototype属性，也就是F构造函数的prototype属性。3.将空对象赋值给构造函数内部的this关键字，也就是this关键字会指向实例对象。4.开始执行构造函数内部的代码。var st...
2018-10-03 16:29:11
292
原创 javascript 链式调用
javascript 链式调用简单的链式调用 function person() { this.run = function () { console.log("跑了"); return this; }; this.eat = function () ...
2018-09-29 14:17:43
1998
原创 javascript 单体模式
javascript 单体模式单体:来划分命名空间将一批相关的方法和属性组织在一起的对象只能被实例化一次.单体分为四种:普通单体var person = { name:"普通单体", getName:function () { return this.name; } ...
2018-09-29 09:42:44
256
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人