- 博客(39)
- 收藏
- 关注
RSS订阅原创 借用shell，快速搭建一个npm插件库
如果你需要详细的构建流程请参考：发布一个 npm 包，构建自己的第三方库。另外，本人把这篇文章的内容升级到了github，你可以看这里：npm-plugins-building-shell创建一个文件 building-npm-plugins.sh，内容如下：#!/usr/bin/env bash# 加载echo "-------\033[36mloading\033[0m-------"# npm 是否存在判断npm -v 2>/dev/null 1>/dev/null #.
2021-06-18 19:31:38
395
原创 发布一个 npm 包，构建自己的第三方库
发布一个npm包，构建自己的第三方库前言小生在需要发布自己npm包时，见网上诸多教程，皆无法满足所思需求；不是太简单，就是缺三少四，故前往各大厂商之GitHub，耐心翻阅其源码，始有心得；特此做博客以记，与诸君共勉。如果你需要进行快速搭建自己的第三方库，请移步:npm-plugins-building-shell 或者 借用shell，快速搭建一个npm插件库。申请一个npm 账号 以及创建好相关 github 项目前往申请 npm 账号： https://www.npmjs.com/此处本
2021-06-18 10:36:05
931
原创 如何配置 babel
在此之前你需要首先了解一下什么是babel，以及babel的使用指南;如果你需要其他babel的版本，还请参考[https://babel.docschina.org/versions]。babel 英文babel 中文babel7 中文配置 BabelBabel是可以配置！许多其他工具具有类似的配置：ESLint (.eslintrc), Prettier (.prettierrc)。允许使用所有Babel API选项。然而，如果该选项需要JavaScript，您可能需要使用Javascr
2021-06-18 09:29:17
310
原创 拜读Preact源码有感
jsx本质JSX是一种嵌入式的类似XML的语法,它可以被转换成合法的JavaScript,转换的语义是依据不同的实现而定的。例如react有react的jsx语法和转换器babel-plugin-transform-react-jsx ,vue有vue的jsx语法和转换器babel-plugin-transform-vue-jsx,当然，这也意味你可以开发自己的jsx语法和转换器jsxreact本质babel-plugin-transform-react-jsxreact通过babel-plugin
2021-06-17 15:27:56
151
原创 [译]不要把React中的受控和非受控的form表单输入搞复杂
原文地址:Controlled and uncontrolled form inputs in React don’t have to be complicatedreact的form受控和非受控话题You may have seen many articles saying **“you shouldn’t use setState,”**and the docs are claiming “refs are bad”… That is so contradicto.
2021-06-17 15:26:22
235
原创 react入门-React + webpack 开发单页面应用（react快速上手教程）
2018.09.26终—2019.11.10更—注意：在现今前端的日常开发中需要nodejs+npm环境和基本的计算机知识（如命令行）。详情参考：nodejs 和 Linux命令大全。不知道的请先去学会，不然下面的内容有可能不适合你。会使用shell的高手，请直接去博文最低下的附件3。一、创建项目、安装基本第三方库以及配置所需目录1.1 创建项目sudo npm i -g create-react-app # npm下安装react环境create-react-app react-demo #.
2021-06-17 15:22:07
890
2
原创 前端的图片压缩image-compressor（可在图片上传前实现图片压缩）
image-compressor一个简单的JavaScript图像压缩器。使用浏览器的原生canvas.toBlob API做的压缩工作。一般使用此压缩是在客户端图像文件上传之前。实例模板：Websitegithub：image-compressorGetting started(新手入门)Install(npm 安装)npm install image-compressor.js // 注意是image-compressor.js 不是 image-compressor那是另一个包Usag
2021-06-17 15:16:53
1324
1
原创 rxjs学习入门心得(三)Subscription订阅
推荐我的Rxjs教程：Rxjs系列教程目录Subscription订阅什么是 Subscription(订阅) ？ - Subscription(订阅) 是表示可清理资源的对象，通常是 Observable(可观察对象) 的执行。Subscription 有一个重要的方法，即 unsubscribe，它不需要任何参数，只是用来清理由 Subscription 占用的资源。在以往版本的 RxJS 中，Subscription 叫做 “Disposable” (可清理对象)。var observable
2021-06-17 15:09:51
914
1
原创 判断对象是否为空对象 js
判断一个对象是否为空对象，本文给出三种判断方法：最常见的思路，for…in…遍历属性，为真则为“非空数组”；否则为“空数组”for (var i in obj) { // 如果不为空，则会执行到这一步，返回true return true}return false // 如果为空,返回false2.通过JSON自带的stringify()方法来判断:JSON.stringify() 方法用于将 JavaScript 值转换为 JSON 字符串。if (JSON.stringify(.
2021-06-17 15:07:27
142
原创 js获取图片实际大小的宽高
简陋的获取图片实际宽高的方式// 图片地址var img_url = ‘13643608813441.jpg'// 创建对象var img = new Image()// 改变图片的srcimg.src = img_url// 打印alert('width:'+img.width+',height:'+img.height);结果如下：宽高都是0的这个结果很正常，因为图片的相关数据都没有被加载前它的宽高默认就是0，我们需要它加载完所有的相关数据再获取宽和高。onload加载所
2021-06-17 15:06:13
620
原创 基于nodejs的Express框架以及GraphQL的JavaScript实现构建一个简单的GraphQL服务器
GraphQL是什么？GraphQL 是Facebook开发的一个应用层查询语言. 后端定义基于图的模式. 客户端可以按需查询需要的数据。GraphQL也并不是一个具体的后端编程框架，如果将REST看做适合于简单逻辑的查询标准，那么GraphQL可以做一个独立的抽象层，通过对于多个REST风格的简单的接口的排列组合提供更多复杂多变的查询方式。与REST相比，GraphQL定义了更严格、可扩展、可维护的数据查询方式。这个图展示的是查询流程，查询流程分为几个步骤, 涉及多个组件, 包括客户端应用程序(We
2021-06-17 14:56:35
499
原创 简单构建一个 jQuery 插件---extend
当我们写了一段有价值的 jQuery 代码的时候，是很希望能够封装成一个 jQuery 插件的。可是该怎么封装呢？这里给出框架的结构/******************************************************************* * @authors yanmo * @web https://blog.csdn.net/nongshuqiner * @email ym1185509297@163.com * @date 2015年9月4日 * @vers
2021-06-17 13:55:28
85
原创 vue成长之路+实战+Vue2+VueRouter2+webpack（一）vue-router路由入门
推荐我的vue教程：VUE系列教程目录前言通过前面我写的VUE入门博客，相信已经大概了解VUE是何物，但是对于细节性的问题我们还是有些忽略，有很多网友希望我能继续写相关博客，但是由于工作繁忙原因一直无空去写，终于得空于是协知识归来。2017年一定是VUE火热的一年，引得无数人飞蛾扑火，对于前端大神来说轻松入手，对于刚刚接触这一行的同学来说，vue的官方文档还是太过与欠缺信息，如此我决定带你们去踩坑。
2017-12-13 15:16:45
478
原创 css 的规律摸索之路（三）文本省略问题
前言在css的使用中，我们经常性的需要对溢出文本进行处理，在实际的项目中，由于文字内容的长度不确定性和页面布局的固定性，难免会出现文字内容超过div（或其他标签，下同）区域的情况，此时比较好的做法就是当文字超过限定的div宽度后自动以省略号（…）显示，这样，按照习惯，人们都会知道这儿有文字被省略了。在css中有个属性叫做text-overflow:ellipsis;配合其他一些属性可以实现IE,ch
2017-12-13 15:15:07
379
原创 webp图片格式前端兼容与显示处理以及其图片原始数据的获取
前言不管是 PC 还是移动端，图片一直是流量大头，以苹果公司 Retina 产品为代表的高 PPI 屏对图片的质量提出了更高的要求，如何保证在图片的精细度不降低的前提下缩小图片体积，成为了一个有价值且值得探索的事情。但如今对于 JPEG、PNG 和 GIF 这些图片格式的优化几乎已经达到了极致， 若想改变现状开辟新局面，便要有釜底抽薪的胆量和气魄，而 Google 给了我们一个新选择：WebP。对
2017-12-13 15:13:34
7447
原创 javascript依赖注入详解
本文作者：言墨儿 原文出处：简书，csdn 未经同意，禁止转载本人在研究前端自动化时，开始深入学习设计模式，由此引发了对依赖注入的学习，站在巨人的肩膀上参考了很多文章，在这里对这些作者表示敬仰，并赋予相关博客链接。 前端需要知道的 依赖注入(Dependency Injection, DI)-IMWeb 黎清龙 JavaScript里的依赖注入 ralph_zhu-细数Javasc
2017-12-13 15:09:40
9511
2
原创 如何在webpack中获取git版本和当前脚本的工作目录
前言前一阵子因为vue部署不上去错误没有解决，一直找不到原因，后来一看部署的git版本有问题，于是决定在页面中显示git版本。 要显示git版本，首先要知道它存在什么地方？这就导致我们需要知道git的目录中的信息，知道了信息我们怎么把它拿出来这也是个问题？。准备工作.git目录与git了解当你创建一个仓库的时候，使用 git init 指令， git 将会创建一个神奇的目录：.git。这个目录下包
2017-12-13 15:06:28
2623
原创 客户端接收服务端消息推送sockjs-client的使用
前言在项目开发中我们经常遇到后端向前端进行消息推送，我们前端需要接收这些推送消息，并显示出来。这里接收推送消息我们需要使用sockjs的固定存储库:sockjs-client。这里讲解客户端如何使用sockjs-client接收消息推送。什么是SockJSSockJS是一个JavaScript库，提供跨浏览器JavaScript的API，创建了一个低延迟、全双工的浏览器和web服务器之间通信通道。
2017-12-13 15:03:46
7295
2
原创 web前端常用js小段代码
判断是否为闰年代码：function isLeapYear () { // 判断是否为闰年 // 闰年能被4整除且不能被100整除，或能被400整除 return (this.getYear() % 4 === 0 && ((this.getYear() % 100 !== 0) || (this.getYear() % 400 === 0)))}判断语言代码：function i
2017-12-13 15:00:25
1003
原创 rxjs学习入门心得(二)观察者
推荐我的Rxjs教程：Rxjs系列教程目录Observer (观察者)什么是观察者？-前面的博客我们讲了Observable可观察对象，里面我们讲了一个上自习放风的案例，其实那些同学们就是观察者。 观察者是 可观察对象(Observable) 所发送数据的消费者。观察者只是一组回调函数的集合，每个回调函数对应一种 Observable 发送的通知类型：next、error 和 complete
2017-12-13 14:52:44
311
原创 rxjs学习入门心得(一)Observable可观察对象
推荐我的Rxjs教程：Rxjs系列教程目录前言随着开发中项目的越来越大，代码的要求越来越高，于是开始四处搜找各种js库进行学习。为了学习代码行为模式，例如：竞争等等。在技术总监的指引下找到Rxjs进行学习，再次表以感谢。在看教程时，有很多地方不解，于是用博客做以记录，并将自己的经验以尽可能简单的方式分享给大家。这里简单解释一下Rxjs，RxJS 是一个js库，它通过使用 observable 序列来
2017-12-13 14:49:29
4950
3
原创 css 的规律摸索之路（二）css之居中问题（垂直居中与水平居中）
通过上篇css 的规律摸索之路（一）css之三角形的规律及变化，我们已经知道css三角形是怎么回事，现在我们来看看另外一个，常见的应用：css之居中问题（垂直居中与水平居中）垂直居中单行文本垂直居中首先，说说最简单的常见居中方式-单行文本垂直居中：<div class="single_line_text_box"> <div class="single_line_text">单行文本垂直居中
2017-05-18 21:25:26
390
原创 css 的规律摸索之路（一）css之三角形的规律及变化
css的变幻简直无穷无尽，css的探索持续近二十年，到现在基本算是功能丰富多彩，其没有逻辑性的编程思维，令我们抓耳挠腮，只有时间积累的经验与摸索，才能窥的它浅薄的面纱，如此才算是入门而已。有人问我：css和html到底是什么？算编程语言吗？我的回答是：是也不是，html可以被任何语言强奸然后生出来一个乖戾怪样的，比如jsp(java强奸了html)，PHP+html等等等，css呢？就连居中这个常用
2017-05-18 20:56:45
319
原创 vue成长之路+实战+Vue2+VueRouter2+webpack（二）vue组件入门第一节
前言通过前面我写的VUE入门博客，相信已经大概了解VUE是何物，但是对于细节性的问题我们还是有些忽略，有很多网友希望我能继续写相关博客，但是由于工作繁忙原因一直无空去写，终于得空于是协知识归来。2017年一定是VUE火热的一年，引得无数人飞蛾扑火，对于前端大神来说轻松入手，对于刚刚接触这一行的同学来说，vue的官方文档还是太过与欠缺信息，如此我决定带你们去踩坑。对稍微了解VUE的人来说，我们都知道V
2017-05-18 20:47:59
516
原创 web前端-在迷惘中的探索HTML5（四）HTML5之拖动
html5出现了很多比较好的应用，今天我们来讲讲关于元素拖动的。前言关于拖动，我们应该理解什么是拖动源和放置目标？这里上图说明：在html5拖放出来之前，有过一种原始自己定义来实现类似拖动的效果： 1. 为拖动源注册鼠标点击事件 2. 为拖动源注册鼠标移动事件，判断是否先点击过拖动源，如点击过则元素通过绝对定位并跟随鼠标移动。 3. 经过放置目标后将拖动源对象加载到放置目标的子节点下这种原始拖
2017-03-22 17:29:30
455
原创 web前端-在迷惘中的探索HTML5（三）文件操作FileReader
简介在HTML5中，文件选择标签file增加了如下两个属性： - multiple：设定当前元素可以选取多个文件。 - accept：设定当前选择器可以选择的MIME类型或后缀名。<input type="file" multiple name="" id="myfilePhoto" value="" accept="image/jpg, image/png">于此同时，其出现了FileRead
2017-03-22 17:26:15
9037
4
原创 VUE系列---VUE+indexDB+JSZip+在线预览zip压缩文件(三)
通过前两篇文章我们的项目已经做出来了文件预览的初始效果，不知道你们看了以后会有什么想法，这篇文章开始着重讲解文件系统的构建。####前言前面我们已经得到文件树对象了，现在我们所要做的就是页面的功能实现，我们读取并在indexDB数据库里存储了文件信息，为了解决直接渲染文件信息到页面上，浏览器崩溃的问题，我们没有直接进行读取，而是采用创建目录，进去了以后在打开某一个具体的文件时，读取这个具体文件这一个
2017-03-22 17:20:19
1371
1
原创 VUE系列---VUE+indexDB+JSZip+在线预览zip压缩文件(二)
温馨连接提示：vue中级之路篇系列教程： VUE系列—VUE+indexDB+JSZip+在线预览zip压缩文件(一) VUE系列—VUE+indexDB+JSZip+在线预览zip压缩文件(二) VUE系列—VUE+indexDB+JSZip+在线预览zip压缩文件(三)通过上一篇文章我们的项目架构基本就出来了，让大家去看看关于JSZip，以及store.js的知识，因为store比较
2017-03-22 17:18:06
3033
原创 VUE系列---VUE+indexDB+JSZip+在线预览zip压缩文件(一)
温馨连接提示：vue入门之路篇系列教程： vue最简单的入门教程+实战+Vue2+VueRouter2+webpack（一） vue最简单的入门教程+实战+Vue2+VueRouter2+webpack（二） vue最简单的入门教程+实战+Vue2+VueRouter2+webpack（三） vue最简单的入门教程+实战+Vue2+VueRouter2+webpack（四） vu
2017-03-22 17:14:46
5577
原创 git+github的使用-最简单的入门教程
团队开发离不开版本控制器，而现今最好用的免费版本控制就是git，这里教会大家使用git，献上一个干货前言自从git这个版本控制器问世以后，它便代替SVN成为最好用的免费控制器，会不会使用它关系着每个开发者的开发便利与否的问题，这么说：如果你不会用git===你不会团队开发，而GitHub 是一个面向开源及私有软件项目的托管平台，因为只支持 Git 作为唯一的版本库格式进行托管，故名 GitHub，
2017-02-28 12:55:51
621
原创 web前端-在迷惘中的探索HTML5（二）本地存储之IndexDB
今天原本打算继续出VUE系列的教程，结果由于今天被要求从数据库请求一个压缩文件，然后放置在页面上在线浏览，我就去查相关的关于HTML5的indexDB本地数据库存储，结果网上的教程一个比一个烂我愣是看了3个小时竟然没看懂（靠，老子还学过不过忘了而已），一气之下，妈的指望别人不如靠自己。于是史上最简单的indexDB教程就要问世了前言吹完牛逼就该拿出真本事，众所周知，HTML5出现了本地存储系列套餐
2017-02-28 12:46:46
1524
1
原创 vue最简单的入门教程+实战+Vue2+VueRouter2+webpack（五）
前言通过前面几章的实战，我们已经顺利的构建项目，并且从API接口获取到数据并且渲染出来了。制作更多的页面，更复杂的应用，就是各位自己根据自己的项目去调整的事情了。在vue中，我们使用vue-router来进行路由的构建，如果想学习可以去看：vue-router文档很简单但是不上实战你永远不知道它写的什么，是什么意思？本章就讲一下如何配置子路由，因为我们的项目不可能只有一个页面，而是由众多页面构成的。
2017-02-28 12:35:28
2152
原创 vue最简单的入门教程+实战+Vue2+VueRouter2+webpack（四）
前言通过前面几篇教程，我们已经顺利搭建起来了项目，并且已经组建好路由了，安装了我们需要的sass的模板。本章节，我们需要做一个列表页面，为了方便起见，决定使用获取 http://cnodejs.org/api 的公开API，渲染出来。nodejs的公开API解读进入我放置的连接后，看到的如图：我们决定采用主题首页，其实我们在刚进入这个页面时会有不知道这是什么意思的疑问，比如这里写以下 api 路径均
2017-02-28 12:32:00
2662
5
原创 vue最简单的入门教程+实战+Vue2+VueRouter2+webpack（三）
vue入门之路篇系列教程： vue最简单的入门教程+实战+Vue2+VueRouter2+webpack（一） vue最简单的入门教程+实战+Vue2+VueRouter2+webpack（二） vue最简单的入门教程+实战+Vue2+VueRouter2+webpack（三） vue最简单的入门教程+实战+Vue2+VueRouter2+webpack（四） vue最简单的入门
2017-02-28 12:22:05
3859
1
原创 vue最简单的入门教程+实战+Vue2+VueRouter2+webpack（二）
通过上一篇文章vue最简单的入门教程+实战+Vue2+VueRouter2+webpack（一），我们已经新建好了一个基于vue+webpack的项目。本篇文章将详细的帮助大家对这个项目的结构进行搭建，然后我们要从这里慢慢进入实战。提示：希望大家还是多去官网看看教程，踩踩坑，你会有些疑问，我呢则会把我踩过的坑告诉你们，让你们知道怎么解决，不要害怕有疑问，这正是你驶向成功的颠簸。一、项目目录以及文件
2017-02-28 12:18:18
5682
2
原创 vue最简单的入门教程+实战+Vue2+VueRouter2+webpack（一）
vue入门之路篇系列教程： vue最简单的入门教程+实战+Vue2+VueRouter2+webpack（一） vue最简单的入门教程+实战+Vue2+VueRouter2+webpack（二） vue最简单的入门教程+实战+Vue2+VueRouter2+webpack（三） vue最简单的入门教程+实战+Vue2+VueRouter2+webpack（四） vue最简单的入门
2017-02-28 09:30:53
5800
原创 ES6系列（一）迭代器、for-of循环和生成器 Generators
友情提示链接： web前端-在迷惘中的探索HTML5（一）定位及地图 我们在学习web前端的路程起步时总是疑问，我们如何更好的遍历元素呢？迭代器和生成器是什么？今天为大家带上与精彩的ES6有关的遍历数据的一些方法和对迭代器和生成器的介绍。一、for-of循环（1）for循环的疑问起初我们如何遍历数组中的元素呢？20年前JavaScript刚萌生时，你可能这样实现数组遍历：var myArray
2017-02-11 14:15:00
1036
原创 web前端-在迷惘中的探索HTML5（一）定位及地图
友情提示链接：ES6系列（一）迭代器、for-of循环和生成器 Generators 在HTML5的新标准中，有了用于地图的使用地理位置定位的api，其由geolocation 对象来进行担任相关的使用。一、简介首先简单的介绍一下官方对于geolocation 对象的介绍： geolocation 对象：地理位置 API，通过接口可以使用javascript定位当前用户所在位置，其是win
2017-02-11 13:56:04
3157
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人