Category Archives: Frontend

vue-输入框change事件并获取值

1.html

<input type="text" @change="specifiName($event)" />//输入框的change事件

<input type="text" @input="specifiName($event)" />//输入框的输入事件

<input type="text" @keyup.enter="specifiName($event)" />//输入框的回车事件

2.js

var vm = new Vue({

el: "#app",

methods: {

specifiName(e) {

var that = this;

var val = e.target.value;

console.log(val);

}

});

from:https://www.cnblogs.com/zhizou/p/10648513.html

龙生 19 Dec 2019

View Details

一、官方解释： v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。 v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。二、个人理解：相同点：v-show和v-if都能控制元素的显示和隐藏。不同点：实现本质方法不同 v-show本质就是通过设置css中的display设置为none，控制隐藏 v-if是动态的向DOM树内添加或者删除DOM元素编译的区别 v-show其实就是在控制css v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件编译的条件 v-show都会编译，初始值为false，只是将display设为none，但它也编译了 v-if初始值为false，就不会编译了性能 v-show只编译一次，后面其实就是控制css，而v-if不停的销毁和创建，故v-show性能更好一点。注意点：因为v-show实际是操作display:" "或者none，当css本身有display：none时，v-show无法让显示总结：如果要频繁切换某节点时，使用v-show（无论true或者false初始都会进行渲染，此后通过css来控制显示隐藏，因此切换开销比较小，初始开销较大），如果不需要频繁切换某节点时，使用v-if（因为懒加载，初始为false时，不会渲染，但是因为它是通过添加和删除dom元素来控制显示和隐藏的，因此初始渲染开销较小，切换开销比较大） from:https://www.cnblogs.com/liutianzeng/p/10978890.html

龙生 13 Dec 2019

View Details

Vue.js学习笔记之修饰符详解

本篇将简单介绍常用的修饰符。在上一篇中，介绍了 v-model 和 v-on 简单用法。除了常规用法，这些指令也支持特殊方式绑定方法，以修饰符的方式实现。通常都是在指令后面用小数点“.”连接修饰符名称。一、v-model的修饰符 v-model 是用于在表单表单元素上创建双向数据绑定的指令。在 <input> 和 <textarea> 上，默认通过监听元素的 input 事件来更新绑定的属性值。为了能明显的看到绑定属性值的变化，需要在Chrome浏览器中安装Vue Devtools扩展程序。当查看Vue开发的页面时，按F12就可以在开发者工具里看到Vue页签。这里需要注意，只有在引用Vue的开发版本文件，即vue.js文件时，Vue Devtools工具才能正常使用。 .lazy 首先在 vm 对象中增加需要绑定的属性 1 2 3 4 5 6 var vm = new Vue({ el: "#app", data: { input_lazy: "" } }); 在页面中的 input 的元素上添加指令 1 2 3 4 <div class="row"> <h2>v-model.lazy</h2> <input type="text" v-model.lazy="input_lazy" /> </div> 打开页面，开启Vue Devtools，在文本框中输入字符，查看属性值变化当在文本框输入内容，并且光标焦点没有离开文本框时，属性值没有实时发生变化而当焦点离开文本框时，属性值发生了变化并与文本框内容保持一致。从这个例子可以看出 .lazy 修饰符延迟了同步更新属性值的时机。即将原本绑定在 input 事件的同步逻辑转变为绑定在 change 事件上。 .number 该修饰符用来将输入内容自动转换成数值。在 vm 对象里增加一个属性，默认为空字符串 1 2 3 4 5 6 var vm = new Vue({ el: "#app", data: { input_number: "" } }); 在页面的 input 元素上添加指令 1 2 3 4 5 <div class="row"> <h2>v-model.number</h2> <input type="text" v-model.number="input_number" /> <hr /> […]

龙生 12 Dec 2019

View Details

前端JavaScript规范

JavaScript规范目录类型对象数组字符串函数属性变量条件表达式和等号块注释空白逗号分号类型转换命名约定存取器构造器事件模块 jQuery ES5 兼容性 HTML、CSS、JavaScript分离使用jsHint 前端工具类型原始值: 相当于传值(JavaScript对象都提供了字面量)，使用字面量创建对象。 string number boolean null undefined

var foo = 1,

bar = foo;

bar = 9;

console.log(foo, bar); // => 1, 9

复杂类型: 相当于传引用 object array function

var foo = [1, 2],

bar = foo;

bar[0] = 9;

console.log(foo[0], bar[0]); // => 9, 9

对象使用字面值创建对象。

// bad

var item = new Object();

// good

var item = {};

不要使用保留字 reserved words 作为键。

// bad

var superman = {

class: 'superhero',

default: { clark: 'kent' },

private: true

};

// good

var superman = {

klass: 'superhero',

defaults: { clark: 'kent' },

hidden: true

};

数组使用字面值创建数组。

// bad

var items = new Array();

// good

var items = [];

如果你不知道数组的长度，使用push。

var someStack = [];

// bad

someStack[someStack.length] = 'abracadabra';

// good

someStack.push('abracadabra');

当你需要拷贝数组时使用slice. jsPerf。

var len = items.length,

itemsCopy = [],

i;

// bad

for (i = 0; i < len; i++) {

itemsCopy[i] = items[i];

}

// good

itemsCopy = items.slice();

使用slice将类数组的对象转成数组。

function trigger() {

var args = [].slice.apply(arguments);

...

}

字符串对字符串使用单引号 "（因为大多时候我们的字符串。特别html会出现"）。

// bad

var name = "Bob Parr";

// good

var name = 'Bob Parr';

// bad

var fullName = "Bob " + this.lastName;

// good

var fullName = 'Bob ' + this.lastName;

超过80(也有规定140的，项目具体可制定)个字符的字符串应该使用字符串连接换行。注: 如果过度使用，长字符串连接可能会对性能有影响。

// bad

var errorMessage = 'This is a super long error that was thrown because of Batman. When you stop to think about how Batman had anything to do with this, you would get nowhere fast.';

// bad

var errorMessage = 'This is a super long error that \

was thrown because of Batman. \

When you stop to think about \

how Batman had anything to do \

with this, you would get nowhere \

fast.';

// good

var errorMessage = 'This is a super long error that ' +

'was thrown because of Batman.' +

'When you stop to think about ' +

'how Batman had anything to do ' +

'with this, you would get nowhere ' +

'fast.';

编程时使用join而不是字符串连接来构建字符串。

var items,

messages,

length, i;

messages = [{

state: 'success',

message: 'This one worked.'

},{

state: 'success',

message: 'This one worked as well.'

},{

state: 'error',

message: 'This one did not work.'

}];

length = messages.length;

// bad

function inbox(messages) {

items = '<ul>';

for (i = 0; i < length; i++) {

items += '<li>' + messages[i].message + '</li>';

}

return items + '</ul>';

}

// good

function inbox(messages) {

items = [];

for (i = 0; i < length; i++) {

items[i] = messages[i].message;

}

return '<ul><li>' + items.join('</li><li>') + '</li></ul>';

}

函数函数表达式:

// 匿名函数表达式

var anonymous = function() {

return true;

};

// 有名函数表达式

var named = function named() {

return true;

};

// 立即调用函数表达式

(function() {

console.log('Welcome to the Internet. Please follow me.');

})();

绝对不要在一个非函数块里声明一个函数，把那个函数赋给一个变量。浏览器允许你这么做，但是它们解析不同。注: ECMA-262定义把块定义为一组语句，函数声明不是一个语句。阅读ECMA-262对这个问题的说明。

// bad

if (currentUser) {

function test() {

console.log('Nope.');

}

// good

if (currentUser) {

var test = function test() {

console.log('Yup.');

};

}

绝对不要把参数命名为 arguments, 这将会逾越函数作用域内传过来的 arguments 对象。

// bad

function nope(name, options, arguments) {

// ...stuff...

}

// good

function yup(name, options, args) {

// ...stuff...

}

属性当使用变量和特殊非法变量名时，访问属性时可以使用中括号（. 优先）。

var luke = {

jedi: true,

age: 28

};

function getProp(prop) {

return luke[prop];

}

var isJedi = getProp('jedi');

变量总是使用 var 来声明变量，如果不这么做将导致产生全局变量，我们要避免污染全局命名空间。

// bad

superPower = new SuperPower();

// good

var superPower = new SuperPower();

使用一个 var 以及新行声明多个变量，缩进4个空格。

// bad

var items = getItems();

var goSportsTeam = true;

var dragonball = 'z';

// good

var items = getItems(),

goSportsTeam = true,

dragonball = 'z';

最后再声明未赋值的变量，当你想引用之前已赋值变量的时候很有用。

// bad

var i, len, dragonball,

items = getItems(),

goSportsTeam = true;

// bad

var i, items = getItems(),

dragonball,

goSportsTeam = true,

len;

// good

var items = getItems(),

goSportsTeam = true,

dragonball,

length,

i;

在作用域顶部声明变量，避免变量声明和赋值引起的相关问题。

// bad

function() {

test();

console.log('doing stuff..');

//..other stuff..

var name = getName();

if (name === 'test') {

return false;

}

return name;

}

// good

function() {

var name = getName();

test();

console.log('doing stuff..');

//..other stuff..

if (name === 'test') {

return false;

}

return name;

}

// bad

function() {

if (!arguments.length) {

return false;

}

var name = getName();

return true;

}

// good

function() {

var name = getName();

if (!arguments.length) {

return false;

}

return true;

}

[…]

龙生 12 Dec 2019

View Details

gulp基本操作

1、安装淘宝镜像 npm install cnpm -g --registry=https://registry.npm.taobao.org cnpm -v 2、生成项目描述文件 package.json npm init cnpm init (可代替 npm init) （需要项目名称、版本号、描述、入口文件、运行命令、作者、证书 —- 一路按回车即可） 3、全局安装gulp cnpm i gulp@3 -g 全局安装gulp @3 代表选择了 3 的版本 i 即为 install -g 即为 --global gulp -v 4、当前目录内部安装 gulp 模块 cnpm i gulp@3 -D cnpm i gulp@3 -S （二者选择其一即可） -D 缩写 --save-dev 开发依赖 -S 缩写 --save 项目依赖开发依赖：开发过程中需要使用到的依赖的模块，项目上线时不需要的模块 — 代码格式校验的模块项目依赖：项目上线仍然需要使用的模块 —-- 如果不知道怎么选择，那你就写 -S 5、创建文件 gulpfile.js ,配置gulp

1	<span class="hljs-keyword">const</span> gulp = <span class="hljs-built_in">require</span>(<span class="hljs-string">'gulp'</span>);

5.1 创建 index.html，使用gulp完成对于index.html的复制操作，复制到当前目录的dist目录内

+++

// 复制index.html 到 dist 目录

gulp.task('copy-index', function () {

gulp.src('./index.html')

.pipe(gulp.dest('dist'))

})

命令行执行了 gulp copy-index 发现多了 dist目录 5.2 gulp/css/a.css + gulp/css/b.css 5.2.1 复制 gulp/css 至 […]

龙生 12 Dec 2019

View Details

webpack

一、什么是webpack？ webpack是一个现代JavaScript应用程序的静态模块打包器，在webpack里一切文件皆模块，通过loader转换文件，通过plugin注入钩子，最后输出由多个文件组合成的文件，webpack专注构建模块化项目。 webpack可以看做是模块打包机：他做的事情是，分析项目，找到JavaScript模块以及其他的一些浏览器不能直接运行的拓展语言（scss， TypeScript等），并将其打包为合适的格式以供浏览器使用。二、四个核心概念 entry：一个可执行文件或库的入口文件。 chunk：多个文件组成的一个代码块。例如把一个可执行文件和他所有依赖的模块组合为一个chunk，这体现了webpack的打包机制。 loader：文件转换器。例如把es6转换为es5，scss转换为css。 plugin：插件，用于扩展webpack的功能，在webpack构建生命周期的节点上加入扩展hook为webpack加入功能。三、webpack构建流程解析webpack配置参数，合并从shell传入和webpack.config.js文件里配置的参数，生产最后的配置结果。注册所有配置的插件，好让插件监听webpack构建生命周期的事件节点，以做出对应的反应。从配置的entry入口文件开始解析文件构建AST语法树，找出每个文件所依赖的文件，递归下去。在解析文件递归的过程中根据局文件类型和loader配置找出合适的loader用来对文件进行转换。递归完后得到每个文件的最终结果，根据entry配置生成代码块chunk。输出所有chunk到文件系统。四、webpack和grunt、gulp的不同 1. 概念区别：（1）gulp/grunt是一种能够优化前端的开发流程的工具。（2）webpack是一种模块化的解决方案。 2. 工作方式的区别：（1）Grunt和Gulp的工作方式是：在一个配置文件中，指明对某些文件进行类似编译、组合、压缩等任务的具体步骤。工具之后可以自动替你完成这些任务。（2）Webpack的工作方式：把你的项目当做一个整体，通过给定的主文件（如：index.js），webpack将从这个文件开始找到你的项目的所有依赖文件，使用loader处理他们，最后打包为一个（或多个）浏览器可识别的JavaScript文件。 3. 基于类型的区别（1）grunt和gulp是基于任务和流（task、stream）的。类似jQury，找到一个（或一类）文件，对其做一系列链式操作，更新流上的数据，整条链式操作构成了一个任务，多个任务就构成了整个web的构建流程。（2）webpack是基于入口的。webpack会自动地递归解析入口所需要加载的所有资源文件，然后用不同的loader来处理不同的文件，用plugin来扩展webpack功能。五、几种常见的loader file-loader：把文件数出到一个文件夹中，在代码中通过相对URL去引用输出的文件。 url-loader：和file-loader类似，但是能在文件很小的情况下以base64的方式把文件内容注入到代码中去。 source-map-loader：加载额外的source map文件，以方便断点调试。 image-loader：加载并且压缩图片文件。 babel-loader：把es6转换成es5。 css-loader：加载CSS，支持模块化、压缩、文件导入等特性。 style-loader：把CSS代码注入到JavaScript中，通过DOM操作去加载CSS。 eslint-loader：通过ESLint检查JavaScript代码。六、webpack的优缺点优点专注处理模块化的项目，能做到开箱即用，一步到位。可通过plugin扩展，完整好用又不是灵活。使用场景不局限于web开发。社区庞大活跃，经常引入紧跟时代发展的新特性，能为大多数场景找到已有的开源扩展。良好的开发体验。缺点 webpack的缺点是只能用于采用模块化开发的项目。七、什么是模块的热更新？模块热更新是webpack的一个功能，他可以使得代码修改过后不用刷新浏览器就可以更新，是高级版的自动刷新浏览器。 DevServer中通过hot属性可以控制模块的热替换。 1、通过配置文件

const webpack = require('webpack');

const path = require('path');

let env = process.env.NODE_ENV == "development" ? "development" : "production";

const config = {

mode: env,

devServer: {

hot:true

}

plugins: [

new webpack.HotModuleReplacementPlugin(), //热加载插件

module.exports = config;

2、通过命令行

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1",

"start": "NODE_ENV=development webpack-dev-server --config webpack.develop.config.js --hot",

八、懒加载（按需加载路由） webpack中提供了require.ensure()来实现按需加载。以前引入路由是通过import这样的方式引入，改为const定义的方式进行引入。不进行页面按需加载的引入方式：

1	import home from '../../common/home.vue'

进行页面按需加载的引入方式：

1	const home = r =>require.ensure([ ],() =>(require('../../common/home.vue')))

九、通过webpack处理长缓存浏览器在用户访问页面的时候，为了加快加载速度，会对用户访问的静态资源进行存储，但每一次代码升级或是更新，都需要浏览器去下载新的代码，最方便和简单的更新方式就是引入新的文件名称。在webpack中可以在output中输出的文件指定chunkhash，并且分离经常更新的代码和框架代码。通过NameModulesPlugin或是HashedModuleldsPlugin使再次打包文件名不变。作者：李丹linda 链接：https://www.jianshu.com/p/86a3c35079cc 来源：简书著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

龙生 11 Dec 2019

View Details

Jest

jest 是facebook推出的一款测试框架，集成了 Mocha，chai，jsdom，sinon等功能。安装与配置

1 2	npm install --save-dev jest npm install -g jest

运行命令 jest 后会自动运行项目下所有.test.js和.spec.js这种格式的文件。涉及到运用 ES 或 react 的，要与babel相结合，加上.babelrc文件即可。jest的配置默认只需要在package.json中配置即可，当然也可以用独立的配置文件。我们这里直接将 jest 的运行范围限定在test文件夹下，而不是全部，所以在package.json中加入如下配置：

"jest": {

"testRegex": "/test/.*.test.jsx?$"

}

注意到这里的匹配规则是正则表达式基本用法和之前介绍的 mocha 和 chai 的功能很像，甚至可以兼容部分 mocha 和 chai 的语法。可以这么写

import React from 'react'

import { shallow } from 'enzyme'

import CommentItem from './commentItem'

describe('测试评论列表项组件', () => {

// 这是mocha的玩法，jest可以直接兼容

it('测试评论内容小于等于200时不出现展开收起按钮', () => {

const propsData = {

name: 'hj',

content: '测试标题'

}

const item = shallow(<CommentItem {...propsData} />)

// 这里的断言实际上和chai的expect是很像的

expect(item.find('.btn-expand').length).toBe(0);

})

// 这是jest的玩法，推荐用这种

test('两数相加结果为两个数字的和', () => {

expect(3).toBe(3);

});

}

jest与eslint检测如果看了上面的代码会发现我没有引用任何类似于

1	import * from 'jest'

的代码，而那个expect是没有定义的。这段代码直接运行jest命令没有任何问题，但是eslint会检测出错，对于这种情况，我们可以再eslint配置文件.eslintrc中加入以下代码：

"env": {

"jest": true

jest的断言 jest有自己的断言玩法。除了前面的代码中已经写到的

1	expect(x).toBe(y)//判断相等，使用Object.is实现

还有常用的

expect({a:1}).toBe({a:1})//判断两个对象是否相等

expect(1).not.toBe(2)//判断不等

expect(n).toBeNull(); //判断是否为null

expect(n).toBeUndefined(); //判断是否为undefined

expect(n).toBeDefined(); //判断结果与toBeUndefined相反

expect(n).toBeTruthy(); //判断结果为true

expect(n).toBeFalsy(); //判断结果为false

expect(value).toBeGreaterThan(3); //大于3

expect(value).toBeGreaterThanOrEqual(3.5); //大于等于3.5

expect(value).toBeLessThan(5); //小于5

expect(value).toBeLessThanOrEqual(4.5); //小于等于4.5

expect(value).toBeCloseTo(0.3); // 浮点数判断相等

expect('Christoph').toMatch(/stop/); //正则表达式判断

expect(['one','two']).toContain('one'); //不解释

function compileAndroidCode() {

throw new ConfigError('you are using the wrong JDK');

}

test('compiling android goes as expected', () => {

expect(compileAndroidCode).toThrow();

expect(compileAndroidCode).toThrow(ConfigError); //判断抛出异常

}）

更多断言玩法 jest的 mock 介绍了jest替代mocha和chai的部分，那么接下来就看看如何替代sinon。下面是官网的示例：

function forEach(items, callback) {

for (let index = 0; index < items.length; index++) {

callback(items[index]);

}

const mockCallback = jest.fn();

forEach([0, 1], mockCallback);

// 判断是否被执行两次

expect(mockCallback.mock.calls.length).toBe(2);

// 判断函数被首次执行的第一个形参为0

expect(mockCallback.mock.calls[0][0]).toBe(0);

// 判断函数第二次被执行的第一个形参为1

expect(mockCallback.mock.calls[1][0]).toBe(1);

从上面可以看到这种玩法很类似于sinon的 sinon.spy()。当然也有类似于stub返回值的那种玩法，更多的请参考 jest mock的更多玩法 mock文件和css module的问题如果js文件中引用了css或者本地其他文件，那么就可能测试失败。为了解决这个问题，同时也为了提高测试效率：

"jest": {

"moduleNameMapper": {

"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/test/config/fileMock.js",

"\\.(css|less)$": "identity-obj-proxy"

}

而fileMock.js文件内容为：

1	module.exports = 'test-file-stub';

然后安装identity-obj-proxy即可：

1	npm install --save-dev identity-obj-proxy

jest与别名在webpack中经常会用到别名，而jest测试时，如果文件中引用了别名会出现找不到文件的问题。毕竟jest测试时没有经过webpack处理。对于以下玩法

resolve: {

alias: {

common: path.resolve(__dirname, 'plugins/common/')

}

可以通过

"jest": {

"testRegex": "./src/test/.*.test.js$",

"moduleNameMapper": {

"^common(.*)$": "<rootDir>/plugins/common$1",

}

这个和之前 mock文件和css module的问题一样，都是使用了moduleNameMapper这个属性生成测试覆盖率报告只需要在jest命令后加入 --coverage即可

1	jest --coverage

13人点赞前端单元测试作者：我向你奔链接：https://www.jianshu.com/p/eaaf07c1b88f […]

龙生 11 Dec 2019

View Details

安装cnpm后运行报cnpm : 无法加载文件 C:\Users\yizon\AppData\Roaming\npm\cnpm.ps1，因为在此系统上禁止运行脚本

安装cnpm：

1	npm install -g cnpm --registry=https://registry.npm.taobao.org

安装完成后报错：无法加载文件 C:\Users\yizon\AppData\Roaming\npm\cnpm.ps1，因为在此系统上禁止运行脚本解决：管理员身份运行power shell，再输入：

1	set-ExecutionPolicy RemoteSigned

输入A，回车 from:https://www.cnblogs.com/yifamily/p/11853259.html

龙生 11 Dec 2019

View Details

Vue.js是什么

Vue.js 是一个用于创建用户界面的开源 JavaScript 框架，也是一个创建单页应用的 Web 应用框架。旨在更好地组织与简化 Web 开发。Vue 所关注的核心是 MVC 模式中的视图层，同时，它也能方便地获取数据更新，并通过组件内部特定的方法实现视图与模型的交互。 Vue.js 是一款流行的 JavaScript 前端框架，旨在更好地组织与简化 Web 开发。Vue 所关注的核心是 MVC 模式中的视图层，同时，它也能方便地获取数据更新，并通过组件内部特定的方法实现视图与模型的交互。历史在为 AngularJS 工作之后，Vue 的作者尤雨溪开发出了这一框架。他声称自己的思路是提取 Angular 中为自己所喜欢的部分，构建出一款相当轻量的框架。Vue 最早发布于 2014 年 2 月。作者在 Hacker News、Echo JS 与 Reddit 的/r/javascript 版块发布了最早的版本。一天之内，Vue 就登上了这三个网站的首页。Vue 是 Github 上最受欢迎的开源项目之一。同时，在 JavaScript 框架/函数库中，Vue 所获得的星标数已超过 React，并高于 Backbone.js、Angular 2、jQuery 等项目。特性组件组件是 Vue 最为强大的特性之一。为了更好地管理一个大型的应用程序，往往需要将应用切割为小而独立、具有复用性的组件。在 Vue 中，组件是基础 HTML 元素的拓展，可方便地自定义其数据与行为。模板 Vue 使用基于 HTML 的模板语法，允许开发者将 DOM 元素与底层 Vue 实例中的数据相绑定。所有 Vue 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应式系统，在应用状态改变时，Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。响应式设计响应式是指 MVC 模型中的视图随着模型变化而变化。在 Vue 中，开发者只需将视图与对应的模型进行绑定，Vue 便能自动观测模型的变动，并重绘视图。这一特性使得 Vue 的状态管理变得相当简单直观。过渡效果 […]

龙生 11 Dec 2019

View Details

比较详细的采访 Vue 作者尤雨溪

原文链接： medium.freecodecamp.com image 我采访了尤雨溪，著名渐进式 JavaScript 框架 vuejs.org 的创造者。尤雨溪现通过 Patreon 平台众筹全职开发 Vue 的资金。他还曾在 Google 和 Meteor 工作过。这篇文章最初发布在 Between the Wires，这是一个采访系列，专门采访那些为程序员开发产品的人。和我们讲讲你的童年和你的家乡吧好的，我出生在中国，我的家乡叫无锡，一个中等规模的城市，离上海很近。然后我在上海念了三年高中，因此经常两地来回跑。高中毕业后我去了美国念大学。我感觉我接触电脑比较早，但是我当时并没有真正开始编程。我对游戏更感兴趣，我在高中时，就经常玩 Flash，因为我非常喜欢制作互动的效果来讲述故事。 1996 年尤雨溪和他的第一台电脑谈一谈你的第一次编程经历？「JavaScript 很吸引我，因为它能够快速构建一些东西并分享给别人。把它放在网上，通过一个网址，任何有浏览器的人都可以看到。这就是吸引我开始 Web 开发和 JavaScript 编程的原因。」当我在美国上大学的时候，老实说，我不知道我想要做什么，而且我的专业是室内艺术和艺术史。当我快毕业时，我感觉很难找到和专业相关的工作。我盘算着或许我可以去一个适合我的硕士课程，学习更多的技能。我去了 Parsons，读了一个美术设计和技术的硕士。这是一个非常好的专业，因为每个人都是既学习设计也学习编程。他们会教一些比如 openFrameworks，处理，动画算法之类的课程，而且你也必须写应用程序和交互界面。 Parsons 没有真正涉及很多的 JavaScript，但是 JavaScript 很吸引我，因为它能够快速构建一些东西并分享给别人。把它放在网上，通过一个网址，任何有浏览器的人都可以看到。这就是吸引我开始 Web 开发和 JavaScript 编程的原因。当时 Chrome experiments 这个网站刚刚发布，我深深的被震撼了。我立即开始学习 JavaScript，并开始开发类似 Chrome experiments 的项目。我把这些项目放在我的简历上，然后被 Google 创意实验室的招聘人员注意到了。我加入了Five program。每年创意实验室会招五名应届毕业生，组成一个小组，一个人写文案，一个人搞技术，一个人做平面设计，一个人统筹安排和一个打杂的。好的，什么时候或者是什么驱使你开发 Vue.js 的？我在 Google 的工作需要在浏览器上进行大量原型设计，于是我想要尽快获得有形的东西。当时有些项目使用了 Angular。Angular 提供了一些用数据绑定和数据驱动来处理 DOM 的方法，所以你不必自己碰 DOM。它也有一些副作用，就是按照它规定的方式来构建代码。对于当时的场景而言实在是太重了。我想，我可以只把我喜欢的部分从 Angular 中提出来，建立一个非常轻巧的库，不需要那些额外的逻辑。我也很好奇 Angular 的源码到底是怎么设计的。我最开始只是想着手提取 Angular 里面很小的功能，如声明式数据绑定。Vue 大概就是这么开始的。用过一段时间之后，我感觉我做的东西还有点前途，因为我自己就很喜欢用。于是我花了更多的时间把它封装好，取了一个名字叫做 Vue.js，我记得那时还是 2013 年。后来我想『我花了这么多时间，不能只有我一个人用，我应该和别人分享，他们也会感觉到 Vue 的好处，他们也会喜欢上 Vue 的。』 2014 年 2 […]

龙生 11 Dec 2019

View Details

« Previous 1 … 22 23 24 … 60 Next »