# panda

**Repository Path**: beiding/panda

## Basic Information

- **Project Name**: panda
- **Description**: Panda是一种全新的前端语言。它整合并简化了AngularJS和JQuery的使用。
该语言的主体思想是：
   令UI代码和脚本代码内聚在一起，从而避免使用JQuery或原生JS的选择器来粘合脚本与标签元素。
该语言能极快的编译（毫秒级），可以作用系统组件插入到网站应用或客户端应用中，从而使其具有动态特性。
原理：
    该语言可以理解为一层语法糖，是对JQuery和AngularJS的二次封装，panda文件编译生成的html文件使用这两个框架作为底层实现
（后期版本可能会推出panda自己的前端框架，敬请期待）。
使用方法:
    运行程序,并输入命令 cmp -f [需要被编译的panda目录]  (-o [输出目录] ,可选)。
panda目录的组成:(参照resource目录下的demo)
   必须具有一个conf文件,其中必须配置jQuery.path和angularJs.path两个必选属性。其他文件则为“.panda”为后缀的panda文件。
编译时，如果未指定输出目录将会在该目录下创建一个output文件夹其中是编译生成的html文件。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2019-05-21
- **Last Updated**: 2021-05-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# panda

#### 介绍
    Panda是一种全新的前端语言。它整合并简化了AngularJS和JQuery的使用。
    该语言的主体思想是：
        令UI代码和脚本代码内聚在一起，从而避免使用JQuery或原生JS的选择器来粘合脚本与标签元素。
        该语言能极快的编译（毫秒级），可以作用系统组件插入到网站应用或客户端应用中，从而使其具有动态特性。

   
#### 架构
    原理：
        该语言可以理解为一层语法糖，是对JQuery和AngularJS的二次封装，panda文件编译生成的html文件使用这两个框架作为底层实现
        （后期版本可能会推出panda自己的前端框架，敬请期待）。

    panda目录的组成:(参照resource目录下的demo)
        必须具有一个conf文件,其中必须配置jQuery.path和angularJs.path两个必选属性。其他文件则为“.panda”为后缀的panda文件。
        编译时，如果未指定输出目录将会在该目录下创建一个output文件夹其中是编译生成的html文件。


#### 使用说明
    运行程序,并输入命令 cmp -f [需要被编译的panda目录]  (-o [输出目录] ,可选)。


#### panda2.0
			一.本次更新增加了组件式开发
                     

			例如:

			   /*
			   
			   如果定义组件的时候需要引入外部文件可以使用@File来引入,
			   
			   如果引入的是非字符串,在编译的使用将会采用该非字符串加'.path'后缀去conf文件中查找配置
			   
			   例如: js:aJs 编译时将会去conf文件中查找 aJs.path配置
			   
			   同时也可以使用group来指定js和css的组
			   
			   例如: group:bootstrap  编译时将使用  bootstrap.js.path 查找js配置以及 bootstrap.css.path查找css配置
			   
			   */
				@File{
				   js:aJs,
				   css:['xxx','xxx',aCss],
				   group:bootstrap
				}
			   
				/*
			   
				可以像定义一个普通元素那样定义一个组件
			   
				如果该组件需要依赖其他组件需要使用 on 来指明编译顺序
			   
			   */
				mydialog  on mydiv{
				   
				   scope t
				   
				   /*
					 被使用的组件体中只接受映射列表,不接受其他内容
					 
					 映射列表:
						形如 "a->b,c<->d,e<-f" 
						
						1.一个映射规则由 组件外变量 + 映射符 + 组件内变量 的方式构成
						  ->表示将组件外变量映射到组件内  <- 则是将组件内变量映射到组件外 <-> 则是双向的
					   
						2.多个映射列表之间使用','分隔
					 
				   */
				   mydiv{
					 t->text
				   }
				   
				}
				
				
			 mydiv{
			   
				scope text
				
				p{
				  text<<
				}
			   
			 }
			

                        * 组件的定义统一放在后缀为".component"的文件中
	
				
				   
			二.本次更新将 scope 定义为关键字,使用该关键字可以将定义的变量或方法声明到作用域中,而使用的时候则可以像普通变量那样使用


				例如:
				
					scope a='你好'

					scope function f(){
					
						console.log('调用f方法')
					
					}


					 console.log(a)

                    三.本次更新增加了公共服务的定义
                        
                            例如:
                                

					sv1{

						this.f=function(out){
							console.log('调用了sv1的方法:'+out);
						}

					}


					//定义一个服务sv2 依赖于 sv1 服务
					sv2 on sv1 {

						this.f=function(out){
							sv1.f(out);
						}

					}


                               //若要在其他位置使用服务可以使用 dep 关键字引入

                                 div{
                                    
                                        dep sv2;
                                        
                                        sv2.f("一些需要输出的内容")
                                        
                                }    

                        * 公共服务统一在后缀为 ".service" 的文件中定义