1 Star 0 Fork 0

魔法编码者X / pure-frontend

Create your Gitee Account
Explore and code with more than 12 million developers,Free private repositories !:)
Sign up
Clone or Download
contribute
Sync branch
Cancel
Notice: Creating folder will generate an empty file .keep, because not support in Git
Loading...
README
MIT

pure-frontend

解决单页面应用开发中常见的问题,比如不同视图间的样式隔离、JS隔离等。

安装依赖

npm install pure-frontend

添加依赖

依赖 jQuery,Bootstrap v4。

<link href="pure-frontend.css" rel="stylesheet" />
  
<script src="pure-frontend.js" type='text/javascript'></script>

代码示例

比如有这么一段 HTML 代码。

<body>
  ...
  <div class="pure-app">
  </div>
  ...
</body>

加载的视图会渲染到包含 pure-app 样式类名的标签下。

/**
 * @description 加载视图
 * @param {string} url URL字符串
 */
Pure.app.loadView(url);     

/**
 * @description 注册视图的入口函数
 * @param {string} viewName 
 * @param {function} mainFn 
 */
Pure.app.viewMain(viewName, function (scope, view) {
  // 加载完视图后会自动执行该函数
  ...
});

/**
 * @description 调用远程接口
 * @param {string} url 
 * @param {*} [data] 
 * @param {PlainObject} [opts] 
 * @returns {AjaxResult}
 */
Pure.fn.Ajax.callService(url, data, opts);

提供访问视图的方法描述。

class View {
  /**
   * @param {(Document|Element)} viewElement 
   * @param {ViewInfo} viewInfo 
   */
  constructor(viewElement: any, viewInfo: any, viewScope: any);

  /**
   * @description 返回视图对应的 DOM 元素
   * @returns {(Document|Element)}
   */
  getViewElement(): any;

  /**
   * @description 返回视图信息
   * @returns {ViewInfo}
   */
  getViewInfo(): any;

  /**
   * @description 返回视图对应的数据模型
   * @returns {uiData.Model}
   */
  getDataModel(): any;

  /**
   * @description 返回 URL 参数
   * @param {string} name 
   * @returns {string}
   */
  getUrlParam(name: any): any;

  /**
   * @description 查找视图下的指定元素,参数格式与 jQuery.find() 相同
   * @param {...any} args
   * @returns {jQuery}
   */
  $find(...args: any[]): any;

  /**
   * @description 查找视图下的指定元素,通过配置 Global.config.uiNameAttributeName 指定的属性
   * @param {string} name
   * @returns {jQuery}
   */
  $ui(name: any): any;

  ...
}

开源协议

MIT

MIT License Copyright (c) 2023 magicodex Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

About

支持单页面应用的前端框架,包括 JS 隔离、CSS隔离等特性。(不定期从 https://github.com/magicodex/pure-frontend 同步代码) expand collapse
JavaScript and 3 more languages
MIT
Cancel

Releases

No release

Contributors

All

Activities

Load More
can not load any more
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
JavaScript
1
https://gitee.com/magicodex/pure-frontend.git
git@gitee.com:magicodex/pure-frontend.git
magicodex
pure-frontend
pure-frontend
main

Search

344bd9b3 5694891 D2dac590 5694891