# jquery-components-example
**Repository Path**: fanqunxing/jquery-components-example
## Basic Information
- **Project Name**: jquery-components-example
- **Description**: No description available
- **Primary Language**: JavaScript
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-04-11
- **Last Updated**: 2021-05-20
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# jquery-components
#### 1 介绍
##### 1.1 什么是jquery-components
jquery是一个操作dom的库，在SPA和组件化开发的潮流下，jquery使用变得不主流。jquery-components 是为了解决jquery无法组件化和无法构建SPA的工具。
##### 1.2 为什么选择jquery-components
jquery-components 拥有jquery的所有api，并在0新增API的前提下完成了组件化。给使用jquery的同学提供了新的选择。
#### 2 安装使用
##### 2.1 安装jquery-components-loader
```shell
npm install jquery-components-loader -D
```
##### 2.2 安装jquery-components
```
npm install jquery-components -S
```
##### 2.3 在webpack.config.js的rules中配置jquery-components-loader
```javascript
module: {
rules: [
{
test: /\.jq/i,
loader: "jquery-components-loader"
}
],
}
```
##### 2.4 HTML入口页面
```html
```
##### 2.5 编写App.jq
```html
hello jquery-components
```
##### 2.6 在main.js中使用
```javascript
import $ from 'jquery';
import { useJquery } from 'jquery-components';
import App from './App.jq';
// 这里初始化劫持jquery对象
useJquery($);
$("#app").html(App);
```
启动webpack后页面显示
```html
hello jquery-components
```
#### 3. 组件
##### 3.1 组件创建
使用js创建一个组件
```js
// 声明一个组件
let comp = {
template: '我是一个组件, 点击我~
',
ready($$) {
$$(".btn").click(function() {
alert('hello world!')
});
}
};
// 选择dom元素挂载组件
$(".my_components").html(comp);
```
使用jq-loader创建组件
simpCom.jq文件
```html
我是一个组件, 点击我~
```
引入和使用
使用import标签引入自定义组件，name是组件名，src是组件路径。这样在template中就可以使用
```html
```
##### 3.2 template的使用
注意：
1. template必须含义一个根标签。
2. 自定义组件的使用要使用双标签，单标签暂时不被支持。
```html
```
##### 3.3 script的使用
script默认导出一个函数，这个函数会在组件被挂载完成后执行。
默认函数中传入一个$参数，这个$做了作用域的限制，使用这个$仅仅能选中组件内的dom元素。
```html
```
##### 3.4 style的使用
style里面正常使用css即可，暂不支持less等扩展语言。
##### 3.5 全局组件
我们声明了全局组件则不再需要引入。
使用$.component(name, compontents)即可。
示例：
```js
import MyBtn from './MyBtn.jq';
// 即可全局使用
$.component('MyBtn', MyBtn)
```
#### 4 组件传参
##### 4.1 父组件向子组件传参
场景一：使用attr同步传入
```html
// 父组件中传入name
```
在子组件MyBtn.jq中接受
```html
按钮
```
场景二：如果是异步写入name，则需要下面方法
```html
```
在子组件MyBtn.jq中使用监听到数据
```html
按钮
```
场景三：如果数据量太大或者数据格式，不适合用attr，则可以使用data方法
```html
```
在子组件一样可以监听的到
```html
按钮
```
##### 4.2 子组件向父组件传参
子组件
```html
按钮
```
父组件
```html
```
#### 5 路由
##### 5.1 使用路由
配置路由文件
```js
import Guide from '../pages/Guide.jq';
import Init from '../pages/Init.jq';
export default [
{
path: '/guide',
component: Guide
},
{
path: '/init',
component: Init
}
];
```
在main.js中使用路由
```js
import routers from './router';
$.router(routers)
```
App.jq中就可以使用router-view标签, ``就可以展示路由页面。
```html
```
##### 5.2 监听路由变化
通过router事件即可监听
```html
按钮
```
#### 6 动态组件
动态组件是指在组件内部使用html方法挂载一个复杂组件的时候使用
如下, js_content里面含有MyBtn标签，则需要声明为动态组件，以保证Mybtn按预期渲染。
```html
```
#### 7 对jquery做了哪些改动
1. 重写了html方法，在支持原来的字符串html写入dom的条件下，也支持了写入jquery组件。
2. 新增了$.router方法挂载路由 (如果需要路由的话)。
3. 新增了$.component全局组件声明。