巧用cheerio重构grunt-inline】的更多相关文章

grunt-inline是楼主之前写的一个插件,主要作用是把页面带了__inline标记的资源内嵌到html页面去.比如下面的这个script标签. <script src="main.js?__inline"></script> 技术难度不高,主要就是通过正则将符合条件的script标签等匹配出来.当时就在想: 如果有那么一个插件,能够帮我们完成html解析就好了! 没错,真有——cheerio.感谢当劳君的推荐 =.= cheerio简介 直接引用某前端同学…
重构是对软件内部结构的一种调整,目的是在不改变软件行为的前提下,提高其可理解性,降低其修改成本.开发人员可以使用一系列重构准则,在不改变软件行为的前提下,调整软件的结构. 有很多种原因,开发人员应该重构代码,例如之前的开发人员代码写得很烂.自己以前设计时有缺陷.需求变更需要添加一些新的功能或修改原有功能等等.Martin Fowler在其著名的<<Refactoring—Improving the Design of Existing Code>>一书中谈到了为何重构的几点原因:…
grunt介绍 前端不能承受之痛 1.这是我们的生活 文件压缩:YUI Compressor.Google Closure 文件合并:fiddler + qzmin 文件校验:jshint 雪碧图:cssGaga sass编译:sass/compass 文件打包:require + r.js / seajs + wpm ... 2.究竟痛在哪里 下载难 /(版本)管理难 YUI Compressor:https://github.com/yui/yuicompressor Google Clos…
出现了一篇跑得炒鸡慢的题解! noteskey 无 fuck 说,好像就是整个数列分块然后合并区间...什么的吧 对于每块内部就是算一下前缀信息.后缀信息(就是以 第一个点/最后一个点 为一个边界,不超过 log 个不同的 or 值所要到达的最 左/右 点)和中值信息(就是某种区间长度内能 or 出来的最大值) 然后询问的时候从第一个块开始,向后先查询当前块与下一个块合并的答案,然后更新当前块 watch out nothing ,打代码的时候注意细节貌似是所有 coding 的 gift ?…
一.插件简介 将引用的外部资源,如js.css.img等,内嵌到引用它们的文件里去. 二.使用场景 在项目中,出于某些原因,有的时候我们需要将一些资源,比如js脚本内嵌到页面中去.比如我们的html页面中有这么段小脚本,如果这么直接发布到线上,就会多了一个请求,这从性能优化的角度来说是不合理的. <script src="js/log.js"></script> 那么,我们需要做的事情,就是在项目发布上线前,将这段脚本嵌入到html页面里去.当然可以手工完成,但…
核心思想 是一种分割 \(k\) 维数据空间的数据结构 一维情况下就是平衡树,以 \(key\) 为标准判断插入左儿子还是右儿子 \(kdtree\) 就是平衡树在多维空间的扩展 因为有多维,我们按不同维度交错作为关键字进行插入与查询 如:第一层按照第一维排序,第二层按照第二维排序,第 \(k\) 层按照第 \(k\) 维排序 每一层取该维的中位数,把空间中的点分割开来,分别作为当前点的左右儿子,直到该层只有一个点停止 实现与运用 在 \(OI\) 中,运用最多的是二维的情况,一般当作优秀的暴力…
如果某个类没有做太多的事情,你可以将这个类的所有特性搬移到另外一个类中,然后删除原类.可以看到,Inline Class正好和Extract Class相反,后者是将一个巨类分解成多个小类从而来分担责任.这里是一个类如果不再承担足够多的责任,不再有单独存在的理由(通常是因为重构动作移除了这个类的责任),我们就会挑选这种类使用最频繁的用户(类),以Inline Class把这个类塞到这个用户类中去. 做法: 寻找源类的所有public接口,然后在你目标类上对这些public接口进行声明,并将其中的…
某个类没有做太多事情.将这个类的所有特性搬移到另一个类中,然后移除原类. 动机:Inline Class (将类内联化)正好于Extract Class (提炼类)相反.如果一个类不再承担足够责任.不再有单独存在的理由(这通常是因为此前的重构动作移走了这个类的责任),就挑选这个“萎缩类”的最频繁的用户(也是个类),以Inline Class (将类内联化)手法将“萎缩类”塞进另一个类中. 做法:1.在目标类身上声明源类的public协议,并将其中所有函数委托至源类.如果“以一个独立接口表示源类函…
Inline Method (内联函数) 一个函数调用的本体与名称同样清楚易懂.在函数调用点插入函数体,然后移除该函数. int GetRating() { return MoreThanfiveLateDeliverise() ? 2 : 1; } bool MoreThanfiveLateDeliverise() { return _numberOfLateLiveries > 5; } int GetRating() { return _numberOfLateLiveries > 5…
CodeRush是一个强大的Visual Studio .NET 插件,它利用整合技术,通过促进开发者和团队效率来提升开发者体验.CodeRush能帮助你以极高的效率创建和维护源代码.Consume-first 申明,强大的模板,智能的选择工具,智能代码分析和创新的导航以及一个无与伦比的重构集,在它们的帮助下能够大大的提高你效率. 具体更新内容如下: [CodeRush for Visual Studio v19.1.5最新版免费下载] 新的重构 - Inline Lambda 新版本引入了In…
与Inline Method相同,有时候犹豫需要Extract Method,需要对一些临时变量进行内联,而这个往往是Replace Temp with Query的一部分.简单来说,当你看到这种 double basePrice = anOrder.basePrice(); ); 对于这种情况,basePrice完全是多余的变量,完全可以用函数本身来替代他.这里有个小窍门,你要内联这个变量,你必须要保证函数之后没有对这个变量进行过写操作,换句话说,你可以利用C++的特性----const,将函…
加入间接层确实是可以带来便利,但过多的间接层有时候会让我自己都觉得有点恐怖,有些时候,语句本身已经够清晰的同时就没必要再嵌一个函数来调用了,这样只会适得其反.比如 void test() { if (numGreaterFive()) { qDebug() << "Ok, great!"; } } bool numGreateFive() { ; } 函数名称本身已经表达了这层意思就没必要画蛇添足了,当然我这边只是举了一个很简单的例子,但意思是一致的,就是语义与函数名称本身…
对于网页重构来说,CSS禅意花园 是网页布局从 table 表格转到了 html +css 的标志 .这些年来,随着我们的网站越来越复杂:html5,css3,新的技术.新的属性,越来越多的开发者开始思考和尝试提高他们的 CSS 技能.那么我们从哪里着手呢?对于网页重构工作来说,我们应该养成什么样的开发习惯?一个糟糕的 css 用法是怎样的?我们应该怎么处理这些糟糕的 css.今天这篇文章,我将谈一谈10个我们应该避免的 css 糟糕用法,当然,我们也会分享怎么才是正确的用法. 为了方便大家理解…
高效开发之SASS篇   作为通往前端大神之路的普通的一只学鸟,最近接触了一样稍微高逼格一点的神器,特与大家分享~ 他是谁? 作为前端开发人员,你肯定对css很熟悉,但是你知道css可以自定义吗?大家都知道,js中可以自定义变量,css仅仅是一个标记语言,不是编程语言,因此不可以自定义变量,也不可以引用等等.作为一名程序员,不能编程怎么能忍受,这就是sass存在的意义,工业化生产,让CSS程序范儿. 主要目的就是让你写CSS时不在重复. SASS优点可以简单的规纳为以下几点: 增加了一些编程特性…
对于网页重构来说,CSS禅意花园 是网页布局从 table 表格转到了 html +css 的标志 .这些年来,随着我们的网站越来越复杂:html5,css3,新的技术.新的属性,越来越多的开发者开始思考和尝试提高他们的 CSS 技能.那么我们从哪里着手呢?对于网页重构工作来说,我们应该养成什么样的开发习惯?一个糟糕的 css 用法是怎样的?我们应该怎么处理这些糟糕的 css.今天这篇文章,我将谈一谈10个我们应该避免的 css 糟糕用法,当然,我们也会分享怎么才是正确的用法. 为了方便大家理解…
原文链接:https://medium.freecodecamp.com/why-i-left-gulp-and-grunt-for-npm-scripts-3d6853dd22b8#.n7m1855uf 作者:Cory House ------------------------------------------------------------------------------------------------------------------------------ 我知道你在想…
Description Input 第一行包含一个正整数testcase,表示当前测试数据的测试点编号.保证1≤testcase≤20. 第二行包含三个整数N,M,T,分别表示节点数.初始边数.操作数.第三行包含N个非负整数表示 N个节点上的权值.  接下来 M行,每行包含两个整数x和 y,表示初始的时候,点x和点y 之间有一条无向边, 接下来 T行,每行描述一个操作,格式为“Q x y k”或者“L x y ”,其含义见题目描述部分. Output 对于每一个第一类操作,输出一个非负整数表示答…
随着前端项目的飞速发展,项目越来越大.文件越来越多,前端工程化的工具也越来越多.下面介绍目前最流行的四种构建工具——grunt.gulp.browserify.webpack 所有的构建工具都是基于NodeJs和Npm,所以使用下面任何工具都需要安装Node 一.grunt 1.需要两个文件: Gruntfile.js —— grunt执行任务文件:描述项目会执行的任务. package.json —— 工程描述文件:描述项目基本信息,和项目中使用到的npm包信息,方便其他人了解项目信息.跑起来…
原文地址: PHP 杂谈<重构-改善既有代码的设计>之一 重新组织你的函数 思维导图   点击下图,可以看大图.    介绍   我把我比较喜欢的和比较关注的地方写下来和大家分享.上次我写了篇<php 跟老大的对话>.还是有很多疑问,这书帮了我不少的忙.   如果你比较繁忙,或者懒得看文字,建议你直接看截图,也会有很大的收获的.你可以通过比较截图中的代码就能知道孰优孰劣了.   代码部分我为什么用图呢?因为我经常用手机看代码,博客园的代码在手机里乱七八糟的,还是看图比较舒服.  …
定义 重构的定义:在不改变软件可观察行为的前提下,改善其内部结构. 其中,不改变软件行为,是重构最基本的要求.要想真正发挥威力,就必须做到“不需了解软件行为”. 如果一段代码能让你容易了解其行为,说明它还不是那么迫切需要被重构. 需要重构的代码,你只能看到其中的“坏味道”,接着选择手段消除这些“坏味道”,然后才有可能理解他的行为. 构建测试体系 确保每个类每个方法都有对应的测试代码.一套测试就是一套BUG检测器,能够大大缩减查找BUG所需时间. 编写测试代码最有效的时机,实在开始编程以前.能使你…
很长时间没有更新博客了,实在是太忙啦...0.0 ,以下的东西纯粹是记录,不是我原创,放到收藏夹还担心不够,这个以后常用,想来想去,还是放到这里吧,,丢不了..最后一句废话,网上搜集也好原创也罢,能解决问题不糊弄人才是真道理! 反正我的问题解决啦!!!哈哈哈!! 安装grunt 原文:www.bluesdream.com/blog/windows-installs-the-grunt-and-instructions.html 怕这个网址打不开,记录下: 安装Grunt:如果你之前安装过老的0.…
说明 Vue.Grunt.Webpack的知识请看官方网站 Grunt Tasks:构建.开发调试.打包,命令:grunt build,grunt default,grunt zipall... Webpack:编译Vue.压缩文件 http2:启动http/2服务,命令 node http2.js server:启动http/1.x服务,命令:node server.js 配置 webpack.config.js var path = require('path') var webpack =…
当时学习 Grunt 的时候,真是很头疼.分了两个时间段,学习了两次才硬啃下来,之后才能用在项目中.主要原因我认为是学习资料和文档上面写的太高端了.这类的文档或者资料有个显著特点,上来先简单介绍一下这个玩意(Grunt 是一个 JavaScript 任务运行器),然后就是如何安装,直接给你配置文件的语法,如何使用插件,新手往往看完还不知所以然. 就像我第一次学习的时候,只是大体知道 Grunt 很火,大家都在用,但耐着心看文档和一些别人的学习总结,还是困惑,这到底是个什么东西?究竟干什么用?为什…
上文回顾:Hybird框架UI重构之路:三.工欲善其事,必先利其器 上一篇文章有说到less.grunt这两个工具,是为了css.js分模块使用的.UI框架提供给使用者的时候,是一个大的xxx.js.xxx.css,但在开发时候,必须划分模块. CSS模块划分 1.variables.less 这里面是一些样式的变量.函数 例: 字体: @baseFontSize: 20px; 圆角: .rounded-corners (@radius: 5px) { border-radius: @radiu…
上文回顾:Hybird框架UI重构之路:二.事出有因 工欲善其事,必先利其器,事是重构的目标,器是开发环境. 这篇文章将讲述重构时的UI框架的目录结构,且需要使用的开发工具. 目录结构 demo : 开发框架的模板(单页模式) demo-muti : 开发框架的模板(多页模式) demo-scene : 示例模板.一个完整的示例,目的是给使用者稍作修改就可以使用在项目上. demo-template : 给使用者使用的开发模板. demo-whole : 可在PC上演示的示例模板 dist :…
我们首先要了解,所有的html元素,都要么是块元素(block).要么是内联元素(inline).下面了解一下块元素.内联元素各自的特点: 块元素(block)的特点: 1.总是在新行上开始:2.高度,行高以及顶和底边距都可控制:3.宽度缺省是它的容器的100%,除非设定一个宽度.          内联元素(inline)的特点: 1.和其他元素都在一行上:2.高,行高及顶和底边距不可改变:3.宽度就是它的文字或图片的宽度,不可改变.         我们来详细了解它们的情况. 块元素(blo…
Eclipse 中的重构功能使其成为了一个现代的 Java 集成开发环境 (IDE),而不再是一个普通的文本编辑器.使用重构,您可以轻松更改您的代码,而不必担心对别处造成破坏.有了重构,您可以只关注于所编写代码的功能, 而不必分心去考虑代码的外观如何,因为之后您可以使用重构工具来快捷地将代码变成整洁而高度模块化的代码.本文将向您介绍如何使用 Eclipse 中的一些功能强大的重构函数. 重构类型 重命名 Rename 应该是 Eclipse 中重常用的重构.利用这个重构,可以对变量.类.方法.包…
开始使用Grunt 大多数开发人员都一致认为,JavaScript开发的速度和节奏在过去的几年里已经相当惊人.不管是Backbone.js和Ember.js的框架还是JS Bin社区,这种语言的发展变化不仅提高我们网站的用户体验,而且我们也在开始使用他们. 当您在使用JavaScript,您可能需要定期执行多个任务.虽然这在大多项目中都存在,但切实是一个耗时的和重复的工作方式.在这样一个活跃的社区,你会假设工具都可以自动化,加快这个过程.此时就出现了Grunt. 什么是Grunt 建立在Node…
原文转自:http://blog.jobbole.com/51586/ 这篇文章将带领你用Grunt来提速和优化网站开发的流程.首先我们会简短介绍Grunt的功能,然后我们直接上手,介绍如何用Grunt的不同插件来替你完成网站项目开发中的很多繁冗工作. 接着我们会创建一个简单的input校验器,用 Sass 来完成CSS的预处理,我们会学习如何用grunt-cssc 和CssMin来合并和压缩CSS,如何用 HTMLHint 来保证我们的HTML正确无误,以及如何实现在运行时部署和压缩我们的文件…
什么是自动化 先来说说为什么要自动化.凡是要考虑到自动化时,你所做的工作必然是存在很多重复乏味的劳作,很有必要通过程序来完成这些任务.这样一来就可以解放生产力,将更多的精力和时间投入到更多有意义的事情上.随着前端开发不再是简单的作坊式作业,而成为一个复杂的工程时,还涉及到性能优化一系列工作等等,这时自动化已然是迫切的需求. 早期的网站开发 在还没有前端工程师这种分工如此明确的岗位时,大家所理解的前端工作无非就是制作网页的人,包括html.css.js等.稍微高级点的可能就是php了,可以读写数据…