Category: Javascript /Jquery / Bootstrap / Web

Google Maps API的3种开源替代品, 3 open source alternatives to Google Maps API

随着数据挖掘、移动应用和社交媒体等领域的风生水起,极大地改变了GIS(地理信息系统)的面貌以及地位,并由此催生了一大批适用于不同用途的工具,其中最为常见的当属谷歌地图API支持的网页地图GIS。 然而,在11月19日正值GIS日之际,Jason Baker在opensource.com上发文推荐了三大开源API,这绝对够得着谷歌的高标准。   Leaflet 有了 Leaflet地图库,为移动应用创建JavaScript交互式地图,优化加载时间不再是难事。一句话概括起来就是——麻雀虽小,五脏俱全。丰富的插件能够满足其他需求,新人老手都值得推荐。   Modest Maps Modest Maps地图库这只“麻雀”甚至比Leaflet还要小些,但其标准设计(modular design)让创建简单地图更加方便,不论是单单挑选具体项目的组件,还是精简开发过程都变的更容易了。   Polymaps Polymaps地图库比前两个大一些,使得创建基于tile的互动地图或基于SVG的矢量地图变得更容易。SVG即可缩放矢量图形(Scalable Vector Graphics),可以将CSS(计算机系统模拟)网页文件的风格运用到地图设计上。 … Read More

黑客:使用JavaScript来破解网络, Using JavaScript to hack the web

  并非所有的黑客行为都是恶作剧。下面是如何使用JavaScript使浏览器更好的方法。 JavaScript的在线资源并不缺乏,从教你基础知识的课程到应用程序创建的教程。在本文中,我将解释如何使用JavaScript创建有用的浏览器黑客,以提高您的Web体验和提高工作效率。这篇文章不需要您自己开发应用程序,甚至不需要对产品有特别深入的了解。   书签的力量 我们都知道书签有多有用。它们允许您保存到网页的链接,对其进行分类,并添加其他数据(元数据),以帮助您在将来快速找到该链接,并将其存档到您可以轻松导航的结构中。许多人不知道的是,您还可以将微小的代码片段保存到这些书签中,这些书签是在您所在的网页的上下文中执行的,包括对其结构和样式的访问。 如果你打开Facebook控制台,你会发现它的开发者非常反对这种窥探-这是有理由的。即使没有访问他们的代码,你也可以进行修改,甚至破坏一些应用程序。 Facebook的开发者不想让你弄乱他们的控制台。   不过,你可能会忘记你输入的内容,或者丢失一些文本。或者,如果您像我一样,保存您打开的文件,复制它们,到您想要的网站,打开控制台,粘贴和运行的过程似乎需要很大的努力。下面是一些我用来检查网页的长度的代码(用我正在使用的设备上的屏幕来衡量)。这在Edge,Firefox,Chrome,甚至我的手机上都适用: javascript:alert(document.body.scrollHeight / window.innerHeight)   如果我知道一页有多长,我可以预先决定是否要读。我用它来向客户展示各种设备上有多大或多小的网页。 下面是我使用的另一个工具,用于删除程序员博客文章中的所有图片和文章,只获取高光部分(我还会对它们进行书签;我不会将浏览作为阅读的替代方案)。 javascript:(function(){ .slice.call(document.querySelectorAll('img,… Read More

Javascript: js截图, html转图片(png,jpg), html转canvas, js下载图片,html2canvas截图,html2canvas入门

  html2canvas 能够实现在用户浏览器端直接对整个或部分页面进行截屏。这个html2canvas脚本将当页面渲染成一个Canvas图片,通过读取DOM并将不同的样式应用到这些元素上实现。· 它不需要来自服务器任何渲染,整张图片都是在客户端浏览器创建。当浏览器不支持Canvas时,将采用Flashcanvas或ExplorerCanvas技术代替实现。以下浏览器能够很好的支持该脚本:Firefox 3.5+, Google Chrome, Opera新的版本, IE9以上的浏览器。 html2canvas可以通过获取HTML的某个元素,然后生成Canvas,能让用户保存为图片。 这个项目主要是生成canvas,那么我们如果需要生成图片还需要将它转化为图片地址。、   html2canvas官网 官方网址         项目下载 基本语法 html2canvas(element, options);… Read More

后端开发福音!GitHub上15W+的后台控制面板!

Web 开发中几乎的平台都需要一个后台管理,但是从零开发一套后台控制面板并不容易,幸运的是有很多开源免费的后台控制面板可以给开发者使用,那么有哪些优秀的开源免费的控制面板呢?我在 Github 上收集了一些优秀的后台控制面板,并总结得出 Top 10。   一、AdminLTE Github Star 数 26365,Github 地址: https://github.com/almasaeed2010/AdminLTE 非常流行的基于 Bootstrap 3.x 的免费的后台… Read More

Top 5: 用Javascript编写的最佳代码编辑器插件, Top 5: Best code editor plugins written in Javascript

  享受我们用Javascript编写的5个最好的代码编辑器插件的集合。   5. EditArea Example EditArea是源代码的免费javascript编辑器。此编辑器旨在编辑textarea中的源代码文件。主要目标是允许文本格式化,搜索和替换以及实时语法高亮(对于不太重的文本)。 EditArea由Christophe Dolivet开发,目前根据“LGPL”,“Apache”和“BSD”许可证(使用您想要的许可证)发布,请阅读许可协议以获取详细信息。   特征 易于集成,只有一个脚本和一个调用函数 制表支持(允许编写格式良好的源代码) 可定制的实时语法突出显示(目前:PHP,CSS,Javascript,Python,HTML,XML,VB,C,CPP,SQL,Pascal,Basic,Brainf * ck,可能还有更多…) 自动换行支持 搜索和替换(使用regexp)… Read More

jQuery: 遍历json字符串, 遍历object数组,报错:Uncaught TypeError: Cannot use ‘in’ operator to search for ‘156’, Uncaught SyntaxError: Unexpected token k in JSON at position 2, loop over JSON string – $.each example

    遍历一个json字符串,或者object数组的方法: var json = [ {"id":"1","tagName":"apple"}, {"id":"2","tagName":"orange"}, {"id":"3","tagName":"banana"}, {"id":"4","tagName":"watermelon"}, {"id":"5","tagName":"pineapple"} ]; $.each(json, function(idx, obj) { alert(obj.tagName);… Read More

2018年度国产开源软件排行

  1. Arthas:开源 Java 诊断工具 Arthas(阿尔萨斯)是阿里巴巴开源的 Java 诊断工具。 Arthas 支持 JDK 6+,采用命令行交互模式,同时提供丰富的 Tab 自动补全功能,进一步方便进行问题的定位和诊断。 项目主页:https://alibaba.github.io/arthas/ Github:https://github.com/alibaba/arthas/blob/master/site/src/site/sphinx/index.md 开源协议:GPLv3 开发语言:Java… Read More

使用pushState()改变url而不刷新, ajax与HTML5 history pushState/replaceState实例, 详解history.pushState和history.replaceState以及page ajax的实现

  我们使用location.hash来模拟ajax的前进后退功能。使用location.hash存在下面几个问题: 1.使用location.hash会导致地址栏的url发生变化,用户体验不够友好。 2.location.hash产生的历史记录无法修改,每次hash改变都会导致产生一个新的历史记录。 3.location.hash只是1个字符串,不能存储很多状态相关的信息。 为了解决这些问题,HTML5中引入了history.pushState()、history.replaceState()、popstate事件来处理浏览器历史记录的问题。下面的代码可以达到跟location.hash相同的效果,可以看到地址栏url不会改变。   效果如下:实例DEMO 1   |   实例DEMO 2    |   实例DEMO 3 HTML5 新增的历史记录 API… Read More

JavaScript面向对象详解三:对象与继承

JavaScript的所有数据都可以看成对象,那是不是我们已经在使用面向对象编程了呢? 当然不是。如果我们只使用Number、Array、string以及基本的{...}定义的对象,还无法发挥出面向对象编程的威力。 JavaScript的面向对象编程和大多数其他语言如Java、C#的面向对象编程都不太一样。如果你熟悉Java或C#,很好,你一定明白面向对象的两个基本概念: 类:类是对象的类型模板,例如,定义Student类来表示学生,类本身是一种类型,Student表示学生类型,但不表示任何具体的某个学生; 实例:实例是根据类创建的对象,例如,根据Student类可以创建出xiaoming、xiaohong、xiaojun等多个实例,每个实例表示一个具体的学生,他们全都属于Student类型。 所以,类和实例是大多数面向对象编程语言的基本概念。 不过,在JavaScript中,这个概念需要改一改。JavaScript不区分类和实例的概念,而是通过原型(prototype)来实现面向对象编程。 原型是指当我们想要创建xiaoming这个具体的学生时,我们并没有一个Student类型可用。那怎么办?恰好有这么一个现成的对象: var robot = { name: 'Robot', height: 1.6, run: function… Read More

JavaScript面向对象详解一:原理

概述 JavaScript中的面向对象是基于原型链来实现的,这不同于其他语言复制拷贝的方式。我觉得原型链的好处是节约内存,提高性能,缺点可能就是不那么容易理解。 下面我们就来循序渐进的通过原型链,来理解JavaScript中的面向对象。 面向对象的概念是为了解决什么问题? 如果我们想创建一个具有一定功能的集合,在JavaScript中我们可以这样写: var Animal = { name: 'kitty', sleep: function(){ console.log(this.name + " is sleeping");… Read More