打开“元素标识”文件夹，文件结构如下：

• compiler/ ：编译期
  • 元素标识.js：元素编译期处理文件. wide发布页面的过程中进行对应处理
• editor/：编辑器
  • 元素标识.js：元素编辑器文件. wide编辑界面中, 右键编辑打开的对话框的相关内容
• ​runtime/：运行期
  • 元素标识.js：元素运行期文件. 即浏览器访问时页面时进行处理的文件
  • 元素标识/：运行期如需额外资源，则放入该文件夹
• content.html：元素html模板

（1）开发页面阶段

我们在使用wide开发的时候，每个部分都有对应的本地文件，我主要说一下前端相关的内容。

首先，新建站点，会在你设定的根目录上新建一个站点名同名的文件夹，并且其中默认内置了基础内容。static 文件夹存放着静态资源，比如图片，页面js，页面css。tpl/script 存放的页面模板文件，你可以看做就是页面html。

新建页面时会新建四个文件：html、js、css、sjs文件。最后一个文件可忽略，前端不用关心。js 和 css 在static的js文件夹和css文件夹中，html在tpl/script文件夹中。用户通常仅使用 wide 编辑 html 文件，偶尔添加自定义样式类时会编辑 css 文件。

站点编辑第二列 外部编辑，如正确配置了外部编辑器，可点击对应图标打开对应文件，通过外部编辑器打开(如sublime)。也可以点击最后一列操作，点击编辑按钮使用wide打开，这回同时打开四个文件，分别在4个tab中。

打开图形编辑界面，编辑的是html文件，顶部栏中打开逻辑文件、样式类文件分别对应js、css文件。

（2）页面工作阶段

1. 浏览器打开页面时，第一步会加载 html 文件。

2. 根据html文件的引入，加入bootstrap.css，站点css，页面css。

3. 引入requirejs和页面对应js。

4. 由页面对应js，引入基础js(jquery.js, bootstrap.js, wwclass.js)内容，并开始wwclass的初始化。

5. wwclass控制页面进行初始化，构建数据绑定和事件逻辑相关内容。

6. wwclass还做一件很重要的事情，就是检查页面所使用的特殊元素。

   1. 检测到特殊元素，会加载该元素的运行期文件

   2. 元素运行期文件加载完毕后会进行元素初始化