随笔分类 -  JavaScript

摘要:grunt-contrib-uglifyuglify是一个文件压缩插件,项目地址:https://github.com/gruntjs/grunt-contrib-uglify本文将以一个DEMO来展示如何使用uglify插件。DEMO环境package.json:{ "name": "grunt-demo", "version": "0.1.0", "devDependencies": { "grunt": "~0.4.2", "grunt-c 阅读全文
posted @ 2013-11-29 12:01 artwl 阅读(34311) 评论(6) 推荐(10) 编辑
摘要:Grunt是什么?Grunt是一个自动化的项目构建工具。如果你需要重复的执行像压缩,编译,单元测试,代码检查以及打包发布的任务。那么你可以使用Grunt来处理这些任务,你所需要做的只是配置好Grunt,这样能很大程度的简化你的工作。如果在团队中使用Grunt,你只需要与其他人员约定好使用Grunt应该规避的问题,就能够很方便的自动化的处理大部分的常见工作任务,你所付出的努力几乎为0。为什么要使用Grunt?Grunt是一个庞大的生态系统,每天都在成长。你可以自由的选择数以百计的插件以帮助你自动化的处理任务。如果你所需要的插件还没有被人创建, 那么你可以自己创建插件并通过npm很方便的发布以供更 阅读全文
posted @ 2013-11-29 11:27 artwl 阅读(789) 评论(0) 推荐(0) 编辑
摘要:效果:原理: 用canvas逐行输出文字,然后让背景颜色逐渐加深,再随机中断某些列。代码:HTML:CSS:canvas {display: block;}JS:var c = document.getElementById("c");var ctx = c.getContext("2d");//全屏c.height = window.innerHeight;c.width = window.innerWidth;//文字var txts = "0123456789";//转为数组txts = txts.split("&qu 阅读全文
posted @ 2013-10-22 19:25 artwl 阅读(6185) 评论(2) 推荐(9) 编辑
摘要:一、数组排序 题目链接:http://hero.pongo.cn/Question/Details?ExamID=92&ID=94&bsh_bid=281776595题目详情: 给定一个包含1-n的数列,我们通过交换任意两个元素给数列重新排序。求最少需要多少次交换,能把数组排成按1-n递增的顺序,其中,数组长度不超过100。 例如: 原数组是3,2,1, 我们只需要交换1和3就行了,交换次数为1,所以输出1。 原数组是2,3,1,我们需要交换2和1,变成1,3,2,再交换3和2,变为1,2,3,总共需要的交换次数为2,所以输出2。 分析: 通过示例可以看出,可以用数组的第一项跟 阅读全文
posted @ 2013-09-11 10:16 artwl 阅读(758) 评论(0) 推荐(0) 编辑
摘要:JavaScript使用Unicode字符集。ECMAScript3要求JS的实现必须支持Unicode 2.1及后续版本,ECMAScript 5要求JS的实现支持Unicode 3及后续版本。 JavaScript区分大小写。 JavaScript代码建议用空格代替Tab键,因为不同IDE对Tab键的解析不完全一样。 在有些计算机硬件和软件里,无法显示或输入Unicode字符全集,为了支持老旧硬件和软件,JavaScript定义了一种特殊序列,用6个ASCII字符来代表任意16位Unicode内码。这些Unicode转义序列均以\u前缀,其后跟随4个十六进制数(使用数字以及大写或... 阅读全文
posted @ 2013-07-17 19:51 artwl 阅读(822) 评论(0) 推荐(1) 编辑
摘要:var $ = document; // shortcutvar cssId = 'myCss'; // you could encode the css path itself to generate id..if (!$.getElementById(cssId)){ var head = $.getElementsByTagName('head')[0]; var link = $.createElement('link'); link.id = cssId; link.rel = 'stylesheet'; link.ty 阅读全文
posted @ 2013-06-21 09:35 artwl 阅读(436) 评论(0) 推荐(0) 编辑
摘要:缘起 不知道大家有没有用过google搜索结果页的“发送反馈”功能(还没有用过的,快去体验一下吧),个人用过后觉得非常酷,特别适合反馈界面视觉问题,于是就有了本文介绍的小作品。 给不能FQ的截张图吧:效果 不知道大家有没有注意到本页最下面有个“发送反馈”的固定链接,可以点击看看效果。下面是chrome下的效果: 注:需要浏览器支持HTML5原理 通过查看google搜索结果页反馈时的代码可以看到,是把页面生成了一个canvas,然后在canvas上画矩形来实现的: 所以在不支持canvas的浏览器下,是没有这个效果的。 我的方案是利用html2canvas库把页面内容渲染成一个c... 阅读全文
posted @ 2013-05-09 19:22 artwl 阅读(2631) 评论(4) 推荐(4) 编辑
摘要:刚才看到新闻频道转截的一篇文章:阮一峰:字符串匹配的KMP算法,图文并茂通俗易懂,就用JS实现了一下,现分享出来。 算法的核心是部分匹配表和回退算法,部分匹配表的实现如下:function kmpGetStrPartMatchValue(str) { var prefix = []; var suffix = []; var partMatch = []; for(var i=0,j=str.length;i<j;i++){ var newStr = str.substring(0,i+1); if(newStr.length == 1... 阅读全文
posted @ 2013-05-02 12:59 artwl 阅读(1973) 评论(2) 推荐(5) 编辑
摘要:Create Class:var Class = function(parent){ var klass = function(){ this.init.apply(this, arguments); }; if(parent) { var subclass = function(){}; subclass.prototype = parent.prototype; klass.prototype = new subclass; } klass.prototype.init = function(){};... 阅读全文
posted @ 2013-04-26 17:37 artwl 阅读(1072) 评论(0) 推荐(0) 编辑
摘要:刚才一朋友问了我一个问题:arr=['1','1','1','2',,'3','4','5','5','6','6','7','8','9','9','10'];现在有一个这样规律的数组,需求是把里面相同元素组合成一个新的数组,有什么比较简便的方法不也就是说,最终要的结果是这样的:newArr =[ [ "1" , "1&quo 阅读全文
posted @ 2013-04-13 22:35 artwl 阅读(14740) 评论(6) 推荐(1) 编辑
摘要:前段时间看了阮一峰的jQuery的deferred对象详解一文,对jQuery中的deferred的用法了一些了解,今天看到园子里的一篇文章:关于重构JS前端框架的失败经验(顺便怀念那些死去的代码),于是把我之前写的一个利用jQuery的deferred异步按顺序加载JS文件方案分享出来,欢迎指正。 如果你现在对jQuery中的deferred还不了解,强烈建议你看一下阮一峰的jQuery的deferred对象详解一文。 加载JS文件的代码如下:/* Loading JavaScript Asynchronously loadScript.load(["a.js", &qu 阅读全文
posted @ 2013-03-13 17:45 artwl 阅读(5438) 评论(9) 推荐(7) 编辑
摘要:F12 开发人员工具提供了内置脚本探查器,你可以利用它分析在 Windows Internet Explorer9 中运行的 JavaScript 代码的性能。本主题介绍此工具的功能以及如何使用它检查脚本的性能。 分析脚本 要开始操作,请在 Internet Explorer9 中打开你要分析的页面。在 Internet Explorer9 中,按F12以打开 F12 工具,然后单击“探查器”选项卡。 探查器让你能够开始和停止分析,并提供了一些有关函数、函数的运行次数以及每个函数运行的时间的视图或报告。 当你第一次单击“探查器”选项卡时,网格是空的。单击“开始分析”按钮,然后运行你... 阅读全文
posted @ 2013-02-27 17:23 artwl 阅读(3644) 评论(3) 推荐(1) 编辑
摘要:F12 开发人员工具可帮助你查找和修复 HTML 和级联样式表 (CSS) 代码中的错误。如果不使用这些工具,则可能很难在源代码中发现这些错误。 通过在 Windows Internet Explorer 解释源时在文档对象模型 (DOM) 树中显示你的 HTML 和 CSS 代码,可以更容易地调试动态生成的更改之类的代码。 本主题包含下列部分: 使用“HTML”选项卡 “HTML”选项卡视图在由内存中的 Windows Internet Explorer9 呈现的树视图中显示你的网页的动态标记。它反映打开 F12 时的 DOM,如果有任何更改,则需要刷新。 你可以使用鼠标或键盘直接... 阅读全文
posted @ 2013-02-27 16:50 artwl 阅读(21596) 评论(0) 推荐(1) 编辑
摘要:使用 F12 开发人员工具,Web 开发人员能够在无需离开浏览器的情况下快速调试 JavaScript 代码。 通过内置到每个 Windows Internet Explorer9 安装中,F12 工具可提供一些调试工具(例如,断点、监视和局部变量查看)以及一个用于消息和即时代码执行的控制台。 本主题介绍如何使用 F12 工具来调试你的 JavaScript 代码。本主题的目的并不是要提供一个全面的调试教程,而是重点介绍可帮助你着手使用自己的代码的工具。从 Internet Explorer9 中,按F12以打开工具,然后单击“脚本”选项卡即可开始使用。 在“脚本”选项卡中,左侧将显示... 阅读全文
posted @ 2013-02-27 16:45 artwl 阅读(22236) 评论(0) 推荐(4) 编辑
摘要:F12 工具控制台可以报告在运行时期间发生的错误和信息消息。本文将介绍错误消息,并提供有关如何修正这些错误的建议。简介F12 工具控制台错误消息提供了一些代码(例如,SEC7111 或 HTML1114),这些代码提供有关错误的信息。这些代码和消息显示在 F12 工具的“控制台”和“脚本”选项卡中。对于 JavaScript 编程人员来说,这些代码是从 Windows Internet Explorer 引发的。ActiveX 和浏览器扩展开发人员还可发送这些错误和消息。本主题后面的表分为若干部分,这些部分中包括代码、消息、说明以及(适用时)解决问题的建议。尽管该表中的描述提供了问题调试的起点 阅读全文
posted @ 2013-02-27 16:41 artwl 阅读(24425) 评论(0) 推荐(0) 编辑
摘要:使用 F12 开发人员工具控制台命令,可以接收来自 Windows Internet Explorer9 的错误消息,并从代码发送回你自己的消息,而无需中断执行流。 可以使用 F12 工具控制台视图在程序代码之外立即运行脚本语句。 控制台选项卡和视图 可以从“控制台”选项卡或“脚本”选项卡下的控制台窗格中查看 F12 工具控制台消息。控制台在打开时收到来自 Windows Internet Explorer 的消息(例如,代码中包含错误时)。Internet Explorer9 可以向控制台发送很多信息消息和错误消息 。若要导航到代码中的某个错误位置,请单击错误中提供的源信息。 如果... 阅读全文
posted @ 2013-02-27 16:36 artwl 阅读(31484) 评论(1) 推荐(0) 编辑
摘要:F12 开发人员工具的菜单和按钮提供了可帮助你在该工具套件中导航的页面和可视化工具。在这些工具中,你可以创建包含文档中所有链接的报告列表、更改文档模式或以可视方式绘制页面上的特定元素的轮廓。 网页工具 主菜单下有许多工具和选项。F12 工具套件中的许多工具对网页或浏览器自身进行操作,或提供方法来获取各种代码视图的选项和功能。下表概述了这些工具提供的菜单和选项。 “文件”菜单菜单项描述全部撤消重置对 Windows Internet Explorer 的当前实例的所有更改(如属性值)并刷新网页。自定义 Internet Explorer 查看源文件为你提供一个菜单,该菜单具有用于设置“... 阅读全文
posted @ 2013-02-19 15:01 artwl 阅读(15889) 评论(0) 推荐(0) 编辑
摘要:F12 开发人员工具是可帮助生成和调试网页的一套工具。 编写出色的网页需要编码知识以及适当的工具来发现和调试难免会出现的问题。Windows Internet Explorer9 提供所呈现代码的视图,F12 工具提供 Internet Explorer9 如何在代码级别上解释这些页面的视图。F12 工具还帮助确定和报告有关页面上元素的信息,如链接和图像报告。 F12 工具的功能 分析 HTML 代码时,通过 F12 工具看到的视图就是 Internet Explorer9 文档对象模型 (DOM) 解释页面的实际方式,并不是原始的源代码。这是要注意的一个重要区别。 由于表示形式,最... 阅读全文
posted @ 2013-02-05 15:42 artwl 阅读(57851) 评论(0) 推荐(5) 编辑
摘要:最近项目中要用到比较长的列表,在浏览器中打开渲染时比较慢,并占用了较多内存,于是就同事就建议尽量减少节点,在滚动时只是替换数据,于是就决定试试这种方法。 首先要做的就是添加拖动滚动条时的事件,另外由于UE要求对滚动条进行美化,于是就选用了jscrollpane这个jQuery滚动条插件,主页是:http://jscrollpane.kelvinluck.com/ 基本要求是表头固定,内容可滚动,滚动时只是替换数据,不增减节点。由于要出现滚动条,所以要添加一个空的节点来占位,所以DEMO的HTML结构如下:<h3>DEMO</h3><div class=" 阅读全文
posted @ 2013-01-27 19:34 artwl 阅读(956) 评论(0) 推荐(0) 编辑
摘要:原理来自Justany_WhiteSnow的Javascript图像处理——平滑处理一文。/* * BORDER_REPLICATE: aaaaaaaa|abcdefgh|hhhhhhhh * BORDER_REFLECT: hgfedcba|abcdefgh|hgfedcba * BORDER_REFLECT_101: hgfedcb|abcdefgh|gfedcba * BORDER_WRAP: efgh|abcdefgh|abcd * BORDER_CONSTANT: iiiiiiii|abcdefgh|iiiiiiii with... 阅读全文
posted @ 2013-01-22 23:59 artwl 阅读(1113) 评论(2) 推荐(0) 编辑

个人简介

var ME = {
	"name": "土豆/Artwl",
	"job": "coding",
	"languages": [
		"JS", "HTML",
                "CSS", "jQuery"
		"MVC",".NET",
		"设计模式"
	],
	"hobby": [
		"阅读", "旅游",
		"音乐", "电影"
	]
}
TOP