`
zccst
  • 浏览: 3315428 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

seajs之seajs-text和seajs-debug插件

阅读更多
作者:zccst

终于明白为什么项目中加这个文件了,原来是为了载入模板。
首先,使用seajx-text加入模板
然后,再用Hogan或mustache解析模板,完成替换



一、文本插件seajs-text

在 JavaScript 中嵌入 HTML 模板很不方便,特别是当模板内容有多行时。有了 Sea.js, 一切迎刃而解。

首先,需要引入文本插件:

<script src="path/to/sea.js"></script>
<script src="path/to/seajs-text.js"></script>
也可以通过 preload 配置来引入。

加载模板字符串

引入文本插件后,就可以在模块中直接通过 require 来加载文本文件了:

define(function(require) {

  // 获取文本内容
  var tpl = require('./a.tpl');
  console.log(tpl);

});
a.tpl

<div>I am {{name}}.</div>
除了 .tpl 后缀, 还可以使用 .html 后缀,或 text! 前缀来指明文本文件。

加载 Handlebars 模板并进行预编译

对于 Handlebars 模板,在开发时我们可以让编译透明化。首先要配置 handlebars 的路径:

seajs.config({
  alias: {
    handlebars: 'gallery/handlebars/1.0.2/handlebars'
  }
})
然后在模块代码中,就可以直接获取编译后的 handlebars 模块函数了:

  var compiled = require('./a.handlebars')
  var html = compiled({foo: 'bar'})


加载 JSON 数据

除了加载模板等文本文件,使用文本插件还可以加载 JSON 数据:

a.json

{
  "name": "Frank",
  "age": 30
}
define(function(require) {

  // 加载 json 数据
  var data = require('./a.json');
  console.log(data.name);

});
除了 .json 后缀,还可以使用 json! 前缀来指明 JSON 文件。

注意事项

Sea.js 通过 XHR 来加载文本文件。受同源策略限制,在开发完成后,推荐通过构建工具将文本文件转换为 JS 代码。这样,上线后就可以从任意域加载。

Sea.js 原生支持 css 文件的加载,直接 require('path/to/file.css') 即可。



二、调试插件seajs-debug
https://github.com/seajs/seajs-debug/blob/master/README.md
https://github.com/seajs/seajs-debug/issues/4



如果您觉得本文的内容对您的学习有所帮助,您可以微信:
分享到:
评论
1 楼 ---化被草木--- 2016-07-21  
不知道为什么,我尝试用标签引入没有效果,而通过 preload 配置来引入才有效果。
var html = require("text!page/login.html");这个是我的获取方式。

相关推荐

    seajs-5分钟上手

    同时,使用`seajs-text`插件可以方便地加载HTML和CSS模板。 **七、Seajs与其他库的兼容** Seajs与jQuery、Zepto等库可以很好地共存,通过`seajs.config`配置模块别名,可以避免命名冲突。 **八、插件扩展** ...

    seajs-2.2.0源码

    5. **插件系统**:Seajs拥有丰富的插件体系,如`seajs-use`用于按需加载,`seajs-text`用于加载HTML和CSS等非JavaScript资源,这些插件极大地扩展了Seajs的功能。 6. **配置机制**:Seajs提供了配置选项,如`base`...

    CMD规范之seajs

    CMD规范之Seajs Seajs是一款轻量级的前端模块加载器,它遵循CommonJS规范,使得JavaScript在浏览器端也能实现模块化的开发。这个规范主要包含模块定义、模块加载和模块化开发的思想,大大提高了代码的可维护性和...

    seajs相关模板

    插件通常以`seajs-plugin-`为前缀命名,比如`seajs-plugin-debug`用于调试。开发插件时,需要监听`seajs-ready`事件,然后在回调函数中进行插件的功能实现。 ```javascript seajs.use('seajs', function(seajs) { ...

    seajs-wrap:一个Sea.js插件,用于加载CommonJS模块

    Sea.js插件,用于直接加载CommonJS模块。 它将使用define(function(require, exports, module) {})块包装文件,以便您可以加载CommonJS模块而无需先包装它。 它只能加载相同域中的模块,因此请在开发环境中使用它...

    Seajs-Bootstrap-Datetimepicker

    Seajs-Bootstrap-Datetimepicker是一款基于Sea.js和Bootstrap框架的日期时间选择器组件,它为JavaScript开发者提供了一种方便、灵活的方式来在Web应用中处理日期和时间输入。这个组件是针对那些希望在不使用AMD(如...

    SeaJS(Javascript 模块加载框架) v1.0.2.zip

    5. **社区插件**:SeaJS 社区提供了丰富的插件,如 seajs-text 可以加载文本资源,seajs-style 可加载 CSS 文件,增强了框架的功能。 在提供的压缩包文件中,我们有以下三个文件: - `说明.htm`:这通常是一个简要...

    SeaJS入门实例

    尤其对于习惯于Java开发的程序员来说,SeaJS的模块化思想与Java类的组织方式有异曲同工之妙,这使得学习和使用SeaJS变得更加容易。 #### 二、环境搭建与准备工作 ##### 2.1 创建工程结构 为了便于理解和操作,...

    seajs 源代码 学习

    2. **阅读源码**:通过阅读 `sea-debug.js` 这样的源码调试版本,可以更深入理解 Seajs 内部的工作机制,如模块解析、依赖管理和执行流程等。 3. **实践项目**:参与实际项目,将 Seajs 应用于页面开发,体验模块化...

    SeaJS(Javascript 模块加载框架) v1.0.2

    7. **版本管理和调试**:通过 `sea-debug.js` 文件,开发者可以在调试模式下运行 SeaJS,获取更多的错误信息。而在生产环境中,可以使用精简版的 `sea.js` 来减小文件大小,提高页面加载效率。 总之,SeaJS 提供了...

    grunt-ejs2seajs

    Easy to debug 便于调试 Nodejs usable 可用于nodejs No XSS 避免XSS Debugging in chrome dev tools: 支持在Chrome开发者工具中断点调试: For simple and thin, only support tags &lt;&#37;= %&gt; , &lt;&#37;- %&gt; ...

    SeaJS入门教程系列之使用SeaJS(二)

    下载及安装 要在项目中使用SeaJS,你所有需要做的准备工作就是下载sea.js然后...在讨论SeaJS的具体使用前,先介绍一下SeaJS的模块化理念和开发原则。使用SeaJS开发JavaScript的基本原则就是:一切皆为模块。引入SeaJS后

    SeaJS(Javascript 模块加载框架)源代码

    3. **插件系统**:SeaJS 提供丰富的插件支持,如 `seajs-text` 插件用于加载文本资源,`seajs-style` 插件处理 CSS 模块,以及各种构建工具和优化插件,便于开发者扩展其功能。 4. **可配置性**:SeaJS 具有高度可...

    Web前端模块化组件seajs-3.0.0版

    Sea.js 还提供了 nocache、debug 等插件,拥有在线调试等功能,能比较明显地提升效率。 前端性能优化。Sea.js 通过异步加载模块,这对页面性能非常有益。Sea.js 还提供了 combo、flush 等插件,配合服务端,可以很...

    grunt-seajs:grunt build seajs 的演示

    提供各类插件用于前端开发,例如JSLint代码检验,优化,concat合并文件插件,uglify压缩工具,与CMD规范(一种js模块化开发的规范提议)配合的grunt-cmd-concat,这里主要是用于配合seajs,将多个文件合并压缩 ##使用环境##...

    seajs 使用文档

    CMD 模块定义规范是 Sea.js 的核心之一,用于定义模块及其依赖关系。每个模块都是独立的,通过 `define` 函数定义,支持异步加载。其基本格式如下: ```javascript define(function (require, exports, module) { ...

    seajs实现强制刷新本地缓存的方法分析

    seajs是一种流行的...通过合理配置和使用seajs的map属性,我们可以有效地解决开发过程中遇到的缓存问题,提高开发效率和用户使用新版本代码的体验。但同时也要注意合理使用这一机制,避免引入新的问题和错误。

    generator-nd:为项目和模块生成前端文件

    generator-nd Deprecated. use init instead. Yeoman 生成器,用于生成基于 SeaJS/SPM 的前端项目/组件文件结构,样例代码见 。 安装 安装 yo ... |-sea-debug.js |-config.js &lt;配置文件,READ

    sea.js常用的api简易文档

    以下是一些 Sea.js 的常用 API 和其应用示例: ### 1. `seajs.config` `seajs.config` 用于配置 Sea.js 的加载行为,主要包括以下几个方面: - **alias(别名配置)**:可以为模块创建别名,方便后续模块中通过 `...

Global site tag (gtag.js) - Google Analytics