Realize today's news website based on native JS

Based on the original js Realize today's news website

One 、 Today's news website design report

1.1 1 Design thinking

Most of the website design is based on native js Realization . The basic idea is to first include the basic page architecture header, The navigation bar is written . Then according to the background PHP Request interface request return JSON After formatting data , Sort and render the obtained data structurally . According to the data of each news obtained, render different page styles and add them to the container . Support data refresh , Collect news , Switch the news type , Basic functions such as reading news details .

1.2 2 Application of technology

Engineering utilization of the whole project webpack package . The main technologies used are basic programming languages HTML,scss,JavaScript Most of them are es6 Code for ,PHP. Other technology stacks mainly include tpl Template variable , Front end cache pool and localStorage Storage , nginx Reverse proxy implementation across domains , encapsulation AJAX Data request , Lazy loading of pictures , And the last project online domain name access .

1.3 3 Column design

The preparation part

Webpack part

First establish the overall project architecture directory . Mainly webpack, Because the focus of this course is not here , So there is no need to repeat , The more important dependency is babel escape es6+ To es5,sass-loader Handle scss file ,ejs-loader Processing template files ,autoprefixer Configuration compatibility , And most importantly webpack Three piece set .Npm install After the creation, it is the most troublesome webpack.config.js The configuration file , The main thing to configure is the basic entry file , The output file ,module Module settings ,plugin Plug in configuration, etc , as well as server Server configuration .

CSS part

Including the basic iconfont Icon Font , Style clear reset Of CSS etc. .

The resources section

Including the basic loading diagram , Pictures of various styles .

Js part

Because it is suitable for mobile terminals , Solve the double click of mobile terminal click Determine whether it is caused by clicking or zooming 300 Millisecond delay , Here we directly quote others' encapsulated fastclick File can . Finally, the mobile terminal adaptation settings rem.

Main structure of the page

Head header

The navigation bar

News container

1.4 4 Process design

1.5 5 Module function design

Basic page structure

You need to render the home page first , Details page , Favorite pages are the three most basic pages . Because the first part of the page is the same , Write a template for reuse directly , As shown in the figure below . All parts that need to be replaced are mustache Grammar control , Including the direction of hyperlinks , Whether the icons on the left and right sides of the head are displayed .

The style is easy , Do not go into , Basically, it is the use of elastic boxes .

Each basic page corresponds to js In the entry file , In page initialization init After entering render In the function

after , Configure the corresponding configuration information according to different pages （ For example, there is no icon in the upper left corner of the home page , There should be an icon to return to the home page in the upper left corner of the favorite page ）. Then we pass this configuration information into tpl in （header Module in advance import Import ）, The key codes are as follows .

Header Corresponding js Export module

Tplreplace That is to realize the change { {}} The value in , We encapsulate it into a tool library utils.js Next . It mainly uses the matching idea of regular expressions . It's important to note that the parameters args[1] That's what we need to replace , Subscript 0 The corresponding string is the string that the regular expression matches , What we need to replace is （） The value of the inside .

Add configuration information

Render Function rendering

Add to the corresponding page

In this way, we can realize dynamic addition , The modular idea is convenient for later maintenance .

The effect is as follows .

Navigation bar section

Its tpl The template is simple , It is mainly the value of the parameter that needs to be replaced .

CSS Part of the key is the control of the scroll bar

Mainly js part

The first is the length of the scroll bar , Here we need to write the classification format of the data in advance , The classification involved in the format needs to be determined according to the requested interface , Here you can write down to an object .

The rendering result of the navigation bar is determined according to the key value pair information and length of this object , It's mostly used here itemList To temporarily store , Iterate over this object to iterate over storage .

Finally, this itemList The information is as follows

Based on this information, we can render header The same principle of continues to be added to HTML in .

The effect is as follows .

Data request section

This is the core and time-consuming part of the whole design , It's not as simple as you think .

First of all, you need to write PHP Data request part of , The core parts are as follows .

Because the demonstration effect is not good , Here is a small demo The test request

The front-end code for testing is relatively simple , It is mainly used directly jQuery Packaged AJAX Just ask for a test , The core code is as follows .

Click the button to use PHP Request data from the interface and return .

But in the actual project ,jQuery I don't know why its performance is very poor . Previously encapsulated here AJAX On data post request .

AJAX Configuration part code

Respond to change requests

The same thing , In this way, the data request can be realized , But there are cross domain requests , Make my head big . Because this interface only supports JSON Formatted data , Originally wanted to use JSONP Cross domain request but failed , Finally used nginx Reverse proxy the request URL of the interface . I finished the operation on my Tencent cloud server , Add the response header in the configuration file to support cross domain . This is equivalent to making a transfer on your own server , Cross domain requests are implemented .

The response header is added as follows .

Data normalization

Because the format of the returned data may not be what we want , Maybe this is not what we want , As shown below .

After the data is returned , We can set the format directly , as follows .

SetpageData Function as follows , Because of this interface , Each return is of the same type 30 Group data , We need to page it , Convenient for subsequent refresh .Count The initial value of 10, Meaning for 30 Group data , Divided into 3 Group , Each group 10 News . Every time 10 One page of news , Only one page is rendered at a time .