EduSoho JS 开发介绍

1.JS规范介绍

2.加载介绍

3.spm安装

1. JS规范介绍

EduSoho使用的是Sea.js 为什么使用 Sea.js?

Sea.js 追求简单、自然的代码书写和组织方式，具有以下核心特性：

简单友好的模块定义规范：Sea.js 遵循 CMD 规范，可以像 Node.js 一般书写模块代码。

自然直观的代码组织方式：依赖的自动加载、配置的简洁清晰，可以让我们更多地享受编码的乐趣。 Sea.js 还提供常用插件，非常有助于开发调试和性能优化，并具有丰富的可扩展接口。

在 Sea.js 中，所有 JavaScript 模块都遵循 CMD（Common Module Definition） 模块定义规范。该规范明确了模块的基本书写格式和基本交互规则。

在 CMD 规范中，一个模块就是一个文件。代码的书写格式如下：

define(factory);

更详细的文档,请参考sea.js官方文档

EduSoho除了使用Sea.js,还使用了Arale:

Arale 立足于支付宝的前端需求和国内前端社区，基于 Sea.js 和 spm 生态圈，致力发展小而美的前端模块架构，建立了一套从编码测试到部署的开发体系， 是一个开放、简单、易用的前端解决方案。 arale官方文档

2. 加载介绍

主题里面,引入全局js

在主题根目录的下创建一个js目录,再创建一个global-script.js 该js必须符合CMD规范. 如果是默认主题,具体的路径为: default/js/global-script.js

主题里面调用js.

比如说我有一个js
default/js/hello.js
如果想在主题下面的index.html.twig,
就使用 "{% do load_script('theme/default/js/hello') %}"
注意default是主题的名字.

同理,如果想在插件里面的某个twig文件里面调用的话 {% do load_script('HelloBundle/controller/hello/hello') %} HelloBundle是你插件的bundle名字. js一般要放在budle目录的Resources目录的js目录下面. 上面的对应js路径为: HelloBundle/Resources/public/js/controller/Hello/hello.js 你应该有一个Hellocontroller

引入多个js: {% do load_script(['course-manage/lesson', 'course-manage/manage']) %} 引入单个js: {% do load_script('course-manage/lesson') %} 也可以用,但是只有{% %}可以在block外使用. 参数是跟script_controller的参数是一样.不过是可以传入一个数组,未来scrupt_controller会被弃用,所以请不要再使用它引入js

3.spm安装

安装node brew install node

spm需要依赖扩展 PhantomJS https://github.com/eugene1g/phantomjs/releases/download/2.0.0-bin/phantomjs-2.0.0-macosx.zip 解压后将phantomjs 合名成 PhantomJS 并设置环境变量

npm install spm -g