F_意志力

F_意志力 查看完整档案

杭州编辑  |  填写毕业院校  |  填写所在公司/组织填写个人主网站
编辑

种一棵树最好的时间是在十年前,其次是现在

个人动态

F_意志力 关注了标签 · 2017-08-02

electron

Electron 是由 Github 开发,用 HTML,CSS 和 JavaScript 来构建跨平台桌面应用程序的一个开源库。
Electron 通过将 Chromium 和 Node.js 合并到同一个运行时环境中,并将其打包为 Mac,Windows 和 Linux 系统下的应用来实现这一目的。

关注 446

F_意志力 回答了问题 · 2017-05-14

怎样在canvas上让图片做tranform变换?

这3个api在canvas上面的的ctx对象上面都有,楼主可以去查阅一下,但是楼主要注意一点canvas的变换是原点变换类似css属性中transform-origin:0,0但是css变换这个属性默认是center center所以这就涉及到了一个在canvas上面一个比较经典的问题叫如何如何移动锚点简单来说利用了canvas的transform负值来做到的,手机打字无法给你演示了。

交楼主一个简单方法,楼主把那图片的transform-origin也设置成0,0,此时达到你之前的效果的参数就和canvas的值一模一样了

在外面没音电脑如果楼主还不明白回去后可以试着帮你实现下,但从成长角度推荐楼主根据楼上的链接自己写出实现代码

关注 3 回答 3

F_意志力 回答了问题 · 2017-05-04

解决python如何提高?

实战,可以从最简单的爬虫和blog系统开始,然后你会发现可能完成不了,就会各种去找代码,查资料,慢慢的你就越来越熟悉了

关注 4 回答 3

F_意志力 回答了问题 · 2017-05-04

解决canvas 裁剪空白区域

首先是可以做到的, canvas.getContext('2d').getImageData(0, 0, 宽, 高)会返回一个当前canvas的图像数据对象,其中有一个data属性,是一个一维数组,这个一维数组,每4个下标分别代表了一个像素点的R,G,B,A的值,楼主只需要遍历这些值就能找到边界了.下面是伪代码实现

var canvas = document.createElement('canvas')
canvas.width = 200
canvas.height = 210
document.body.appendChild(canvas)

var ctx = canvas.getContext('2d')

ctx.beginPath()
ctx.moveTo(0,50)
ctx.lineTo(100,50)
ctx.lineTo(100,25)
ctx.fill() // 出于演示目的随便画了个三角形

var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height).data

var lOffset = canvas.width, rOffset = 0,tOffset = canvas.height, bOffset = 0

for (var i = 0; i < canvas.width; i++) {
    for (var j = 0; j < canvas.height; j++) {
        var pos = (i + canvas.width * j) * 4
        if (imgData[pos] > 0 || imgData[pos + 1] > 0 || imgData[pos + 2] || imgData[pos + 3] > 0) {
            // 说第j行第i列的像素不是透明的
            // 楼主貌似底图是有背景色的,所以具体判断RGBA的值可以根据是否等于背景色的值来判断
            bOffset = Math.max(j, bOffset) // 找到有色彩的最底部的纵坐标
            rOffset = Math.max(i, rOffset) // 找到有色彩的最右端

            tOffset = Math.min(j, tOffset) // 找到有色彩的最上端
            lOffset = Math.min(i, lOffset) // 找到有色彩的最左端
        }
    }
}
// 由于循环是从0开始的,而我们认为的行列是从1开始的
lOffset++
rOffset++
tOffset++
bOffset++
console.log(lOffset, rOffset, tOffset, bOffset) // 1 100 26 50
// 意思是说包含有像素的区域是 左边第1行,到右边第100行,顶部第26行,到底部50行
// 此时如果你想找到外部区域的话,就是 left和top减1  right和bottom加1的区域
// 分别是0, 101, 25, 51.这个区间能够刚好包裹住

关注 8 回答 5

F_意志力 赞了文章 · 2017-05-02

变量对象和执行环境的理解

背景

夯实基础才是进步的根源,基础不牢地动山摇!!于是乎,结合《javascript高级程序设计》来点基础的学习和理解。本文主要会有两部分。rt!!

正文

1、执行环境的理解

执行环境(或者执行上下文)(execution context 后面简称ec)定义了变量或者函数有权访问的其他数据,决定了他们各自的行为。如果不好理解的话,接着看后面。

全局执行环境是最外围的一个执行环境,在web浏览器中,全局执行环境被默认为是指window对象。因此所有的全局变量和函数都是作为window对象的属性和方法创建的。全局执行环境直到应用程序推出才会被销毁(例如关闭网页或者浏览器的时候)。

每个函数都有自己的执行环境。当执行流进入一个函数的时候,函数的环境就会被推入一个环境栈中,而在函数执行之后,栈将其环境弹出。把控制权返回给之前的执行环境了。

执行环境一般分为全局执行环境和函数执行环境。

这个时候应该上代码了(高程上的代码)

var color = 'blue';

function changeColor() {
    var anotherColor = 'red';

    function swapColors() {
        var tempColor = anotherColor;
        anotherColor = color;
        color = tempColor;
    }

    swapColors();
}

changeColor();

来看看流程吧:

  1. 全局环境入栈
    image

  2. 全局环境入栈之后,其中的可执行代码开始执行,直到遇到了changeColor(),这一句激活函数changeColor创建它自己的执行上下文,因此第二步就是changeColor的执行上下文入栈。
    image

  3. changeColor的环境入栈之后,js执行引擎开始执行其中的可执行代码,遇到swapColors()之后又激活了一个执行上下文。因此第三步是swapColors的执行上下文入栈。
    wechatimg1

  4. 在swapColors的可执行代码中,再没有遇到其他能生成执行环境的情况,所以在swapColors顺利执行完毕后,swapColors的环境从栈中弹出

  5. swapColors环境弹出后继续changeColor的执行,发现没有可以执行的了。然后就弹出。

  6. 最后只剩下全局环境了。这个是要只有关闭当前网页或者浏览器就能销毁该环境。

总结

  1. 所有变量都存在于一个执行环境中。

  2. 全局环境只能访问全局环境中的变量和函数,不能访问局部环境中的任何数据。

  3. 执行环境有全局执行环境和函数执行环境之分。

  4. js单线程,是同步执行的,只有栈顶的环境处于执行中,其他环境需要等待。

2、变量对象的理解

上面我们讲到了执行环境,环境中的变量和函数都是保存在什么地方的呢?

好了,不卖关子了。每个执行环境都有一个与该环境相关联的变量对象(variable object)。环境中定义的所有变量和函数都是保存在这个对象中的。虽然我们编写的代码没有办法直接访问这个对象,但是js解析器在处理数据的时候会使用它。

执行环境的生命周期:
wechatimg15
变量对象的创建
image
上面就是变量对象的一个创建过程,这个过程的解释:

  1. 建立arguments对象。检查当前上下文中的参数,建立该对象下的属性与属性值。

  2. 检查当前上下文的函数声明,也就是使用function关键字声明的函数。在变量对象中以函数名建立一个属性,属性值为指向该函数所在内存地址的引用。如果函数名的属性已经存在,那么该属性将会被新的引用所覆盖。

  3. 检查当前上下文中的变量声明,每找到一个变量声明,就在变量对象中以变量名建立一个属性,属性值为undefined。如果该变量名的属性已经存在,为了防止同名的函数被修改为undefined,则会直接跳过,原属性值不会被修改。

上面的代码解释:

function test(c, d) {
    console.log(d);
    console.log(a);
    console.log(bar());
    console.log(c);
    
    var a = 1;
    function bar() {
        return 2;
    }
}

test(3,4);


//创建过程  EC = execution context
testEC = {
    // 变量对象
    VO: {},
    // 作用于链
    scopeChain: {},
    // 确定this指向
    this: {}
}

// VO = Variable Object,即变量对象
VO = {
    arguments: {
        c: undefined,
        d: undefined
    },  //注:在浏览器的展示中,函数的参数可能并不是放在arguments对象中,这里为了方便理解,我做了这样的处理
    bar: <bar reference>  // 表示foo的地址引用
    a: undefined
}

// 执行阶段
VO ->  AO   // Active Object
AO = {
    arguments: {
        c: 3,
        d: 4
    },
    bar: <bar reference>,
    a: 1
}


// 实际执行
function test(c, d) {
    // arguments = { c : 3, d : 4 }; // 这样理解方便点,理解arguments对象
    function foo() {
        return 2;
    }
    var a;
    console.log(a);
    console.log(foo());
    a = 1;
}

test(3, 4);

就是在执行环境在创建阶段的时候所有的变量是不能被访问的,只有在执行阶段的时候才能被访问,因为此时的变量对象被转换成了活动对象。

// 执行阶段
VO ->  AO   // Active Object
AO = {
    arguments: {...},
    foo: <foo reference>,
    a: 1
}

说到底变量对象和活动对象本质上是一样的,只是处于执行环境的不同生命期。

最后全局环境的变量对象

windowEC = {
    VO: window,
    scopeChain: {},
    this: window
}

总结

  1. 活动对象和变量对象是执行环境在不同生命期的不同叫法。

  2. function声明会比var声明优先级更高一点。

  3. 未进入执行阶段之前,变量对象中的属性都不能访问。

感谢

《javascript高级程序设计》
知乎上面的答案
波同学变量对象详解

查看原文

赞 3 收藏 5 评论 0

F_意志力 关注了标签 · 2017-04-25

weex

Weex 是阿里开源的一款跨平台移动开发工具,Weex 这个名字是取得 weeks 的谐音。

Weex能够完美兼顾性能与动态性,让移动开发者通过简捷的前端语法写出Native级别的性能体验,并支持iOS、安卓、YunOS及Web等多端部署。

对于移动开发者来说,Weex主要解决了频繁发版和多端研发两大痛点,同时解决了前端语言性能差和显示效果受限的问题。

开发者只需要在自己的APP中嵌入Weex的SDK,就可以通过撰写HTML/CSS/JavaScript来开发Native级别的Weex界面。Weex界面的生成码其实就是一段很小的JS,可以像发布网页一样轻松部署在服务端,然后在APP中请求执行。

与现有的开源跨平台移动开放项目如Facebook的React Native和微软的Cordova相比,Weex更加轻量,体积小巧。因为基于web conponent标准,使得开发更加简洁标准,方便上手。Native组件和API都可以横向扩展,方便根据业务灵活定制。Weex渲染层具备优异的性能表现,能够跨平台实现一致的布局效果和实现。对于前端开发来说,Weex能够实现组件化开发、自动化数据绑定,并拥抱Web标准。

http://alibaba.github.io/weex/

关注 1694

F_意志力 回答了问题 · 2017-04-25

阿里的一个笔试题

首先楼主对于这种情况,jquery和zepto都已经有了各自的实现方式.https://github.com/madrobby/zepto/blob/master/src/ajax.js楼主可以查看

源码中存在几个钩子 ajaxStart,ajaxStop,ajaxBeforeSend,ajaxError,ajaxComplete楼主仔细观察这些钩子,他们代表了ajax执行的不同时刻,在这些函数中都会调用一个方法triggerGlobal,这个方法就是关键

function triggerAndReturn(context, eventName, data) {
    var event = $.Event(eventName)
    $(context).trigger(event, data)
    return !event.isDefaultPrevented()
  }

  // trigger an Ajax "global" event
  function triggerGlobal(settings, context, eventName, data) {
    if (settings.global) return triggerAndReturn(context || document, eventName, data)
  }

这个方法的作用就是在于在document上面注册一个自定义事件,每当钩子触发的时候,如果发现之前有在document上面注册过相应的事件的时候则会触发相应的状态,此时我们需要做的是在发送ajax前绑定事件,为每一个ajax添加一个唯一标识符,然后获取时间就完成了.

var data = {} // 储存数据
var id = 1 // 唯一id
$(document).on('ajaxBeforeSend', (data) => {
    let settings = data[1]
    let uniqId = 'ajax' + id // 生成一个唯一id
    settings.uniqId = id //把唯一id挂载在setting上面,当ajax结束后能够找到
    data[uniqId] = Date.now() // 用这个唯一id存数据
    id++ // id需要自增来记录并区别后续的ajax请求
})
$(document).on('ajaxComplete', (data) => {
    let settings = data[1]
    let uniqId = 'ajax' + settings.uniqId // 找到ajax刚启动时候挂载的uniqId字段
    data[uniqId] = Date.now() - data[uniqId] // 当前时间减去发送这条ajax的时间就是响应请求所需要的时间了
    console.log(data)
})

最后所有ajax的请求的时间都会存放到data里面, 其中settings字段很关键,他实质上约等于你调用$.ajax()时候传递的对象(其实内部进行了$.extends,不过在事件触发的时候两个settings是一个对象),所以可以在上面挂载一些额外的字段.

另外还有一些其他的方法,不过也都是类似的,在发请求的时候记录下时间,然后收到的时候再记录下时间,两个相减就OK了.

如果楼主用过axiso等一些新的封装的ajax库,还可以使用拦截器之类的概念来实现这个功能

但是所有的封装再精美,本质都是一样的,就是我上面说的,发送前记录一次时间,响应后再记录一次时间,最后两个相减

关注 9 回答 2

F_意志力 关注了问题 · 2017-04-23

解决vue2.0 better-scroll 页面无法滚动 报错

图片描述

图片描述

求大神帮!!!!

关注 6 回答 3

F_意志力 回答了问题 · 2017-04-23

js对象取值

一个是对象,一个是数组,是两种完全不同的数据结构

遍历对象可以用

for (var i in obj) {
    console.log(obj[i])
}

至于后面你说不报错的原因,是因为 for循环的3个表达式(通过分号分割的那3个),obj.length是undefined假值,所以循环不会开始,另外你还可以给obj对象增加一个length试试,这个循环就会启动了

关注 7 回答 6

认证与成就

  • 获得 51 次点赞
  • 获得 9 枚徽章 获得 1 枚金徽章, 获得 1 枚银徽章, 获得 7 枚铜徽章

擅长技能
编辑

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2017-02-09
个人主页被 778 人浏览