小猪的Python学习之旅 —— 5.使用Selenium抓取JavaScript动态生成数据的网页
小姐姐是挺好看的，只是身体日渐消瘦而已，多喝营养快线就好！(快来学Python爬虫，一起爬可爱的小姐姐啊~)抓多了发现有一些小网站很狡猾，竟然搞起反爬虫来了，不直接生成数据，而是通过加载JS来生成数据，然后你打开Chrome浏览器的开发者选项，然后你会发现Elements页面结构和Network抓包抓包返回的内容竟然是不一样的，Network抓包那里竟然没有对应的数据，本该是数据的地方，竟然是JS代码，比如煎蛋的妹子图：对于我这种不会JS的安卓狗来说，不禁感叹：抓不到数据怎么破，开始我还想着自学一波JS基本语法，再去模拟抓包拿到别人的JS文件，自己再去分析逻辑，然后捣鼓出真正的URL，后来还是放弃了，有些JS竟然他么的是加密的，而且要抓的页面那么多，每个这样分析分析到什么时候...后面意外发现有个自动化测试框架：Selenium可以帮我们处理这个问题。简单说下这个东西有什么用吧，我们可以编写代码让浏览器：1.自动加载网页；2.模拟表单提交(比如模拟登录)，获取
自己动手写一个 SimpleVue
最近看到一句话很有感触——有人问35岁之后你还会在写代码吗？各种中年程序员的言论充斥的耳朵，好像中年就不该写代码了，但是我想说，若干年以后，有人问你闲来无事你会干什么，我想我会说，写代码，我想这个答案就够了，年龄不是你不爱的理由。理论基础双向绑定是MVVM框架最核心之处，那么双向绑定的核心是什么呢？核心就是Object.defineProperty这个API，关于这个API的具体内容，请移步MDN-Object.defineProperty，里面有更详细的说明。接下来我们来看一下Vue是怎么设计的：图中有几个重要的模块：监听者(Observer):这个模块的主要功能是给data中的数据增加getter和setter，以及往观察者列表中增加观察者，当数据变动时去通知观察者列表。观察者列表(Dep):这个模块的主要作用是维护一个属性的观察者列表，当这个属性触发getter时将观察者添加到列表中，当属性触发setter造成数据变化时通知所有观察者。观察者(Watcher):这个
如何实现VM框架中的数据绑定
本文原创，转载请注明作者及出处如何实现VM框架中的数据绑定一：数据绑定概述视图（view）和数据（model）之间的绑定二：数据绑定目的不用手动调用方法渲染视图，提高开发效率；统一处理数据，便于维护三：数据绑定中的元素视图（view）：说白了就是html中dom元素的展示数据（model）：用于保存数据的引用类型四：数据绑定分类view>model的数据绑定：view改变，导致model改变model>view的数据绑定：model改变，导致view改变五：数据绑定实现方法view>model的数据绑定实现方法修改dom元素（input,textarea,select）的数据，导致model产生变化，只要给dom元素绑定change事件，触发事件的时候修改model即可，不细讲model>view的数据绑定实现方法1.发布订阅模式（backbone.js用到）；2.数据劫持(vue.js用到)；3.脏值检查(angular.js用到)；六：model>view数据绑定demo讲解（如何实现数据改变，导致UI界面重新渲染）
web路途-基础的JavaScript语法概要
javascript分别提供内置函数parseInt()和parseFloat()，转换为数字注：如果被转换的字符串，同时又数字和字符构成，那么parseInt会一直定位数字，直到出现非字符。所以"10abc"会被转换为10使用内置函数Boolean()转换为Boolean值当转换字符串时：非空即为true当转换数字时：非0即为true当转换对象时：非null即为trueNumber和parseInt一样，都可以用来进行数字的转换区别在于，当转换的内容包含非数字的时候，Number()会返回NaN(NotaNumber)parseInt()要看情况，如果以数字开头，就会返回开头的合法数字部分，如果以非数字开头，则返回NaNgetElementsByTagName和getElementsById区别！返回值不同：getElementsByTagName是选择标签的类型。返回的是一个一堆的标签，也就是一个集合（不是数组，但是拥有和数组一样的方法）.getElementsById返回的是一个标签var
js异步发展简史
什么是异步？所谓异步，简单来说就是异步任务（不会马上就完成的任务）；但是js不会等待你这个任务完成，而是直接执行下边的任务；等到你上边的任务完成之后才会去执行相应的逻辑。比如js读取文件就是异步的过程。异步编程的语法目标，就是怎样让它更像同步编程1、回调函数场景：读取一个文件letfs=require('fs')fs.readFile('./1.txt','utf8',function(err,data){//回调的特点是第一个参数一般为错误对象if(err){//如果err有值说明程序出错了console.log(err)}else{//否则表示成功获取到数据dataconsole.log(data)}})当然回调函数也有它的缺点：无法捕获错误（使用trycatch）funnctionreadFile(fileName){fs.readFile(fileName,'utf8',function(data){if(err){console.log(err)}else{co
Electron-vue开发实战1——Main进程和Renderer进程的简单开发
前段时间，我用electron-vue开发了一款跨平台（目前支持Mac和Windows）的免费开源的图床上传应用——PicGo，在开发过程中踩了不少的坑，不仅来自应用的业务逻辑本身，也来自electron本身。在开发这个应用过程中，我学了不少的东西。因为我也是从0开始学习electron，所以很多经历应该也能给初学、想学electron开发的同学们一些启发和指示。故而写一份Electron的开发实战经历，用最贴近实际工程项目开发的角度来阐述。希望能帮助到大家。预计将会从几篇系列文章或方面来展开：electron-vue入门Main进程和Renderer进程的简单开发引入基于Lodash的jsondatabase——lowdb跨平台的一些兼容措施通过CI发布以及更新的方式...（想到再写）说明PicGo是采用electron-vue开发的，所以如果你会vue，那么跟着一起来学习将会比较快。如果你的技术栈是其他的诸如react、angular，那么纯按照本教程虽然在render端（可以理解为页面）的构建可能学习到的东
Vue.js如何写一个简单的原生js模块，浏览器中的表现如何？
请点击此处输入图片描述浏览器正在逐步的支持原生JavaScript模块。Safari和Chrome的最新版本已经支持它们了，Firefox和Edge也将很快推出。如果您是一个vue.js用户，那关于JavaScript模块一个很酷的事就是他们允许您编写您的组件到自己的文件中而无需任何多余的构建步骤。在这篇文章中，我将向您展示如何编写一个JavaScript模块到一个文件中，并在vue.jsAPP中使用它。您可以在浏览器中就做到这一切而不需要Babel或者Webpack！当我说到“单文件组件”时，我所说的是一个JavaScript文件，它exports一个完整的组件定义。我说的不是您已经习惯使用的单一的.vue文件。对不起，如果您很失望的话，但我仍然认为这很酷，所以来看一下。项目配置让我们使用Vue-cli的simple模板来试试。没错，不需要WebPack；）$vueinitsimplesfc-simple本教程完整的源代码在GitHub。（https://github.com/anthonygore/vue-s
使用MyEclipse将HTML5移动项目迁移到PhoneGap（一）
MyEclipse开年钜惠在线购买低至75折！立即开抢>>【MyEclipse最新版下载】一、创建一个新的PhoneGap应用程序项目PhoneGap应用程序项目的结构与HTML5移动应用程序项目类似。还没安装MyEclipse？立即下载>>1.在Dashboard的常规选项中选择Mobile页面，然后点击CreateaPhoneGapApplicationProject。从Dashboard开始使用2.为您的项目指定一个与正在迁移的HTML5项目类似的名称，然后单击Next。为项目命名3.接受默认的BlankApplication模板，然后单击Next。选择blankapplication模板4.如果您之前已将应用程序提交到AppleAppStore或Androidmarketplaces，请输入提交应用程序时使用的相同应用程序ID。5.如果您的HTML5应用访问本地设备功能（如联系人或地理位置），请选择插件，然后单击Finish。
Vue.nextTick 的原理和用途
对于Vue.nextTick方法，自己有些疑惑。在查询了各种资料后，总结了一下其原理和用途，如有错误，请不吝赐教。概览官方文档说明：用法：在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的DOM。疑问：DOM更新循环是指什么？下次更新循环是什么时候？修改数据之后使用，是加快了数据更新进度吗？在什么情况下要用到？原理异步说明Vue实现响应式并不是数据发生变化之后DOM立即变化，而是按一定的策略进行DOM的更新。在Vue的文档中，说明Vue是异步执行DOM更新的。关于异步的解析，可以查看阮一峰老师的这篇文章。截取关键部分如下：具体来说，异步执行的运行机制如下。（1）所有同步任务都在主线程上执行，形成一个执行栈（executioncontextstack）。（2）主线程之外，还存在一个"任务队列"（taskqueue）。只要异步任务有了运行结果，就在"任务队列"之中放置一个事件。（3）一旦"执行栈"中的所有同步任务执行完毕，系统就会读取"任务
Node.js design pattern : Reactor (Event Loop)
Nodejs是非阻塞的，源于它是基于事件循环的设计模式，该模式也称为Reactor模式。Nodejs同时也是单线程的，这里的单线程指的是开发人员编写的代码运行在单线程上，而Nodejs的内部一些实现代码却是多线程的，如对于I/O的处理（读取文件、网络请求等）。关于EventLoop在另一篇文章中有粗略提到，本文将详细阐述。但对于I/O请求不也是开发人员编写的代码吗，不是说我们自己写的代码都是运行在单线程上的，怎么这里又可能变成多线程了？这里就要讲到reactor模式了。在此之前，先简单了解下BlockingI/O与Non-blockingI/O。BlockingI/OvsNon-blockingI/OBlockingI/OBlockingI/O是程序会等待I/O请求直到结果返回，相当于控制权一直在等待I/O这边，在等待的这段时间里程序不会去干其他事，就这么一直干等着。例子如：data=socket.read();//waituntilthedatafetchback
Vue入坑记
前端学习路径加强版前端新手，不知道如何自学？前端养成记告诉你，正确的前端学习路径！从此规划好前端自学进度……HTML、CSS、JavaScript，Bootstrap、jQuery、Zepto，Sass、Babel、Gulp，Vue.js、Angular、React，WebSocket、WebWorker、V8引擎Vue近阶段学习总结引言随着学习vue2.0的脚步加快，突然之间感觉自己的知识点有一些遗漏，为了巩固所学知识，同时也为了查漏补缺，以根据自己学习和做项目的情况整理了我个人的vue技术栈，知识点梳理如下：开发环境搭建老话说的好‘工欲善其事，必先利其器’，在我们程序员的世界里要想开发出一款优秀的…Vue探索与实践本文主要讲了实际业务在结合vue开发的过程中的探索与实践。《深入理解ES6》阅读笔记---Promise与异步编程在异步编程概念已经普及的今天，我们依然要谈一谈它，对于我们做前端代码的意义。当你通过Ajax请求数据使用回调函数来获取数据时，这就是一种异步编程。$.ajax({url:'x
在vue中创建多个ueditor实例
简介在vue中创建多个ueditor实例,我使用neditor,其实就是把ueditor样式美化了下,其他和ueditor几乎一样截图源码地址https://github.com/obliviouss...说明下载ueditor或neditor源码,拷贝到static目录下面然后修改ueditor.config.js配置文件在vue项目的main.js添加ueditor引用新建3个页面home,tab1,tab2。tab1和tab2是home下面的子页面在router-view外面一定要添加keep-alive组件和transition组件,不然ueditor实例无法保存在components文件夹下面新建一个editor作为编辑器的公共组件在tab1中调用editor,同时要传入一个id并在editor页面接受,注意如果需要多个实例,id一定不能相同<template><div><editorref="editor"id="tab1Editor"
巧用 Img / JavaScript 采集页面数据
我们发送重要邮件时为了确认对方已读，都会在邮件中设置一个“读取回执"标签以确定对方时候读信。这种模式用途很广，例如：发送传单时，确保对方已读推广网页时，多少用户做了点击移动App运营活动页面，分析用户访问情况对这类个性化的采集与统计，针对站长CNZZ、百度统计，移动的TalkingData、友盟等都无法胜任。主要难点在于：个性化需求难满足：用户产生行为并非移动端场景，其中会包括一些运营个性化需求字段，例如：来源、渠道、环境、行为等参数开发难度大/成本高：为完成一次数据采集、分析需求，首先需要购买云主机，公网IP，开发数据接收服务器，消息中间件等，并且通过互备保障服务高可用；接下来需要开发服务端并进行测试使用不容易：数据达到服务端后，还需要工程师先清洗结果并导入数据库，生成运营需要的数据无法弹性：无法预估用户的使用量，因此需要预留很大的资源池从以上几点看，当一个面向内容投放的运营需求来了后，如何能以很快捷的手段满足这类用户行为采集、分析需求是一个很大的挑战。日志服务提供WebTracking/JS/TrackingPixel
vue-lazyload插件
更详细的内容,请移步使用npminstallvue-lazyload--save//注册插件importvueLazyloadfrom'vue-lazyload'Vue.use(vueLazyload);//在需要懒加载的图片上<imgv-lazy="imgUrl">参数说明注册插件的时候，是可以传入第二个配置参数的Vue.use(vueLazyload,{})可选的参数如下：preLoad:类型Number,默认1.3.表示lazyload的元素距离页面底部距离的百分比.计算值为(preload-1).attempt:图片加载失败后的重试次数.默认为3.error:类型string.图片加载失败后的显示的失败图片路径.loading:类型string.图片正在加载中显示的loading图片的路径.listenEvents:类型array.默认['scroll','wheel','mousewheel','resize','animationend','transitionen
js的6种继承方式理解
约定P.S.下面将展开一个有点长的故事，所以有必要提前约定共同语言：/**约定*/functionFun(){//私有属性varval=1;``//私有基本属性vararr=[1];``//私有引用属性functionfun(){}``//私有函数（引用属性）//实例属性this``.val=1;``//实例基本属性this``.arr=[1];``//实例引用属性this``.fun=``function``(){};``//实例函数（引用属性）}//原型属性Fun.prototype.val=1;``//原型基本属性Fun.prototype.arr=[1];``//原型引用属性Fun.prototype.fun=``function``(){};``//原型函数（引用属性）|上面的约定应该是比较合理的，如果难以理解，可以查看黯羽轻扬：JS学习笔记2_面向对象，了解更多的基本常识一.简
Axios 使用时遇到的问题
最近使用vue构建一个小项目，在使用axios发送post请求的时候，发现axios发送数据默认使用json格式，百度搜了下，更改ContentType不管用，最终问题原来是：post的传参需要序列化，不然服务端不会正确接收数据，终于找到两种方法解决：方法一：使用JSON.stringify()URLSearchParams接口定义了一些实用的方法来处理URL的查询字符串；JSON.stringify()用于从一个对象解析出字符串。在vue项目中，发送的参数定义为param，letparam=newURLSearchParams()param.append("bizContent",JSON.stringify(bizContent))axios.post(httpUrl.getDatas,param)方法二：使用qs库首先要安装qs，然后在项目中引用：importqsfrom'qs'同样，我们使用qs.stringify()这个方法处理post请求中
Vue组件开发 -- Markdown
利用marked和highlight.js开发markdown组件实现效果图如下:markdown组件已这种形式<Markdownv-model="markdown"></Markdown>来绑定markdown的值我们可以通过valueprop和input事件来达到这个效果用法详情代码部分:<Markdownv-model="markdown"></Markdown>markdown组件1.响应v-model//通过监听input事件触发handleModelInput方法<textareav-model="val"@input="handleModelInput"ref="text"@keydown.tab="tabMarkdown"></textarea>importmarkedfrom'marked'importhighlightJsfrom'highlight.js'exportdefault{
2017年 JavaScript 框架回顾 -- 前端框架
概述：对于JavaScript社区来说，npm的主要功能之一就是帮助开发者发掘所需的npmRegistry中的库和框架。npm强大的搜索功能能够帮助找到一组相关的软件包，同时其内置的的文档和使用统计信息，可以帮助开发者决定使用哪一种软件包。选择过程中，一个重要的评估因素就是社区对软件包项目的持续支持：是否正在积极的维护？是否有足够大的社区来维持项目？评估的过程中，软件包的普及程度是一个重要的考量因素。不论是通过博客文章还是教程的方式，一个具有大型社区的软件包意味着有更多的开发者可以帮助你解决问题。一个大型的社区也意味着在遇到错误之前，找到修复错误的可能性更大。如果你们是一个大型的团队，那么使用流行的软件包，也能让你更容易的招聘到熟悉这些软件的开发人员。使用npm的下载统计数据，可以让开发者了解到使用和维护软件包的人数。一旦将软件包加入软件中，那么软件包将拥有非常长的寿命，因为开发者一旦安装了软件包，就很少会将其从软件包中删除掉，正是由于这种非常低的“流失”，安装包的使用几乎不会降低。而且随着npm用户数的不断上升
基于 Vue.js 2.0 酷炫自适应背景视频登录页面的设计
本文讲述如何实现拥有酷炫背景视频的登录页面，浏览器窗口随意拉伸，背景视频及前景登录组件均能完美适配，背景视频可始终铺满窗口，前景组件始终居中，视频的内容始终得到最大限度的保留，可以得到最好的视觉效果。并且基于Vue.js2.0全家桶。具体效果如下图所示：最终效果可以翻到文章最后观看。1.背景视频Web页面的既有实现方式国外有一个很好的网站「Coverr」，提供了完善的教程和视频资源，帮助前端开发者构建酷炫的背景视频主页，网站效果示例如下图所示：教程如下所示：从图中以及我的实践可以得出以下观点：该教程使用了jQuery。由于我们想要使用Vue.js，则jQuery可被完全替代掉。该教程的CSS、JavaScript代码均过于冗余。直接运行示例，发现效果并不好，浏览器窗口随意拉伸时，背景视频并不能完美适配「会出现黑边等瑕疵」，效果未达到预期。2.设计完美的背景视频Web页面首先基于脚手架工具vue-cli来创建一个使用vue-loader的项目，构建完毕后，在相应目录下创建「.vu
Javascript系列——对象元素的数组去重实现
概要这是一篇记录文，记录数组操作对象去重的实现。需求有这样一个数组[{_id:123,name:'张三'},{_id:124,name:'李四'},{_id:123,name:'张三'}]实际上我们只需要[{_id:123,name:'张三'},{_id:124,name:'李四'}]去重简单数组的去重Array.from(newSet([1,1,2,3,4,4]))//[1,2,3,4]以对象为元素的数组去重和数组相关的算法多种多样，在你以为自己已经掌握数组之后，会发现很多和数组相关的算法仍旧很复杂。下面我将讲述一个入门等级的数组算法，解决上面提出的需求。1、定义一个函数removeRepeat，它需要传入2个参数，arr表示需要去重的数组，field表示需要比较的key。比如我们的需求是比较_id是否有重复。functionremoveRepeat(arr,field){returnarr}2、需要一个空数组，用来存储每个对象元素中field对应的value。lets=[]