背景

很多很多传统的Web开发者还在用着传统的jquery和ES5,大家都知道现在的前端如火如荼,但是眼花缭乱的框架和层出不穷的新概念,让很多人无从下手,本文从0开始,带你一步步由jquery操作DOM转型成为一个新思想的前端开发者。没有过多的引申和概念解释。先上手实践,再回头体会。让我们开始。(本系列默认认为学习者有使用搜索引擎学习概念和解决问题的能力)

目标

使用Typescript+Webpack+jquery开发,一个简单列表,一个按钮,点击按钮,在列表里增加一条新记录,记录的后面显示本记录创建的时间,起初我们先使用jquey, 然后我们再放弃它。再放弃它之前,我们先学会怎么在Typescript里使用jquery。

  • 框架/库/工具:

    1. Typescript(如果你懂C#或者Java,这个用起来会很简单。)
    2. Webpack (最主流热门的打包工具,React/Angular/Vue都在用它)
    3. jquery
    4. Visual Studio Code
    5. ConsoleZ (Win下很好用的一款命令行工具)
  • 开始

    1. 首先,你要安装过NodeJS,如果没有,先去安装,因为我们需要使用NPM来安装管理依赖,直接去官网下载安装就可以。

    2. 安装完NodeJS之后,因为网络原因,有时候NPM会非常慢,替换为淘宝的NPM镜像

    3. 打开VSCode,找个你喜欢的位置,创建一个文件夹,然后新建一个index.html

    4. 写入一个基本的html页面结构,新建两个文件夹,src和dist,我们的typescript文件会放在src里,编译后的js文件在dist里。



    5. 打开你的命令行工具,cmd,powershell或者git bash。这里我使用的是ConsoleZ,如果喜欢的话,可以在这里找到怎么安装使用。在此工作目录下,使用

      npm init

      然后一路输入,初始化一个package.json,这个文件就是你前端工程化的一个配置文件。

    6. 现在来使用npm安装开发要使用的依赖,typescript,webpack,为了让webpack可以装载typescript,还要安装两个loader:awesome-typescript-loader,source-map-loader。因为这些都只是开发阶段要用的工具,并不是最终代码要使用的库,所以加上-dev

      npm install typescript webpack awesome-typescript-loader source-map-loader --save-dev

    7. 安装jquery,这次是要使用在正式环境里的,所以不需要加上-dev,(这里我们使用了npm来引入jquery,不在使用在页面上使用< script>标签来引入的方式)

      npm install jquery --save

    8. 因为我们是在typescript里使用jquery,所以我们需要添加jquery的@types,为了能让typescript使用它的类型

      npm install @types/jquery --save

    9. 在根目录下添加tsconfig.json文件,这个文件是用来配置typescript的,我们可以看到,是把src目录下的所有文件编译到dist目录下,编译成es5

{

"compilerOptions": {

"outDir": "./dist/",

"sourceMap": true,

"noImplicitAny": false,

"module": "commonjs",

"target": "es5",

"allowJs": true

},

"include": [

"./src/*"

],

"exclude": [

"node_modules"

]

}


10. 接下来配置webpack,让webpack来打包typescript文件,在根目录下添加webpack.config.js,配置typescirpt loader。
```javascript
module.exports = {
entry: "./src/app.ts",
output: {
filename: "app.js",
path: __dirname + "/dist"
},
devtool: "source-map", resolve: {
extensions: [".webpack.js", ".web.js", ".ts", ".tsx", ".js"]
},
module: {
rules: [
{
test: /\.js$/,
enforce: "pre",
loader: "source-map-loader"
},
{
enforce: 'pre',
test: /\.tsx?$/,
use: "source-map-loader"
},
{
test: /\.tsx?$/,
loader: 'awesome-typescript-loader',
exclude: /node_modules/
},
]
},
externals: {},
}
11. 好了,让我们来写一些代码。在app.ts里,写一个App类,然后使用它
import * as $ from "jquery";
export class App {
public addComment():void {
let creatAt = new Date();
$("#main").append("<div><span>new comment pushed at."+creatAt.toTimeString()+"</span>");
}
}
let app = new App();
//jquery $()
$(()=>{
$("#btn-add").click(app.addComment);
});
12.  现在可以编译了,如果我们没有使用webpack,我们需要使用tsc命令来编译typescript,现在我们使用了webpack,直接在命令行输入webpack就可以了

webpack

注意,如果提示没有webpack命令,安装webpack到全局

npm install webpack -g

  ![Paste_Image.png](//upload-images.jianshu.io/upload_images/1076822-2640c08d1e54a9b2.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

13.  编译完成后,我们可以看到dist文件夹已经出现了app.js和app.js.map,map文件是用来调试时做关联的。现在改动一下index.html,引用这个app.js

![Paste_Image.png](//upload-images.jianshu.io/upload_images/1076822-97c0fca080d8cf36.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
14. 现在可以打开index.html来看看,每当我们点击按钮,就会添加一条评论。 ![Paste_Image.png](//upload-images.jianshu.io/upload_images/1076822-9cb572fd25549f4f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 15. 现在我们的jquery已经可以和typescript以及webpack一起使用了。但是这只是开始,我们知道了如何写一个简单的typescript类,如何引入jquery来使用,如何让它们配合使用,下一节,我们将引入下面的新东西

1,目前我们的页面还是以一个本地文件的方式在浏览器里打开的,下一节我们要使用一个本地的简易web服务器来承载它,并且可以在有任何改动的时候自动刷新页面。

2,我们要使用整合的npm script命令(npm start)来一次完成编译,运行两个步骤。

3,我们要引入moment库,来给每一条评论后面显示一个发布后到现在的时间差信息,就像下面的图

4,我们要改造这个评论列表,使用React或Angualar创建一个Component

告别JQuery(一)的更多相关文章

  1. css3写出飘雪花特效

    大冬天的,飘雪花的特效,你可能要用上了吧.通常情况下用jQuery写飘雪花的特效,但用css3写,其实特别简单,新手一看就懂,那就告别jQuery,用css3轻松搞定飘雪花特效吧! 点击查看特效演示 ...

  2. 玩转Jquery,告别前端知道思路忘记知识点的痛苦

    本节内容: 本章主要讲解一下jquery,主要是工作中用的前端框架是datetables框架,然后datetables框架又是基于jqeury研发的,所以要想学一个东西,就必须要了解其底层,不然走路都 ...

  3. jQuery美女幻灯相册轮播源代码

    体验效果:http://hovertree.com/texiao/jquery/ 本幻灯片包含小图列表和大图轮播,包含图片标题和详细介绍,详细介绍字数可以很多,每张图片包含链接,可以实现跳转 HTML ...

  4. JQuery实现分页程序代码,源码下载

    Web开发,分页在所难免的,微软GridView.AspPager等设置分页数据可以自动分页,但是这里浏览器会闪动,用户体验不是很友好,在此我整理了JQuery实现分页,并且使用 JQuery模板显示 ...

  5. JQuery实现分页程序代码

    JQuery实现分页程序代码 做Web开发的程序员,分页时在所难免的,微软GridView.AspPager等设置分页数据可以自动分页,但是这里浏览器会闪动,用户体验不是很友好,在此我整理了JQuer ...

  6. jQuery 源码学习 - 01 - 简洁的 $('...')

    首先贴上学习参考资料:[深入浅出jQuery]源码浅析--整体架构,备用地址:chokcoco/jQuery-. jQuery 库,js 开发的一个里程碑,它的出现,让网页开发者们告别荒蛮的上古时代, ...

  7. Angular杂谈系列1-如何在Angular2中使用jQuery及其插件

    jQuery,让我们对dom的操作更加便捷.由于其易用性和可扩展性,jQuer也迅速风靡全球,各种插件也是目不暇接. 我相信很多人并不能直接远离jQuery去做前端,因为它太好用了,我们以前做的东西大 ...

  8. jQuery UI resizable使用注意事项、实时等比例拉伸及你不知道的技巧

    这篇文章总结的是我在使用resizable插件的过程中,遇到的问题及变通应用的奇思妙想. 一.resizable使用注意事项 以下是我在jsfiddle上写的测试demo:http://jsfiddl ...

  9. Jquery的点击事件,三句代码完成全选事件

    先来看一下Js和Jquery的点击事件 举两个简单的例子 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...

随机推荐

  1. linux 进程学习笔记-等待子进程结束

    <!--[if !supportLists]-->Ÿ <!--[endif]-->等待子进程结束 pid_t waitpid(pid_t pid, int *stat_loc, ...

  2. intent实现Activity之间跳转的各种传值

    一.在Activity之间传递String类型的数据 传递 @Override public void onClick(View v) { String num1 = firstNum.getText ...

  3. pod lib lint 报错 Unable to find a specification for `AMap2DMap` depended upon by `DingtalkPod

    执行 pod验证 报错如下 ➜  DingtalkPod git:(2.0.0) ✗ pod lib lint --sources='https://github.com/AloneMonkey/Mo ...

  4. Laravel的三种安装方法总结

    Laravel号称巨匠级PHP框架,越来越多的PHPer选择它作为开发框架,作为一个Laravel初学者相信很多人向我一样被安装挡在了门外.所以今天结合文档和自己的学习经历总结一下Laravel的安装 ...

  5. 如何在Mac下显示Finder中的所有文件

    在Unix下工作,你可能需要处理一些“特殊“文件或文件夹,例如/usr,/bin, etcf,或一些"dot files"(如.bash_profile).但是Linux/Unix ...

  6. Codeforces 762B USB vs. PS/2 贪心

    Codeforces 762B 题目大意: 有a台只有USB接口的电脑,b台PS/2接口的电脑,c台两种接口都有的电脑.每台电脑只用装一个鼠标.给出n个鼠标及其费用,每个鼠标只能使用一遍.在最大化有鼠 ...

  7. 恋恋风辰 对于redis底层框架的理解(一)

    近期学习了redis底层框架,好多东西之前都没听说过,算是大开眼界了. 先梳理下redis正常的通讯流程吧 首先服务器启动都有主函数main,这个main函数就在redis.c里 首先是initser ...

  8. Redis的Spring配置讲解

    Redis是一种特殊类型的数据库,他被称之为key-value存储 本文覆盖缓存和存储两方面进行说明,使用的是Spring 4.0和Java配置方式 代码地址下载地址:https://github.c ...

  9. spring cloud之简单介绍

    以下是来自官方的一篇简单介绍: spring Cloud provides tools for developers to quickly build some of the common patte ...

  10. bzoj4176

    莫比乌斯反演 根据约数和个数公式 $ans = \sum_{i=1}^{n}\sum_{j=1}^{n}\sum_{x|i}\sum_{y|j}{[gcd(i, j)==1]}$ 交换枚举顺序 $an ...