jquery网站项目 jquery前端开发实战教程
大家好，今天给各位分享jquery网站项目的一些知识，其中也会对jquery前端开发实战教程进行解释，文章篇幅可能偏长，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在就马上开始吧！
jQuery的使用方法
使用步骤如下：
1.jQuery给放到一个文件夹里面,方便我们待会引用这个jQuery,这里我就放到我项目的js文件夹里面。
2.然后我们来开始编辑HTML界面代码。
3.使用script标签把jQuery引入到我们的HTML界面。src引号里面的就是我们的jQuery路径名称。
4.接着再书写一个script标签对,里面写上jQuery入口函数,这样,当我们的HTML加载完成之后就会执行我们的jQuery代码
关于jQuery和Vue两者技术架构的比较分析报告
在过去的前端开发中，jQuery几乎会出现在任何大大小小的项目中，不论是类MS，还是电商，还是各类门户网站，都少不了jQuery的身影，可以说在之前的前端开发中，jQuery更是一种“标准”。
2008年，V8引擎随 Chrome浏览器横空出世，JavaScript这门通用的 Web脚本语言的执行效率得到质的提升。 V8引擎的出现，注定是 JavaScript发展史上一个光辉的里程碑。它的出现，让当时研究高性能服务器开发、长时间一筹莫展的 Ryan Dahl有了新的、合适的选择，不久，在2009年的柏林的 JSConf大会上，基于 JavaScript的服务端项目 Node.js正式对外发布。Node.js的发布，不仅为开发者带来了一个高性能的服务器，还很大程度上推动了前端的工程化，带来了前端的大繁荣。与此同时，因为 JavaScript执行效率的巨大提升，越来越多的业务逻辑开始在浏览器端实现，前端逻辑越来越重，前端架构随之提上日程。于是，我们谈论的主角，MVVM模式，走进了 Web前端的架构设计中。
MVVM模式，顾名思义即 Model-View-ViewModel模式。它萌芽于2005年微软推出的基于 Windows的用户界面框架 WPF，前端最早的 MVVM框架 knockout在2010年发布。当前最流行了MVVM框架 Vue的2.0版本在2016年5月发布。
一句话总结 Web前端 MVVM：操作数据，就是操作视图，就是操作 DOM（所以无须操作 DOM）。
无须操作 DOM！借助 MVVM框架，开发者只需完成包含声明绑定的视图模板，编写 ViewModel中业务数据变更逻辑，View层则完全实现了自动化。这将极大的降低前端应用的操作复杂度、极大提升应用的开发效率。MVVM最标志性的特性就是数据绑定，MVVM的核心理念就是通过声明式的数据绑定来实现 View层和其他层的分离。完全解耦 View层这种理念，也使得 Web前端的单元测试用例编写变得更容易。
MVVM，说到底还是一种分层架构。它的分层如下：
Model层，对应数据层的域模型，它主要做域模型的同步。通过 Ajax/fetch等 API完成客户端和服务端业务 Model的同步。在层间关系里，它主要用于抽象出 ViewModel中视图的 Model。
View层，作为视图模板存在，在 MVVM里，整个 View是一个动态模板。除了定义结构、布局外，它展示的是 ViewModel层的数据和状态。View层不负责处理状态，View层做的是数据绑定的声明、指令的声明、事件绑定的声明。
ViewModel层把 View需要的层数据暴露，并对 View层的数据绑定声明、指令声明、事件绑定声明负责，也就是处理 View层的具体业务逻辑。ViewModel底层会做好绑定属性的监听。当 ViewModel中数据变化，View层会得到更新；而当 View中声明了数据的双向绑定（通常是表单元素），框架也会监听 View层（表单）值的变化。一旦值变化，View层绑定的 ViewModel中的数据也会得到自动更新。
如图所示，在前端 MVVM框架中，往往没有清晰、独立的 Model层。在实际业务开发中，我们通常按 Web Component规范来组件化的开发应用，Model层的域模型往往分散在在一个或几个 Component的 ViewModel层，而 ViewModel层也会引入一些 View层相关的中间状态，目的就是为了更好的为 View层服务。
开发者在 View层的视图模板中声明数据绑定、事件绑定后，在 ViewModel中进行业务逻辑的数据处理。事件触发后，ViewModel中数据变更， View层自动更新。因为 MVVM框架的引入，开发者只需关注业务逻辑、完成数据抽象、聚焦数据，MVVM的视图引擎会帮你搞定 View。因为数据驱动，一切变得更加简单。
不可置否，MVVM框架极大的提升了应用的开发效率。It's amazing！But，MVVM框架到底做了什么？
视图引擎：我是视图引擎，我为 View层作为视图模板提供强力支持，开发者，你们不需要操作 DOM，丢给我来做！
数据存取器：我是数据存取器，我可以通过 Object.defineProperty() API轻松定义，或通过自行封装存取函数的方式曲线完成。我的内部往往封装了发布/订阅模式，以此来完成对数据的监听、数据变更时通知更新。我是数据绑定实现的基础。
组件机制：我是组件机制。有追求的开发者往往希望按照面向未来的组件标准－ Web Components的方式开发，我是为了满足你的追求而生。MVVM框架提供组件的定义、继承、生命周期、组件间通信机制，为开发者面向未来开发点亮明灯。
MVVM架构型模式的兴起，实现了前后端真正的职责分离，在提高开发效率的同时，也存在一些不足之处。
可以说前后端分离随着趋势已经形成一种标准，MVVM设计模式的开发框架（Vue）适用任何场景的开发（低版本IE除外）。
jQuery是直接来操作DOM的，凭借简化后的API直接和DOM对话（优异的兼容性）；
Vue是直接来操作数据的，拿数据说话。
详解如何使用webpack打包多页jquery项目
虽然已经2019年了
不过有一些项目
还是需要用到jquery的
不过考虑到使用jquery的一堆兼容性问题
也为了可以顺利地使用ES6来撸代码
研究使用webpack+babel打包代码来发布
几个重点：
1.为了将模块分割加载，不至于一个js文件过大，一个页面中使用多个js文件
2.由于是多页项目（多个html），每个页面使用的js文件都不一致
基于以上两点，需要配置多个入口文件
3.会把小图片转换成base64，所以可能css转成的js文件会比较大，所以css文件都单独设置入口js
例如，我们有三个页面：index、share、assist
三个页面有通用的css文件：common.css
设置入口文件时，可以这样设置
entry:{
//通用css
commoncss: path.resolve(__dirname,'./src/css/common.css.js'),
//主页
indexcss: path.resolve(__dirname,'./src/css/index.css.js'),
index: path.resolve(__dirname,'./src/index.js'),
//页1
sharecss: path.resolve(__dirname,'./src/css/share.css.js'),
share: path.resolve(__dirname,'./src/share.js'),
//页2
assistcss: path.resolve(__dirname,'./src/css/assist.css.js'),
assist: path.resolve(__dirname,'./src/assist.js'),
}
其中，common.css.js文件中，只有几行代码
import'../css/base.css';
import'../css/plugin.css';
import'../css/common.css';
common.css.js文件结束
由于会有一些图片的base64，所以大小大约100+KB
类似的还有index.css.js和share.css.js和assist.css.js
index.css.js如下
import'../css/index.css';
对，就一句话
打包出来的js文件大小就看引入了多少小图片了，一般几百KB
然后，要使用三个webpack的插件
const HtmlWebpackPlugin= require('html-webpack-plugin');
const CopyWebpackPlugin= require('copy-webpack-plugin');
const jquery= require('jquery');
HtmlWebpackPlugin用于打包出多个html文件
CopyWebpackPlugin用于img标签，后面说
jquery就是jquery，全局引用
webpack.config.js里的plugins配置如下
plugins: [
new webpack.ProvidePlugin({
$:"jquery"
}),
new CopyWebpackPlugin([{
from: __dirname+'/src/public/'
}]),//吧src下public文件夹下的所有内容直接拷贝到dist(输出目录)下
new HtmlWebpackPlugin({
filename:'index.htm',
template:'src/index.html',
chunks: ['commoncss','indexcss','index'],
inject:'true',
hash: true,
}),
new HtmlWebpackPlugin({
filename:'share.htm',
template:'src/share.html',
chunks: ['commoncss','sharecss','share'],
inject:'true',
hash: true,
}),
new HtmlWebpackPlugin({
filename:'assist.htm',
template:'src/assist.html',
chunks: ['commoncss','assistcss','assist'],
inject:'true',
hash: true,
})
]
src目录下的文件如下
index.js assist.js share.js是三个文件分别的入口文件
index.html assist.html share.html是三个文件的模板，html代码可以写在这里（当然想用模板文件也是可以的，只要HtmlWebpackPlugin插件支持）
dist文件夹如下
（为什么是htm而不是html，是为了便于读者区分模板文件和输出文件）
我们知道，webpack打包不会打包HtmlWebpackPlugin的template里的img标签下的图片，所以在html里使用了img标签的图片都要放在public文件夹下，CopyWebpackPlugin这个组件会直接把图片复制过去
关于HtmlWebpackPlugin的具体参数的细则可以上网搜一下，很多这方面的内容
其他的比如loader、babel不在这篇文章想说的重点之列，不赘述
最后，附上webpack.config.js文件
let actName='yourProjectName';//
let actKV={
name: actName,
entry:{
//通用css
commoncss: path.resolve(__dirname,'./src/css/common.css.js'),
//主页
indexcss: path.resolve(__dirname,'./src/css/index.css.js'),
index: path.resolve(__dirname,'./src/index.js'),
//分享页1
sharecss: path.resolve(__dirname,'./src/css/share.css.js'),
share: path.resolve(__dirname,'./src/share.js'),
//分享页2
assistcss: path.resolve(__dirname,'./src/css/assist.css.js'),
assist: path.resolve(__dirname,'./src/assist.js'),
}
};
return{
entry: actKV.entry,
target:"web",
output:{
path: path.resolve(__dirname+'/dist/'+actName),
// publicPath:'.\\',
filename:'js/[name].js',
// chunkFilename:"[name].chunk.[hash].js",
},
plugins: [
new webpack.ProvidePlugin({
$:"jquery"
}),
new CopyWebpackPlugin([{
from: __dirname+'/src/public/'
}]),
new HtmlWebpackPlugin({
filename:'index.htm',
template:'src/index.html',
chunks: ['commoncss','indexcss','index'],
inject:'true',
hash: true,
}),
new HtmlWebpackPlugin({
filename:'share.htm',
template:'src/share.html',
chunks: ['commoncss','sharecss','share'],
inject:'true',
hash: true,
}),
new HtmlWebpackPlugin({
filename:'assist.htm',
template:'src/assist.html',
chunks: ['commoncss','assistcss','assist'],
inject:'true',
hash: true,
})
],
mode:'development',
node:{
__filename: true,
__dirname: true
},
devtool: isProduction?'source-map':'inline-source-map',
devServer:{
inline: true,
open: true,
historyApiFallback: true,
// host: ip.address(),
host:'localhost',
progress: true,
contentBase:"./dist/",
port: 3430,
historyApiFallback:true,
publicPath:'/src/',
proxy:{
'*':{
target:'',
secure: false
}
},
},
resolve:{
alias:{
},
extensions: ['.js','.less','.css','.vue','.jsx'],
},
externals:{
},
module:{
rules: [{
test:/\.vue$/,
loader:'vue-loader',
},{
test:/\.js$/,
include: path.join(__dirname,'/src'),
exclude: path.resolve(__dirname,'node_modules'),
use:[
{
loader:'babel-loader',
query:{
presets: ['es2015']
}
}
]
},{
test:/\.xml$/,
loader:"xml-loader"
},{
test:/\.(css|less)$/,
loader:"style-loader!css-loader",
},
{
test:/\.(png|jpg|jpeg|gif|icon|webp)$/,
loader:'url-loader',
options:{
limit: 16384,
name:'images/[name].[hash:5].[ext]',
}
},
{
test:/\.(woff|woff2|svg|eot|ttf)\??.*$/,
loader:"file-loader?&name=assets/fonts/[name].[ext]"
},{
test:/\.txt$/,
loader:"text-loader"
},{
test:/\.jsx$/,
exclude:/node_modules/,
loaders: ['jsx-loader','babel-loader']
}]
},
}
文章到此结束，如果本次分享的jquery网站项目和jquery前端开发实战教程的问题解决了您的问题，那么我们由衷的感到高兴！