JarunWang-CSDN博客

原创 MUI+H5plus+HBuilder开发app（android，ios）介绍

前言现在介绍一款只需要懂html+css+js就能开发app的框架，不需要懂原生语言，完全只需要前端web工程师就能独立开发出android和ios的应用，且一套代码搞定，效率很高。（其实更省事可以wap，android和ios一套带走，一下R闪秒3个平台，没毛病）框架介绍这套框架源于DCloud社区，DCloud的社区工程师们通过对h5的扩张，通过运用js在webview调用原生接口，最后通过DC

2017-08-12 21:01:18 22762 4

原创 webpack 多页面模版

前言webpack是一款模块加载器兼打包工具，能把js,css,页面，图片，视频等各种资源，进行模块化处理。而现在网上流传很多单页面的webpack模型，那多页面呢？比较少，现在我提供一个多页面的前端模型。希望大家适合使用。功能介绍这模型是多页面模块打包，模型是用html，你们可以换成自己的jsp,php按你自己的需要来。通过运行服务，把文件直接打包到dist目录下，dist是编译后的文件，服务

2017-05-01 23:37:13 7218

原创 linux自动重启脚本

前言服务器每个几个小时自动关闭一次，人都已经疯了。直接一个脚本来自动监听重启，保证服务正常。使用crontab来进行定时检测脚本sudo crontab -e #进入编辑状态，选用vi编辑。*/5 * * * * sh /locals/attachment/server/restart.sh #添加每分钟检测restart.sh 脚本#! /bin/sh pro...

2018-08-17 23:27:47 2981

原创 react native 遇到的坑汇总篇

问题1iOS：编译错误Command /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/b解决方法如下：在Build Settings 中，将Apple LLVM compiler 4.1 - Language 中的c++Standard Library 修改为 ...

2018-06-19 10:24:53 1658

原创 node+webpack构造打包打测试/线上包

前言前端通过构造工具打包是日常的工作内容，但因为环境的不一样测试/线上。通常都需要修改配置的。我就想只通过命令来传入一个变量，这样来区别打包的环境。如何实现呢？1.配置package.json1.通过构造命令传入一个环境变量，如： node scrupts/build.js uat //uat就为测试环境的变量2.然后我把node命令，写到在package....

2018-05-26 22:14:52 3182

原创 eslint 忽略错误

前言eslint很好用，但有时候一些无法避免的错误。显示出来会影响心情，如何屏蔽这种无法解决的错误提示呢？如下：引用了一个fundebug，但项目里面没有fundebug这个对象，所以报错了。在错误代码后面输入eslint-disable-line命令，屏蔽错误类型。就可以了 // eslint-disable-line [错误类型]...

2018-05-21 15:16:11 12062

原创 npm 错误收集

前言我们使用node，webpack，npm，gulp，各种插件等老是会遇到一堆问题。现在我收集一份我遇到过的错误，来分享给大家。环境 window 10 node 8.11.1稳定版 npm 5.6.0 python 2.7.141.code ELIFECYCLE 错误错误内容：npm ERR! code ELIFECYCLEnp...

2018-05-05 12:54:29 882

原创 npx create-react-app错误

发现一个错误：出现module.js:545错误。寻找了很久一直以为npm问题。重装了几次还是不行。然后切换了下载淘宝NPM镜像，设置方法为：npm config set registry https://registry.npm.taobao.org，设置完成后，重新执行create-react-app first-app。居然成功了。原来是之前下载文件有问题导致的。如果你也遇到这样...

2018-04-04 18:37:32 3480

原创 Iphone X HTML 齐刘海过招篇

前言最近在做兼容的时候发现一个问题，在设置了全屏width:100%;height:100%的情况下。IphoneX底部会有一个空白区域，这个是IphoneX底部是预留操作区。需要手动拖动才能把白色区域给覆盖。解决办法那么如何一开始全屏呢？消除白色区域呢？Iphone官网已经给予解决方案。在viewport加入 viewport-fit=cover 属性。就可以解决了...

2018-03-30 17:22:05 905

原创 HTML5 Cross-Document Messaging 跨域（postMessage）

前言出于安全和隐私的原因，Web浏览器会阻止不同域中的文档互相影响; 也就是说，跨站点脚本是不允许的。但很多时候需要跨域操作，因此开发出允许跨域方法document.domain,JSONP,CORS等。这些跨域方式都有一定的局限性，比如我最近遇到一个跨域问题，我在www.A.com域打开一个www.B.com域的网页，需要B网址操作完成后，前端通知A网址。上面这些方法都不能有效地跨越通信。...

2018-03-02 01:08:48 826

原创 nginx把线上服务静态资源映射本地目录

前言一个线上服务出现问题要修改前端代码，我门可以用chrome调试工具或者fiddler把部分文件映射到本地来修改。但如果文件很多，这样效率很低。既然我们已经有线上服务了，能把前端端资源给划分出来前端资源访问本地的，后端资源访问线上服务。这样通过修改本地前端文件马上调试出线上问题。按照我想通过nginx把静态文件代理到本地代码，来调试线上问题。具体怎么实现呢？如下 URL ...

2018-02-10 16:33:54 10521 1

原创 Swagger

Swagger 介绍OpenAPI规范是Open API Initiative（Linux基金会合作项目）中的社区驱动开放规范。OpenAPI规范（OAS）为REST API定义了一个标准的，与编程语言无关的接口描述，它允许人和计算机发现和理解服务的功能，而不需要访问源代码，额外的文档或检查网络流量。当通过OpenAPI正确定义时，消费者可以用最少量的实现逻辑理解远程服务并与之交互。类似于

2018-01-07 17:24:14 560

原创 Swagger Edit 安装和使用教程

Swagger Edit介绍Swagger是专门用来管理接口一个工具。在开发过程中，接口一直是纷争的聚焦点，能有效管理接口（保存好记录、及时更新、方便查看、接口测试）。会让整个项目开发效率提升很大。而其中Swagger Edit是用来编辑接口文档的小程序，简单易用。在官网上分为在线编辑和下载代码线下编辑，两种编辑方式。Swagger是通过YAML来定义你的接口规范。可以通过接口文档帮你生

2018-01-06 22:17:42 43498 8

原创 Swagger UI安装与使用教程

前言查看这文章前，请先阅读Swagger Edit 安装和使用教程。继Swagger Edit上一篇文章写如何编辑导出接口文档。这篇文章就是负责教导大家如何用Swagger UI来查看和接口测试。Swagger UI是通过读取Swagger Edit的导出的YAML／JSON文件，来进行接口测试。下图就是Swagger UI的界面：ps：Swgger UI的站点域名要和发送请求的域

2018-01-05 16:23:09 59632 5

原创 android软键盘@media 横竖屏兼容

前言通常我们在写wap的时候横竖屏切换会使用到@media媒体查询来实现的。但我最近在一个android的项目，在webview使用媒体查询来做横竖屏区分。点击input输入框，会显示android的软键盘，而这会导致本来是竖屏的界面，变成横屏的。@media all and (orientation : landscape) { //横屏}@media all and (orientatio

2017-12-25 23:11:32 2003 1

原创 Nginx认识nginx.conf配置文件

前言nginx.conf文件是放在conf目录下的一个配置文件。这个是Nginx服务器的主配置文件。通过指令来配置这个文件能达到控制nginx，实现反向代理，负载均衡，也是nginx入门的基础。读懂使用nginx.conf文件是这篇文章写作目的。nginx.conf文件的结构首先介绍文件的架构，整个conf文件分为全局块、events块、http块、server块、location块。每个块有每个

2017-12-21 00:25:07 10567 1

原创 JS使用getJSON获取站点配置文件

前言因为最近在实现前后端分离，前端需要独立起站点服务，因此需要写入一些站点服务配置参数。但服务有开发，测试，线上各个站点服务配置参数不一样，而站点代码又是相同的。所以想把配置参数和代码做一个分离。把服务器的环境配置做成一个json文件，在渲染页面的时候读取一个环境配置文件，再渲染页面。因此这里我使用了get请求，请求本地一个JSON文件，来写入服务环境配置。实现1.我在项目根目录下，放入一个conf

2017-12-16 12:51:47 5327

原创 CORS跨域-Nginx使用方法（Access-Control-Allow-Origin错误提示）

问题说明当出现上图这个的时候，求是访问请求其他域无法访问，浏览器访问其他域不安全，导致访问不了简称跨域问题。而这上面出现一句很重要的话“NO Access-Control-Allow-Origin”，是不是只要添加“Access-Control-Allow-Origin”头就能访问呢？如何添加，会不会有其他问题？ Access-Control-Allow-Origin 表示允许访问的外域 U

2017-12-16 02:34:49 40023

原创 Mixed Content混合内容错误 Iframe Http页面无法访问

问题描述今天在做一个https站点的时候，需要用iframe打开一个http页面。但发现在手机上和chrome上就是无法打开，显示Mixed Content（混合内容）。因为https协议站点，读取的资源文件js css png,包括请求post和get，还有iframe的页面，都必须是https协议的。所以就会报出下面的错误，其实是浏览器为了HTTPS网站不会受到不安全的HTTP资源的攻击的出现错

2017-12-15 00:31:28 22964 2

原创浏览器请求队列机制-请求为什么会阻塞

前言最近遇到一个问题，我1个站点链接2个后端服务，但1个后端服务有问题，导致访问超时，但请求接口都是分开的。自认为一个服务站点请求超时，不会影响到另外一个请求的，但不是。全部请求都发不出去。为什么呢？是不是浏览器有请求机制管理？正常情况前端站点都是对应一个服务的，如果前面一个请求有问题，那么后面一个请求访问不下去也正常。请求都是瀑布型一个请求接一个请求有关联的。所以不了解也没什么问题。但多个后端服务

2017-11-05 22:24:39 12956

原创介绍国内外CMS系统

国外Wordpresswordpress是国外一款简单易用，使用PHP语言开发的博客平台，用户可以在支持PHP和MySQL数据库的服务器上架设属于自己的网站。也可以把 WordPress当作一个内容管理系统（CMS）来使用。安装环境是apache + mysql + php，支持Linux、 Windows、MacOSX。优点：有大量模板，用户量大，简单易学，国内云服务商都支持。缺点：

2017-11-02 18:17:58 6314

原创当你的网站被百度定义为“风险“ “百度网址安全中心提醒您：该页面可能已被非法篡改！“

前言经过苦苦的48小时，持续竭力地和百度官方沟通。终于把我网“风险“ “百度网址安全中心提醒您：该页面可能已被非法篡改！“字眼出掉。真心不容易。因此写下这篇博客。以告世人，如何解决，和百度和平相处，友谊长存。我的苦逼经历故事开始是很久也没很久，但我觉得已经很久的前2天。那一天风和日丽……突然发现在百度搜索，被跳转到“威利斯赌场”的网站，顿时发现肯定被攻击了。查看网站代码，发现是有跳转行为，再查看服务

2017-11-02 11:46:57 14579 2

原创 ES6转换成ES5/ES3

前言在ES6代码和语法糖满天飞的时候，却因为浏览器兼容问题而不敢使用。现在我介绍2种方法来转换ES6。babel脚本转换和在线转换。babel脚本转换1、项目路径配置在项目里面创建一个src文件夹（用来保存原来JS文件），dist文件夹（输出转换成ES5/ES3的文件），node_modules（就是npm插件安装目录）。 2、配置文件package.json{ "name": "babel

2017-10-18 17:38:47 6434 1

原创 javascript 贪心算法说明

贪心算法贪心算法遵循一种近似解决问题的技术，期盼通过每个阶段的局部最优选择（当前最好的解），从而达到全局的最优（全局最优解）。顺序排序顺序或线性搜索是最基本的搜索算法。它的机制是，将每一个数据结构中的元素和我们要找的元素做比较。顺序搜索是最低效的一种搜索算法。function MinCoinChange(coins){ var coins = coins; var cache = {};

2017-09-24 19:10:33 1011

原创 javascript 搜索算法(Search)说明

搜索算法搜索算法，在我们日常写代码上，搜索是一个既熟悉又陌生的一种算法。用的很多，但认真了解却不太深刻。来介绍一下最常用搜索算法：顺序搜索和二分搜索。顺序排序顺序或线性搜索是最基本的搜索算法。它的机制是，将每一个数据结构中的元素和我们要找的元素做比较。顺序搜索是最低效的一种搜索算法。function（item）{ for(var i=0;i<array.length;i++){

2017-09-24 18:48:25 1448

原创 javascript 排序(Sorting)算法与说明

排序的介绍排序是算法最常用的一种运算之一，数据记录到数据库，都需要经过排序输出到客户端上。不然乱输出不规整的数据，是难以阅读的。本文章介绍几种最常用见的排序方法：冒泡排序，选择排序，插入排序，归并排序和快速排序。冒泡排序冒泡排序是从运行时间的角度上来看，最差的一个。因为冒泡排序回比较任何两周相邻的项，如果第一个比第二个大，则交换它们。选择排序选择排序的思路是找到数据结构中的最小值并将其放置在第一位，

2017-09-19 23:53:07 463

原创 javascript 图(Graphs)算法与说明

图的介绍图是网络结构的抽象模型。图是一组由边连接的节点（或顶点）。学习图是重要的，因为任何二元关系都可以用图来表示。任何社交网络，例如Facebook、Twitter和Google plus，都可以用图来表示。飞机路线图就是图的实例之一：图的相关术语通过下图来讲解说明：由一条边连接在一起的顶点称为相邻顶点。比如，A和B是相邻的，A和D是相邻的，A和C是相邻的，A和E不是相邻的。一个顶

2017-09-18 23:32:01 956 1

原创 Sass Scss Less快速开发工具之Compass和EST介绍

前言现在预处理器已经成为前端开发一种必要的工具，为我们编写传统样式提供了极大的便利。但我在使用中，还是需要先编写很多个基础代码比如（clearfix，-webkit，-mo）等。像是不是有工具像jquery那样的工具库。来帮助我们写样式呢？答案是有的Compass（http://compass-style.org/）和EST（http://ecomfe.github.io/est/）。这两个工具是在

2017-09-18 10:15:19 1167

原创 javascript 红黑树算法与说明

红黑树的介绍红黑树是一种平衡二叉树。这种树可以进行高效的中序遍历。通过对任何一条从根到叶子的简单路径上各个节点的颜色进行约束，确保没有一条路径会比其他路径长2倍，因而是近似平衡的。所以相对于严格要求平衡的AVL树来说，它的旋转保持平衡次数较少。用于搜索时，插入删除次数多的情况下我们就用红黑树来取代AVL。广泛用在C++的STL中。如map和set都是用红黑树实现的。ES6红黑树完整实现代码：let

2017-09-17 23:33:25 1635

原创 javascript AVL树算法与说明

AVL树的介绍AVL树得名于它的发明者 G.M. Adelson-Velsky 和 E.M. Landis，他们在 1962 年的论文 “An algorithm for the organization of information” 中发表了它。AVL树是一种自平衡二叉搜索树，意思是任何一个节点左右两节点的高度之差最多为1。实际应用中，维护这种高度平衡所付出的代价比从中获得的效率收益还大，故而实

2017-09-17 23:16:13 632

原创 javascript 二叉树(Trees)算法与说明

二叉树的介绍树是一个非顺序数据结构，它对于存储需要快速查找的数据非常有用。现实例子就是公司的组织架构，总裁为树的最顶端叫根节点，各部门按照领导人区分为子树。二叉树术语概念整个二叉树结构中，每个点叫作节点，每个节点都有父节点，而最上面的为根节点，根节点是没有父节点的。节点另外一个属性为深度，是根据父节点有多少个来算的。由根节点向下分的2个节点为子树，子树下面节点也是子树。如图：

2017-09-15 23:35:51 2613

原创 javascript 散列表(Hashes)算法与说明

散列表的介绍散列算法的作用是尽可能快地在数据结果中找到一个值，通常在数据结果中获得一个值（get方法），需要遍历整个数据结构来找到它。如果使用散列函数，就知道值的具体位置，因此能够快速检索到该值。散列函数的作用是给定一个键值，然后返回值在表中的地址。现实实例，就如email记录本。键名就如用户名，值为email，然后当我们每保存一条数据的时候。通过键名用ASCII来转换成散列函数。如下图：散列图

2017-09-14 23:21:36 801

原创 javascript 集合(set)算法与说明

集合的介绍集合是由一组无序且唯一（即不能重复）的项组成的。这个和数学的概念很相同有交集、并集和差集等。增删改查的算法：let set = new Set();set.add(1);set.values(); // [1]set.has(1);//trueset.size();//1set.add(2);set.values(); //[1, 2]set.delete(1);set.valu

2017-09-14 22:06:07 1139

原创 javascript 字典(dictionary)算法与说明

字典的介绍字典是存储不同元素（不重复元素）。在字典中，存储的是[键，值]也就是[key,value]，键名就是用来查询特定元素。字典也称为映射。最简单的字典如下表格： key value Gandalf [email protected] John [email protected] Tyrion [email protected]字典算法实例字典实例一些操作增删改查

2017-09-13 23:37:25 3882

原创 javascript 链表(lineked lists)算法与说明

链表的介绍链表存储有序的元素集合，但不同于数组，链表中的元素在内存中并不是连续放置的。每个元素由一个存储元素本身的节点和一个指向下一个元素的引用（也称为指针或链接）组成。下图讲解：相对于传统的数组，链表的一个好处在于，添加或移除元素的时候不需要移动其他元素。然而，链表需要使用指针，因此实现链表的时候需要注意。数组的另一个细节是可以直接访问任何位置元素，而要想访问链表中间的一个元素，需要从起点（表头）

2017-09-13 00:28:13 1121

原创 javascript 队列(queue)算法与说明

队列的介绍队列是一种遵从先进先出（FIFO）先来先服务的有序的项，就是喝茶拿号模式（最前的号，最先进去）。队列在尾部添加新元素，并从顶部移除元素。最新添加的元素必须排在队列的末尾。队列算法实例1.我有三个元素John,Jack,Camila,按循序添加三个元素，就会得到下图的一个队列。 2.队列删除。let queue = new Queue()queue.enqueue('John')q

2017-09-11 00:07:27 6713

原创 javascript 栈(Stacks)算法与说明

栈的介绍栈是一种遵从后进先出（LIFO）原则的有序集合。新添加的或待删除的元素都保存在栈的末尾，称作栈顶，另一端就叫栈底。在栈里，新元素都是靠近栈顶，旧元素都接近栈底。其实就想书堆一样，新的书就放在上面。如果要拿下面的书，必须先把上面的书拿走才能，才能拿到想要的书。准照后进先出原则。再讲解一下：如图。有三个元素的栈，栈顶是100[2],栈底是81[0]。整个栈长度为3。如图，删除栈的

2017-09-10 20:13:27 327

原创关闭浏览器弹出框onbeforeunload，onunload和onunloadcancel

前言最近需要做一个阻挡用户关闭页面的功能，大概流程是当用户关闭页面，弹出“确定关闭提示”，点击“离开此页“关闭页面，点击“留在此页”关闭提示框。而当用户下次再关闭的时候不在给予提示。减少用户厌恶感。为了实现功能需要用到了onbeforeunload,onunload和onunloadcancel。简单说明图：var text = "真的离开?"window.onbeforeunload = fu

2017-09-04 11:29:41 8859

原创 js小工具篇-验证

前言在开发中，会重复写很多很简单的小代码块。比如校验这种，而正因为简单，也为了轻便很多时候都不会引用一些工具库的，但每次都写我会觉得笨死了。所以我想把这些代码整理一下，能独立做成小包，且都是用js写，独立使用就可以了。方便大家使用。如何使用这样使用 validate.isArray(‘13512347895’)如果名字相撞可以修改“validate”改成你想定义的名字就行了。压缩前后都是在第一

2017-08-15 15:14:56 312

原创 ES6 Class Module模块化案例

前言这篇通过简单说明ES6 Class和Module这个两个成员。并且用这两个成员制造模块化。Class说明Class（类）作用对象模块，也就是一个方法集合，像以前的prototype父类一样，也一样可以通过new来实例，用法基本一样。所以只是换种方法写继承而已。我个人觉得Class加入使代码更加直观，更容易理解。案例Class简单一个new实例：ES5var name = "tom";var a

2017-08-14 00:42:18 3191 1

空空如也

空空如也