Google Blog 10/23/2016 (a.m.)

• Javascript模块化编程（三）：require.js的用法 - 阮一峰的网络日志

  • 加载的时候，浏览器会停止网页渲染，加载文件越多，网页失去响应的时间就会越长
  • 由于js文件之间存在依赖关系，因此必须严格保证加载顺序
  • 当依赖关系很复杂的时候，代码的编写和维护都会变得困难
  • 解决办法有两个，一个是把它放在网页底部加载，另一个是写成下面这样
    • 解决办法二:<script src="js/require.js" async="true" defer></script>
  • data-main属性的作用是，指定网页程序的主模块。
  • require()函数接受两个参数。第一个参数是一个数组，表示所依赖的模块
  • 第二个参数是一个回调函数，当前面指定的模块都加载成功后，它将被调用。加载的模块会以参数形式传入该函数，从而在回调函数内部就可以使用这些模块。

• Javascript模块化编程（二）：AMD规范 - 阮一峰的网络日志

  • 通行的Javascript模块规范共有两种：CommonJS和AMD
  • 大家就想要客户端模块。而且最好两者能够兼容，一个模块不用修改，在服务器和浏览器都可以运行
  • 但是，由于一个重大的局限，使得CommonJS规范不适用于浏览器环境
    • 引入的模块可能加载时间过程导致整个Application都停留在那里,在浏览器的环境中经常遇到这个问题,但是在服务器上一般都不是个问题,因为模块就在本地
  • 浏览器端的模块，不能采用"同步加载"（synchronous），只能采用"异步加载"（asynchronous）。这就是AMD规范诞生的背景
  • AMD是"Asynchronous Module Definition"的缩写，意思就是"异步模块定义"
  • 所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行
  • AMD比较适合浏览器环境
  • 主要有两个Javascript库实现了AMD规范：require.js和curl.js

• Javascript模块化编程（一）：模块的写法 - 阮一峰的网络日志

  • "污染"了全局变量，无法保证不与其他模块发生变量名冲突，而且模块成员之间看不出直接关系
    • 原始写法:将不同的函数以及变量简单地放在一起原始写法的缺陷
  • 会暴露所有模块成员，内部状态可以被外部改写
    • 将模块写成一个对象,将所有的模块成员都放在这个对象里面这样的写法缺点是:
  • 使用"立即执行函数"（Immediately-Invoked Function Expression，IIFE），可以达到不暴露私有成员的目的
    • 这种写法可以保证外部的代码无法取得内部的状态变量,从而避免被外部改写
  • 如果一个模块很大，必须分成几个部分，或者一个模块需要继承另一个模块，这时就有必要采用"放大模式"（augmentation）
    • 将模块model1当做参数传入一个IIFE中,就可以对这个模块进行扩展,然后返回一个model1模块
  • 在浏览器环境中，模块的各个部分通常都是从网上获取的，有时无法知道哪个部分会先加载
    • 使用宽方法的原因就是因为模块加载顺序不确定,单纯使用放大模式可能会导致加载了一个空对象其实宽放大模式就是在IIFF函数中设置参数可以是空对象,避免报错
  • 模块内部最好不与程序的其他部分直接交互

Posted from Diigo. The rest of my favorite links are here.