Parcel-VUE零配置前端构建（iview实践）
前言在我的上一篇文章才刚刚阐述了vue-cli的webpack模板工程构建优化方案和步骤，以及在结尾时对未来前端构建的思考和展望。结果这个时候Parcel就横空出世了，目前关于Parcel的文档很少，而且Parcel本身也处于高速迭代发展的实验阶段，但它的确是前端构建的最终解决方案，也许这一次，真的没有之一了原本寄期望于webpack能够一统天下，但伴随着webpack越发复杂臃肿，我对于它的发展实在没有太多的信心，并非功能越强大越完整就是最合理，每每看着vue-cli的webpack官方模板都包含了七八个配置文件，每个文件内各种形形色色的逻辑配置，甚至超过了业务代码的复杂度，那么维护配置本身，就已然是一件工程量巨大的工作，难道未来还需要再出另外一门语言来单独管理配置吗？前端零配置的需求越来越高，parcel为前端构建带来了革命性的变化，很庆幸对于Parcel的发现，因为它将我从前端繁杂的配置中解放出来，而我也希望本文能够为和我有同样烦恼和困惑的读者们，得到答案思路对于Parcel的实践，本文基于Vue以及其衍生出来的组件框架iV
javascript背包问题详解
01背包问题引子打算好好学一下算法，先拿背包问题入手。但是网上许多教程都是C++或java或python，大部分作者都是在校生，虽然算法很强，但是完全没有工程意识，全局变量满天飞，变量名不明所以。我查了许多资料，花了一个星期才搞懂，最开始的01背包耗时最多，以前只会枚举（就是普通的for循环，暴力地一步步遍历下去），递归与二分，而动态规划所讲的状态表与状态迁移方程为我打开一扇大门。篇幅可能有点长，但请耐心看一下，你会觉得物有所值的。本文以后还会扩展，因为我还没有想到完全背包与多重背包打印物品编号的方法。如果有高人知道，劳烦在评论区指教一下。注意，由于社区不支持LaTex数学公式，你们看到${xxxx}$,就自己将它们过滤吧。1.1问题描述：有${n}$件物品和${1}$个容量为W的背包。每种物品均只有一件，第${i}$件物品的重量为${weights[i]}$，价值为${values[i]}$，求解将哪些物品装入背包可使价值总和最大。对于一种物品，要么装入背包，要么不装。所以对于一种物品的装入状态只是1或0,此问题称为01背
精读《初探 Reason 与 GraphQL》
写文章登录精读《初探Reason与GraphQL》黄子毅5hoursago本期精读的文章是：ExploringReasonandGraphQL1引言2018年了，Reason生态发展了不少，而且正好看到一篇文章的作者也抱着这种心态尝鲜React+graphql，索性调研一下，看看这套前沿的方案是否有落地对可能性。2内容概要一切皆模块在reason中，一切皆模块，而且不需要手动申明导出与引用，这个是js的痛点。以下面的代码为例：openData;lettypeDef={|typeAuthor{id:Int!firstName:StringlastName:Stringposts:[Post]#thelistofPostsbythisauthor}|};typeresolvers={."posts":Js.Array.t(post)};letresolvers={"posts":(author:Data.author)=>Js.Arra
模仿RequireJs的用法实现一个低配版的模块加载器
模仿RequireJs的用法实现一个低配版的模块加载器Contents前言回顾RequireJs的基本用法实现原理使用方法总结前言前段时间一直想用单页开发技术写一个自己的个人网站(使用es2015)，写了一部分之后，发现单页应用因为只有一个页面，所以第一次加载index.html时就要下载所有js文件，并且为了好管理各个部分的状态，需要划分页面的各个功能区为各个模块，es2015本身是不支持一些模块规范的(比如AMD、CMD、CommonJs等)，所以只能这样模拟实现：//globalvarspa=(function(){...})();//moduleblogspa.blog=(function(){...return{do1:do1,do2:do2,};})();//modulemodelspa.model=(function(){...})();//moduleshellspa.model=(function(){...})();并且各个模块之间又存在一些依赖关系，在index.html里面写scr
现代Web开发方法
最近,读了一些外文,觉得这篇现代web开发方法的文章还可以,就翻译了一下,尽我最大的努力,蹩脚的英文很是费劲,其中有的夹杂了一些自己粗浅的理解,如果有误导,请多多包涵,还请路过的老师多提意见和指正,如果你想阅读英文原文,可直接扫文末下方二维码阅读即可若想听音频,直接戳该链接即可几个提示脱颖而出的现代网络发展在本文中，我将介绍使用基于单页JavaScript的框架的基本概念，优点和缺点首先，单页面应用程序是什么？让我们看看传统的Web应用程序是如何工作的。通常，一个完整的堆栈服务器端应用程序在服务器本身上生成Web应用程序的所有数据。只有这样才能在页面呈现之前将其发送给客户端单页应用程序概述（SPA）内容从数据库中获取，然后通过控制器传递，最后在视图模板发送前与视图模板合并这体现在每次浏览应用程序或网站时重新加载的页面的形式。JavaScript在这里的作用是非常小的。它只负责控制用户界面的小部分几年前，单页应用程序开始在开发人员中流行起来。单个页面应用程序向服务器发送一个HTML文件框架的请求，以及样式和脚本与此同
关于本新手使用vue后的一些反思
本人是一个刚毕业半年多的前端小白，进公司工作的时候，由于公司的前端技术还没定下来，所以在做项目的时候我是自由发挥。由于vue具有上手快，开发效率高的特点，所以，我在做项目时候，便选择了vue作为技术栈，由于是第一次使用bootstrap加jQuery以外的技术栈，所以以下是在完成项目的过程中，对vue使用方面认识不到或不足的反思。1.首先，新手使用vue最常见的失误，就是DOM操作，而vue的双向数据绑定，恰恰让我们其实不需要进行繁琐的DOM操作，我们只需要关心数据层面就可以了。想想自己最开始获取input还是用什么document.getElementById('id').value这种，就觉得自己很傻，明明只需要v-model绑定data就好了，唉~2.以为vue只能用于开发SPA。直到看到尤大神在知乎上回答的：不一定做个项目就非得cli一个全家桶，vue也不是为单页面而生的。我才知道，vue的运用方式，我仅仅知道冰山一角，如何能灵活根据自己的需求使用开发，还需自己日后的多多成长。3.组件化思想。起初一开始，觉得别人的UI框架都写
基于 jQuery 的 Web 表单处理工具 TinyForm 0.7.8 发布
TinyForm是一个基于jQuery的WEB表单处理工具(仅操作表单，不是创建表单)。使用这个工具，不会改变原有的DOM结构和样式，也不会新增或移除元素。他根据传入的选择器或DOM/jQuery对象，创建表单实例，然后在这个范围内搜索带有name属性的表单字段添加asDefault与getChanges方法，用于支持获取表单内被修改过的字段#ID7LF通过选项exclude或标签属性data-exclude排除一定范围内的字段，以支持子表单的操作#IEP9W表单中文件字段异步一起上传的支持(使用formdata实现,实验中)#ID7LE优化设置值时，支持给setData的第二个参数传入boolean值，当传入true时会跳过data中没有的字段（这些字段保留原值）在多选select时，若没有选择项，返回值为空数组，不再是之前的null在表单字段为空时，统一返回空字符串，不再返回undefined
使用xUnit为.net core程序进行单元测试(上)
一.导读为什么要编写自动化测试程序（AutomatedTests）？可以频繁的进行测试可以在任何时间进行测试，也可以按计划定时进行，例如：可以在半夜进行自动测试。肯定比人工测试要快。可以更快速的发现错误。基本上是非常可靠的。测试代码与生产代码紧密结合。使得开发团队更具有幸福感！自动化测试的分类：纵轴表示测试的深度，也就是说测试的细致程度。横轴则表示测试的覆盖程度。UnitTest单元测试，它可以测试一个类，或者一个类的某个功能，它具有很好的深度，但是对整个应用来说它不具备很好的覆盖面。IntegrationTest集成测试，它没有单元测试那么细致，但是具有相对较好的测试覆盖面。例如它可以测试功能的组合，以及像数据库或文件系统这样的外部资源等。SubcutaneousTest皮下测试，这种测试作用于UI层的下面一层，这也意味着它对整个应用来说有很好的覆盖率，但是深度欠佳。那一个MVC结构的应用来说，它就是针对刚好在Controller下面一层的测试，对于Webservice来说，它就是对节点下面那层的测试。UI测试，
JavaScript 2018: 你需要和不需要深入的 - The New Stack
JavaScript现今已发展成熟--我们也不再是在页面上做一些小小的互动元素了，而是使用JavaScript构建整个大型应用。当然，这也使得其比过去更为复杂，在这个变化万千的JavaScript生态系统中，我们也已难以知道整个系统到底有多大。EthanBrown，以软件工程师为职业的同时，还是两本JavaScript书籍的作者，均由O'Reilly出版。EthanBrown花了大量的时间剖析JavaScript，尝试着弄清楚这里面都有什么，以及一个现代JavaScript开发者该如何去开始迎合这些东西。在2018里，对于聪明的开发者们可以去熟悉的东西，Brown给出了他对JavaScript生态系统中各个方面最前沿，至少也是很有用的预测。有两点需要说明的是：首先，他基于所有JavaScript于标准的这些变化中，指出了一些好的可以去了解的，尽管里面所罗列的一些东西可能不是你所关注的。对这些有一些大体上的了解能够让你在遇到困难难以抉择时，产生联系，知道去找谁，知道该去了解什么样的技术。
Axure变量详解
以前使用Axure只是停留在元件的布局和简单交互事件的设置，使用得非常肤浅，直到现在有时间静下心来重学Axure，才发现函数和变量的牛逼之处。以前在做较复杂交互时，为了实现一个效果吭哧吭哧写了一串命令，而往往函数和变量一两行就搞定了。众所周知我们写的命令越多，相互之间冲突的可能性越大，出错越多，而且排查起来耗时耗力，尤其是在我们制作高保真原型做可行性测试的时候。这时使用函数和变量写交互命令的威力就体现出来了，简单的命令就能能制作逼真的复杂交互效果。其实函数和变量没有我们想象的那么难。变量的本质就是：数值的获取和使用函数的本质就是：数值的处理（处理各种计算来达到想要的交互效果）今天重点讲下变量变量可以分成两大类：系统变量和自定义变量，而自定义变量里面又包括全局变量和局部变量。系统变量，全局变量，局部变量三者功能各不相同。系统变量：是系统已经创建好的变量，用于直接获取对象的特定属性值。全局变量：主要是用于不同页面之间值的传递。局部变量：主要是用于指定页面内某个特定对象，往往和系统变量配合使用。系统变量在哪儿
利用jsdoc为vue项目生成漂亮的文档
jsdoc是前端自动生成文档所常用的工具。我们只要按照jsdoc的语法来书写注释就能顺利的生成一片很漂亮的文档。只是jsdoc针对的是js文件，对于.vue文件似乎就有些无能为力了。不过既然vue这么人气，相信一定也会有相应的工具。在找了一圈之后，果然找到了一位前辈写的jsdoc-vue。在研究了一下之后，发现这个工具主要解决了jsdoc不认.vue文件的问题。虽然可以让.vue文件自动生成文档，但生成出的文档样式却并不好看。于是就fork过来改造了一下。废话不多说，先上一张生成的文档截图。github地址：jsdoc-vue改造版
高性能的javascript之加载和执行篇
image.png组织脚本由于每个
我所不知的 JS
我所不知的JS几天前在阅读MDN文档时我发现了一些我从来不知道的JS特性和API。下面是一份简短的清单，无论有用不有用--学习JS的道路似乎是没有尽头的。标签语句在JS中，你可以对for循环和代码块起名字...谁知道呢（显然我不知道）！稍后你可以在for循环中对该代码使用break或continue语句，同时在代码块中也可以使用break。loop1://labeling"loop1"for(leti=0;i<3;i++){//"loop1"loop2://labeling"loop2"for(letj=0;j<3;j++){//"loop2"if(i===1){continueloop1;//continuesupper"loop1"//breakloop1;//breaksoutofupper"loop1"}console.log(`i=${i},j=${j}`);}}/**#Out
ionic 学习之 上拉菜单、背景层、下拉列表
简介这一篇是我开始学习ionicJavaScript部分的第一篇，所以已经做好了踩坑的准备，而且可能会遇到很多不懂的地方，所以随手注释，笔记会凌乱些。而且此前没有学angularjs，所以也会补充些该方面的知识点上拉菜单上拉菜单(ActionSheet)通过往上弹出的框，来让用户选择选项。你可以通过点击取消按钮或者点击空白的地方来让它消失。兴冲冲地CV代码，开始学习，结果出现的是这个鬼样子，颜色和按钮都没得了
web前端vue：如何追踪数据（data里）变化实时渲染
当你把一个普通的JavaScript对象传给Vue实例的data选项，Vue将遍历此对象所有的属性，并使用Object.defineProperty把这些属性全部转为getter/setter。用户是看不到getter/setter，但是在内部它们让Vue追踪依赖，在属性被访问和修改时通知变化。每个组件里都有一个watcher实例对象，它会在组件渲染时把属性依赖记录下来，当setter被调用时会通知watcher重新计算重新渲染页面。
用SVG和Vanilla JS框架创建一个“星形变心形”的动画效果 | CSS-Tricks
#用SVG和VanillaJS框架创建一个“星形变心形”的动画效果ByAnaTudorOnNovember6,2017JavaScript,SVG在我写的这篇文章中,讲述了如何用vanillaJavaScript使动画顺滑的从一种状态过渡到另一种。最好先看下那篇文章，因为在这篇文章中我们要用到一些那篇文章中讲过的内容。例如例子的演示、各种时间函数的公式、当从结束状态过渡到初始状态时不使时间函数倒转过来。都在那篇文章中做了详细讲解。在最后的例子中，通过改变绘制嘴形的路径的属性d，我们得到了从悲伤的嘴变高兴的嘴的效果。更高水平的控制路径数据能够带给我们更有趣的效果，例如星形变心形。这是我们要实现的星形变心形的动画效果。思路它们都是由五个三次贝塞尔曲线构成。下边的互动演示展示了每条曲线以及这些曲线相连接的点。点击任意曲线或连接点可以看到两个图形的曲线是如何相对应的。SeethePenbythebabydino(@thebabydino)onCodePen.可以看
vue从入门到进阶：自定义指令directive，插件的封装以及混合mixins（七）
一.自定义指令directive除了核心功能默认内置的指令(v-model和v-show)，Vue也允许注册自定义指令。注意，在Vue2.0中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通DOM元素进行底层操作，这时候就会用到自定义指令。来个实例，当页面加载时，该input元素将获得焦点：//注册一个全局自定义指令`v-focus`Vue.directive('focus',{//当被绑定的元素插入到DOM中时……inserted:function(el){//聚焦元素el.focus()}})如果想注册局部指令，组件中也接受一个directives的选项：directives:{focus:{//指令的定义inserted:function(el){el.focus()}}}然后你可以在模板中任何元素上使用新的v-focus属性，如下：<input
混合开发框架整理：使用Crosswalk + WebViewJavascriptBridge进行混合开发
作者:hwj3747转载请注明Crosswalk介绍目前APP的开发模式大多基于H5+原生壳的开发模式，这时候使用到的WebView的性能就至关重要。我们知道，Android平台上，系统的碎片化比较严重，同Android版本的WebView的H5解析能力也有较大差异，导致相应的HTML5应用一致性难以保证。所以在做混合开发的时候，对Android系统的适配是一个比较麻烦的问题。这个时候，如果能在我们的APP嵌入一个第三方，不使用系统自带浏览器的话，这些问题就都迎刃而解了。Crosswalk就是这样一个第三方浏览器，其具有较好的H5性、功能支持，较好的平台一致性，以及近似原生应用的系统整合体验。Crosswalk项目具有以下优势：最大限度降低Android碎片化的影响，得到一致的，可预测的行为。使用最新的Web技术及API。在Android4.0+版本上提供丰富的功能。使用ChromeDevTools轻松调试。(很方便的功能，可以直接在谷歌浏览器上进行调试，只不过需要翻墙)提升应用中HTML，CSS和JavaScript的性能。
vue-quill-editor-upload : 实现vue-quill-editor上传图片到服务器
vue-quill-editor-uploadgit：https://github.com/NextBoy/vu...Aplug-inforuploadingimagestoyourserverwhenyouusevue-quill-editor.富文本编辑器vue-quill-editor的辅助插件，用于上传图片到你的服务器installnpmnpminstallvue-quill-editor-upload--save基本使用<template><!--bidirectionaldatabinding（双向数据绑定）--><quill-editorv-model="content"ref="myQuillEditor":options="editorOption"></quill-editor></template><scrip
San — A Flexible JavaScript Component Framework
HTML模版声明式的模板，在编写视图时就像是在写一个普通的页面，更符合HTML开发人员的习惯。数据驱动修改数据，视图引擎会根据绑定关系自动刷新视图，从此摆脱手工调用DOMAPI的繁琐与可能的遗漏。组件化组件是数据、逻辑与视图的聚合体。通过组件，我们封装独立的功能区块，小到输入组合，大到一个页面。高性能视图通过修改数据的方法，视图引擎能够直接刷新需要变更的视图区域，无需进行任何检测，性能更高。组件反解为首屏时间优化，服务端通常直接输出HTML。我们能从现有的元素中反向解析出组件，并构建绑定关系。体积小巧12k(gzipped)的体积，无需担心对页面下载带来负担。体积强迫症患者的福音。良好的兼容性通过方法修改数据的另一好处是，可以获