前端开发之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


初始页面

这里写图片描述






评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值