blog
blog copied to clipboard
lin-xin
林鑫的个人博客，用于总结平时工作和学习中的经验。
## 前言 为了把 React Native 集成到 Android 原生项目中，踩了很多坑，因为作为web前端开发，本来就不熟悉安卓，参考了网上很多文章，但是都很旧了，而 React Native 已经升级到了 0.55 版本了，入口文件已经合成了一个 index.js，下面的内容也是基于这个版本实践的。 ## 环境搭建 已经搭建好 React Native 环境的可以跳过，还没有的可以参考 React Native 中文网的 [搭建教程](https://reactnative.cn/docs/0.51/getting-started.html)，比较详细。 ## 创建Android原生项目 安卓开发者自然很熟悉这个步骤，然而对于web前端开发者还是比较迷茫的。可以参考一下 [使用Android Studio创建一个新的Android工程](https://jingyan.baidu.com/article/90bc8fc84293b8f653640c8d.html)，创建一个 Empty...
## 前言 canvas 强大的功能让它成为了 HTML5 中非常重要的部分，至于它是什么，这里就不需要我多作介绍了。而可视化图表，则是 canvas 强大功能的表现之一。 现在已经有了很多成熟的图表插件都是用 canvas 实现的，Chart.js、ECharts等可以制作出好看炫酷的图表，而且几乎覆盖了所有图表的实现。 有时候自己只想画个柱状图，自己写又觉得麻烦，用别人插件又感觉累赘，最后打开百度，拷段代码，粘贴上来修修改改。还不如自己撸一个呢。 ## 效果 动画效果图片显示不出来，可以到最下面找demo地址  ## 分析 可以这个图表由 xy轴、数据条形和标题组成。 - 轴线：可以使用 moveTo() & lineTo() 实现 - 文字：可以使用 fillText() 实现...
## 前言 ### Parcel 是什么 Parcel 是一个前端构建工具，[Parcel 官网](http://www.parceljs.io/) 将它定义为**极速零配置**的Web应用打包工具。没错，又是一个构建工具，你一定会想，为什么前端的构建工具层出不穷，搞那么多工具又要花时间去学习，真的有意义吗？在 webpack 已经成为前端构建工具主流的今天，一个新的工具能有什么优势来站稳脚跟呢？ ### 为什么要用 Parcel 一个好的打包工具在前端工程中占着比较重要的地位。然，何谓之好？或功能强大，或简单易用，或提高效率，或适合自己。在时代不断发展中，一个个好的工具正在被一个更好的工具所替代。随着对 webpack 复杂配置的吐槽声越来越多，Parcel 打着 "快速、零配置" 的旗子出来了。 ### Parcel 的特性 - **快速打包**：启用多核编译，并具有文件系统缓存 - **打包所有资源**：支持JS，CSS，HTML，文件资源等等 - 不需要安装任何插件 -...
## 前言 HTML5 中提供了直接拖放的 API，极大的方便我们实现拖放效果，不需要去写一大堆的 js，只需要通过监听元素的拖放事件就能实现各种拖放功能。 想要拖放某个元素，必须设置该元素的 draggable 属性为 true，当该属性为 false 时，将不允许拖放。而 img 元素和 a 元素都默认设置了 draggable 属性为 true，可直接拖放，如果不想拖放这两个元素，把属性设为 false 即可。 ## 拖放事件 拖放事件由不同的元素产生。一个元素被拖放，他可能会经过很多个元素上，最终到达想要放置的元素内。这里，我暂时把被拖放的元素称为源对象，被经过的元素称为过程对象，到达的元素我称为目标对象。不同的对象产生不同的拖放事件。 源对象： - dragstart：源对象开始拖放。 - drag：源对象拖放过程中。 -...
## 前言 Electron 是一个搭建跨平台桌面应用的框架，仅仅使用 JavaScript、HTML 以及 CSS，即可快速而容易地搭建一个原生应用。这对于想要涉及其他领域的开发者来说是一个非常大的福利。 ## 项目介绍 仓库地址：[lin-xin/calculator](https://github.com/lin-xin/calculator) 我这里通过 Electron 实现了仿 iPhone 的计算器，通过菜单可以切换横屏和竖屏，横屏有更多的运算。而对于 JavaScript 进行浮点数计算来说，精度丢失是个很大问题，所以我这里使用了第三方库 math.js 来解决这个精度的问题。 尽可能的实现了跟 iPhone 一样的运算： - 1 + 2 × 3 = 7...
## 介绍 vue-schart 是使用vue.js封装了sChart.js图表库的一个小组件。支持vue.js 1.x & 2.x - 仓库地址：[https://github.com/lin-xin/vue-schart](https://github.com/lin-xin/vue-schart) sChart.js 作为一个小型简单的图表库，没有过多的图表类型，只包含了柱状图、折线图、饼状图和环形图四种基本的图表。麻雀虽小，五脏俱全。sChart.js 基本可以满足这四种图表的需求。而它的小，体现在它的体积上，代码只有 8kb，如果经过服务器的Gzip压缩，那就更小了，因此不用担心造成项目代码冗余。 该库使用 canvas 实现，兼容 IE9 以上浏览器。 - 仓库地址：[https://github.com/lin-xin/sChart.js](https://github.com/lin-xin/sChart.js) - 文档(中英文)：[http://blog.gdfengshuo.com/example/sChart/](http://blog.gdfengshuo.com/example/sChart/) - 演示地址：[http://blog.gdfengshuo.com/example/#/vue-schart](http://blog.gdfengshuo.com/example/#/vue-schart) ## 效果  ## 使用指南 安装:...
## 前言 Express 是基于 Node.js 平台的 web 应用开发框架，在学习了 Node.js 的基础知识后，可以使用 Express 框架来搭建一个 web 应用，实现对数据库的增删查改。 数据库选择 MongoDB，它是一个基于分布式文件存储的开源数据库系统，Mongoose 是 MongoDB 的对象模型工具，可以在异步环境里工作。 接下来就使用 Express + Mongoose 来实现简单的增删查改，在实现的过程中来学习 Express 和 Mongoose 的基础知识。 ## 准备...
## 前言 随着 Vue.js 越来越火，Vue.js 的相关插件也在不断的被贡献出来，数不胜数。比如官方推荐的 vue-router、vuex 等，都是非常优秀的插件。但是我们更多的人还只停留在使用的阶段，比较少自己开发。所以接下来会通过一个简单的 vue-toast 插件，来了解掌握插件的开发和使用。 ## 认识插件 想要开发插件，先要认识一个插件是什么样子的。 Vue.js 的插件应当有一个公开方法 install 。这个方法的第一个参数是 Vue 构造器 , 第二个参数是一个可选的选项对象: ```JavaScript MyPlugin.install = function (Vue, options) { Vue.myGlobalMethod =...
## 前言 HTML5 中提供的文件API在前端中有着丰富的应用，上传、下载、读取内容等在日常的交互中很常见。而且在各个浏览器的兼容也比较好，包括移动端，除了 IE 只支持 IE10 以上的版本。想要更好地掌握好操作文件的功能，先要熟悉每个API。 ## FileList 对象和 file 对象 HTML 中的 input[type="file"] 标签有个 multiple 属性，允许用户选择多个文件，FileList对象则就是表示用户选择的文件列表。这个列表中的每一个文件，就是一个 file 对象。 file 对象的属性： - name : 文件名，不包含路径。 - type :...
## 前言 HTML5 的 web Storage 存储方式有两种：localStorage 和 sessionStorage。 这两种方式都是通过键值对保存数据，存取方便，不影响网站性能。他们的用法相同，存储时间不同。 localStorage 的数据保存在本地硬件上，可以永久保存，可以手动调用api清除数据。sessionStorage 保存在 session 对象中，会在浏览器关闭时被清除。 web Storage 的大小在浏览器上是有限制的，不同浏览器大小会有区别，在主流浏览器中，大小约为 5M，用来存储普通数据其实已经足够。 ## 用法 以 localStorage 为例，sessionStorage 用法一样： ### setItem 保存数据：localStorage.setItem(key,value); 示例： ```js...