Sea.js使用(1)

Sea.js

模块化开发
Sea.js遵循CMD规范

使用sea.js进行开发

第一步:引入sea.js的包
第二步:启动并指定入口模块seajs.use('../static/src/main') 注意:main.js可以省略后缀不写
第三步:定义模块 define(函数或者数组)define([]) define({}) define("abc")这几种形式不需要导出,数组内的值会被自动导出
常用写法:define(function(require,exports,module){})
第四步:如果本身是一个模块,可以通过require()来引入其他的模块 require()的参数只能是字符串,重复的require()请求只会执行一次
第五步:通过module.exports = {}来输出模块对象

JavaScript--原型链

古语云:’基础不牢,地动山摇’,在提升自己的业务能力中,往往对一些基础性的知识没有做到深刻的认识,新技术固然给我们的开发提高了极大的便利,但追溯本源,我们更应该去关注这些新技术实现的底层运用了什么,在我们探索的过程中的同时也会不断地提高自己的能力。

Prototype $ Prototype Chain

面向对象编程时几乎每一个前端开发人员必须具备的开发思想,但是你真的理解什么是对象吗?
在JS中对象也是有区别的:普通对象 函数对象
Object\Function是JS自带的函数对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
funciton f1(){};
let f2 = function(){};
let f3 = new Function('str','console.log(str)');
let o1 = {};
let o2 = new Object();
let o3 = new f1();
console.log(typeof Object); //function
console.log(typeof Function); //function
console.log(typeof o1); //object
console.log(typeof o2); //object
console.log(typeof o3); //object
console.log(typeof f1); //function
console.log(typeof f2); //function
console.log(typeof f3); //function

o1,o2,o3 是普通对象,f1,f2,f3为函数对象;只要是通过new Function()创建的对象都是函数对象,其他的都是普通对象。

原型对象

我们经常会使用arr.push()来向数组添加元素,但我们并没有在我们手写的代码中向arr这个对象添加push这个方法(属性),那么arr对象是从哪里获取到这个属性或者方法呢?

首先我们先了解什么是原型对象

在JS中,当我们定义一个对象(函数)时,对象中都会包含一些预定的属性,这其中就

Vue.js旅程(三)

Vue组件

我们在选择各类框架的时候,都希望框架简单易用。在Vue中向我们提供了组件功能,我们可以定义各种个性化的组件来实现目标。
接下来演示三种组件的写法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<account></account>//插入定义的组件
</div>
<!-- 写法3.0中对应的模板内容 -->
<template id='account'>
<a href="#">登录</a>
<a href="#">注册</a>
</template>
</body>
<script>
//写法1.0:
//首先我们需要定义组件
var account = Vue.extend({
template:'<a href="#">登录</a> <a href="#">注册</a>'
});
//然后在全局中注册组件
Vue.component('account',account);
//写法2.0:
//将定义组件和注册组件一步到位
Vue.component('account',{
template:'<a href="#">登录</a> <a href="#">注册</a>'
});
//写法3.0:
//不把template的内容写在js内
Vue.component('account',{
template:'#account',
})
new Vue({
el:'#app'
})
</script>
</html>

Vue.js旅程(二)

Vue中的指令

自定义指令

Vue的系统指令通常都是V-开头的这些指令

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
1、自定义属性指令Vue.directive(指令id(注意不能以v-开头,将来在使用的时候自动加上),function(){this.el})
属性指令举例:
<input type="text" v-focus> 中的 v-focus 这个指令我们称之为自定义属性指令
定义格式:
Vue.directive('focus',{
bind:function(){
//这个指令的逻辑
//可以利用this.el来获取到当前指令所在的元素对象
this.el.style.color = 'red';
}
});
2、自定义元素指令Vue.elementDirective(指令id,{bind:function(){}})
this.el
this.vm

Vue.js旅程(一)

什么是Vue

在过去的一段时间里,我们见证了各种各样的前端框架的快速兴起,发展的迅猛速度令人咂舌不已。Vue.js已势不可挡的趋势冲击着程序员的眼球。

为什么要学习Vue

在传统的开发模式中我们更多的习惯使用各类的库来辅助我们的开发,提高我们的开发效率。但传统模式的开发往往会存在一个弊端,各个单元之间或多或少的存在高度的耦合性,给后续的扩展和维护带来不小的麻烦,也没有一套完整的解决方案。因此掌握一种或多种前端框架是一个Web开发人员必不可少的基本要求。

JavaScript面向对象(二)

原型对象

为什么要使用原型对象?

通过构造函数创建对象的过程中,需要给对象添加方法,这些方法具有相同的代码,只是执行过程不同,但是却占用了不同的内存,也就浪费了内存,随着实例化次数的增加,浪费的内存也就会越来越多;如果将这些方法放在原型对象中,就可以起到共用一块内存的效果,也就是起到了节约内存的作用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function Person(name,age){
this.name=name;
this.age=age;
this.say=function(){
alert(this.name);
}
}
var p1=new Person("星爷",20);
p1.say();
var p2=new Person("范爷",16);
p2.say();
var p3=new Person("晨爷",18);
p3.say();
console.log(p1.say==p2.say);//左右两边都是函数,函数也是对象,比较的是内存地址,指向不同的内存,结果为:false
console.log(p1.say.toString());//true——>具有相同的方法体

如何使用原型对象?

  • 任何函数都会有一个prototype属性,该属性的值是一个对象,我们把它称之为原型对象。
  • 给原型对象中添加的属性和方法都可以被构造函数的实例所共享。

JavaScript面向对象(一)

在我们学习JavaScript的过程中,经常会听到 面向对象的说法,当你了解了 面向对象的编程思想后,一定会爱上她的。

什么是面向对象

从广义上讲,世间万物皆对象,比如一颗树、一辆车、一本书、一个人等等,都可以称为对象。
(Object Oriented Programming) OOP 就是我们常说的面向对象编程,是一种思想。她的一条基本原则所有的程序都是由一个个单独的单元或者对象组成的。
从本质上可以认为是一种人类认知事物所采用的哲学观的计算模型。

简单了解面向对象思想

大家在日常生活中一定经常会和朋友、同事、家人去饭馆就餐畅聊。这就是一个最好的例子来说明面向对象的思想。
Okay,首先来看看使用 面向过程的方式是怎么才吃到美味可口的大餐