gulp+webpack+vue.js打造vue.js框架自动化

安装Babel,Vue,Gulp,WebPack

Babel

1
npm install babel-core babel-loader babel-plugin-transform-runtime babel-preset-es2015 babel-runtime --save-dev

Vue

1
npm install vue-hot-reload-api vue-html-loader vue-loader vue-style-loader css-loader file-loader inject-loader template-html-loader url-loader --save-dev

Gulp

Gulp我用了sass 并不在vue中写style..还是不太习惯 哈哈. 并且用gulp-livereload做服务端 而不用webpack自带的

1
npm install gulp gulp-livereload gulp-sass gulp-webpack --save-dev

WebPack

1
npm install webpack

.babelrc

这个文件很重要 如果不在项目根目录添加这个文件夹会导致webpack loader的时候报错
文件内容为

1
2
3
4
{
"presets": ["es2015"],
"plugins": ["transform-runtime"]
}

意思就是转es2015并且加载插件

项目地址

github
参考其他vue项目

手撸页面笔记

算是一篇水文了..最近手撸了一个页面地址为here.
同时得出了一些笔记和一些疑问

笔记

  1. 媒体查询不应该嵌套在内,应该放在外.
  2. wrap-center应该在内部嵌套一个div而不是直接放在外部div
  3. rest css然后基于rem设计
  4. 媒体查询可以建立函数查询

疑问

用sass写的时候 是否应该一直嵌套下去?
rem设计指的是整体rem还是文字rem?
媒体查询是600一个档次还是分多个档次查询?

你不知道的JavaScript-上卷-读书笔记-part3

书评

豆瓣
这本书很适合初级前端开发者上升至中级前端开发者,很好的阐述了JavaScript的闭包,原型,类,编译,赋值的问题.而且这还是上卷,还会有中卷,下卷,等等之类的.我会从这本书里选取一些比较重要的内容放在这篇文章当中(实际上这本书全部内容都重要). let’s do it

对象关联

[[protorype]]机制就是存在于对象中的一个内部链接,它会引用其他对象.当在对象本身上未找到属性则会继续顺着[[prototype]]关系的对象上进行查找

创建关联

1
2
3
4
5
6
7
8
var foo={
something:function(){
console.log("tell me ")
}
}
var bar=Object.create(foo);
bar.something();//tell me

Object.create会创建一个新对象(bar)并且把它关联到我们指定的对象(foo).
Object.create(null)会创建一个null[[prototype]]链接的对象,由于这个对象没有原型链,所以用instanceof无法进行判断,总是会返回false.这样无[[prototype]]的对象通常被称为”字典”,它们完全不会受到原型链的干扰,因此非常适合用来存储数据.

你不知道的JavaScript-上卷 读书笔记-part2

书评

豆瓣
这本书很适合初级前端开发者上升至中级前端开发者,很好的阐述了JavaScript的闭包,原型,类,编译,赋值的问题.而且这还是上卷,还会有中卷,下卷,等等之类的.我会从这本书里选取一些比较重要的内容放在这篇文章当中(实际上这本书全部内容都重要). let’s do it

对象

类型

JavaScript有六种主要类型

  • string
  • number
  • boolean
  • null
  • undefined
  • object

简单基本类型(string,number,boolean,null,undefined)本身并不是对象,null有时候会被当做一种对象类型,但其实这是一个语言本身的bug,typeof null 的时候会返回字符串”object”,实际上null本身是基本类型.
JavaScript万物并不都是对象.
JavaScript本身有许多特殊的对象子类型,我们可以称之为复杂基本类型.
函数就是对象的一个子类型.数组也是对象的一种类型,具备一些额外的行为.

JavaScript内置对象

JavaScript还有一些对象子类型,通常被称为内置对象

  • String
  • Number
  • Boolean
  • Object
  • Function
  • Array
  • Date
  • RegExp
  • Error

在JavaScript中,这些内置函数可以当做构造函数.JavaScript在访问对象属性的时候会自动把字符串字面量转换为一个对象 比如

你不知道的JavaScript-上卷 读书笔记-part1

书评

豆瓣
这本书很适合初级前端开发者上升至中级前端开发者,很好的阐述了JavaScript的闭包,原型,类,编译,赋值的问题.而且这还是上卷,还会有中卷,下卷,等等之类的.我会从这本书里选取一些比较重要的内容放在这篇文章当中(实际上这本书全部内容都重要). let’s do it

作用域

编译器原理简释

var a=2
当我们看到var a=2的时候引擎和编译器会做什么呢?

  1. 遇到var a,编译器会询问作用域是否已经有一个该名称的变量存在于同一个作用域的合集中.如果是.编译器会忽略该声明,继续进行编译.否则它会要求作用域在当前的作用域合集中声明一个新的变量,并且命名为a.
  2. 接下来编译器会为这个引擎生成运行时所需的代码,这些代码被用来处理a = 2这个赋值操作.引擎运行时会首先询问作用域,在当前的作用域合集中是否存在一个叫a的变量,如果否,引擎就会使用这个变量;如果不是,引擎就会继续查找该变量.

nodejs与微博开发笔记

微博开发API

地址
github
开发工具 nodejs+express+request

申请微博API

首先去微博开发地址注册个开发者账号,然后填写个人身份认证下. 个人只能选微链接,不能选择微服务.

网站接入

我申请的是网站接入..可以先不提交审核拿来用..不知道为啥我审核总是不过.说是需要部署微博组件..囧 不过没关系我们主要关注以下的几个重要的内容.

  • 网站信息-基本信息中的 App Key 与 App Secret
  • 网站信息-测试账号中的 已关联测试账号
  • 接口管理-授权机制中的 授权回调页和取消授权回调页

首先我们需要设置已关联账号和设置授权回调页和取消授权回调页
设置关联账号就设置你个人微博 输入你个人微博名称即可.
授权回调页我设置的是htttp://t.relsoul.com/oauth
取消回调页我设置的是http://t.relsoul.com/calceloauth

JavaScript实例属性与构造器属性

在构造器上设置属性

首先在js中函数也是对象,所以在js中函数也可以挂载属性和方法

1
2
3
4
5
6
7
8
9
10
11
12
function Bar(){}
Bar.name="i m bar";
Bar.sayname=function(){
console.log(this.name)
}
Bar.sayname();//Bar;
var sum=Bar;
sum.sayname="no this function";
console.log(Bar.sayname);//"no this function"
Bar=null;
console.log(sum.sayname);//no this function

首先Bar.sayname()结果并不是”i m bar”而是一个”Bar” 而且你是无法改写这个name属性的 说明函数自身就带了一个name属性,保存的是他的名字.所以弹出的会是”Bar”
下面我们声明了一个变量sum并且把Bar赋值给他.同时改写了一下sum的sayname属性.然后调用了Bar.sayname得出的结果是”no this function” 接着我们把Bar设置为null 然后再调用一下sum的.sayname方法发现还是存在的。