开发一个加载 vue 远程代码的组件
在我们的vue项目中（特别是后台系统），总会出现一些需要多业务线共同开发同一个项目的场景，如果各业务团队向框架中提供一些私有的展示组件，但是这些组件并不能和框架一起打包，因为框架不能因为某个私有模块的频繁变更而重复构建发布。在这种场景下我们需要一个加载远程异步代码的组件来完成将这些组件加载到框架中。vue-cli作为Vue官方推荐的项目构建脚手架，它提供了开发过程中常用的，热重载，构建，调试，单元测试，代码检测等功能。我们本次的异步远端组件将基于vue-cli开发。需求分析如何加载远端的代码?如何注册加载后的代码到框架中。父组件如何和远端引入的组件通信。远端代码如何复用框架中已引入的库。避免因远端代码被类似v-for多次调用导致的不必要请求。加载远端代码远端代码应该存储在一个可访问的URL上，这样我们通过Axios类似的HTTPclient请求这个链接拿到源码。importAxiosfrom'axios';exportdefault{name:'SyncComponent',props:{
基于 Vue.js 之 iView UI 框架非工程化实践记要
像我们平日里做惯了Java或者.NET这种后端程序员，对于前端的认识还常常停留在jQuery时代，包括其插件在需要时就引用一下，不需要就删除。故观念使然，尽管Nuget和Maven用得顺溜，但对NPM仍不带感，兴许是周边无人带动的稀薄气氛，也或者是没参加过类似的大型活动，于是在自发性上差了许多。再者，我不用MVVM模式，领导也不会扣绩效。为了快速体验MVVM模式，我选择了非工程化方式来起步，并选择使用Vue.js，以及基于它构建的iViewUI框架。Vue.js是美籍华人尤雨溪创作的，那会儿他还在Google工作，他自感Angular.js繁杂，进而自创了更为简洁易用的Vue.js。iViewUI是由90后梁灏[hào]创作，网名Aresn，在大数据公司TalkingData负责可视化基础架构，更了不起的是他还出了《Vue.js实战》一书，我是在“双十一”的前一天买的，行文措词简洁，表意直达困惑，入门很迅速，是我喜欢的风格。花了一周时间扫完了前十二章内容，用WebSt
五、VueJs 填坑日记之将接口用webpack代理到本地
上一篇博文，我们已经顺利的从cnodejs.org请求到了数据，但是大家可以注意到我们的/src/api/index.js的第一句就是：//配置API接口地址varroot='https://cnodejs.org/api/v1'这里我们的接口地址是写死的，这固然是一个问题，但是其实并不是最重要的，而是在cnodejs.org已经帮我们把接口处理的很好了，帮我们解决了跨域问题。而在实际开发中，很多项目接口是不允许我们跨域请求的。而在第一章说到的前后端分离开发模式，前端开发前端，同时后端也在开发接口，那这个时候我们前端工程师不可能到服务器上直接开发，或者在本地搞一套服务器环境，如果是这样就违背了我们前后端分离开发的初衷。那么如何解决这个问题呢？其实很简单，要知道跨域不是接口的限制而是浏览器为了保障数据安全做的限制。因此，一种方法可以解决，那就是打开浏览器的限制，让我们可以顺利的进行开发。但是无奈的是，最新的chrome浏览器好像已经关闭了这个选项，那么我们只能采用另外一种方法了——将接口代理到本地。配置webpac
爬虫-拉勾招聘需求词频分析
本文实现拉勾网的爬虫，抓取招聘需求，统计出的词频前70的关键词，当然数量可以自己定，以深圳市的python招聘岗位为例。1、爬虫老套路，分析浏览器请求，然后模仿之先手动打开拉勾的招聘链接，进行搜索，观察浏览器的行为https://www.lagou.com/zhaopin/搜索python后页面显示很多职位信息，然后打开chrome开发者工具查看这个页面的response，发现响应中找不到岗位信息查看开发者工具中的响应这样看来就是用ajax来请求的数据了，把这个ajax请求找到，发现岗位信息都在这个响请求中，formdata中的pn就是页码，kd是关键字找到响应的ajax请求于是模仿这个来发起请求，先获取第一页(这里有一个坑，如果请求头没有Referer字段，请求不到数据，反爬的常用手段，直接复制上面找到的请求中的就行)importrequestsimportjsonclassLagouCrawl(object):def__init__(self):self.url="https://
SpringMVC处理ajax请求的跨域问题和注意事项
.首先要知道ajax请求的核心是JavaScrip对象和XmlHttpRequest，而浏览器请求的核心是浏览器ajax请求浏览器请求场景一：使用ajax获取session中的user（跨域）从上图可知，ajax每次访问服务器时都没有携带cookie，所以服务器每次都会分配一个新的session对象，所以ajax默认请求是直接获取不了session中的数据的。因此，如果我们想要通过ajax获取当前浏览器的session，我们必须保证每次发送请求都要携带cookie以确保获取的事统一个session。解决方法：step1.服务器设置接收ajax发送的cookieimportjavax.servlet.http.HttpServletRequest;importjavax.servlet.http.HttpServletResponse;importorg.springframework.web.servlet.handler.HandlerInterceptorAdapter;//HandlerInterc
使用 ViewContainerRef 探索Angular DOM操作
_翻译：giscafer说明：根据个人理解翻译，不完全词词对应。_每当我读到关于使用AngularDOM的操作时，我总是会看到其中的一个或几个类:ElementRef,TemplateRef,ViewContainerRef等。遗憾的是，尽管Angular文档或相关文章当中提到这三者的一些内容，但我还没有发现关于这三者如何协作的完整的理想模型和示例的描述。本文旨在描述这种模型。如果你学习过angular.js的话，你就会知道在angular.js中很容易去操作DOM。Angular注入DOMelement到link函数中，你可以查询组件模板内的任何节点，添加或删除子节点，修改样式等等。然而，这种方法有一个主要缺点——它被紧紧绑定到一个浏览器平台上（意思是脱离浏览器就不能玩了）。新的Angular版本运行在不同的平台上——在浏览器上，在移动平台上，或者在webworker中。因此，需要在平台特定API和框架接口之间进行抽象级别的抽象。从Angular来
抛弃JQ，回归原生js……
之前我写过一篇文章叫做《jq不会被淘汰》……而事实上它真的不会被淘汰，因为即使在mvvm框架盛行的今天，原生js的api越来越友好的今天，jq依然在用户量上是霸主……但是今天我们要讨论的是，抛弃jq，拥抱原生js……再说正题之前，我们先来看看jq比js，解决了哪些问题，哪里更优秀1.首当其冲是浏览器兼容，jq本身做了很多浏览器的兼容，这导致了它的代码变得臃肿，但是不得不说，这方面jq做的很好√2.语法比较简洁，jq的代码语法是很简洁的，因为层层封装后，为的就是易用3.jq封装的ajax方法很好用，平时我们做前后端分离的时候，请求数据是必不可少的，jq的ajax就比较优雅，而同样的，如果是原生js，写一个ajax代码量可不少……我说我们应该抛弃jq，拥抱原生，其实不是瞎说的……首先，ie浏览器用户越来越少，如今已经很少很少了，就算一般人的浏览器装了ie内核的，它们多半也有个极速模式……那就是谷歌内核的……所以为了那一丢丢的用户，浏览器向下兼容变得不那么重要了……与其做兼容，不如做引导，如ie下提示更换浏览器……
arcgis for js叠加栅格图层(Raster Layer)
然后想直接叠加其中一个子图层（可见其类型为栅格图层）。代码如下：varlayer=newArcGISTiledMapServiceLayer("http://192.168.0.225:6080/arcgis/HN_test/MapServer/1");map.addLayer(layer);但这样必报错。报”400”错误，错误提示为：不支持的输出格式。Error:Outputformatnotsupported.Code:400啥格式？就是image格式。arcgis图层服务输出的格式有许多种，详见这里但是，如果只访问图层服务的根地址，则图层可以出来：varlayer=newArcGISTiledMapServiceLayer("http://192.168.0.225:6080/arcgis/HN_test/MapServer");//<-----------------后面没有“/1”map.addLayer(layer);真奇怪啊，我叠FeatureLayer的时候，都是直接访
纯原生JS的瀑布流插件Macy.js，前端必备插件
这是一款非常轻量级的纯原生JS的瀑布流插件——Macy.js，如今图片和视频网站非常多，非常适应瀑布流这样的布局方式来呈现给用户。所以，选择一款简单易用的瀑布流js插件，可以让前端工程师快速开发出漂亮的瀑布流Pc网站和react后台项目。瀑布流布局代表网站就是花瓣网，设计师一定不会陌生的设计网站。先看看Macy.js的项目案例截图吧：官网地址：http://macyjs.com/下面就是具体的使用说明：Step1:在页尾引入JS文件，（不能放在Header里哦）
聊聊lodash的debounce实现
本文同步自我的Blog前段时间团队内部搞了一个代码训练营，大家组织在一起实现lodash的throttle和debounce，实现起来觉得并不麻烦，但是最后和官方的一对比，发现功能的实现上还是有差距的，为了寻找我的问题，把官方源码阅读了一遍，本文是我阅读完成后的一篇总结。注：本文只会列出比较核心部分的代码和注释，如果对全部的源码有兴趣的欢迎直接看我的repo：什么是throttle和debouncethrottle(又称节流)和debounce(又称防抖)其实都是函数调用频率的控制器，这里只做简单的介绍，如果想了解更多关于这两个定义的细节可以看下后文给出的一张图片，或者阅读一下lodash的文档。throttle：将一个函数的调用频率限制在一定阈值内，例如1s内一个函数不能被调用两次。debounce：当调用函数n秒后，才会执行该动作，若在这n秒内又调用该函数则将取消前一次并重新计算执行时间，举个简单的例子，我们要根据用户输入做suggest，每当用户按下键盘的时候都可以取消前一次，并且只
详解JavaScript与ECMAScript的区别
译者按：简单的说，ECMAScript是标准，而JavaScript是实现。原文:What’sthedifferencebetweenJavaScriptandECMAScript?译者:Fundebug为了保证可读性，本文采用意译而非直译。另外，本文版权归原作者所有，翻译仅用于学习。对于新手来说，大概会搞不清楚JavaScript与ECMAScript之间的关系与区别，这篇博客将详细介绍JavaScript与ECMAScript相关术语，帮助大家搞清楚状况…EcmaInternational一个制定技术标准的组织什么是标准呢？我们可以想一想键盘。绝大多数的键盘的字母顺序是一样的，并且都有空格、回车，方向和数字等键。这是因为大多数的键盘制造商都遵守了[QWERTY标准。ECMA-262由EcmaInternational发布。它包含了脚本语言的标准。ECMA-262类似于QWERTY，后者标准化了键盘布局，而前者标准化了脚本语言ECMAScript。不妨把ECMA-262看做ECMAScri
禁用一个链接
最好别这样做SeethePendisabled-linkbyyrq110(@yrq110)onCodePen.Lookdisabled.isDisabled{cursor:not-allowed;opacity:0.5;}Actdisabled对于使用鼠标点击的情况，使用pointer-events:none;.isDisabled>a{color:currentColor;display:inline-block;/*ForIE11/MSEdgebug*/pointer-events:none;text-decoration:none;}对于使用键盘enter的情况，使用JS绑定事件varlink=document.querySelector('a');link.addEventListener('click',function(event){if(this.parentElement.classList.contains('
jQuery中JSONP的两种实现方式：
前台代码如下：后台Action代码如下：运行后就可以看到结果了。我追踪了下后台ProcessCallback代码，如下图：可以看到jsonCallback的值为"jQuery17104721...."，它是前端传给远程服务器后台Action的。这里jQuery171..表示的是jQuery的版本，可以简单地将这个理解为JSONP类型请求回调函数，jQuery在我们每次指定Ajax请求方式为JSONP时都会生成这么一个JSONP回调函数。虽然jQuery会自动帮我们生成一个回调函数，但是我们也可以通过设置jsonpCallback参数为jsonp请求定制一个我们自己的回调函数。第一种方式下面这三行代码设定了JSONP请求方式：dataType:"jsonp",jsonp:"jsonpcallback",//指定回调函数，这里名字可以为其他任意你喜欢的，比如callback，不过必须与下一行的GET参数一致data:"name=jxq&email=feichexia@yahoo.com.cn&
jsonp漏洞分析
漏洞原理json(javascriptobjectnotation)是javascript对象表示法的意思。比如：varimpromptu_object={"given_name":"john","family_name":"smith","lucky_numbers":[11630,12067,12407,12887]};alert(impromptu_object.given_name);运行结果是弹出john。jsonp字面上的含义是”填充式(padding)的JSON”,它通过填充二外的内容吧JSON序列化包装起来，变成一段有效的可以独立运行的Javascript语句。常见的例子包括函数调用(例如callback_function({…JSONdata…}))或变量赋值(varreturn_value={…JSONdata…})利用方式返回值形式为：变量赋值的形式Qmail.newMailsList={total:446,mailHome:"http://mail.qq.com/cgi-bi
基于CommentCoreLibrary简单的弹幕实现
最近有需求要实现一个简单的评论弹幕实现，通过简单的对CommentCoreLibrary的修改，达到下面的效果：示例地址html结构