blog
blog copied to clipboard
lin-xin
林鑫的个人博客，用于总结平时工作和学习中的经验。
gulp的官方定义非常简洁： 基于文件流的构建系统 。通过代码优于配置的策略，Gulp 让简单的任务简单，复杂的任务可管理。利用 Node.js 流的威力，你可以快速构建项目并减少频繁的 IO 操作。Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作。 ## 匹配符 \*、\**、！、{} ```js src('./js/*.js') // * 匹配js文件夹下所有.js格式的文件 src('./js/**/*.js') // ** 匹配js文件夹的0个或多个子文件夹 src(['./js/*.js','!./js/index.js']) // ! 匹配除了index.js之外的所有js文件 src('./js/**/{omui,common}.js') // {} 匹配{}里的文件名 ```...
虽然网上有很多的 gulp 构建文章，但是很多都已经随着 gulp 插件的更新无法运行了。因此，我写了这个比较简单的构建方案。本文基于 gulp 最新的 4.0.2 版本进行了修改。现在前端组件化项目大多是基于 webpack 进行构建，但是有一个零散的小业务，静态页面之类的，使用 gulp 反而会更加简单方便。 如果还不熟悉 gulp 的插件，可以阅读上一篇文章：[精通gulp常用插件](https://github.com/lin-xin/blog/issues/2) 这个方案主要是为了实现es6转es5、js/css的压缩合并、自动添加版本号和压缩html。 - gulp-babel es6转es5 - gulp-csso 压缩优化css - gulp-uglify 压缩js - gulp-htmlmin 压缩html -...
## 前言 Rollup 是一个 JavaScript 模块打包器，说到模块打包器，自然就会想到 webpack。webpack 是一个现代 JavaScript 应用程序的静态模块打包器，那么在 webpack 已经成为前端构建主流的今天，为什么还要用 Rollup 呢？ [Rollup 中文文档](https://www.rollupjs.com/) 中介绍到，它可以将小块代码编译成大块复杂的代码，例如 library 或应用程序。可以看到它的应用场景之一，就是打包 JS 库。自己写个 JS 库，在我们开发工作中和开源项目中还是比较常见的。可谓是生命不息，造轮子不止。如果还没写过，那就赶紧来提升下自己的技(逼)术(格)吧。 ## 对比 webpack 用过 webpack 的都知道，它可以将所有的静态资源，导入到应用程序中，也是因为它强大的功能，所以打包 bundle...
## 介绍 sChart.js 作为一个小型简单的图表库，没有过多的图表类型，只包含了柱状图、折线图、饼状图和环形图四种基本的图表。麻雀虽小，五脏俱全。sChart.js 基本可以满足这四种图表的需求。而它的小，体现在它的体积上，代码只有 8kb，如果经过服务器的Gzip压缩，那就更小了，因此不用担心造成项目代码冗余。 该库使用 canvas 实现，兼容 IE9 以上浏览器，支持移动端。 - 仓库地址：[sChart.js](https://github.com/lin-xin/sChart.js) - 文档(中英文)：[lin-xin.gitee.io/example/schart/](https://lin-xin.gitee.io/example/schart/) ## 使用指南 ``` $ npm install schart.js import sChart from 'schart.js' ``` 也可以直接插入script到你的HTML页面: ```html ```...
## 前言 像我们熟悉的 vue-cli，react-native-cli 等脚手架，只需要输入简单的命令 `vue init webpack project`，即可快速帮我们生成一个初始项目。在实际工作中，我们可以定制一个属于自己的脚手架，来提高自己的工作效率。 为什么需要需要脚手架？ - 减少重复性的工作，不再需要复制其他项目再删除无关代码，或者从零创建一个项目和文件。 - 根据交互动态生成项目结构和配置文件等。 - 多人协作更为方便，不需要把文件传来传去。 ## 思路 要开发脚手架，首先要理清思路，脚手架是如何工作的？我们可以借鉴 vue-cli 的基本思路。vue-cli 是将项目模板放在 git 上，运行的时候再根据用户交互下载不同的模板，经过模板引擎渲染出来，生成项目。这样将模板和脚手架分离，就可以各自维护，即使模板有变动，只需要上传最新的模板即可，而不需要用户去更新脚手架就可以生成最新的项目。那么就可以按照这个思路来进行开发了。 ## 第三方库 首先来看看会用到哪些库。 - [commander.js](https://github.com/tj/commander.js)，可以自动的解析命令和参数，用于处理用户输入的命令。 -...
## 前言 在vue里，组件之间的作用域是独立的，父组件跟子组件之间的通讯可以通过prop属性来传参，但是在兄弟组件之间通讯就比较麻烦了。比如A组件要告诉一件事给B组件，那么A就要先告诉他们的爸组件，然后爸组件再告诉B。当组件比较多，要互相通讯的事情很多的话，爸组件要管他们那么多事，很累的。vuex正是为了解决这个问题，让多个子组件之间可以方便的通讯。 ## 项目介绍  待办事项中的一个事件，它可能拥有几个状态，未完成、已完成、已取消或被删除等。这个事件需要在这多种状态之间切换，那么使用vuex来管理也是非常方便的。 来看一下vuex怎么完成状态管理的：  所有组件都是调用actions，分发mutation去修改state，然后state经过getter又更新到各个组件里。state又通过localStorage存储数据到本地，下次重新打开时再读取保存的数据。 ## 模块化 为什么要用模块化？当我们的项目比较大，组件很多，功能也多，会导致state里要存放很多内容，整个 store 都会很庞大，很难管理。 我模块化的store目录如下： |-store/ // 存放vuex代码 | |-eventModule // 事件模块 | | |-actions.js | | |-getters.js |...
## 前言 组件是 vue.js 最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。如何传递数据也成了组件的重要知识点之一。 ## 组件 组件与组件之间，还存在着不同的关系。父子关系与兄弟关系（不是父子的都暂称为兄弟吧）。 ### 父子组件 父子关系即是组件 A 在它的模板中使用了组件 B，那么组件 A 就是父组件，组件 B 就是子组件。 ```js // 注册一个子组件 Vue.component('child', { data: function(){ return { text: '我是father的子组件！' }...
## 闭包是什么 在 JavaScript 中，闭包是一个让人很难弄懂的概念。ECMAScript 中给闭包的定义是：闭包，指的是词法表示包括不被计算的变量的函数，也就是说，函数可以使用函数之外定义的变量。 是不是看完这个定义感觉更加懵逼了？别急，我们来分析一下。 - 闭包是一个函数 - 闭包可以使用在它外面定义的变量 - 闭包存在定义该变量的作用域中 好像有点清晰了，但是使用在它外面定义的变量是什么意思，我们先来看看变量作用域。 ## 变量作用域 变量可分为全局变量和局部变量。全局变量的作用域就是全局性的，在 js 的任何地方都可以使用全局变量。在函数中使用 var 关键字声明变量，这时的变量即是局部变量，它的作用域只在声明该变量的函数内，在函数外面是访问不到该变量的。 ```JavaScript var func = function(){ var a = 'linxin';...
## 前言 在 HTML5 的本地存储中，有一种叫 indexedDB 的数据库，该数据库是一种存储在客户端本地的 NoSQL 数据库，它可以存储大量的数据。从上篇：[HTML5 高级系列：web Storage](https://github.com/lin-xin/blog/issues/11) ，我们知道 web Storage 可以方便灵活的在本地存取简单数据，但是对于大量结构化存储，indexedDB 的优势就更加明显。接下来我们来看看 indexedDB 如何存储数据。 ## 连接数据库 一个网站可以有多个 indexedDB 数据库，但每个数据库的名称是唯一的。我们需要通过数据库名来连接某个具体的数据库。 ```js var request = indexedDB.open('dbName', 1); //...
## 前言 最近有人给我的 [Vue2 后台管理系统解决方案](https://github.com/lin-xin/vue-manage-system) 提了 issue ，说执行 npm run build 构建项目的时候极其慢，然后就引起我的注意了。在项目中，引入了比较多的第三方库，导致项目大，而每次修改，都不会去修改到这些库，构建却都要再打包这些库，浪费了不少时间。所以，把这些不常变动的第三方库都提取出来，下次 build 的时候不再构建这些库，这样既可大大缩短构建时间。那么要怎么去实现呢？ ## 解决方案 ### DllPlugin 和 DllReferencePlugin 查找了一下资料，发现我们可以利用 webpack 的插件 DllPlugin 和 DllReferencePlugin 来实现我们要的功能。 DllPlugin 可以把我们需要打包的第三方库打包成一个 js...