同构JavaScript模式下的模块化规范
同构JavaScript的要求
- UI层模块，即能在Server端渲染又能在前端渲染；
- 支持前端静态资源常规优化
模块化规范的讨论
一个 .js 文件，近期在业界较常见的方式是使用 ES6 的语法书写源代码，进而用 Babel 转换为 ES5 的语法运行。在 ES6 中，模块的引用方式是 import 语法，这在目前最新的 Nodejs（5.8.0）中还无法使用，因此仍然需要退化成 CommonJS 的 require 引用方式。这有两种实现：
- 直接书写 CommonJS；
- Babel 将 ES6 转换为 CommonJS
对于 Server 端运行的脚本来说，方式（2）似乎显然略显多余。如果使用方式（1），即 CommonJS 规范，这是一种匿名的模块组织方式，要运行在浏览器，需要使用 browserify 或 webpack 进行针对单个页面的打包，显得不够灵活；亦或将 CommonJS 规范转换为AMD、CMD、SystemJS规范。目前对于 Babel 或 rollup 的插件来讲都还无法做到。
还有一个问题是，Nodejs 引用模块使用相对路径，而在浏览器端使用的是全局命名，因为模块已被 Combo。
似乎要实现同构 JavaScript，必须要做出一些牺牲。
相关文章
- webpack相关知识
能够处理JS文件的互相依赖关系 能够处理JS的兼容问题 安装 全局安装 npm install webpack -g 项目安装 npm install webpack --save-
- Javascript基础和ES6
HTML的基础事件 onmouseover、onmouseout表示JS事件的鼠标移入鼠标移出 document.getElementById('id') JS中选择HTML的ID元素<in
- JavaScript编码规则
JavaScript编码规则 目的：改善协作编码、代码质量。 var 声明变量必须用var。 防止变量变为全局变量，污染全局环境。 常量 基本类型number、string、boolean是常量值。对
- JavaScript获取和设置CSS属性
获取样式 元素对象的宽高位置距离等属性 如offsetWidht、cilentWidht、scrollWidth…… let oWidth=obj.offsetWidth; 注意： 只能获取属
- javascript作用域、上下文、this和闭包详解
词法作用域lexical scope 定义在词法阶段的作用域。词法作用域是变量和语句块在定义时所处的位置决定的。 全局 块级：在{}之内是一个块级作用域（ES6之前没有块级作用于只有函数内的局部作用
随机推荐
- webpack相关知识
能够处理JS文件的互相依赖关系 能够处理JS的兼容问题 安装 全局安装 npm install webpack -g 项目安装 npm install webpack --save-
- Javascript基础和ES6
HTML的基础事件 onmouseover、onmouseout表示JS事件的鼠标移入鼠标移出 document.getElementById('id') JS中选择HTML的ID元素<in
- JavaScript编码规则
JavaScript编码规则 目的：改善协作编码、代码质量。 var 声明变量必须用var。 防止变量变为全局变量，污染全局环境。 常量 基本类型number、string、boolean是常量值。对
- JavaScript获取和设置CSS属性
获取样式 元素对象的宽高位置距离等属性 如offsetWidht、cilentWidht、scrollWidth…… let oWidth=obj.offsetWidth; 注意： 只能获取属
- javascript作用域、上下文、this和闭包详解
词法作用域lexical scope 定义在词法阶段的作用域。词法作用域是变量和语句块在定义时所处的位置决定的。 全局 块级：在{}之内是一个块级作用域（ES6之前没有块级作用于只有函数内的局部作用