前端开发之JavaScript实战应用

一、JavaScript 模块化编程

一、原始写法

var conut = 0;
function m1(){
//...
}
function m2(){
//...
}

使用时直接调用，这种写法”污染”了全局变量，无法保证不与其他模块发生变量名冲突，而且模块成员之间看不出直接关系。

二、对象写法

var module1 = new Object({
　　count : 0,
m1 : function (){
//...
},
　　m2 : function (){
//...
}
});

像这样封装在一个对象里面，使用时调用对象的属性。

module1.m1();

但是，这样的写法会暴露所有模块成员，内部状态可以被外部改写

module1.count = 5;

三、立即执行函数写法

var module1 = (function(){
　　var count = 0;
　　var m1 = function(){
console.log(‘comule1’);
};
　　return {
m1 : m1
};
})();

这样外部代码无法读取内部的

count

变量

console.log(module1 .count);   // undefined

四、放大模式

如果一个模块很大，必须分成几个部分，或者一个模块需要继承另一个模块，这时就有必要采用”放大模式”

var module1 = (function (mod){
　　mod.m3 = function () {
console.log('m3');
};
　　return mod;
})(module1);

Module1.m3()   // m3

五、宽放大模式

在浏览器环境中，模块的各个部分通常都是通过网络获取的，有时无法知道哪个部分会先加载。如果采用放大模式的写法，第一个执行的部分有可能加载一个不存在空对象，这时就要采用”宽放大模式”。

var module1 = ( function (mod){
　　//...
　　return mod;
})(window.module1 || {});

与”放大模式”相比，＂宽放大模式＂就是”立即执行函数”的参数可以是空对象

六、输入全局变量

独立性是模块的重要特点，模块内部最好不与程序的其他部分直接交互。

为了在模块内部调用全局变量，必须显式地将其他变量输入模块。

var module1 = (function ($) {
　　//...
})(jQuery);

module1模块需要使用jQuery库，把这两个库当作参数输入module1，这样做除了保证模块的独立性，还使得模块之间的依赖关系变得明显

七、CommonJS和AMD 规范

在CommonJS中，有一个全局性方法require()，用于加载模块。CommonJS规范主要用在服务端，例如 nodejs就遵守CommonJS规范

var math = require('math');
math.add(2,3);   // 5

但是，如果是客户端，

math.add(2, 3)

必须要等到 ’math’ 模块加载完成之后才能执行，也就是说，如果加载时间很长，整个应用就会停在那里等待。

因为服务端可以同步加载模块，而浏览器主要是异步加载， 这就产生了 AMD 规范：

AMD规范

它采用异步方式加载模块，模块的加载不影响它后面语句的运行。所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行。

AMD也采用require()语句加载模块，但是不同于CommonJS，它要求两个参数：

require([module], callback);

第一个参数[module]，是一个数组，里面的成员就是要加载的模块；第二个参数callback，则是加载成功之后的回调函数。如果将前面的代码改写成AMD形式，就是下面这样：

require(['math'], function (math) {
　　math.add(2, 3);
});

所以，AMD比较适合浏览器环境, 目前实现了 AMD 规范最流行javascript库之一是

require.js

.

八、require.js

以前引入js的方法

<script src="1.js"></script>
<script src="2.js"></script>
<script src="3.js"></script>
<script src="4.js"></script>
<script src="5.js"></script>
<script src="6.js"></script>

缺点：

- 浏览器会停止页面渲染，加载的文件越多，网页响应的时间越长

- js文件存在依赖关系，必须严格保证加载顺序，当依赖关系很复杂的时候，代码的编写和维护都会变得困难。

require.js加载模块

首先引入 require.js

<script src="res/js/require.js"></script>

require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){
　　// some code here
});

// require.config(); 配置参数
require.config({
paths: {
"jquery": "res/js/jquery-3.1.1.min",
"math": "res/js/math"
　　}
)};

require(['jquery', 'math'], function ($, math){
console.log($);
});

AMD模块的写法

define(function (){
　　var add = function (x,y){
　　　　return x+y;
　　};
　　return {
　　　　add: add
　　};
});

注意：require.js加载的模块，必须是按照AMD规范、用define()函数定义的模块。

九、加载非规范的模块

但是，已经有很多模块没有严格的遵守AMD规范，像这样的模块， 其实 require 也是可以加载的，使用

require.config()

对象除了接收

paths

属性之外，还有一个

shim

属性,专门用来配置不兼容的模块。

具体来说，每个模块要定义：

- exports值（输出的变量名），表明这个模块外部调用时的名称；

- deps数组，表明该模块的依赖性。

比如，jQuery的插件可以这样定义

shim: {
　　'jquery.scroll': {
　　　　deps: ['jquery'],
　　　　exports: 'jQuery.fn.scroll'
　　}
}

二、ES6简单语法

一、ES6 简介

参考：http://es6.ruanyifeng.com/#docs/intro

主流浏览器对ES6的支持：http://kangax.github.io/compat-table/es6/

二、新增语法

1、let和const命令

let 声明的变量只在该变量所在模块内有效

for (let i = 0; i < 10; i++) {}

console.log(i);  // defined

const 声明一个只读的常量。一旦声明，常量的值就不能改变。

const PI = 3.1415;
PI // 3.1415

PI = 3;  // Assignment to constant variable.

2、结构化赋值

var a = 1;
var b = 2;
var c = 3;
// 等同于
var [a, b, c] = [1, 2, 3];

let [ , , third] = ["foo", "bar", "baz"];
third； // baz

let [head, ...tail] = [1, 2, 3, 4];
head // 1
tail // [2, 3, 4]

3、块级作用域

ES5只有全局作用域和函数作用域，没有块级作用域

var tmp = new Date();

function f() {
console.log(tmp);
if (false) {
var tmp = "hello world";
}
}

f(); // undefined

ES6 的写法

{
let tmp = 123;
}
console.log(tmp);  //defined

4、模版字符串

ES5 的写法

var txt = 'hello world!';
var test = document.getElementById('demo_1');
test.innerHTML = '<div>'+txt+'</div>';

ES6 的写法

var txt = 'hello world!';
var test = document.getElementById('demo_1');
test.innerHTML = `<div>${txt}</div>`;

5、for of 循环

ES5 for in 循环

var arr = ['a', 'b', 'c', 'd'];

for (let a in arr) {
console.log(a); // 0 1 2 3
}

ES6 for of 循环

var arr = ['a', 'b', 'c', 'd'];

for(let v of arr) {
console.log(v); // a, b, c, d
}

6、箭头函数

var f = v => v;
//等同于
var f = function(v) {
return v;
};

var f = () => 5;
// 等同于
var f = function () {
return 5;
};

var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2) {
return num1 + num2;
};

7、class 基本语法

ES5

function Point(x, y) {
this.x = x;
this.y = y;
}

Point.prototype.toString = function () {
return '(' + this.x + ', ' + this.y + ')';
};

var p = new Point(1, 2);
p.toString(); //(1, 2)

ES6

class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}

toString() {
return '(' + this.x + ', ' + this.y + ')';
}
}
var p = new Point(1,2);
p.toString(); // (1, 2)

更多教程： 阮一峰《ECMAScript 6 入门》

三、Web前端代码规范

参考： 腾讯前端团队的规范文档 http://alloyteam.github.io/CodeGuide/

四、react-native Windows + Android环境搭建

react-native 官方文档: http://facebook.github.io/react-native/

一、必需软件安装

Node.js

安装 Node , python2

https://nodejs.org/

https://www.python.org/

React Native CLI

npm install -g react-native-cli

Android 6.0 SDK

为了 Android SDK 的好管理和下载，直接安装 Android Studio ，并配置环境变量

Genymotion 模拟器

下载：https://www.genymotion.com/

Genymotion是基于 Oracle 的 VirtualBox 虚拟机的，所以样两个版本，一个是带有VBox 的虚拟机的，一个是不带 VBox。

安装教程： http://blog.csdn.net/beiminglei/article/details/13776013

二、初始化项目并启动

react-native init AwesomeProject
cd AwesomeProject
react-native start

// 等服务启动
react-native run-android

测试服务地址： localhost:8081/index.android.bundle?platform=android

yarn 简介： http://www.infoq.com/cn/news/2016/10/yarn

博客园开源地址： https://github.com/togayther/react-native-cnblogs

初始页面